@rpg-engine/long-bow 0.8.230 → 0.8.232

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useMemo, me
 import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, DC_TO_GOLD_SWAP_RATE, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, MarketplaceAcceptedCurrency, formatDCAmount, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$2, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, PaymentCurrency, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, DC_TO_GOLD_SWAP_RATE, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, MarketplaceAcceptedCurrency, formatDCAmount, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$2, QuestType, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, PaymentCurrency, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
 export { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
@@ -3732,26 +3732,35 @@ var ItemTooltip = function ItemTooltip(_ref) {
     atlasJSON = _ref.atlasJSON,
     equipmentSet = _ref.equipmentSet;
   var ref = useRef(null);
+  var rafId = useRef(null);
   useEffect(function () {
     var current = ref.current;
     if (current) {
       var handleMouseMove = function handleMouseMove(event) {
+        if (rafId.current !== null) return;
         var clientX = event.clientX,
           clientY = event.clientY;
-        // Adjust the position of the tooltip based on the mouse position
-        var rect = current.getBoundingClientRect();
-        var tooltipWidth = rect.width;
-        var tooltipHeight = rect.height;
-        var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
-        var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
-        var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
-        var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
-        current.style.transform = "translate(" + x + "px, " + y + "px)";
-        current.style.opacity = '1';
+        rafId.current = requestAnimationFrame(function () {
+          rafId.current = null;
+          // Adjust the position of the tooltip based on the mouse position
+          var rect = current.getBoundingClientRect();
+          var tooltipWidth = rect.width;
+          var tooltipHeight = rect.height;
+          var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
+          var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
+          var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
+          var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
+          current.style.transform = "translate(" + x + "px, " + y + "px)";
+          current.style.opacity = '1';
+        });
       };
       window.addEventListener('mousemove', handleMouseMove);
       return function () {
         window.removeEventListener('mousemove', handleMouseMove);
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
       };
     }
     return;
@@ -5357,6 +5366,7 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
   var tooltipRef = useRef(null);
   var triggerRef = useRef(null);
   var timeoutRef = useRef();
+  var rafId = useRef(null);
   var calculatePosition = function calculatePosition() {
     if (!triggerRef.current || !tooltipRef.current) return;
     var triggerRect = triggerRef.current.getBoundingClientRect();
@@ -5408,15 +5418,21 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
   };
   useEffect(function () {
     var handleMouseMove = function handleMouseMove(event) {
-      if (visible && tooltipRef.current && triggerRef.current) {
-        var tooltipRect = tooltipRef.current.getBoundingClientRect();
-        var triggerRect = triggerRef.current.getBoundingClientRect();
-        var isOutsideTooltip = event.clientX < tooltipRect.left || event.clientX > tooltipRect.right || event.clientY < tooltipRect.top || event.clientY > tooltipRect.bottom;
-        var isOutsideTrigger = event.clientX < triggerRect.left || event.clientX > triggerRect.right || event.clientY < triggerRect.top || event.clientY > triggerRect.bottom;
-        if (isOutsideTooltip && isOutsideTrigger) {
-          hideTooltip();
+      if (rafId.current !== null) return;
+      var clientX = event.clientX,
+        clientY = event.clientY;
+      rafId.current = requestAnimationFrame(function () {
+        rafId.current = null;
+        if (visible && tooltipRef.current && triggerRef.current) {
+          var tooltipRect = tooltipRef.current.getBoundingClientRect();
+          var triggerRect = triggerRef.current.getBoundingClientRect();
+          var isOutsideTooltip = clientX < tooltipRect.left || clientX > tooltipRect.right || clientY < tooltipRect.top || clientY > tooltipRect.bottom;
+          var isOutsideTrigger = clientX < triggerRect.left || clientX > triggerRect.right || clientY < triggerRect.top || clientY > triggerRect.bottom;
+          if (isOutsideTooltip && isOutsideTrigger) {
+            hideTooltip();
+          }
         }
-      }
+      });
     };
     var handleScroll = function handleScroll() {
       if (visible) {
@@ -5435,6 +5451,10 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
       document.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleResize);
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
       clearTimeout(timeoutRef.current);
     };
   }, [visible]);
@@ -15619,21 +15639,239 @@ var Container$E = /*#__PURE__*/styled.div.withConfig({
 
 var img$7 = 'data:image/png;base64,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';
 
+var QuestObjectivesSection = function QuestObjectivesSection(_ref) {
+  var _ref$objectives = _ref.objectives,
+    objectives = _ref$objectives === void 0 ? [] : _ref$objectives,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG;
+  if (!objectives.length) {
+    return null;
+  }
+  return React.createElement(Section$4, null, React.createElement(SectionTitle$4, null, "Objectives"), objectives.map(function (objective, index) {
+    if (objective.type === QuestType.Kill) {
+      var progress = (objective.killCount || 0) + "/" + objective.killCountTarget;
+      var fill = Math.min((objective.killCount || 0) / Math.max(objective.killCountTarget || 1, 1), 1) * 100;
+      return React.createElement(ObjectiveBlock, {
+        key: objective.id || index
+      }, (objective.creatures || objective.creatureKeys || []).map(function (creature) {
+        var data = typeof creature === 'string' ? {
+          key: creature,
+          name: creature,
+          texturePath: ''
+        } : creature;
+        return React.createElement(ObjectiveRow, {
+          key: data.key
+        }, entitiesAtlasJSON && entitiesAtlasIMG && data.texturePath && React.createElement(SpriteFromAtlas, {
+          atlasJSON: entitiesAtlasJSON,
+          atlasIMG: entitiesAtlasIMG,
+          spriteKey: data.texturePath,
+          width: 32,
+          height: 32,
+          imgScale: 1,
+          centered: true
+        }), React.createElement(ObjectiveText, null, data.name || data.key), React.createElement(ProgressText$1, null, progress));
+      }), React.createElement(ProgressBar$2, null, React.createElement(ProgressFill$1, {
+        style: {
+          width: fill + "%"
+        }
+      })));
+    }
+    if (objective.type === QuestType.Interaction) {
+      return React.createElement(ObjectiveRow, {
+        key: objective.id || index
+      }, React.createElement(ObjectiveText, null, "Talk to ", objective.targetNPCkey || 'the quest contact'));
+    }
+    return null;
+  }));
+};
+var Section$4 = /*#__PURE__*/styled.section.withConfig({
+  displayName: "QuestObjectivesSection__Section",
+  componentId: "sc-yzy6q8-0"
+})(["margin:10px 18px;"]);
+var SectionTitle$4 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "QuestObjectivesSection__SectionTitle",
+  componentId: "sc-yzy6q8-1"
+})(["color:", ";font-size:0.9rem;margin:0 0 8px;"], uiColors.yellow);
+var ObjectiveBlock = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestObjectivesSection__ObjectiveBlock",
+  componentId: "sc-yzy6q8-2"
+})(["margin-bottom:8px;"]);
+var ObjectiveRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestObjectivesSection__ObjectiveRow",
+  componentId: "sc-yzy6q8-3"
+})(["color:", ";display:flex;align-items:center;gap:8px;min-height:28px;font-size:0.75rem;"], uiColors.white);
+var ObjectiveText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestObjectivesSection__ObjectiveText",
+  componentId: "sc-yzy6q8-4"
+})(["flex:1;"]);
+var ProgressText$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestObjectivesSection__ProgressText",
+  componentId: "sc-yzy6q8-5"
+})(["color:", ";"], uiColors.yellow);
+var ProgressBar$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestObjectivesSection__ProgressBar",
+  componentId: "sc-yzy6q8-6"
+})(["height:6px;background:", ";border-radius:3px;overflow:hidden;margin-top:4px;"], uiColors.gray);
+var ProgressFill$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestObjectivesSection__ProgressFill",
+  componentId: "sc-yzy6q8-7"
+})(["height:100%;background:", ";"], uiColors.lightGreen);
+
+var QuestRequirementsSection = function QuestRequirementsSection(_ref) {
+  var _ref$objectives = _ref.objectives,
+    objectives = _ref$objectives === void 0 ? [] : _ref$objectives,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG;
+  var items = objectives.filter(function (objective) {
+    return objective.type === QuestType.Interaction;
+  }).flatMap(function (objective) {
+    return objective.items || [];
+  });
+  if (!items.length) {
+    return null;
+  }
+  return React.createElement(Section$5, null, React.createElement(SectionTitle$5, null, "Requirements"), items.map(function (item) {
+    var hasQty = item.playerHasQty || 0;
+    var isMet = hasQty >= item.qty;
+    return React.createElement(RequirementRow, {
+      key: item.itemKey,
+      isMet: isMet
+    }, itemsAtlasJSON && itemsAtlasIMG && item.texturePath && React.createElement(ItemInfoWrapper, {
+      item: _extends({}, item, {
+        key: item.itemKey,
+        stackQty: item.qty
+      }),
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG
+    }, React.createElement(SpriteFromAtlas, {
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
+      spriteKey: item.texturePath,
+      width: 32,
+      height: 32,
+      imgScale: 1.5,
+      centered: true
+    })), React.createElement("span", null, hasQty, "/", item.qty, " ", item.name || item.itemKey));
+  }));
+};
+var Section$5 = /*#__PURE__*/styled.section.withConfig({
+  displayName: "QuestRequirementsSection__Section",
+  componentId: "sc-cbw9sz-0"
+})(["margin:10px 18px;"]);
+var SectionTitle$5 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "QuestRequirementsSection__SectionTitle",
+  componentId: "sc-cbw9sz-1"
+})(["color:", ";font-size:0.9rem;margin:0 0 8px;"], uiColors.yellow);
+var RequirementRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestRequirementsSection__RequirementRow",
+  componentId: "sc-cbw9sz-2"
+})(["color:", ";display:flex;align-items:center;gap:8px;min-height:34px;font-size:0.75rem;"], function (props) {
+  return props.isMet ? uiColors.lightGreen : uiColors.red;
+});
+
+var QuestRewardsSection = function QuestRewardsSection(_ref) {
+  var _ref$rewards = _ref.rewards,
+    rewards = _ref$rewards === void 0 ? [] : _ref$rewards,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    iconsAtlasJSON = _ref.iconsAtlasJSON,
+    iconsAtlasIMG = _ref.iconsAtlasIMG;
+  var items = rewards.flatMap(function (reward) {
+    return reward.items || [];
+  });
+  var spells = rewards.flatMap(function (reward) {
+    return reward.spells || [];
+  });
+  if (!items.length && !spells.length) {
+    return null;
+  }
+  return React.createElement(Section$6, null, React.createElement(SectionTitle$6, null, "Rewards"), React.createElement(RewardGrid, null, items.map(function (item) {
+    var _item$name;
+    return React.createElement(RewardItem$1, {
+      key: item.key + "-" + item.qty
+    }, itemsAtlasJSON && itemsAtlasIMG && item.texturePath ? React.createElement(ItemInfoWrapper, {
+      item: _extends({}, item, {
+        key: item.key,
+        stackQty: item.qty
+      }),
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG
+    }, React.createElement(SpriteFromAtlas, {
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
+      spriteKey: item.texturePath,
+      width: 32,
+      height: 32,
+      imgScale: 1.5,
+      centered: true
+    })) : React.createElement(FallbackIcon, null, ((_item$name = item.name) == null ? void 0 : _item$name[0]) || '?'), item.qty > 1 && React.createElement(QtyBadge, null, "x", item.qty), React.createElement(RewardName, null, item.name || item.key));
+  }), spells.map(function (spell) {
+    var _spell$name;
+    return React.createElement(RewardItem$1, {
+      key: spell.key,
+      title: spell.name || spell.key
+    }, iconsAtlasJSON && iconsAtlasIMG && spell.texturePath ? React.createElement(SpriteFromAtlas, {
+      atlasJSON: iconsAtlasJSON,
+      atlasIMG: iconsAtlasIMG,
+      spriteKey: spell.texturePath,
+      width: 32,
+      height: 32,
+      imgScale: 1.5,
+      centered: true
+    }) : React.createElement(FallbackIcon, null, ((_spell$name = spell.name) == null ? void 0 : _spell$name[0]) || '?'), React.createElement(RewardName, null, spell.name || spell.key));
+  })));
+};
+var Section$6 = /*#__PURE__*/styled.section.withConfig({
+  displayName: "QuestRewardsSection__Section",
+  componentId: "sc-1eth6wx-0"
+})(["margin:10px 18px;"]);
+var SectionTitle$6 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "QuestRewardsSection__SectionTitle",
+  componentId: "sc-1eth6wx-1"
+})(["color:", ";font-size:0.9rem;margin:0 0 8px;"], uiColors.yellow);
+var RewardGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestRewardsSection__RewardGrid",
+  componentId: "sc-1eth6wx-2"
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;"]);
+var RewardItem$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestRewardsSection__RewardItem",
+  componentId: "sc-1eth6wx-3"
+})(["position:relative;min-height:58px;color:", ";display:flex;flex-direction:column;align-items:center;gap:4px;font-size:0.65rem;"], uiColors.white);
+var FallbackIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestRewardsSection__FallbackIcon",
+  componentId: "sc-1eth6wx-4"
+})(["width:32px;height:32px;border:1px solid ", ";display:flex;align-items:center;justify-content:center;color:", ";"], uiColors.gray, uiColors.yellow);
+var QtyBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestRewardsSection__QtyBadge",
+  componentId: "sc-1eth6wx-5"
+})(["position:absolute;top:0;right:18px;background:", ";color:", ";border:1px solid ", ";padding:1px 4px;"], uiColors.darkGray, uiColors.yellow, uiColors.gray);
+var RewardName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestRewardsSection__RewardName",
+  componentId: "sc-1eth6wx-6"
+})(["text-align:center;"]);
+
 var QuestInfo = function QuestInfo(_ref) {
   var quests = _ref.quests,
     onClose = _ref.onClose,
     buttons = _ref.buttons,
     onChangeQuest = _ref.onChangeQuest,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
+    iconsAtlasJSON = _ref.iconsAtlasJSON,
+    iconsAtlasIMG = _ref.iconsAtlasIMG;
   var _useState = useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
   var questsLength = quests.length - 1;
+  var currentQuest = quests[currentIndex] || quests[0];
   useEffect(function () {
-    if (onChangeQuest) {
-      onChangeQuest(currentIndex, quests[currentIndex]._id);
+    if (onChangeQuest && currentQuest) {
+      onChangeQuest(currentIndex, currentQuest._id);
     }
-  }, [currentIndex]);
+  }, [currentIndex, currentQuest]);
   var onLeftClick = function onLeftClick() {
     if (currentIndex === 0) setCurrentIndex(questsLength);else setCurrentIndex(function (index) {
       return index - 1;
@@ -15652,50 +15890,47 @@ var QuestInfo = function QuestInfo(_ref) {
     width: "730px",
     cancelDrag: ".equipment-container-body .arrow-selector",
     scale: scale
-  }, quests.length >= 2 ? React.createElement(QuestsContainer, null, currentIndex !== 0 && React.createElement(SelectArrow, {
+  }, currentQuest && React.createElement(QuestsContainer, null, quests.length >= 2 && currentIndex !== 0 && React.createElement(SelectArrow, {
     direction: "left",
     onPointerDown: onLeftClick
-  }), currentIndex !== quests.length - 1 && React.createElement(SelectArrow, {
+  }), quests.length >= 2 && currentIndex !== quests.length - 1 && React.createElement(SelectArrow, {
     direction: "right",
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React.createElement(Title$h, null, React.createElement(Thumbnail, {
-    src: quests[currentIndex].thumbnail || img$7
-  }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
-    className: "golden"
-  }))), React.createElement(Content$3, null, React.createElement("p", null, quests[currentIndex].description)), React.createElement(QuestColumn, {
-    className: "dark-background",
-    justifyContent: "flex-end"
-  }, buttons && buttons.map(function (button, index) {
-    return React.createElement(Button, {
-      key: index,
-      onPointerDown: function onPointerDown() {
-        return button.onClick(quests[currentIndex]._id, quests[currentIndex].npcId);
-      },
-      disabled: button.disabled,
-      buttonType: ButtonTypes.RPGUIButton,
-      id: "button-" + index
-    }, button.title);
-  })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
-    className: "drag-handler"
-  }, React.createElement(Title$h, null, React.createElement(Thumbnail, {
-    src: quests[0].thumbnail || img$7
-  }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
+    src: currentQuest.thumbnail || img$7
+  }), currentQuest.title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
-  }))), React.createElement(Content$3, null, React.createElement("p", null, quests[0].description)), React.createElement(QuestColumn, {
+  }))), React.createElement(Content$3, null, React.createElement("p", null, currentQuest.description)), React.createElement(QuestObjectivesSection, {
+    objectives: currentQuest.objectives,
+    entitiesAtlasJSON: entitiesAtlasJSON,
+    entitiesAtlasIMG: entitiesAtlasIMG
+  }), React.createElement(QuestRequirementsSection, {
+    objectives: currentQuest.objectives,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG
+  }), React.createElement(QuestRewardsSection, {
+    rewards: currentQuest.rewards,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    iconsAtlasJSON: iconsAtlasJSON,
+    iconsAtlasIMG: iconsAtlasIMG
+  }), React.createElement(QuestColumn, {
     className: "dark-background",
     justifyContent: "flex-end"
   }, buttons && buttons.map(function (button, index) {
-    return React.createElement(Button, {
+    return React.createElement(ButtonWrapper$3, {
       key: index,
+      title: button.disabled ? button.disabledReason : undefined
+    }, React.createElement(Button, {
       onPointerDown: function onPointerDown() {
-        return button.onClick(quests[0]._id, quests[0].npcId);
+        return button.onClick(currentQuest._id, currentQuest.npcId);
       },
       disabled: button.disabled,
       buttonType: ButtonTypes.RPGUIButton,
       id: "button-" + index
-    }, button.title);
+    }, button.title));
   })))));
 };
 var QuestDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
