@rpg-engine/long-bow 0.8.66 → 0.8.68

package/dist/long-bow.esm.js

@@ -2,10 +2,10 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } 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, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaShoppingCart } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -26111,6 +26111,104 @@ var Container$4 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-b34498-0"
 })(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
 
+var SkinSelectionGrid = function SkinSelectionGrid(_ref) {
+  var availableCharacters = _ref.availableCharacters,
+    _ref$initialSelectedS = _ref.initialSelectedSkin,
+    initialSelectedSkin = _ref$initialSelectedS === void 0 ? '' : _ref$initialSelectedS,
+    onChange = _ref.onChange,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
+  var _useState = useState(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  // Find the initial index based on initialSelectedSkin
+  useEffect(function () {
+    if (initialSelectedSkin && availableCharacters.length > 0) {
+      var initialIndex = availableCharacters.findIndex(function (character) {
+        return character.textureKey === initialSelectedSkin;
+      });
+      if (initialIndex !== -1) {
+        setCurrentIndex(initialIndex);
+      }
+    }
+  }, [initialSelectedSkin, availableCharacters]);
+  // Update the selected skin when currentIndex changes
+  useEffect(function () {
+    if (availableCharacters.length > 0) {
+      var selectedCharacter = availableCharacters[currentIndex];
+      onChange(selectedCharacter.textureKey);
+    }
+  }, [currentIndex, availableCharacters, onChange]);
+  var handlePrevious = function handlePrevious() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
+    });
+  };
+  var handleNext = function handleNext() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1;
+    });
+  };
+  var getSpriteKey = function getSpriteKey(textureKey) {
+    return textureKey + '/down/standing/0.png';
+  };
+  if (availableCharacters.length === 0) {
+    return React.createElement(Container$5, null, "No skins available");
+  }
+  var currentCharacter = availableCharacters[currentIndex];
+  return React.createElement(Container$5, null, React.createElement(Header, null, "Select Your Character Skin"), React.createElement(CarouselContainer, null, React.createElement(NavButtonWrapper, null, React.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: handlePrevious
+  })), React.createElement(SkinPreview, null, currentCharacter && React.createElement(React.Fragment, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+    spriteKey: getSpriteKey(currentCharacter.textureKey),
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    imgScale: 4,
+    height: 80,
+    width: 64,
+    containerStyle: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    imgStyle: {
+      position: 'relative',
+      left: 0
+    }
+  })), React.createElement(SkinName, null, currentCharacter.name))), React.createElement(NavButtonWrapper, null, React.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: handleNext
+  }))), React.createElement(CounterIndicator, null, currentIndex + 1, " / ", availableCharacters.length));
+};
+var Container$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkinSelectionGrid__Container",
+  componentId: "sc-1b8uucy-0"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;margin-top:1rem;image-rendering:pixelated;"]);
+var Header = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "SkinSelectionGrid__Header",
+  componentId: "sc-1b8uucy-1"
+})(["margin:0 0 1rem 0;color:white;text-align:center;font-size:1.1rem;"]);
+var CarouselContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkinSelectionGrid__CarouselContainer",
+  componentId: "sc-1b8uucy-2"
+})(["display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:0.5rem;position:relative;"]);
+var SkinPreview = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkinSelectionGrid__SkinPreview",
+  componentId: "sc-1b8uucy-3"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background-color:rgba(245,158,11,0.1);border:2px solid #f59e0b;border-radius:8px;width:140px;height:150px;margin:0 1.5rem;"]);
+var SkinName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkinSelectionGrid__SkinName",
+  componentId: "sc-1b8uucy-4"
+})(["color:white;font-size:1rem;margin-top:0.8rem;text-align:center;font-weight:bold;"]);
+var NavButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkinSelectionGrid__NavButtonWrapper",
+  componentId: "sc-1b8uucy-5"
+})(["width:40px;height:42px;position:relative;"]);
+var CounterIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkinSelectionGrid__CounterIndicator",
+  componentId: "sc-1b8uucy-6"
+})(["color:white;font-size:0.8rem;margin-top:0.5rem;"]);
+
 var CharacterSkinSelectionModal = function CharacterSkinSelectionModal(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -26120,48 +26218,21 @@ var CharacterSkinSelectionModal = function CharacterSkinSelectionModal(_ref) {
     atlasIMG = _ref.atlasIMG,
     _ref$initialSelectedS = _ref.initialSelectedSkin,
     initialSelectedSkin = _ref$initialSelectedS === void 0 ? '' : _ref$initialSelectedS;
-  // Convert availableCharacters to the format used by PropertySelect
-  var propertySelectValues = availableCharacters.map(function (item) {
-    return {
-      id: item.textureKey,
-      name: item.name
-    };
-  });
-  // State to store the selected skin and the sprite key
-  var _useState = useState(),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var _useState2 = useState(''),
-    selectedSpriteKey = _useState2[0],
-    setSelectedSpriteKey = _useState2[1];
-  // Update sprite when the selected value changes
-  var updateSelectedSpriteKey = function updateSelectedSpriteKey() {
-    var textureKey = selectedValue ? selectedValue.id : '';
-    var spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-    if (spriteKey === selectedSpriteKey) {
-      return;
-    }
-    setSelectedSpriteKey(spriteKey);
-  };
-  // Update sprite when selectedValue changes
-  useEffect(function () {
-    updateSelectedSpriteKey();
-  }, [selectedValue]);
-  // Initialize selectedValue
+  var _useState = useState(initialSelectedSkin),
+    selectedSkin = _useState[0],
+    setSelectedSkin = _useState[1];
+  // Initialize selected skin
   useEffect(function () {
     if (initialSelectedSkin) {
-      var initialProperty = propertySelectValues.find(function (prop) {
-        return prop.id === initialSelectedSkin;
-      });
-      setSelectedValue(initialProperty || propertySelectValues[0]);
-    } else if (propertySelectValues.length > 0) {
-      setSelectedValue(propertySelectValues[0]);
+      setSelectedSkin(initialSelectedSkin);
+    } else if (availableCharacters.length > 0) {
+      setSelectedSkin(availableCharacters[0].textureKey);
     }
   }, [initialSelectedSkin, availableCharacters]);
   // Functions to handle confirmation and cancellation
   var handleConfirm = function handleConfirm() {
-    if (selectedValue) {
-      onConfirm(selectedValue.id);
+    if (selectedSkin) {
+      onConfirm(selectedSkin);
       onClose();
     }
   };
@@ -26169,44 +26240,30 @@ var CharacterSkinSelectionModal = function CharacterSkinSelectionModal(_ref) {
     onClose();
   };
   if (!isOpen) return null;
-  return React.createElement(Container$5, null, selectedSpriteKey && atlasIMG && atlasJSON && React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
-    spriteKey: selectedSpriteKey,
-    atlasIMG: atlasIMG,
+  return React.createElement(Container$6, null, React.createElement(SkinSelectionGrid, {
+    availableCharacters: availableCharacters,
+    initialSelectedSkin: selectedSkin,
+    onChange: setSelectedSkin,
     atlasJSON: atlasJSON,
-    imgScale: 4,
-    height: 80,
-    width: 64,
-    containerStyle: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingBottom: '15px'
-    },
-    imgStyle: {
-      left: '22px'
-    }
-  })), React.createElement(PropertySelect, {
-    availableProperties: propertySelectValues,
-    onChange: function onChange(value) {
-      setSelectedValue(value);
-    }
+    atlasIMG: atlasIMG
   }), React.createElement(ButtonsContainer, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onClick: handleCancel
   }, "Cancel"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onClick: handleConfirm,
-    disabled: !selectedValue
+    disabled: !selectedSkin
   }, "Confirm")));
 };
 // Styled components
-var Container$5 = /*#__PURE__*/styled.div.withConfig({
+var Container$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterSkinSelectionModal__Container",
   componentId: "sc-qsroao-0"
-})(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
+})(["display:flex;flex-direction:column;align-items:center;width:400px;max-width:100%;image-rendering:pixelated;"]);
 var ButtonsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterSkinSelectionModal__ButtonsContainer",
   componentId: "sc-qsroao-1"
-})(["display:flex;justify-content:center;gap:0.8rem;width:100%;margin:3rem 0 0.75rem;button{min-width:95px;font-size:0.9rem;}"]);
+})(["display:flex;justify-content:center;gap:0.8rem;width:100%;margin:2rem 0 0.75rem;button{min-width:95px;font-size:0.9rem;}"]);
 
 var Chat = function Chat(_ref) {
   var chatMessages = _ref.chatMessages,
@@ -26353,13 +26410,13 @@ var RPGUIContainer = function RPGUIContainer(_ref) {
     width = _ref$width === void 0 ? '50%' : _ref$width,
     height = _ref.height,
     className = _ref.className;
-  return React.createElement(Container$6, {
+  return React.createElement(Container$7, {
     width: width,
     height: height || 'auto',
     className: "rpgui-container " + type + " " + className
   }, children);
 };
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
+var Container$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIContainer__Container",
   componentId: "sc-a7heha-0"
 })(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
@@ -26431,7 +26488,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
       }, onRenderMessageLines(emitter, createdAt, message));
     }) : React.createElement(MessageText, null, "No messages available.");
   };