@@ -15722,70 +15957,74 @@ var QuestColumn = /*#__PURE__*/styled(Column).withConfig({
   displayName: "QuestInfo__QuestColumn",
   componentId: "sc-1wccpiy-5"
 })(["padding-top:5px;margin-bottom:20px;display:flex;justify-content:space-evenly;"]);
+var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestInfo__ButtonWrapper",
+  componentId: "sc-1wccpiy-6"
+})(["display:inline-flex;"]);
 var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
-  componentId: "sc-1wccpiy-6"
+  componentId: "sc-1wccpiy-7"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
 var Title$h = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
-  componentId: "sc-1wccpiy-7"
+  componentId: "sc-1wccpiy-8"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
 var Thumbnail = /*#__PURE__*/styled.img.withConfig({
   displayName: "QuestInfo__Thumbnail",
-  componentId: "sc-1wccpiy-8"
+  componentId: "sc-1wccpiy-9"
 })(["color:white;z-index:22;width:32px * 1.5;margin-right:0.5rem;position:relative;top:-4px;"]);
 
-var QuestList = function QuestList(_ref) {
-  var quests = _ref.quests,
-    styles = _ref.styles;
-  return React.createElement(QuestListContainer, {
-    style: styles == null ? void 0 : styles.container
-  }, quests && quests.length > 0 ? quests.map(function (quest, i) {
-    var _formatQuestStatus;
-    return React.createElement(QuestCard, {
-      key: i,
-      style: styles == null ? void 0 : styles.card
-    }, React.createElement(QuestItem, null, React.createElement(Label$6, {
-      style: styles == null ? void 0 : styles.label
-    }, "Title:"), React.createElement(Value$2, {
-      style: styles == null ? void 0 : styles.value
-    }, formatQuestText(quest.title))), React.createElement(QuestItem, null, React.createElement(Label$6, {
-      style: styles == null ? void 0 : styles.label
-    }, "Status:"), React.createElement(Value$2, {
-      style: _extends({}, styles == null ? void 0 : styles.value, {
-        color: getQuestStatusColor(quest.status)
-      })
-    }, (_formatQuestStatus = formatQuestStatus(quest.status)) != null ? _formatQuestStatus : 'Unknown')), React.createElement(QuestItem, null, React.createElement(Label$6, {
-      style: styles == null ? void 0 : styles.label
-    }, "Description:"), React.createElement(Value$2, {
-      style: styles == null ? void 0 : styles.value
-    }, quest.description)));
-  }) : React.createElement(NoQuestContainer, null, React.createElement("p", null, "There are no ongoing quests")));
+var getProgressText = function getProgressText(quest) {
+  var _objective$items;
+  var objective = (quest.objectives || [])[0];
+  if (!objective) {
+    return null;
+  }
+  if (objective.type === QuestType.Kill) {
+    return (objective.killCount || 0) + "/" + objective.killCountTarget;
+  }
+  if (objective.type === QuestType.Interaction && (_objective$items = objective.items) != null && _objective$items.length) {
+    var item = objective.items[0];
+    return "Bring " + (item.playerHasQty || 0) + "/" + item.qty;
+  }
+  return objective.type === QuestType.Interaction && objective.targetNPCkey ? 'Talk' : null;
+};
+var QuestListRow = function QuestListRow(_ref) {
+  var quest = _ref.quest,
+    compact = _ref.compact,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG;
+  var rewardItems = (quest.rewards || []).flatMap(function (reward) {
+    return reward.items || [];
+  });
+  var visibleRewards = rewardItems.slice(0, 6);
+  var overflowCount = Math.max(rewardItems.length - visibleRewards.length, 0);
+  var progressText = getProgressText(quest);
+  return React.createElement(QuestCard, null, React.createElement(Header$d, null, React.createElement(Title$i, null, formatQuestText(quest.title)), React.createElement(Status, {
+    style: {
+      color: getQuestStatusColor(quest.status)
+    }
+  }, formatQuestStatus(quest.status) || 'Unknown')), !compact && React.createElement(React.Fragment, null, React.createElement(Description$5, null, quest.description), React.createElement(MetaRow$2, null, quest.status === QuestStatus.Completed ? 'Completed' : progressText), !!visibleRewards.length && React.createElement(RewardStrip, null, visibleRewards.map(function (item) {
+    var _item$name;
+    return React.createElement(RewardIcon$1, {
+      key: item.key + "-" + item.qty
+    }, itemsAtlasJSON && itemsAtlasIMG && item.texturePath ? React.createElement(ItemInfoWrapper, {
+      item: _extends({}, item, {
+        stackQty: item.qty
+      }),
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG
+    }, React.createElement(SpriteFromAtlas, {
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
+      spriteKey: item.texturePath,
+      width: 24,
+      height: 24,
+      imgScale: 1,
+      centered: true
+    })) : React.createElement(FallbackIcon$1, null, ((_item$name = item.name) == null ? void 0 : _item$name[0]) || '?'));
+  }), overflowCount > 0 && React.createElement(MoreRewards, null, "+", overflowCount, " more"))));
 };
-var QuestListContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestList__QuestListContainer",
-  componentId: "sc-1c1y8sp-0"
-})(["max-height:400px;padding:10px;border-radius:10px;font-size:0.7rem;"]);
-var QuestCard = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestList__QuestCard",
-  componentId: "sc-1c1y8sp-1"
-})(["background-color:", ";padding:15px;margin-bottom:10px;border-radius:10px;border:1px solid ", ";display:flex;flex-direction:column;"], uiColors.darkGray, uiColors.gray);
-var QuestItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestList__QuestItem",
-  componentId: "sc-1c1y8sp-2"
-})(["display:flex;margin-bottom:5px;flex-wrap:wrap;&:last-child{margin-bottom:0;}"]);
-var Label$6 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "QuestList__Label",
-  componentId: "sc-1c1y8sp-3"
-})(["font-weight:bold;color:", " !important;margin-right:10px;"], uiColors.yellow);
-var Value$2 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "QuestList__Value",
-  componentId: "sc-1c1y8sp-4"
-})(["flex-grow:1;color:", ";word-wrap:break-word;"], uiColors.white);
-var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestList__NoQuestContainer",
-  componentId: "sc-1c1y8sp-5"
-})(["text-align:center;p{margin-top:5px;color:", ";}"], uiColors.lightGray);
 var formatQuestText = function formatQuestText(text) {
   if (!text) return '';
   return text.split('-').map(function (word) {
@@ -15810,6 +16049,73 @@ var formatQuestStatus = function formatQuestStatus(status) {
     return c.toUpperCase();
   });
 };
+var QuestCard = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__QuestCard",
+  componentId: "sc-s95wf6-0"
+})(["background-color:", ";padding:12px;margin-bottom:10px;border-radius:8px;border:1px solid ", ";"], uiColors.darkGray, uiColors.gray);
+var Header$d = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__Header",
+  componentId: "sc-s95wf6-1"
+})(["display:flex;justify-content:space-between;gap:10px;"]);
+var Title$i = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestListRow__Title",
+  componentId: "sc-s95wf6-2"
+})(["color:", ";font-weight:bold;"], uiColors.yellow);
+var Status = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestListRow__Status",
+  componentId: "sc-s95wf6-3"
+})(["white-space:nowrap;"]);
+var Description$5 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "QuestListRow__Description",
+  componentId: "sc-s95wf6-4"
+})(["color:", ";margin:8px 0;"], uiColors.white);
+var MetaRow$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__MetaRow",
+  componentId: "sc-s95wf6-5"
+})(["color:", ";font-size:0.7rem;margin-bottom:6px;"], uiColors.lightGreen);
+var RewardStrip = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__RewardStrip",
+  componentId: "sc-s95wf6-6"
+})(["display:flex;align-items:center;gap:6px;"]);
+var RewardIcon$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__RewardIcon",
+  componentId: "sc-s95wf6-7"
+})(["width:24px;height:24px;"]);
+var FallbackIcon$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestListRow__FallbackIcon",
+  componentId: "sc-s95wf6-8"
+})(["width:24px;height:24px;border:1px solid ", ";color:", ";display:flex;align-items:center;justify-content:center;"], uiColors.gray, uiColors.yellow);
+var MoreRewards = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestListRow__MoreRewards",
+  componentId: "sc-s95wf6-9"
+})(["color:", ";font-size:0.65rem;"], uiColors.lightGray);
+
+var QuestList = function QuestList(_ref) {
+  var quests = _ref.quests,
+    compact = _ref.compact,
+    styles = _ref.styles,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG;
+  return React.createElement(QuestListContainer, {
+    style: styles == null ? void 0 : styles.container
+  }, quests && quests.length > 0 ? quests.map(function (quest, i) {
+    return React.createElement(QuestListRow, {
+      key: quest._id || i,
+      quest: quest,
+      compact: compact,
+      itemsAtlasJSON: itemsAtlasJSON,
+      itemsAtlasIMG: itemsAtlasIMG
+    });
+  }) : React.createElement(NoQuestContainer, null, React.createElement("p", null, "There are no ongoing quests")));
+};
+var QuestListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestList__QuestListContainer",
+  componentId: "sc-1c1y8sp-0"
+})(["max-height:400px;padding:10px;border-radius:10px;font-size:0.7rem;"]);
+var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestList__NoQuestContainer",
+  componentId: "sc-1c1y8sp-1"
+})(["text-align:center;p{margin-top:5px;color:", ";}"], uiColors.lightGray);
 
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
@@ -15862,9 +16168,9 @@ var RadioSelectCard = function RadioSelectCard(_ref) {
     onClick: onClick,
     "data-testid": testId,
     type: "button"
-  }, icon && React.createElement(IconWrap, null, icon), React.createElement(Body, null, React.createElement(Label$7, {
+  }, icon && React.createElement(IconWrap, null, icon), React.createElement(Body, null, React.createElement(Label$6, {
     "$active": active
-  }, label), description && React.createElement(Description$5, null, description)), badge && React.createElement(Badge, {
+  }, label), description && React.createElement(Description$6, null, description)), badge && React.createElement(Badge, {
     "$active": active
   }, badge));
 };
@@ -15896,14 +16202,14 @@ var Body = /*#__PURE__*/styled.div.withConfig({
   displayName: "RadioSelectCard__Body",
   componentId: "sc-12jrcz1-2"
 })(["flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:0.2rem !important;"]);
-var Label$7 = /*#__PURE__*/styled.span.withConfig({
+var Label$6 = /*#__PURE__*/styled.span.withConfig({
   displayName: "RadioSelectCard__Label",
   componentId: "sc-12jrcz1-3"
 })(["font-size:0.72rem !important;font-weight:bold !important;color:", " !important;text-transform:uppercase !important;letter-spacing:0.8px !important;line-height:1.2 !important;"], function (_ref7) {
   var $active = _ref7.$active;
   return $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.9)';
 });
-var Description$5 = /*#__PURE__*/styled.span.withConfig({
+var Description$6 = /*#__PURE__*/styled.span.withConfig({
   displayName: "RadioSelectCard__Description",
   componentId: "sc-12jrcz1-4"
 })(["font-size:0.62rem !important;color:rgba(255,255,255,0.45) !important;line-height:1.4 !important;"]);
@@ -16436,11 +16742,11 @@ var SkillInfoModal = function SkillInfoModal(_ref) {
     onPointerDown: onClose
   }), React.createElement(ModalContainer$7, null, React.createElement(ModalContent$7, {
     onPointerDown: stopPropagation
-  }, React.createElement(Header$d, null, React.createElement(Title$i, {
+  }, React.createElement(Header$e, null, React.createElement(Title$j, {
     "$color": info.color
   }, info.name), React.createElement(CloseButton$g, {
     onPointerDown: onClose
-  }, React.createElement(FaTimes, null))), React.createElement(Section$4, null, React.createElement(Label$8, null, "What it does"), React.createElement(Text$1, null, info.description)), React.createElement(Section$4, null, React.createElement(Label$8, null, "How to train"), React.createElement(Text$1, null, info.howToTrain)), info.notes && React.createElement(Section$4, null, React.createElement(Label$8, null, "Notes"), React.createElement(Text$1, null, info.notes)))));
+  }, React.createElement(FaTimes, null))), React.createElement(Section$7, null, React.createElement(Label$7, null, "What it does"), React.createElement(Text$1, null, info.description)), React.createElement(Section$7, null, React.createElement(Label$7, null, "How to train"), React.createElement(Text$1, null, info.howToTrain)), info.notes && React.createElement(Section$7, null, React.createElement(Label$7, null, "Notes"), React.createElement(Text$1, null, info.notes)))));
 };
 var Overlay$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__Overlay",