-  return React.createElement(Container$7, null, React.createElement(CustomContainer, {
+  return React.createElement(Container$8, null, React.createElement(CustomContainer, {
     type: RPGUIContainerTypes.FramedGrey,
     width: width,
     height: height,
@@ -26469,7 +26526,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     id: "chat-send-button"
   }, "Send"))))));
 };
-var Container$7 = /*#__PURE__*/styled.div.withConfig({
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
@@ -27436,7 +27493,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     },
     defaultPosition: initialPosition,
     scale: scale
-  }, React.createElement(Container$8, {
+  }, React.createElement(Container$9, {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
@@ -27455,7 +27512,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     onPointerDown: onCloseButton
   }, "X"), children));
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
 })(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
@@ -27532,7 +27589,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React.createElement(Container$9, {
+  return React.createElement(Container$a, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -27560,7 +27617,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -27584,11 +27641,11 @@ var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React.createElement(Container$a, {
+  return ReactDOM.createPortal(React.createElement(Container$b, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -28308,7 +28365,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       });
     }
   };
-  return React.createElement(Container$b, {
+  return React.createElement(Container$c, {
     isDraggingItem: !!draggingState.item,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -28372,7 +28429,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     containerType: containerType
   }))));
 });
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}.quality-star{position:absolute;top:0.5rem;left:0.5rem;font-size:1.2rem;z-index:2;text-shadow:0 0 3px black;pointer-events:none;color:", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
@@ -28491,9 +28548,9 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React.createElement(Container$c, {
+  return React.createElement(Container$d, {
     item: item
-  }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
+  }, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
   }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React.createElement(LevelRequirement, null, React.createElement("div", {
     className: "title"
@@ -28505,7 +28562,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";box-shadow:", ";height:max-content;width:18rem;position:relative;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -28546,7 +28603,7 @@ var Description = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Description",
   componentId: "sc-1xm4q8k-6"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header = /*#__PURE__*/styled.div.withConfig({
+var Header$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Header",
   componentId: "sc-1xm4q8k-7"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -28654,7 +28711,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$e, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
@@ -28663,7 +28720,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -28683,7 +28740,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$e, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$f, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -28711,7 +28768,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
@@ -29463,7 +29520,7 @@ var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
   var labelLeft = _ref.labelLeft,
     labelRight = _ref.labelRight,
     checked = _ref.checked;
-  return React.createElement(Container$f, null, labelLeft && React.createElement(Label, null, labelLeft), React.createElement("div", {
+  return React.createElement(Container$g, null, labelLeft && React.createElement(Label, null, labelLeft), React.createElement("div", {
     className: "rpgui-checkbox-container"
   }, React.createElement(CheckBox, {
     className: "rpgui-checkbox",
@@ -29474,7 +29531,7 @@ var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
     isRight: true
   }, labelRight));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "ReadOnlyCheckItem__Container",
   componentId: "sc-1peplf9-0"
 })(["display:flex;align-items:center;width:100%;height:20px;"]);
@@ -29797,7 +29854,7 @@ var DailyTasks = function DailyTasks(_ref) {
     scale: scale,
     width: size.width,
     height: size.height
-  }, React.createElement(TaskTitle$1, null, "Daily Tasks"), React.createElement(Container$g, null, React.createElement(TasksList, {
+  }, React.createElement(TaskTitle$1, null, "Daily Tasks"), React.createElement(Container$h, null, React.createElement(TasksList, {
     className: "tasks-container"
   }, React.createElement(GlobalDailyProgress, {
     tasks: localTasks,
@@ -29821,7 +29878,7 @@ var TasksContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "DailyTasks__TasksContainer",
   componentId: "sc-ittn77-0"
 })(["min-width:450px;max-width:550px;margin:0 auto;.rpgui-container-title{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;}.rpgui-container{padding:0 !important;overflow:hidden !important;background-color:rgba(30,30,30,0.9) !important;}"]);
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "DailyTasks__Container",
   componentId: "sc-ittn77-1"
 })(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow-y:auto;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
@@ -30193,7 +30250,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET$1;
   var centeredY = y - OFFSET$1;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React.createElement(Container$h, null, React.createElement(SpriteContainer, {
+  return React.createElement(Container$i, null, React.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React.createElement(SpriteFromAtlas, {
@@ -30211,7 +30268,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$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -30249,7 +30306,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$i, Object.assign({
+  return React.createElement(ModalPortal, null, React.createElement(Container$j, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React.createElement("ul", {
@@ -30266,7 +30323,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -30540,7 +30597,7 @@ var SearchFriend = function SearchFriend(_ref) {
     title: "Requests (" + friendRequests.length + ")",
     content: requestsTabContent
   }];
-  return React.createElement(Container$j, null, React.createElement(InternalTabs, {
+  return React.createElement(Container$k, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000",
     inactiveColor: "#777",
@@ -30582,7 +30639,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
     }, "Reject")));
   })));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
 })(["display:flex;flex-direction:column;gap:1rem;"]);
@@ -30785,7 +30842,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$k, null, React.createElement(DynamicText, {
+  return React.createElement(Container$l, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -30803,7 +30860,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -30955,7 +31012,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$l, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$m, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -30965,7 +31022,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -31026,7 +31083,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$m, null, React.createElement(CloseIcon, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$n, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -31042,7 +31099,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31103,7 +31160,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$n, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$o, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31145,7 +31202,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31577,7 +31634,7 @@ var Pagination = function Pagination(_ref) {
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     className = _ref.className;
-  return React.createElement(Container$o, {
+  return React.createElement(Container$p, {
     className: className
   }, React.createElement(PaginationButton$1, {
     onClick: function onClick() {
@@ -31595,7 +31652,7 @@ var Pagination = function Pagination(_ref) {
     size: 12
   })));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-3k4m4u-0"
 })(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
@@ -31621,7 +31678,7 @@ var SearchBar = function SearchBar(_ref) {
     className = _ref.className,
     rightElement = _ref.rightElement;
   var hasRightElement = Boolean(rightElement);
-  return React.createElement(Container$p, {
+  return React.createElement(Container$q, {
     className: className
   }, React.createElement(Input$1, {
     type: "text",
@@ -31634,7 +31691,7 @@ var SearchBar = function SearchBar(_ref) {
     "$hasRightElement": hasRightElement
   }), React.createElement(IconContainer, null, React.createElement(SearchIcon, null), rightElement));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchBar__Container",
   componentId: "sc-13n8z02-0"
 })(["position:relative;width:100%;"]);
@@ -31742,7 +31799,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     setCurrentPage = _usePagination.setCurrentPage,
     paginatedItems = _usePagination.paginatedItems,
     totalPages = _usePagination.totalPages;
-  return React.createElement(Container$q, {
+  return React.createElement(Container$r, {
     className: className
   }, (searchOptions || filterOptions) && React.createElement(SearchHeader, {
     searchOptions: searchOptions,
@@ -31764,7 +31821,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     onPageChange: setCurrentPage
   }))));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__Container",
   componentId: "sc-lzp9hn-0"
 })(["display:flex;flex-direction:column;gap:0.5rem;min-height:400px;width:100%;"]);
@@ -31886,11 +31943,11 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$r, null, React.createElement(Overlay, {
+  return React.createElement(Container$s, null, React.createElement(Overlay, {
     onClick: onBack
   }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
     onClick: onBack
-  }, React.createElement(FaTimes, null)), React.createElement(Header$1, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(FaTimes, null)), React.createElement(Header$2, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: spriteKey,
@@ -31899,7 +31956,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     imgScale: 1
   })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
 })(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
@@ -31915,7 +31972,7 @@ var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
 })(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
-var Header$1 = /*#__PURE__*/styled.div.withConfig({
+var Header$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Header",
   componentId: "sc-1vguuz8-4"
 })(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
@@ -31941,19 +31998,19 @@ var Collapsible = function Collapsible(_ref) {
   var _useState = useState(defaultOpen),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
-  return React.createElement(Container$s, {
+  return React.createElement(Container$t, {
     className: className
-  }, React.createElement(Header$2, {
+  }, React.createElement(Header$3, {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
   }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Container",
   componentId: "sc-s4h8ey-0"
 })(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
-var Header$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Header",
   componentId: "sc-s4h8ey-1"
 })(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
@@ -32279,7 +32336,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       onClose();
     }
   };
-  return React.createElement(Container$t, null, React.createElement(FilterButton, {
+  return React.createElement(Container$u, null, React.createElement(FilterButton, {
     onClick: onToggle,
     "$hasActiveFilters": hasActiveFilters,
     ref: buttonRef
@@ -32310,7 +32367,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
     onClick: onClearAll
   }, "Clear All Filters"))));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__Container",
   componentId: "sc-1xj6ldr-0"
 })(["position:relative;margin-left:0.5rem;"]);
@@ -33404,7 +33461,7 @@ var InformationCenter = function InformationCenter(_ref) {
     minWidth: "300px",
     cancelDrag: ".PaginatedContent-content",
     onCloseButton: onClose
-  }, React.createElement(Container$u, null, React.createElement(InternalTabs, {
+  }, React.createElement(Container$v, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -33415,7 +33472,7 @@ var InformationCenter = function InformationCenter(_ref) {
     hoverColor: "#fef3c7"
   })));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
 })(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow:hidden;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
@@ -33586,7 +33643,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$v, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$w, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -33604,7 +33661,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -34148,7 +34205,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$w, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$x, null, React.createElement(Header$4, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -34164,11 +34221,11 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
-var Header$3 = /*#__PURE__*/styled.h2.withConfig({
+var Header$4 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "ItemPropertyColorSelector__Header",
   componentId: "sc-me1r4z-1"
 })(["color:white;font-size:1rem;margin:0;width:100%;text-align:center;"]);
@@ -34239,7 +34296,7 @@ var GemSelector = function GemSelector(_ref) {
     scale: scale,
     cancelDrag: ".gem-selector-container",
     onCloseButton: onClose
-  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$4, null, React.createElement(Title$5, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
+  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$5, null, React.createElement(Title$5, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
     return React.createElement(GemItem, {
       key: gem.key + "-" + index
     }, React.createElement(CheckItemWrapper$1, null, React.createElement(CheckItem, {
@@ -34278,7 +34335,7 @@ var Subtitle = /*#__PURE__*/styled.h2.withConfig({
   displayName: "GemSelector__Subtitle",
   componentId: "sc-gbt8g4-1"
 })(["font-size:0.6rem;color:", ";margin:0;"], uiColors.white);
-var Header$4 = /*#__PURE__*/styled.div.withConfig({
+var Header$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "GemSelector__Header",
   componentId: "sc-gbt8g4-2"
 })(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
@@ -34520,7 +34577,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$x, {
+  return React.createElement(Container$y, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -34537,7 +34594,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -34556,7 +34613,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$y, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$z, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -34570,7 +34627,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -35091,13 +35148,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$z, {
+  return React.createElement(Container$A, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -35750,7 +35807,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$A, {
+  return React.createElement(Container$B, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35780,7 +35837,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -36021,9 +36078,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$B, null, children);
+  return React.createElement(Container$C, null, children);
 };
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -36179,7 +36236,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
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React.createElement(Container$C, {
+  return React.createElement(Container$D, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -36188,7 +36245,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -36521,7 +36578,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$D, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$E, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React.createElement(ButtonsContainer$3, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
@@ -36539,7 +36596,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$D = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -36585,7 +36642,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$E, null, React.createElement(Header$5, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$F, null, React.createElement(Header$6, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -36611,7 +36668,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$E = /*#__PURE__*/styled.div.withConfig({
+var Container$F = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -36627,7 +36684,7 @@ var Description$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$5 = /*#__PURE__*/styled.div.withConfig({
+var Header$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -36665,7 +36722,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$F, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -36690,7 +36747,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$F = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -36731,13 +36788,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$H, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$G = /*#__PURE__*/styled.div.withConfig({
+var Container$H = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -36810,7 +36867,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$H, {
+  }, React.createElement(Container$I, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -36829,7 +36886,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$H = /*#__PURE__*/styled.button.withConfig({
+var Container$I = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -36908,7 +36965,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$I, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$J, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36944,7 +37001,7 @@ var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$I = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -37096,6 +37153,1333 @@ var ProgressIndicator = /*#__PURE__*/styled.div.withConfig({
   return isActive ? '0 0 0 1px black, 1px 1px 0 1px black, 2px 2px 0 1px black, -1px -1px 0 1px black' : '0 0 0 1px black, 1px 1px 0 1px gray, 2px 2px 0 1px gray, -1px -1px 0 1px gray';
 });
 
+var CTAButton = function CTAButton(_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? '#ffffff' : _ref$textColor,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? '#f59e0b' : _ref$iconColor,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return React.createElement(ButtonContainer$5, {
+    className: className,
+    onPointerDown: disabled ? undefined : onClick,
+    "$fullWidth": fullWidth,
+    "$disabled": disabled,
+    "$color": textColor
+  }, React.createElement(ButtonContent, null, React.createElement(IconWrapper, {
+    "$color": iconColor,
+    "$disabled": disabled
+  }, icon), label && React.createElement(ButtonLabel, {
+    "$color": textColor,
+    "$disabled": disabled
+  }, label)));
+};
+var ButtonContainer$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__ButtonContainer",
+  componentId: "sc-1azvwn5-0"
+})(["display:inline-flex;align-items:center;padding:0.75rem 1.25rem;background:rgba(0,0,0,0.3);border:2px solid #f59e0b;box-shadow:0 0 10px rgba(245,158,11,0.3);border-radius:4px;cursor:", ";transition:all 0.2s;position:relative;opacity:", ";color:", ";", " &:hover{background:", ";box-shadow:", ";transform:", ";}&:active{transform:", ";box-shadow:", ";}&:before{content:'';position:absolute;inset:-1px;border-radius:5px;padding:1px;background:linear-gradient(45deg,#f59e0b,#fbbf24,#f59e0b);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:destination-out;}"], function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+}, function (props) {
+  return props.$disabled ? '#6b7280' : props.$color;
+}, function (props) {
+  return props.$fullWidth && css(["display:flex;justify-content:center;"]);
+}, function (props) {
+  return props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)';
+}, function (props) {
+  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 15px rgba(245, 158, 11, 0.4)';
+}, function (props) {
+  return props.$disabled ? 'none' : 'translateY(-1px)';
+}, function (props) {
+  return props.$disabled ? 'none' : 'translateY(1px)';
+}, function (props) {
+  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 5px rgba(245, 158, 11, 0.2)';
+});
+var ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__ButtonContent",
+  componentId: "sc-1azvwn5-1"
+})(["display:flex;align-items:center;gap:0.75rem;"]);
+var IconWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__IconWrapper",
+  componentId: "sc-1azvwn5-2"
+})(["svg{font-size:1.25rem;color:", ";filter:drop-shadow(0 0 2px rgba(245,158,11,0.5));opacity:", ";}"], function (props) {
+  return props.$color;
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+});
+var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CTAButton__ButtonLabel",
+  componentId: "sc-1azvwn5-3"
+})(["color:", ";font-family:'Press Start 2P',cursive;font-size:0.875rem;text-shadow:0 0 4px rgba(245,158,11,0.5);opacity:", ";"], function (props) {
+  return props.$color;
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+});
+
+var MetadataDisplay = function MetadataDisplay(_ref) {
+  var _metadata$selectedSki;
+  var type = _ref.type,
+    metadata = _ref.metadata;
+  switch (type) {
+    case MetadataType.CharacterSkin:
+      return React.createElement(MetadataInfo, null, React.createElement(MetadataLabel, null, React.createElement(FaInfoCircle, null), React.createElement("span", null, "Skin:")), React.createElement(MetadataValue, null, ((_metadata$selectedSki = metadata.selectedSkin) == null ? void 0 : _metadata$selectedSki.name) || 'Custom skin'));
+    default:
+      return null;
+  }
+};
+var CartView = function CartView(_ref2) {
+  var cartItems = _ref2.cartItems,
+    onRemoveFromCart = _ref2.onRemoveFromCart,
+    onClose = _ref2.onClose,
+    onPurchase = _ref2.onPurchase,
+    atlasJSON = _ref2.atlasJSON,
+    atlasIMG = _ref2.atlasIMG;
+  var _useState = useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _useState2 = useState(null),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var total = cartItems.reduce(function (sum, cartItem) {
+    return sum + cartItem.item.price * cartItem.quantity;
+  }, 0);
+  var formatPrice = function formatPrice(price) {
+    return price.toFixed(2);
+  };
+  var handlePurchase = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var success;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            setIsLoading(true);
+            setError(null);
+            _context.next = 5;
+            return onPurchase();
+          case 5:
+            success = _context.sent;
+            if (!success) {
+              setError('Purchase failed. Please try again.');
+            }
+            _context.next = 13;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            setError('An error occurred during purchase. Please try again.');
+            console.error('Purchase error:', _context.t0);
+          case 13:
+            _context.prev = 13;
+            setIsLoading(false);
+            return _context.finish(13);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9, 13, 16]]);
+    }));
+    return function handlePurchase() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return React.createElement(Container$K, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
+    onPointerDown: onClose
+  }, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
+    return React.createElement(CartItemRow, {
+      key: cartItem.item.key
+    }, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteFromAtlas, {
+      atlasJSON: atlasJSON,
+      atlasIMG: atlasIMG,
+      spriteKey: cartItem.item.texturePath,
+      width: 32,
+      height: 32,
+      imgScale: 2,
+      centered: true
+    })), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), React.createElement(ItemInfo$1, null, React.createElement("span", null, "$", formatPrice(cartItem.item.price)), React.createElement("span", null, "\xD7"), React.createElement("span", null, cartItem.quantity), React.createElement("span", null, "="), React.createElement("span", null, "$", formatPrice(cartItem.item.price * cartItem.quantity))), cartItem.metadata && cartItem.item.metadataType && React.createElement(MetadataDisplay, {
+      type: cartItem.item.metadataType,
+      metadata: cartItem.metadata
+    })), React.createElement(CTAButton, {
+      icon: React.createElement(FaTrash, null),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemoveFromCart(cartItem.item.key);
+      }
+    }));
+  })), React.createElement(Footer$1, null, React.createElement(TotalInfo, null, React.createElement(TotalRow, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", formatPrice(total))), error && React.createElement(ErrorMessage$1, null, error)), React.createElement(CTAButton, {
+    icon: React.createElement(FaShoppingBag, null),
+    label: isLoading ? 'Processing...' : 'Complete Purchase',
+    onClick: handlePurchase,
+    fullWidth: true,
+    disabled: cartItems.length === 0 || isLoading
+  })));
+};
+var Container$K = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__Container",
+  componentId: "sc-ydtyl1-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;gap:1.5rem;padding:1.5rem;"]);
+var Header$7 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__Header",
+  componentId: "sc-ydtyl1-1"
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+var Title$e = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "CartView__Title",
+  componentId: "sc-ydtyl1-2"
+})(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
+var CloseButton$9 = /*#__PURE__*/styled.div.withConfig({
+  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;"]);
+var CartItems = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__CartItems",
+  componentId: "sc-ydtyl1-4"
+})(["display:flex;flex-direction:column;gap:1rem;overflow-y:auto;flex:1;min-height:200px;padding-right:0.5rem;&::-webkit-scrollbar{width:8px;background-color:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.2);border-radius:4px;&:hover{background-color:rgba(255,255,255,0.3);}}scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) rgba(0,0,0,0.2);"]);
+var EmptyCart = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__EmptyCart",
+  componentId: "sc-ydtyl1-5"
+})(["display:flex;align-items:center;justify-content:center;height:100%;color:#ffffff;font-family:'Press Start 2P',cursive;font-size:0.875rem;opacity:0.7;"]);
+var CartItemRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__CartItemRow",
+  componentId: "sc-ydtyl1-6"
+})(["display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(0,0,0,0.2);border-radius:4px;"]);
+var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__ItemIconContainer",
+  componentId: "sc-ydtyl1-7"
+})(["width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px;"]);
+var ItemDetails = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__ItemDetails",
+  componentId: "sc-ydtyl1-8"
+})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+var ItemName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__ItemName",
+  componentId: "sc-ydtyl1-9"
+})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+var ItemInfo$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__ItemInfo",
+  componentId: "sc-ydtyl1-10"
+})(["display:flex;align-items:center;gap:0.5rem;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+var Footer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__Footer",
+  componentId: "sc-ydtyl1-11"
+})(["display:flex;flex-direction:column;gap:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1);flex-shrink:0;"]);
+var TotalInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__TotalInfo",
+  componentId: "sc-ydtyl1-12"
+})(["display:flex;flex-direction:column;gap:0.5rem;"]);
+var TotalRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__TotalRow",
+  componentId: "sc-ydtyl1-13"
+})(["display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;span:last-child{color:#fef08a;}"]);
+var ErrorMessage$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__ErrorMessage",
+  componentId: "sc-ydtyl1-14"
+})(["color:#ef4444;font-size:0.875rem;font-family:'Press Start 2P',cursive;text-align:center;"]);
+var MetadataInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__MetadataInfo",
+  componentId: "sc-ydtyl1-15"
+})(["display:flex;align-items:center;margin-top:0.5rem;gap:0.5rem;font-size:0.75rem;color:#a3e635;background:rgba(163,230,53,0.1);padding:0.25rem 0.5rem;border-radius:4px;"]);
+var MetadataLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__MetadataLabel",
+  componentId: "sc-ydtyl1-16"
+})(["display:flex;align-items:center;gap:0.25rem;font-weight:bold;color:#d9f99d;"]);
+var MetadataValue = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__MetadataValue",
+  componentId: "sc-ydtyl1-17"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+
+var useStoreMetadata = function useStoreMetadata() {
+  var _useState = useState(false),
+    isCollectingMetadata = _useState[0],
+    setIsCollectingMetadata = _useState[1];
+  var collectMetadata = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!item.metadataType || item.metadataType === MetadataType.None)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", null);
+          case 2:
+            setIsCollectingMetadata(true);
+            _context.prev = 3;
+            _context.next = 6;
+            return new Promise(function (_resolve) {
+              // We'll store the resolver functions in a global context
+              // that will be accessible to the MetadataCollector component
+              window.__metadataResolvers = {
+                resolve: function resolve(metadata) {
+                  _resolve(metadata);
+                },
+                item: item
+              };
+            });
+          case 6:
+            return _context.abrupt("return", _context.sent);
+          case 7:
+            _context.prev = 7;
+            setIsCollectingMetadata(false);
+            // Clean up the resolvers
+            if (window.__metadataResolvers) {
+              delete window.__metadataResolvers;
+            }
+            return _context.finish(7);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3,, 7, 11]]);
+    }));
+    return function collectMetadata(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return {
+    collectMetadata: collectMetadata,
+    isCollectingMetadata: isCollectingMetadata
+  };
+};
+
+var useStoreCart = function useStoreCart() {
+  var _useState = useState([]),
+    cartItems = _useState[0],
+    setCartItems = _useState[1];
+  var _useState2 = useState(false),
+    isCartOpen = _useState2[0],
+    setIsCartOpen = _useState2[1];
+  var isMounted = useRef(true);
+  useEffect(function () {
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  var _useStoreMetadata = useStoreMetadata(),
+    collectMetadata = _useStoreMetadata.collectMetadata,
+    isCollectingMetadata = _useStoreMetadata.isCollectingMetadata;
+  var handleAddToCart = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item, quantity, preselectedMetadata) {
+      var metadata;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!preselectedMetadata) {
+              _context.next = 3;
+              break;
+            }
+            setCartItems(function (prevItems) {
+              return [].concat(prevItems, [{
+                item: item,
+                quantity: quantity,
+                metadata: preselectedMetadata
+              }]);
+            });
+            return _context.abrupt("return");
+          case 3:
+            if (!(item.metadataType && item.metadataType !== MetadataType.None)) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 6;
+            return collectMetadata(item);
+          case 6:
+            metadata = _context.sent;
+            if (metadata) {
+              _context.next = 9;
+              break;
+            }
+            return _context.abrupt("return");
+          case 9:
+            // User cancelled
+            // Add item with metadata
+            setCartItems(function (prevItems) {
+              // Create new cart item with metadata
+              return [].concat(prevItems, [{
+                item: item,
+                quantity: quantity,
+                metadata: metadata
+              }]);
+            });
+            _context.next = 13;
+            break;
+          case 12:
+            // Existing add to cart logic for items without metadata
+            setCartItems(function (prevItems) {
+              var existingItem = prevItems.find(function (cartItem) {
+                return cartItem.item.key === item.key;
+              });
+              if (existingItem) {
+                return prevItems.map(function (cartItem) {
+                  return cartItem.item.key === item.key ? _extends({}, cartItem, {
+                    quantity: Math.min(cartItem.quantity + quantity, 99)
+                  }) : cartItem;
+                });
+              }
+              return [].concat(prevItems, [{
+                item: item,
+                quantity: quantity
+              }]);
+            });
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleAddToCart(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleRemoveFromCart = function handleRemoveFromCart(itemKey) {
+    setCartItems(function (prevItems) {
+      return prevItems.filter(function (cartItem) {
+        return cartItem.item.key !== itemKey;
+      });
+    });
+  };
+  var handlePurchase = function handlePurchase(onPurchase) {
+    var purchaseUnits = cartItems.map(function (cartItem) {
+      return {
+        purchaseKey: cartItem.item.key,
+        qty: cartItem.quantity,
+        type: getPurchaseType(cartItem.item),
+        name: cartItem.item.name,
+        metadata: cartItem.metadata || cartItem.item.metadataConfig
+      };
+    });
+    var purchase = {
+      _id: uuidv4(),
+      userId: '1',
+      status: 'pending',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      purchases: purchaseUnits
+    };
+    onPurchase(purchase);
+    if (isMounted.current) {
+      setCartItems([]);
+      setIsCartOpen(false);
+    }
+  };
+  var openCart = function openCart() {
+    return setIsCartOpen(true);
+  };
+  var closeCart = function closeCart() {
+    return setIsCartOpen(false);
+  };
+  var getTotalItems = function getTotalItems() {
+    return cartItems.reduce(function (sum, item) {
+      return sum + item.quantity;
+    }, 0);
+  };
+  var getTotalPrice = function getTotalPrice() {
+    return Number(cartItems.reduce(function (sum, item) {
+      return sum + item.item.price * item.quantity;
+    }, 0).toFixed(2));
+  };
+  return {
+    cartItems: cartItems,
+    isCartOpen: isCartOpen,
+    handleAddToCart: handleAddToCart,
+    handleRemoveFromCart: handleRemoveFromCart,
+    handlePurchase: handlePurchase,
+    openCart: openCart,
+    closeCart: closeCart,
+    getTotalItems: getTotalItems,
+    getTotalPrice: getTotalPrice,
+    isCollectingMetadata: isCollectingMetadata
+  };
+};
+// Helper functions
+function getPurchaseType(item) {
+  // Check if the item comes from a pack based on naming convention or other property
+  if (item.key.startsWith('pack_')) {
+    return PurchaseType.Pack;
+  } else {
+    return PurchaseType.Item;
+  }
+}
+function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0,
+      v = c === 'x' ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+}
+
+var MetadataCollector = function MetadataCollector(_ref) {
+  var metadataType = _ref.metadataType,
+    config = _ref.config,
+    onCollect = _ref.onCollect,
+    onCancel = _ref.onCancel;
+  // Make sure we clean up if unmounted without collecting
+  useEffect(function () {
+    return function () {
+      // If we're unmounting without explicitly collecting or canceling,
+      // make sure to call onCancel to prevent any hanging promises
+      if (window.__metadataResolvers) {
+        onCancel();
+      }
+    };
+  }, [onCancel]);
+  // Use string comparison instead of direct property access
+  if (metadataType === 'CharacterSkin') {
+    return React.createElement(CharacterSkinSelectionModal, {
+      isOpen: true,
+      onClose: onCancel,
+      onConfirm: function onConfirm(selectedSkin) {
+        return onCollect({
+          selectedSkin: selectedSkin
+        });
+      },
+      availableCharacters: config.availableCharacters || [],
+      atlasJSON: config.atlasJSON,
+      atlasIMG: config.atlasIMG,
+      initialSelectedSkin: config.initialSelectedSkin
+    });
+  } else {
+    console.warn("No collector implemented for metadata type: " + metadataType);
+    // Auto-cancel for unhandled types to prevent hanging promises
+    setTimeout(onCancel, 0);
+    return null;
+  }
+};
+
+var ScrollableContent = function ScrollableContent(_ref) {
+  var items = _ref.items,
+    renderItem = _ref.renderItem,
+    _ref$emptyMessage = _ref.emptyMessage,
+    emptyMessage = _ref$emptyMessage === void 0 ? 'No items found' : _ref$emptyMessage,
+    className = _ref.className,
+    filterOptions = _ref.filterOptions,
+    searchOptions = _ref.searchOptions,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'list' : _ref$layout,
+    _ref$gridColumns = _ref.gridColumns,
+    gridColumns = _ref$gridColumns === void 0 ? 4 : _ref$gridColumns,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? '500px' : _ref$maxHeight;
+  if (items.length === 0) {
+    return React.createElement(EmptyMessage$1, null, emptyMessage);
+  }
+  return React.createElement(Container$L, {
+    className: className
+  }, (searchOptions || filterOptions) && React.createElement(HeaderContainer$3, null, React.createElement(HeaderContent$1, null, searchOptions && React.createElement(SearchContainer$3, null, React.createElement(StyledSearchBar$2, {
+    value: searchOptions.value,
+    onChange: searchOptions.onChange,
+    placeholder: searchOptions.placeholder || 'Search...'
+  })), filterOptions && React.createElement(FilterContainer$1, null, React.createElement(StyledDropdown$3, {
+    options: filterOptions.options,
+    onChange: filterOptions.onOptionChange,
+    width: "200px"
+  })))), React.createElement(Content$4, {
+    className: "ScrollableContent-content " + layout,
+    "$gridColumns": gridColumns,
+    "$maxHeight": maxHeight
+  }, items.map(function (item, index) {
+    return React.createElement("div", {
+      key: index,
+      className: "ScrollableContent-item"
+    }, renderItem(item));
+  })));
+};
+var Container$L = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__Container",
+  componentId: "sc-xhh2um-0"
+})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
+var HeaderContainer$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__HeaderContainer",
+  componentId: "sc-xhh2um-1"
+})(["flex-shrink:0;"]);
+var HeaderContent$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__HeaderContent",
+  componentId: "sc-xhh2um-2"
+})(["display:flex;justify-content:space-between;align-items:center;gap:1rem;background:rgba(0,0,0,0.2);padding:1rem;border-radius:4px;"]);
+var SearchContainer$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__SearchContainer",
+  componentId: "sc-xhh2um-3"
+})(["flex:1;"]);
+var FilterContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__FilterContainer",
+  componentId: "sc-xhh2um-4"
+})(["display:flex;justify-content:flex-end;"]);
+var StyledSearchBar$2 = /*#__PURE__*/styled(SearchBar).withConfig({
+  displayName: "ScrollableContent__StyledSearchBar",
+  componentId: "sc-xhh2um-5"
+})(["width:100%;"]);
+var StyledDropdown$3 = /*#__PURE__*/styled(Dropdown).withConfig({
+  displayName: "ScrollableContent__StyledDropdown",
+  componentId: "sc-xhh2um-6"
+})(["min-width:150px;"]);
+var Content$4 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__Content",
+  componentId: "sc-xhh2um-7"
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:1rem;max-height:", ";overflow-y:auto;overflow-x:hidden;&.grid{display:grid;grid-template-columns:repeat( ", ",minmax(0,1fr) );gap:1rem;align-items:start;.ScrollableContent-item{display:flex;align-items:flex-start;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], function (props) {
+  return props.$maxHeight;
+}, function (props) {
+  return props.$gridColumns;
+});
+var EmptyMessage$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ScrollableContent__EmptyMessage",
+  componentId: "sc-xhh2um-8"
+})(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
+
+var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
+  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType;
+  var _useState = useState(1),
+    quantity = _useState[0],
+    setQuantity = _useState[1];
+  var _useState2 = useState(0),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  // Get available characters from metadata
+  var availableCharacters = item.metadataType === MetadataType.CharacterSkin && ((_item$metadataConfig = item.metadataConfig) == null ? void 0 : _item$metadataConfig.availableCharacters) || [];
+  // Get the active character entity atlas info
+  var entityAtlasJSON = (_item$metadataConfig2 = item.metadataConfig) == null ? void 0 : _item$metadataConfig2.atlasJSON;
+  var entityAtlasIMG = (_item$metadataConfig3 = item.metadataConfig) == null ? void 0 : _item$metadataConfig3.atlasIMG;
+  // Effect to reset currentIndex when switching items
+  useEffect(function () {
+    setCurrentIndex(0);
+  }, [item._id]);
+  var handleQuantityChange = function handleQuantityChange(e) {
+    var value = parseInt(e.target.value) || 1;
+    setQuantity(Math.min(Math.max(1, value), 99));
+  };
+  var handleBlur = function handleBlur() {
+    if (quantity < 1) setQuantity(1);
+    if (quantity > 99) setQuantity(99);
+  };
+  var incrementQuantity = function incrementQuantity() {
+    setQuantity(function (prev) {
+      return Math.min(prev + 1, 99);
+    });
+  };
+  var decrementQuantity = function decrementQuantity() {
+    setQuantity(function (prev) {
+      return Math.max(1, prev - 1);
+    });
+  };
+  var handlePreviousSkin = function handlePreviousSkin() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
+    });
+  };
+  var handleNextSkin = function handleNextSkin() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1;
+    });
+  };
+  var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
+  var handleAddToCart = function handleAddToCart() {
+    if (!hasRequiredAccount) return;
+    // If we have character skins, add the selected skin to the purchase
+    if (availableCharacters.length > 0) {
+      var selectedCharacter = availableCharacters[currentIndex];
+      onAddToCart(item, quantity, {
+        selectedSkin: selectedCharacter.textureKey
+      });
+    } else {
+      onAddToCart(item, quantity);
+    }
+    setQuantity(1); // Reset quantity after adding to cart
+  };
+  var getSpriteKey = function getSpriteKey(textureKey) {
+    return textureKey + '/down/standing/0.png';
+  };
+  var currentCharacter = availableCharacters[currentIndex];
+  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$2, null, availableCharacters.length > 0 && currentCharacter && entityAtlasJSON && entityAtlasIMG ? React.createElement(CharacterSkinPreviewContainer, null, React.createElement(NavArrow, {
+    direction: "left",
+    onPointerDown: handlePreviousSkin,
+    size: 24
+  }), React.createElement(SpriteContainer$5, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+    atlasJSON: entityAtlasJSON,
+    atlasIMG: entityAtlasIMG,
+    spriteKey: getSpriteKey(currentCharacter.textureKey),
+    width: 32,
+    height: 32,
+    imgScale: 2,
+    centered: true
+  }))), React.createElement(NavArrow, {
+    direction: "right",
+    onPointerDown: handleNextSkin,
+    size: 24
+  })) : React.createElement(SpriteFromAtlas, {
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    spriteKey: item.texturePath,
+    width: 32,
+    height: 32,
+    imgScale: 2,
+    centered: true
+  })), React.createElement(ItemDetails$1, null, React.createElement(ItemName$1, null, item.name), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkin, null, "Selected: ", currentCharacter.name), React.createElement(ItemPrice, null, "$", item.price)), React.createElement(Controls, null, React.createElement(ArrowsContainer, null, React.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: decrementQuantity,
+    size: 24
+  }), React.createElement(QuantityInput, {
+    type: "number",
+    value: quantity,
+    onChange: handleQuantityChange,
+    onBlur: handleBlur,
+    min: 1,
+    max: 99,
+    className: "rpgui-input"
+  }), React.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: incrementQuantity,
+    size: 24
+  })), React.createElement(CTAButton, {
+    icon: React.createElement(FaCartPlus, null),
+    label: "Add",
+    onClick: handleAddToCart,
+    disabled: !hasRequiredAccount
+  })));
+};
+var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ItemWrapper",
+  componentId: "sc-81xqsx-0"
+})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+var ItemIconContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ItemIconContainer",
+  componentId: "sc-81xqsx-1"
+})(["min-width:140px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px;"]);
+var CharacterSkinPreviewContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__CharacterSkinPreviewContainer",
+  componentId: "sc-81xqsx-2"
+})(["position:relative;display:flex;align-items:center;width:140px;height:42px;justify-content:space-between;"]);
+var SpriteContainer$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__SpriteContainer",
+  componentId: "sc-81xqsx-3"
+})(["display:flex;align-items:center;justify-content:center;position:absolute;left:50%;transform:translateX(-50%);"]);
+var NavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
+  displayName: "StoreCharacterSkinRow__NavArrow",
+  componentId: "sc-81xqsx-4"
+})(["z-index:2;"]);
+var ItemDetails$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ItemDetails",
+  componentId: "sc-81xqsx-5"
+})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+var ItemName$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ItemName",
+  componentId: "sc-81xqsx-6"
+})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+var SelectedSkin = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__SelectedSkin",
+  componentId: "sc-81xqsx-7"
+})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#fef08a;"]);
+var ItemPrice = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ItemPrice",
+  componentId: "sc-81xqsx-8"
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+var Controls = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__Controls",
+  componentId: "sc-81xqsx-9"
+})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+var ArrowsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__ArrowsContainer",
+  componentId: "sc-81xqsx-10"
+})(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
+var QuantityInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "StoreCharacterSkinRow__QuantityInput",
+  componentId: "sc-81xqsx-11"
+})(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
+
+var StoreItemRow = function StoreItemRow(_ref) {
+  var _item$requiredAccount;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType;
+  var _useState = useState(1),
+    quantity = _useState[0],
+    setQuantity = _useState[1];
+  var handleQuantityChange = function handleQuantityChange(e) {
+    var value = parseInt(e.target.value) || 1;
+    setQuantity(Math.min(Math.max(1, value), 99));
+  };
+  var handleBlur = function handleBlur() {
+    if (quantity < 1) setQuantity(1);
+    if (quantity > 99) setQuantity(99);
+  };
+  var incrementQuantity = function incrementQuantity() {
+    setQuantity(function (prev) {
+      return Math.min(prev + 1, 99);
+    });
+  };
+  var decrementQuantity = function decrementQuantity() {
+    setQuantity(function (prev) {
+      return Math.max(1, prev - 1);
+    });
+  };
+  var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
+  var handleAddToCart = function handleAddToCart() {
+    if (!hasRequiredAccount) return;
+    onAddToCart(item, quantity);
+    setQuantity(1); // Reset quantity after adding to cart
+  };
+  return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    spriteKey: item.texturePath,
+    width: 32,
+    height: 32,
+    imgScale: 2,
+    centered: true
+  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null, React.createElement(ArrowsContainer$1, null, React.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: decrementQuantity,
+    size: 24
+  }), React.createElement(QuantityInput$1, {
+    type: "number",
+    value: quantity,
+    onChange: handleQuantityChange,
+    onBlur: handleBlur,
+    min: 1,
+    max: 99,
+    className: "rpgui-input"
+  }), React.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: incrementQuantity,
+    size: 24
+  })), React.createElement(CTAButton, {
+    icon: React.createElement(FaCartPlus, null),
+    label: "Add",
+    onClick: handleAddToCart,
+    disabled: !hasRequiredAccount
+  })));
+};
+var ItemWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemWrapper",
+  componentId: "sc-ptotuo-0"
+})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+var ItemIconContainer$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemIconContainer",
+  componentId: "sc-ptotuo-1"
+})(["width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px;"]);
+var ItemDetails$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemDetails",
+  componentId: "sc-ptotuo-2"
+})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+var ItemName$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemName",
+  componentId: "sc-ptotuo-3"
+})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+var ItemPrice$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ItemPrice",
+  componentId: "sc-ptotuo-4"
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+var Controls$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__Controls",
+  componentId: "sc-ptotuo-5"
+})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+var ArrowsContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__ArrowsContainer",
+  componentId: "sc-ptotuo-6"
+})(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
+var QuantityInput$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "StoreItemRow__QuantityInput",
+  componentId: "sc-ptotuo-7"
+})(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
+
+var StoreItemsSection = function StoreItemsSection(_ref) {
+  var items = _ref.items,
+    onAddToCart = _ref.onAddToCart,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    userAccountType = _ref.userAccountType;
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredItems = items.filter(function (item) {
+    return item.name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  var renderStoreItem = function renderStoreItem(item) {
+    // Use the specialized character skin row for items with character skin metadata
+    if (item.metadataType === MetadataType.CharacterSkin) {
+      return React.createElement(StoreCharacterSkinRow, {
+        key: item._id,
+        item: item,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        onAddToCart: onAddToCart,
+        userAccountType: userAccountType || UserAccountTypes.Free
+      });
+    }
+    // Use the standard item row for all other items
+    return React.createElement(StoreItemRow, {
+      key: item._id,
+      item: item,
+      atlasJSON: atlasJSON,
+      atlasIMG: atlasIMG,
+      onAddToCart: onAddToCart,
+      userAccountType: userAccountType || UserAccountTypes.Free
+    });
+  };
+  return React.createElement(ScrollableContent, {
+    items: filteredItems,
+    renderItem: renderStoreItem,
+    emptyMessage: "No items available.",
+    searchOptions: {
+      value: searchQuery,
+      onChange: setSearchQuery,
+      placeholder: 'Search items...'
+    },
+    layout: "list",
+    maxHeight: "400px"
+  });
+};
+
+var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    imageUrl = _ref.imageUrl,
+    onClick = _ref.onClick,
+    footer = _ref.footer,
+    className = _ref.className;
+  var getImageSrc = function getImageSrc() {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl["default"] || imageUrl.src;
+  };
+  return React.createElement(CardContainer, {
+    onClick: onClick,
+    className: className
+  }, React.createElement(LeftSection, null, imageUrl && React.createElement(CardThumbnail, null, React.createElement("img", {
+    src: getImageSrc(),
+    alt: title
+  }))), React.createElement(RightSection, null, React.createElement(CardTitle, null, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "100%"
+  }, title)), React.createElement(CardDescription, null, React.createElement(Ellipsis, {
+    maxLines: 3,
+    maxWidth: "100%"
+  }, description)), footer && React.createElement(CardFooter, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, footer)));
+};
+var CardContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartCardHorizontal__CardContainer",
+  componentId: "sc-ngkh06-0"
+})(["display:flex;background:rgba(0,0,0,0.3);border-radius:4px;border:1px solid ", ";cursor:", ";transition:transform 0.2s ease;&:hover{transform:", ";}max-width:380px;"], uiColors.darkGray, function (props) {
+  return props.onClick ? 'pointer' : 'default';
+}, function (props) {
+  return props.onClick ? 'translateY(-2px)' : 'none';
+});
+var LeftSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartCardHorizontal__LeftSection",
+  componentId: "sc-ngkh06-1"
+})(["width:120px;flex-shrink:0;"]);
+var RightSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartCardHorizontal__RightSection",
+  componentId: "sc-ngkh06-2"
+})(["flex:1;display:flex;flex-direction:column;padding:12px;min-width:0;max-width:100%;"]);
+var CardThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartCardHorizontal__CardThumbnail",
+  componentId: "sc-ngkh06-3"
+})(["width:100%;height:100%;background:rgba(0,0,0,0.2);overflow:hidden;img{width:100%;height:100%;object-fit:cover;}"]);
+var CardTitle = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "CartCardHorizontal__CardTitle",
+  componentId: "sc-ngkh06-4"
+})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;margin-bottom:8px;"], uiColors.yellow);
+var CardDescription = /*#__PURE__*/styled.p.withConfig({
+  displayName: "CartCardHorizontal__CardDescription",
+  componentId: "sc-ngkh06-5"
+})(["margin:0;font-size:0.55rem;color:", ";font-family:'Press Start 2P',cursive;line-height:1.4;margin-bottom:8px;"], uiColors.lightGray);
+var CardFooter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartCardHorizontal__CardFooter",
+  componentId: "sc-ngkh06-6"
+})(["margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);"]);
+
+var StorePacksSection = function StorePacksSection(_ref) {
+  var packs = _ref.packs,
+    onAddToCart = _ref.onAddToCart,
+    onSelectPack = _ref.onSelectPack;
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var renderPackFooter = useCallback(function (pack) {
+    return React.createElement(FooterContainer, null, React.createElement(Price, null, "$", pack.priceUSD), React.createElement(CTAButton, {
+      icon: React.createElement(FaCartPlus, null),
+      label: "Add",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onAddToCart(pack);
+      }
+    }));
+  }, [onAddToCart]);
+  var renderPack = useCallback(function (pack) {
+    return React.createElement(ShoppingCardHorizontal, {
+      key: pack.key,
+      title: pack.title,
+      description: pack.description,
+      imageUrl: pack.image,
+      footer: renderPackFooter(pack),
+      onClick: function onClick() {
+        return onSelectPack == null ? void 0 : onSelectPack(pack);
+      }
+    });
+  }, [onSelectPack, renderPackFooter]);
+  var filteredPacks = useMemo(function () {
+    return packs.filter(function (pack) {
+      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [packs, searchQuery]);
+  return React.createElement(ScrollableContent, {
+    items: filteredPacks,
+    renderItem: renderPack,
+    emptyMessage: "No packs available.",
+    searchOptions: {
+      value: searchQuery,
+      onChange: setSearchQuery,
+      placeholder: 'Search packs...'
+    },
+    layout: "grid",
+    gridColumns: 2,
+    maxHeight: "420px"
+  });
+};
+var FooterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StorePacksSection__FooterContainer",
+  componentId: "sc-ulazq3-0"
+})(["display:flex;align-items:center;justify-content:space-between;gap:8px;"]);
+var Price = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StorePacksSection__Price",
+  componentId: "sc-ulazq3-1"
+})(["font-family:'Press Start 2P',cursive;font-size:0.6rem;color:#fef08a;"]);
+
+var StoreItemDetails = function StoreItemDetails(_ref) {
+  var item = _ref.item,
+    onBack = _ref.onBack,
+    onAddToCart = _ref.onAddToCart,
+    imageUrl = _ref.imageUrl;
+  var getImageSrc = function getImageSrc() {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl["default"] || imageUrl.src;
+  };
+  return React.createElement(Container$M, null, React.createElement(Header$8, null, React.createElement(BackButton, {
+    onClick: onBack
+  }, React.createElement(FaArrowLeft, null), React.createElement("span", null, "Back"))), React.createElement(Content$5, null, React.createElement(DetailsGrid, null, React.createElement(ItemIcon, null, React.createElement("img", {
+    src: getImageSrc(),
+    alt: item.name
+  })), React.createElement(ItemInfo$2, null, React.createElement(ItemName$3, null, item.name), React.createElement(ItemPrice$2, null, "$", 'priceUSD' in item ? item.priceUSD : item.price), React.createElement(Description$6, null, item.description))), React.createElement(Actions, null, React.createElement(CTAButton, {
+    icon: React.createElement(FaCartPlus, null),
+    label: "Add to Cart",
+    onClick: function onClick() {
+      return onAddToCart(item);
+    },
+    fullWidth: true
+  }))));
+};
+var Container$M = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__Container",
+  componentId: "sc-k3ho5z-0"
+})(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
+var Header$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__Header",
+  componentId: "sc-k3ho5z-1"
+})(["display:flex;align-items:center;gap:1rem;"]);
+var BackButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StoreItemDetails__BackButton",
+  componentId: "sc-k3ho5z-2"
+})(["display:flex;align-items:center;gap:0.5rem;background:none;border:none;color:#ffffff;font-family:'Press Start 2P',cursive;font-size:0.875rem;cursor:pointer;padding:0.5rem;transition:opacity 0.2s;&:hover{opacity:0.8;}"]);
+var Content$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__Content",
+  componentId: "sc-k3ho5z-3"
+})(["flex:1;display:flex;flex-direction:column;gap:2rem;overflow-y:auto;"]);
+var DetailsGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__DetailsGrid",
+  componentId: "sc-k3ho5z-4"
+})(["display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start;@media (max-width:768px){grid-template-columns:1fr;}"]);
+var ItemIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__ItemIcon",
+  componentId: "sc-k3ho5z-5"
+})(["width:100%;aspect-ratio:1;background:rgba(0,0,0,0.2);overflow:hidden;border-radius:4px;img{width:100%;height:100%;object-fit:cover;}"]);
+var ItemInfo$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__ItemInfo",
+  componentId: "sc-k3ho5z-6"
+})(["display:flex;flex-direction:column;gap:1rem;"]);
+var ItemName$3 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "StoreItemDetails__ItemName",
+  componentId: "sc-k3ho5z-7"
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:1.25rem;color:#fef08a;"]);
+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$6 = /*#__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;"]);
+var Actions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemDetails__Actions",
+  componentId: "sc-k3ho5z-10"
+})(["margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);"]);
+
+var Store = function Store(_ref) {
+  var items = _ref.items,
+    _ref$packs = _ref.packs,
+    packs = _ref$packs === void 0 ? [] : _ref$packs,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    _onPurchase = _ref.onPurchase,
+    onShowHistory = _ref.onShowHistory,
+    userAccountType = _ref.userAccountType,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    error = _ref.error,
+    onClose = _ref.onClose;
+  var _useState = useState(null),
+    selectedPack = _useState[0],
+    setSelectedPack = _useState[1];
+  var _useState2 = useState('premium'),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useStoreCart = useStoreCart(),
+    cartItems = _useStoreCart.cartItems,
+    handleAddToCart = _useStoreCart.handleAddToCart,
+    handleRemoveFromCart = _useStoreCart.handleRemoveFromCart,
+    handleCartPurchase = _useStoreCart.handlePurchase,
+    openCart = _useStoreCart.openCart,
+    closeCart = _useStoreCart.closeCart,
+    getTotalItems = _useStoreCart.getTotalItems,
+    getTotalPrice = _useStoreCart.getTotalPrice,
+    isCartOpen = _useStoreCart.isCartOpen;
+  var _useState3 = useState(false),
+    isCollectingMetadata = _useState3[0],
+    setIsCollectingMetadata = _useState3[1];
+  var _useState4 = useState(null),
+    currentMetadataItem = _useState4[0],
+    setCurrentMetadataItem = _useState4[1];
+  var handleAddPackToCart = function handleAddPackToCart(pack) {
+    var packItem = {
+      _id: pack.key,
+      key: pack.key,
+      name: pack.title,
+      price: pack.priceUSD,
+      texturePath: pack.image["default"] || pack.image.src,
+      textureKey: pack.image["default"] || pack.image.src,
+      type: ItemType.Consumable,
+      subType: ItemSubType.Other,
+      description: pack.description || '',
+      fullDescription: pack.description || '',
+      textureAtlas: 'items',
+      weight: 0,
+      rarity: ItemRarities.Common,
+      allowedEquipSlotType: [],
+      isEquipable: false,
+      isStackable: false,
+      isTwoHanded: false,
+      hasUseWith: false,
+      maxStackSize: 1,
+      isUsable: false,
+      isStorable: true,
+      isSolid: false,
+      isItemContainer: false
+    };
+    handleAddToCart(packItem, 1);
+  };
+  var filterItems = function filterItems(itemsToFilter, type) {
+    return itemsToFilter.filter(function (item) {
+      if (type === 'premium') {
+        var _item$requiredAccount, _item$requiredAccount2;
+        return (_item$requiredAccount = (_item$requiredAccount2 = item.requiredAccountType) == null ? void 0 : _item$requiredAccount2.length) != null ? _item$requiredAccount : 0 > 0;
+      }
+      return true;
+    });
+  };
+  var filteredItems = useMemo(function () {
+    return {
+      items: filterItems(items, 'items'),
+      premium: filterItems(items, 'premium')
+    };
+  }, [items]);
+  var handleMetadataCollected = function handleMetadataCollected(metadata) {
+    if (currentMetadataItem && window.__metadataResolvers) {
+      // Resolve the promise in the useStoreMetadata hook
+      window.__metadataResolvers.resolve(metadata);
+      // Reset the metadata collection state
+      setCurrentMetadataItem(null);
+      // Removed unused setPendingMetadataQuantity call
+    }
+  };
+  var handleMetadataCancel = function handleMetadataCancel() {
+    if (window.__metadataResolvers) {
+      // Resolve with null to indicate cancellation
+      window.__metadataResolvers.resolve(null);
+    }
+    // Reset the metadata collection state
+    setCurrentMetadataItem(null);
+    // Removed unused setPendingMetadataQuantity call
+    setIsCollectingMetadata(false);
+  };
+  if (loading) {
+    return React.createElement(LoadingMessage$1, null, "Loading...");
+  }
+  if (error) {
+    return React.createElement(ErrorMessage$2, null, error);
+  }
+  var tabs = [{
+    id: 'premium',
+    title: 'Premium',
+    content: React.createElement(StorePacksSection, {
+      packs: packs.filter(function (pack) {
+        return pack.priceUSD >= 9.99;
+      }),
+      onAddToCart: handleAddPackToCart,
+      onSelectPack: setSelectedPack
+    })
+  }, {
+    id: 'packs',
+    title: 'Packs',
+    content: React.createElement(StorePacksSection, {
+      packs: packs.filter(function (pack) {
+        return pack.priceUSD < 9.99;
+      }),
+      onAddToCart: handleAddPackToCart,
+      onSelectPack: setSelectedPack
+    })
+  }, {
+    id: 'items',
+    title: 'Items',
+    content: React.createElement(StoreItemsSection, {
+      items: filteredItems.items,
+      onAddToCart: handleAddToCart,
+      atlasJSON: atlasJSON,
+      atlasIMG: atlasIMG,
+      userAccountType: userAccountType
+    })
+  }];
+  return React.createElement(DraggableContainer, {
+    title: "Store",
+    onCloseButton: onClose,
+    width: "850px",
+    minWidth: "600px",
+    height: "auto",
+    type: RPGUIContainerTypes.Framed,
+    cancelDrag: "[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
+  }, isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? React.createElement(MetadataCollector, {
+    metadataType: currentMetadataItem.metadataType,
+    config: currentMetadataItem.metadataConfig || {},
+    onCollect: handleMetadataCollected,
+    onCancel: handleMetadataCancel
+  }) : isCartOpen ? React.createElement(CartView, {
+    cartItems: cartItems,
+    onRemoveFromCart: handleRemoveFromCart,
+    onClose: closeCart,
+    onPurchase: function () {
+      var _onPurchase2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return handleCartPurchase(_onPurchase);
+            case 2:
+              return _context.abrupt("return", true);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function onPurchase() {
+        return _onPurchase2.apply(this, arguments);
+      }
+      return onPurchase;
+    }(),
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG
+  }) : selectedPack ? React.createElement(StoreItemDetails, {
+    item: _extends({}, selectedPack, {
+      name: selectedPack.title,
+      texturePath: selectedPack.image["default"] || selectedPack.image.src
+    }),
+    imageUrl: selectedPack.image,
+    onBack: function onBack() {
+      return setSelectedPack(null);
+    },
+    onAddToCart: function onAddToCart() {
+      return handleAddPackToCart(selectedPack);
+    }
+  }) : React.createElement(Container$N, null, React.createElement(TopBar$1, null, React.createElement(HistoryButton, null, onShowHistory && React.createElement(CTAButton, {
+    icon: React.createElement(FaHistory, null),
+    label: "History",
+    onClick: onShowHistory
+  })), React.createElement(CartButton, null, React.createElement(CTAButton, {
+    icon: React.createElement(FaShoppingCart, null),
+    label: getTotalItems() + " items ($" + getTotalPrice().toFixed(2) + ")",
+    onClick: openCart
+  }))), React.createElement(MainContent$1, null, React.createElement(InternalTabs, {
+    tabs: tabs,
+    activeTextColor: "#000000",
+    activeColor: "#fef08a",
+    inactiveColor: "#6b7280",
+    borderColor: "#f59e0b",
+    hoverColor: "#fef3c7",
+    activeTab: activeTab,
+    onTabChange: setActiveTab
+  })), cartItems.length > 0 && React.createElement(Footer$2, null, React.createElement(CartSummary, null, React.createElement(CartInfo, null, React.createElement("span", null, "Items in cart:"), React.createElement("span", null, getTotalItems())), React.createElement(CartInfo, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", getTotalPrice().toFixed(2)))), React.createElement(CTAButton, {
+    icon: React.createElement(FaShoppingCart, null),
+    label: "Proceed to Checkout ($" + getTotalPrice().toFixed(2) + ")",
+    onClick: openCart,
+    fullWidth: true
+  }))));
+};
+var Container$N = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__Container",
+  componentId: "sc-64dj00-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;gap:1rem;position:relative;"]);
+var TopBar$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__TopBar",
+  componentId: "sc-64dj00-1"
+})(["display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:0 1rem;flex-shrink:0;margin-top:0.5rem;"]);
+var HistoryButton = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__HistoryButton",
+  componentId: "sc-64dj00-2"
+})(["min-width:fit-content;margin-right:auto;"]);
+var CartButton = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__CartButton",
+  componentId: "sc-64dj00-3"
+})(["min-width:fit-content;"]);
+var MainContent$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__MainContent",
+  componentId: "sc-64dj00-4"
+})(["flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;.rpgui-tabs-content{flex:1;overflow-y:auto;padding-right:0.5rem;}"]);
+var Footer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__Footer",
+  componentId: "sc-64dj00-5"
+})(["display:flex;flex-direction:column;gap:1rem;padding:1rem;border-top:2px solid #f59e0b;background:rgba(0,0,0,0.2);flex-shrink:0;"]);
+var CartSummary = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__CartSummary",
+  componentId: "sc-64dj00-6"
+})(["display:flex;flex-direction:column;gap:0.5rem;"]);
+var CartInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__CartInfo",
+  componentId: "sc-64dj00-7"
+})(["display:flex;align-items:center;gap:0.75rem;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;span:last-child{color:#fef08a;}"]);
+var LoadingMessage$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__LoadingMessage",
+  componentId: "sc-64dj00-8"
+})(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
+var ErrorMessage$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__ErrorMessage",
+  componentId: "sc-64dj00-9"
+})(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React.createElement("textarea", Object.assign({}, props));
@@ -37130,7 +38514,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$9, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$a, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -37147,7 +38531,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$9 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$a = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -37256,7 +38640,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$5, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemWrapper$2, null, React.createElement(ItemIconContainer$4, null, React.createElement(SpriteContainer$6, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -37290,7 +38674,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: function onPointerDown() {
       return onLeftClick();
     }
-  }), React.createElement(QuantityInput, {
+  }), React.createElement(QuantityInput$2, {
     type: "text",
     value: inputQty,
     onChange: handleQuantityChange,
@@ -37316,7 +38700,7 @@ var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
   componentId: "sc-mja0b5-0"
 })(["margin:0 1.5rem;"]);
-var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
+var ItemWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
   componentId: "sc-mja0b5-1"
 })(["width:100%;display:flex;justify-content:space-between;margin-bottom:0.5rem;padding:0.25rem;&:hover{background-color:", ";}"], uiColors.darkGray);
@@ -37324,11 +38708,11 @@ var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
   componentId: "sc-mja0b5-2"
 })(["flex:60%;display:flex;align-items:center;"]);
-var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var ItemIconContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
   componentId: "sc-mja0b5-3"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 40px;"]);
-var SpriteContainer$5 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
   componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0;"]);
@@ -37340,7 +38724,7 @@ var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
   componentId: "sc-mja0b5-6"
 })(["display:flex;min-width:90px;width:40%;justify-content:flex-end;align-items:center;flex:30%;gap:2px;position:relative;"]);
-var QuantityInput = /*#__PURE__*/styled.input.withConfig({
+var QuantityInput$2 = /*#__PURE__*/styled.input.withConfig({
   displayName: "TradingItemRow__QuantityInput",
   componentId: "sc-mja0b5-7"
 })(["width:30px;text-align:center;background-color:", ";color:white;border:none;padding:1px;font-size:", ";position:relative;right:4px;"], uiColors.darkGray, uiFonts.size.small);
@@ -37426,7 +38810,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$O, null, React.createElement(Title$f, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -37454,11 +38838,11 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$J = /*#__PURE__*/styled.div.withConfig({
+var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$e = /*#__PURE__*/styled.h1.withConfig({
+var Title$f = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -37488,11 +38872,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$K, {
+  return React.createElement(Container$P, {
     maxLines: maxLines
   }, children);
 };
-var Container$K = /*#__PURE__*/styled.div.withConfig({
+var Container$P = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -37600,7 +38984,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$L, null, React.createElement(Stepper, {
+  return React.createElement(Container$Q, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -37617,7 +39001,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$L = /*#__PURE__*/styled.div.withConfig({
+var Container$Q = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -37638,5 +39022,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CartView, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MetadataCollector, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
 //# sourceMappingURL=long-bow.esm.js.map