@@ -16454,11 +16760,11 @@ var ModalContent$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__ModalContent",
   componentId: "sc-pqkzdj-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;width:340px;max-width:90%;max-height:80dvh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;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$d = /*#__PURE__*/styled.div.withConfig({
+var Header$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__Header",
   componentId: "sc-pqkzdj-3"
 })(["display:flex;align-items:center;gap:8px;"]);
-var Title$i = /*#__PURE__*/styled.h3.withConfig({
+var Title$j = /*#__PURE__*/styled.h3.withConfig({
   displayName: "SkillInfoModal__Title",
   componentId: "sc-pqkzdj-4"
 })(["margin:0;flex:1;font-family:'Press Start 2P',cursive;font-size:0.65rem;color:", ";"], function (_ref2) {
@@ -16469,11 +16775,11 @@ var CloseButton$g = /*#__PURE__*/styled.button.withConfig({
   displayName: "SkillInfoModal__CloseButton",
   componentId: "sc-pqkzdj-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
-var Section$4 = /*#__PURE__*/styled.div.withConfig({
+var Section$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__Section",
   componentId: "sc-pqkzdj-6"
 })(["display:flex;flex-direction:column;gap:6px;"]);
-var Label$8 = /*#__PURE__*/styled.span.withConfig({
+var Label$7 = /*#__PURE__*/styled.span.withConfig({
   displayName: "SkillInfoModal__Label",
   componentId: "sc-pqkzdj-7"
 })(["font-size:0.5rem;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.45);"]);
@@ -16786,7 +17092,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$G, null, React.createElement(Header$e, null, React.createElement("div", null, React.createElement(Title$j, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$G, null, React.createElement(Header$f, null, React.createElement("div", null, React.createElement(Title$k, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -16810,13 +17116,13 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "label"
   }, "Required Item:"), React.createElement("div", {
     className: "value"
-  }, requiredItem))), React.createElement(Description$6, null, description));
+  }, requiredItem))), React.createElement(Description$7, null, description));
 };
 var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$j = /*#__PURE__*/styled.div.withConfig({
+var Title$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -16824,11 +17130,11 @@ var Type$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Type",
   componentId: "sc-4hbw3q-2"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
-var Description$6 = /*#__PURE__*/styled.div.withConfig({
+var Description$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$e = /*#__PURE__*/styled.div.withConfig({
+var Header$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -17055,9 +17361,9 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$k, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$l, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React.createElement(Description$7, null, description)), React.createElement(Divider$2, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+  }, "(", magicWords, ")")), React.createElement(Description$8, null, description)), React.createElement(Divider$2, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
@@ -17076,11 +17382,11 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$k = /*#__PURE__*/styled.p.withConfig({
+var Title$l = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$7 = /*#__PURE__*/styled.div.withConfig({
+var Description$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -17141,7 +17447,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$K, null, React.createElement(Title$l, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$K, null, React.createElement(Title$m, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -17174,7 +17480,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$l = /*#__PURE__*/styled.h1.withConfig({
+var Title$m = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -37594,7 +37900,7 @@ var PurchaseSuccess = function PurchaseSuccess(_ref) {
       key: i,
       "$i": i
     });
-  })), React.createElement(Header$f, null, React.createElement(TrophyArea, null, React.createElement(TrophyIcon, null, React.createElement(Sparkle, null))), React.createElement(Title$m, null, "PURCHASE COMPLETE!"), React.createElement(Subtitle$2, null, "Your items are ready")), React.createElement(ItemsList, null, items.map(function (item, i) {
+  })), React.createElement(Header$g, null, React.createElement(TrophyArea, null, React.createElement(TrophyIcon, null, React.createElement(Sparkle, null))), React.createElement(Title$n, null, "PURCHASE COMPLETE!"), React.createElement(Subtitle$2, null, "Your items are ready")), React.createElement(ItemsList, null, items.map(function (item, i) {
     var _item$metadata;
     var isCharSkin = item.metadataType === MetadataType.CharacterSkin;
     var spriteKey = isCharSkin && (_item$metadata = item.metadata) != null && _item$metadata.selectedSkinTextureKey ? item.metadata.selectedSkinTextureKey + "/down/standing/0.png" : item.texturePath;
@@ -37641,7 +37947,7 @@ var Spark = /*#__PURE__*/styled.div.withConfig({
 }, function (p) {
   return p.$i * 0.2;
 });
-var Header$f = /*#__PURE__*/styled.div.withConfig({
+var Header$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__Header",
   componentId: "sc-18z5q21-3"
 })(["display:flex;flex-direction:column;align-items:center;gap:0.5rem;"]);
@@ -37653,7 +37959,7 @@ var TrophyIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__TrophyIcon",
   componentId: "sc-18z5q21-5"
 })(["width:64px;height:64px;border-radius:50%;background:rgba(245,158,11,0.15);border:2px solid #f59e0b;display:flex;align-items:center;justify-content:center;animation:", " 2s ease-in-out infinite;svg{font-size:1.75rem;color:#f59e0b;}"], glowPulse);
-var Title$m = /*#__PURE__*/styled.h2.withConfig({
+var Title$n = /*#__PURE__*/styled.h2.withConfig({
   displayName: "PurchaseSuccess__Title",
   componentId: "sc-18z5q21-6"
 })(["font-family:'Press Start 2P',cursive;font-size:0.9rem;color:#fef08a;margin:0;text-shadow:0 0 8px rgba(245,158,11,0.6);"]);
@@ -37703,7 +38009,7 @@ var MetadataDisplay = function MetadataDisplay(_ref) {
     metadata = _ref.metadata;
   switch (type) {
     case MetadataType.CharacterSkin:
-      return React.createElement(MetadataInfo, null, React.createElement(MetadataLabel, null, React.createElement(InfoBox, null), React.createElement("span", null, "Skin:")), React.createElement(MetadataValue, null, metadata.selectedSkinName || 'Custom skin'));
+      return React.createElement(MetadataInfo, null, React.createElement(MetadataLabel, null, React.createElement(InfoBox, null), React.createElement("span", null, "Skin:")), React.createElement(MetadataValue, null, metadata.selectedSkinName || metadata.selectedSkin || 'Custom skin'));
     default:
       return null;
   }
@@ -37816,26 +38122,27 @@ var CartView = function CartView(_ref2) {
       onClose: onCloseStore != null ? onCloseStore : onClose
     });
   }
-  return React.createElement(Container$M, null, React.createElement(Header$g, null, React.createElement(Title$n, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
+  return React.createElement(Container$M, null, React.createElement(Header$h, null, React.createElement(Title$o, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
     return s + ci.quantity;
   }, 0), ")"), React.createElement(CloseButton$i, {
     onPointerDown: onClose
   }, React.createElement(Cancel, null))), React.createElement(MainContent$1, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, React.createElement(Box, null), "Your cart is empty") : React.createElement(CartItems, null, cartItems.map(function (cartItem) {
-    var _cartItem$metadata, _cartItem$metadata2, _cartItem$item$region2, _cartItem$item$region3;
+    var _cartItem$metadata$se, _cartItem$metadata, _cartItem$metadata2, _cartItem$metadata3, _cartItem$item$region2, _cartItem$item$region3;
     var getSpriteKey = function getSpriteKey(textureKey) {
       return textureKey + '/down/standing/0.png';
     };
+    var selectedSkinTextureKey = (_cartItem$metadata$se = (_cartItem$metadata = cartItem.metadata) == null ? void 0 : _cartItem$metadata.selectedSkinTextureKey) != null ? _cartItem$metadata$se : (_cartItem$metadata2 = cartItem.metadata) == null ? void 0 : _cartItem$metadata2.selectedSkin;
     return React.createElement(CartItemRow, {
       key: cartItem.item.key
     }, React.createElement(ItemIconContainer, null, React.createElement(SpriteFromAtlas, {
       atlasJSON: cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON,
       atlasIMG: cartItem.item.metadataType === MetadataType.CharacterSkin ? img$9 : atlasIMG,
-      spriteKey: cartItem.item.metadataType === MetadataType.CharacterSkin && (_cartItem$metadata = cartItem.metadata) != null && _cartItem$metadata.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath,
+      spriteKey: cartItem.item.metadataType === MetadataType.CharacterSkin && selectedSkinTextureKey ? getSpriteKey(selectedSkinTextureKey) : cartItem.item.texturePath,
       width: 24,
       height: 24,
       imgScale: 1.5,
       centered: true
-    })), React.createElement(ItemDetails$4, null, React.createElement(ItemName$6, null, cartItem.item.name), ((_cartItem$metadata2 = cartItem.metadata) == null ? void 0 : _cartItem$metadata2.inputValue) && React.createElement(CartMeta, null, cartItem.metadata.inputValue), React.createElement(ItemInfo$2, null, React.createElement("span", null, currencySymbol, formatPrice((_cartItem$item$region2 = cartItem.item.regionalPrice) != null ? _cartItem$item$region2 : cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, currencySymbol, formatPrice(((_cartItem$item$region3 = cartItem.item.regionalPrice) != null ? _cartItem$item$region3 : cartItem.item.price) * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
+    })), React.createElement(ItemDetails$4, null, React.createElement(ItemName$6, null, cartItem.item.name), ((_cartItem$metadata3 = cartItem.metadata) == null ? void 0 : _cartItem$metadata3.inputValue) && React.createElement(CartMeta, null, cartItem.metadata.inputValue), React.createElement(ItemInfo$2, null, React.createElement("span", null, currencySymbol, formatPrice((_cartItem$item$region2 = cartItem.item.regionalPrice) != null ? _cartItem$item$region2 : cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, currencySymbol, formatPrice(((_cartItem$item$region3 = cartItem.item.regionalPrice) != null ? _cartItem$item$region3 : cartItem.item.price) * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
       type: cartItem.item.metadataType,
       metadata: cartItem.metadata
     })), React.createElement(CTAButton, {
@@ -37863,11 +38170,11 @@ var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;padding:1rem;overflow:hidden;box-sizing:border-box;@media (max-width:480px){padding:0.75rem 0.5rem;}"]);
-var Header$g = /*#__PURE__*/styled.div.withConfig({
+var Header$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;flex-shrink:0;"]);
-var Title$n = /*#__PURE__*/styled.h2.withConfig({
+var Title$o = /*#__PURE__*/styled.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
@@ -38401,6 +38708,17 @@ function uuidv4() {
   });
 }
 
+var getCharacterSkinMetadata = function getCharacterSkinMetadata(selectedSkinTextureKey, availableCharacters) {
+  var _selectedSkin$name;
+  var selectedSkin = availableCharacters.find(function (character) {
+    return character.textureKey === selectedSkinTextureKey;
+  });
+  return {
+    selectedSkin: selectedSkinTextureKey,
+    selectedSkinName: (_selectedSkin$name = selectedSkin == null ? void 0 : selectedSkin.name) != null ? _selectedSkin$name : selectedSkinTextureKey,
+    selectedSkinTextureKey: selectedSkinTextureKey
+  };
+};
 var MetadataCollector = function MetadataCollector(_ref) {
   var metadataType = _ref.metadataType,
     config = _ref.config,
@@ -38441,9 +38759,7 @@ var MetadataCollector = function MetadataCollector(_ref) {
       isOpen: true,
       onClose: handleCancel,
       onConfirm: function onConfirm(selectedSkin) {
-        return handleCollect({
-          selectedSkin: selectedSkin
-        });
+        return handleCollect(getCharacterSkinMetadata(selectedSkin, config.availableCharacters || []));
       },
       availableCharacters: config.availableCharacters || [],
       atlasJSON: config.atlasJSON,
@@ -38498,7 +38814,7 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React.createElement(Header$h, null, React.createElement(Title$o, null, "How would you like to pay?"), React.createElement(CloseButton$j, {
+  }, React.createElement(Header$i, null, React.createElement(Title$p, null, "How would you like to pay?"), React.createElement(CloseButton$j, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React.createElement(Cancel, null))), React.createElement(Options$1, null, React.createElement(RadioOption$2, {
@@ -38540,11 +38856,11 @@ var ModalContent$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__ModalContent",
   componentId: "sc-1dxy6lr-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
-var Header$h = /*#__PURE__*/styled.div.withConfig({
+var Header$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$o = /*#__PURE__*/styled.h3.withConfig({
+var Title$p = /*#__PURE__*/styled.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
@@ -38910,7 +39226,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$5, null, React.createElement(Header$i, null, React.createElement(ItemName$7, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
+  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$5, null, React.createElement(Header$j, null, React.createElement(ItemName$7, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -39043,7 +39359,7 @@ var SkinNavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-10"
 })(["position:static;"]);
-var Header$i = /*#__PURE__*/styled.div.withConfig({
+var Header$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-11"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -39852,7 +40168,7 @@ var StoreRedeemSection = function StoreRedeemSection(_ref) {
       height: 32
     })), React.createElement(SuccessTitle, null, "Code Redeemed!"), dcAmount != null && React.createElement(DCAmountDisplay, null, "+", React.createElement(MMORPGNumber, {
       value: dcAmount
-    }), " DC"), React.createElement(SuccessHint, null, "Your wallet balance has been updated."), React.createElement(ButtonWrapper$3, null, React.createElement(CTAButton, {
+    }), " DC"), React.createElement(SuccessHint, null, "Your wallet balance has been updated."), React.createElement(ButtonWrapper$4, null, React.createElement(CTAButton, {
       icon: React.createElement(Receipt, null),
       label: "Redeem Another",
       onClick: handleReset
@@ -39862,13 +40178,13 @@ var StoreRedeemSection = function StoreRedeemSection(_ref) {
     return React.createElement(Container$O, null, React.createElement(ResultContainer, null, React.createElement(ErrorIcon, null, React.createElement(WarningDiamond, {
       width: 32,
       height: 32
-    })), React.createElement(ErrorTitle, null, errorMessage), React.createElement(ButtonWrapper$3, null, React.createElement(CTAButton, {
+    })), React.createElement(ErrorTitle, null, errorMessage), React.createElement(ButtonWrapper$4, null, React.createElement(CTAButton, {
       icon: React.createElement(Receipt, null),
       label: "Try Again",
       onClick: handleReset
     }))));
   }
-  return React.createElement(Container$O, null, React.createElement(Title$p, null, "Redeem a Voucher Code"), React.createElement(Description$8, null, "Enter your voucher code below to receive Definya Coins."), React.createElement(InputRow, null, React.createElement(CodeInput, {
+  return React.createElement(Container$O, null, React.createElement(Title$q, null, "Redeem a Voucher Code"), React.createElement(Description$9, null, "Enter your voucher code below to receive Definya Coins."), React.createElement(InputRow, null, React.createElement(CodeInput, {
     type: "text",
     value: code,
     onChange: function onChange(e) {
@@ -39881,7 +40197,7 @@ var StoreRedeemSection = function StoreRedeemSection(_ref) {
     disabled: status === 'loading',
     autoComplete: "off",
     spellCheck: false
-  })), React.createElement(ButtonWrapper$3, null, React.createElement(CTAButton, {
+  })), React.createElement(ButtonWrapper$4, null, React.createElement(CTAButton, {
     icon: React.createElement(Receipt, null),
     label: status === 'loading' ? 'Redeeming...' : 'Redeem Code',
     onClick: function onClick() {
@@ -39895,11 +40211,11 @@ var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreRedeemSection__Container",
   componentId: "sc-1pzosml-0"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;max-width:420px;margin:0 auto;gap:1rem;"]);
-var Title$p = /*#__PURE__*/styled.h3.withConfig({
+var Title$q = /*#__PURE__*/styled.h3.withConfig({
   displayName: "StoreRedeemSection__Title",
   componentId: "sc-1pzosml-1"
 })(["font-family:'Press Start 2P',cursive;font-size:0.85rem;color:", ";margin:0;text-align:center;"], uiColors.white);
-var Description$8 = /*#__PURE__*/styled.p.withConfig({
+var Description$9 = /*#__PURE__*/styled.p.withConfig({
   displayName: "StoreRedeemSection__Description",
   componentId: "sc-1pzosml-2"
 })(["font-family:'Press Start 2P',cursive;font-size:0.55rem;color:", ";margin:0;text-align:center;line-height:1.6;"], uiColors.lightGray);
@@ -39911,7 +40227,7 @@ var CodeInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StoreRedeemSection__CodeInput",
   componentId: "sc-1pzosml-4"
 })(["width:100%;padding:12px 14px;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:", ";background:rgba(0,0,0,0.4);border:2px solid #f59e0b;border-radius:4px;text-transform:uppercase;letter-spacing:2px;text-align:center;box-sizing:border-box;outline:none;&::placeholder{color:", ";text-transform:none;letter-spacing:0;}&:focus{border-color:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,0.3);}&:disabled{opacity:0.5;cursor:not-allowed;}"], uiColors.white, uiColors.lightGray);
-var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreRedeemSection__ButtonWrapper",
   componentId: "sc-1pzosml-5"
 })(["width:100%;margin-top:0.5rem;"]);
@@ -39958,14 +40274,14 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React.createElement(Container$P, null, React.createElement(Header$j, null, React.createElement(BackButton, {
+  return React.createElement(Container$P, null, React.createElement(Header$k, null, React.createElement(BackButton, {
     onClick: onBack
   }, React.createElement(ArrowLeft, null), React.createElement("span", null, "Back"))), React.createElement(Content$5, null, React.createElement(DetailsGrid, null, React.createElement(ItemIcon, null, React.createElement("img", {
     src: getImageSrc(),
     alt: item.name
   })), React.createElement(ItemInfo$3, null, React.createElement(ItemName$9, null, item.name), React.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? React.createElement(React.Fragment, null, ' ', "\xB7 ", React.createElement(MMORPGNumber, {
     value: item.dcPrice
-  }), " DC") : ''), React.createElement(Description$9, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
+  }), " DC") : ''), React.createElement(Description$a, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
     icon: React.createElement(ShoppingCart, null),
     label: "Add to Cart",
     onClick: function onClick() {
@@ -39978,7 +40294,7 @@ var Container$P = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
-var Header$j = /*#__PURE__*/styled.div.withConfig({
+var Header$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -40010,7 +40326,7 @@ var ItemPrice$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__ItemPrice",
   componentId: "sc-k3ho5z-8"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#fef08a;"]);
-var Description$9 = /*#__PURE__*/styled.p.withConfig({
+var Description$a = /*#__PURE__*/styled.p.withConfig({
   displayName: "StoreItemDetails__Description",
   componentId: "sc-k3ho5z-9"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.875rem;line-height:1.6;color:#ffffff;"]);
@@ -40703,7 +41019,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$R, null, React.createElement(Title$q, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$R, null, React.createElement(Title$r, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -40720,7 +41036,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     });
-  })), React.createElement(InfoSection$2, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$4, null, React.createElement(Button, {
+  })), React.createElement(InfoSection$2, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$5, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -40735,7 +41051,7 @@ var Container$R = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$q = /*#__PURE__*/styled.h1.withConfig({
+var Title$r = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -40755,7 +41071,7 @@ var AlertText = /*#__PURE__*/styled.p.withConfig({
   displayName: "TradingMenu__AlertText",
   componentId: "sc-1wjsz1l-5"
 })(["color:red !important;text-align:center;margin:0.3rem 0;font-size:0.5rem;"]);
-var ButtonWrapper$4 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;width:100%;margin-top:1rem;"]);
@@ -40923,5 +41239,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-7"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterDetailModal, CharacterListingForm, CharacterListingModal, CharacterMarketplacePanel, CharacterMarketplaceRows, CharacterSelection, CharacterSkinSelectionModal, CharacterTradePanel, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, ConfirmModal, CountdownTimer, CraftBook, DCRateStrip, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FeaturedBanner, FriendList, GemSelector, GroupedBuyOrderRow, GroupedCharacterMarketplaceRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, MyCharacterListingsPanel, NPCDialog, NPCDialogType, NPCMultiDialog, Pagination, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, PurchaseSuccess, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RadioCircle$2 as RadioCircle, RadioOption$1 as RadioOption, RadioOptionLabel, RadioOptionSub, RadioSelectCard, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, StoreBadges, StoreRedeemSection, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TrustBar, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
+export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterDetailModal, CharacterListingForm, CharacterListingModal, CharacterMarketplacePanel, CharacterMarketplaceRows, CharacterSelection, CharacterSkinSelectionModal, CharacterTradePanel, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, ConfirmModal, CountdownTimer, CraftBook, DCRateStrip, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FeaturedBanner, FriendList, GemSelector, GroupedBuyOrderRow, GroupedCharacterMarketplaceRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, MyCharacterListingsPanel, NPCDialog, NPCDialogType, NPCMultiDialog, Pagination, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, PurchaseSuccess, QuantitySelectorModal, QuestInfo, QuestList, QuestListRow, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RadioCircle$2 as RadioCircle, RadioOption$1 as RadioOption, RadioOptionLabel, RadioOptionSub, RadioSelectCard, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, StoreBadges, StoreRedeemSection, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TrustBar, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
 //# sourceMappingURL=long-bow.esm.js.map