@rpg-engine/long-bow 0.8.69 → 0.8.71

package/dist/long-bow.esm.js

@@ -57512,7 +57512,7 @@ var CartView = function CartView(_ref2) {
   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) {
-    var _cartItem$metadata;
+    var _cartItem$metadata, _cartItem$metadata2;
     console.log('Item metadataType: , texturePath:', cartItem.item.metadataType, cartItem.item.texturePath);
     var getSpriteKey = function getSpriteKey(textureKey) {
       return textureKey + '/down/standing/0.png';
@@ -57527,7 +57527,7 @@ var CartView = function CartView(_ref2) {
       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, {
+    })), React.createElement(ItemDetails, null, React.createElement(ItemName, null, cartItem.item.name), ((_cartItem$metadata2 = cartItem.metadata) == null ? void 0 : _cartItem$metadata2.inputValue) && React.createElement(CartMeta, null, cartItem.metadata.inputValue), 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, {
@@ -57617,6 +57617,10 @@ var MetadataValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__MetadataValue",
   componentId: "sc-ydtyl1-17"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+var CartMeta = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CartView__CartMeta",
+  componentId: "sc-ydtyl1-18"
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;opacity:0.8;margin-top:0.25rem;"]);
 
 var useStoreMetadata = function useStoreMetadata() {
   var _useState = useState(false),
@@ -57962,12 +57966,9 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     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];
+  var _useState = useState(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[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
@@ -57977,24 +57978,6 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   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;
@@ -58008,26 +57991,21 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   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
+    // Always use a quantity of 1
     if (availableCharacters.length > 0 && currentCharacter) {
-      onAddToCart(item, quantity, {
+      onAddToCart(item, 1, {
         selectedSkinName: currentCharacter.name,
         selectedSkinTextureKey: currentCharacter.textureKey
       });
     } else {
-      onAddToCart(item, quantity);
+      onAddToCart(item, 1);
     }
-    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, {
+  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React.createElement(SpriteFromAtlas, {
     atlasJSON: entityAtlasJSON,
     atlasIMG: entityAtlasIMG,
     spriteKey: getSpriteKey(currentCharacter.textureKey),
@@ -58035,11 +58013,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }))), React.createElement(NavArrow, {
-    direction: "right",
-    onPointerDown: handleNextSkin,
-    size: 24
-  })) : React.createElement(SpriteFromAtlas, {
+  }) : React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58047,23 +58021,15 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     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, {
+  })), React.createElement(ItemDetails$1, null, React.createElement(Header$8, null, React.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
     direction: "left",
-    onPointerDown: decrementQuantity,
+    onPointerDown: handlePreviousSkin,
     size: 24
-  }), React.createElement(QuantityInput, {
-    type: "number",
-    value: quantity,
-    onChange: handleQuantityChange,
-    onBlur: handleBlur,
-    min: 1,
-    max: 99,
-    className: "rpgui-input"
-  }), React.createElement(SelectArrow, {
+  }), React.createElement(SelectedSkin, null, currentCharacter.name), React.createElement(SkinNavArrow, {
     direction: "right",
-    onPointerDown: incrementQuantity,
+    onPointerDown: handleNextSkin,
     size: 24
-  })), React.createElement(CTAButton, {
+  })), React.createElement(ItemPrice, null, "$", item.price)), React.createElement(Controls, null, React.createElement(CTAButton, {
     icon: React.createElement(FaCartPlus, null),
     label: "Add",
     onClick: handleAddToCart,
@@ -58077,47 +58043,40 @@ var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
 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;"]);
+})(["width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px;"]);
 var ItemDetails$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemDetails",
-  componentId: "sc-81xqsx-5"
+  componentId: "sc-81xqsx-2"
 })(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
 var ItemName$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemName",
-  componentId: "sc-81xqsx-6"
+  componentId: "sc-81xqsx-3"
 })(["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"
+  componentId: "sc-81xqsx-4"
 })(["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"
+  componentId: "sc-81xqsx-5"
 })(["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"
+  componentId: "sc-81xqsx-6"
 })(["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;}"]);
+// Styled arrow override for inline nav arrows
+var SkinNavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
+  displayName: "StoreCharacterSkinRow__SkinNavArrow",
+  componentId: "sc-81xqsx-7"
+})(["position:static;"]);
+var Header$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__Header",
+  componentId: "sc-81xqsx-8"
+})(["display:flex;align-items:center;gap:0.5rem;"]);
+var SelectedSkinNav = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreCharacterSkinRow__SelectedSkinNav",
+  componentId: "sc-81xqsx-9"
+})(["display:flex;align-items:center;gap:0.5rem;"]);
 
 var StoreItemRow = function StoreItemRow(_ref) {
   var _item$requiredAccount;
@@ -58125,10 +58084,15 @@ var StoreItemRow = function StoreItemRow(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType;
+    userAccountType = _ref.userAccountType,
+    _ref$showTextInput = _ref.showTextInput,
+    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput;
   var _useState = useState(1),
     quantity = _useState[0],
     setQuantity = _useState[1];
+  var _useState2 = useState(''),
+    textInputValue = _useState2[0],
+    setTextInputValue = _useState2[1];
   var handleQuantityChange = function handleQuantityChange(e) {
     var value = parseInt(e.target.value) || 1;
     setQuantity(Math.min(Math.max(1, value), 99));
@@ -58148,10 +58112,17 @@ var StoreItemRow = function StoreItemRow(_ref) {
     });
   };
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
-  var handleAddToCart = function handleAddToCart() {
+  var handleAddToCartInternal = function handleAddToCartInternal() {
     if (!hasRequiredAccount) return;
-    onAddToCart(item, quantity);
-    setQuantity(1); // Reset quantity after adding to cart
+    if (showTextInput) {
+      onAddToCart(item, 1, {
+        inputValue: textInputValue
+      });
+      setTextInputValue('');
+    } else {
+      onAddToCart(item, quantity);
+      setQuantity(1);
+    }
   };
   return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
@@ -58161,11 +58132,19 @@ var StoreItemRow = function StoreItemRow(_ref) {
     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, {
+  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
+    type: "text",
+    value: textInputValue,
+    placeholder: "Enter value",
+    onChange: function onChange(e) {
+      return setTextInputValue(e.target.value);
+    },
+    className: "rpgui-input"
+  }) : item.isStackable ? React.createElement(ArrowsContainer, null, React.createElement(SelectArrow, {
     direction: "left",
     onPointerDown: decrementQuantity,
     size: 24
-  }), React.createElement(QuantityInput$1, {
+  }), React.createElement(QuantityInput, {
     type: "number",
     value: quantity,
     onChange: handleQuantityChange,
@@ -58177,10 +58156,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
     direction: "right",
     onPointerDown: incrementQuantity,
     size: 24
-  })), React.createElement(CTAButton, {
+  })) : null, React.createElement(CTAButton, {
     icon: React.createElement(FaCartPlus, null),
     label: "Add",
-    onClick: handleAddToCart,
+    onClick: handleAddToCartInternal,
     disabled: !hasRequiredAccount
   })));
 };
@@ -58208,21 +58187,27 @@ 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({
+var ArrowsContainer = /*#__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({
+var QuantityInput = /*#__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 TextInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "StoreItemRow__TextInput",
+  componentId: "sc-ptotuo-8"
+})(["width:120px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;"]);
 
 var StoreItemsSection = function StoreItemsSection(_ref) {
   var items = _ref.items,
     onAddToCart = _ref.onAddToCart,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    userAccountType = _ref.userAccountType;
+    userAccountType = _ref.userAccountType,
+    _ref$textInputItemKey = _ref.textInputItemKeys,
+    textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
   var _useState = useState(''),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -58230,7 +58215,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     return item.name.toLowerCase().includes(searchQuery.toLowerCase());
   });
   var renderStoreItem = function renderStoreItem(item) {
-    // Use the specialized character skin row for items with character skin metadata
+    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return React.createElement(StoreCharacterSkinRow, {
         key: item._id,
@@ -58241,7 +58226,19 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
         userAccountType: userAccountType || UserAccountTypes.Free
       });
     }
-    // Use the standard item row for all other items
+    // Render text input row when configured for this item key
+    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+      return React.createElement(StoreItemRow, {
+        key: item._id,
+        item: item,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        onAddToCart: onAddToCart,
+        userAccountType: userAccountType || UserAccountTypes.Free,
+        showTextInput: true
+      });
+    }
+    // Fallback to standard arrow-based row
     return React.createElement(StoreItemRow, {
       key: item._id,
       item: item,
@@ -58395,7 +58392,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React.createElement(Container$M, null, React.createElement(Header$8, null, React.createElement(BackButton, {
+  return React.createElement(Container$M, null, React.createElement(Header$9, 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(),
@@ -58413,7 +58410,7 @@ var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
-var Header$8 = /*#__PURE__*/styled.div.withConfig({
+var Header$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -58466,11 +58463,25 @@ var Store = function Store(_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     error = _ref.error,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    _ref$hidePremiumTab = _ref.hidePremiumTab,
+    hidePremiumTab = _ref$hidePremiumTab === void 0 ? false : _ref$hidePremiumTab,
+    tabOrder = _ref.tabOrder,
+    defaultActiveTab = _ref.defaultActiveTab,
+    _ref$textInputItemKey = _ref.textInputItemKeys,
+    textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
   var _useState = useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
-  var _useState2 = useState('premium'),
+  var _useState2 = useState(function () {
+      var initialTabs = (tabOrder != null ? tabOrder : ['premium', 'packs', 'items']).filter(function (id) {
+        return !(hidePremiumTab && id === 'premium');
+      });
+      if (defaultActiveTab && initialTabs.includes(defaultActiveTab)) {
+        return defaultActiveTab;
+      }
+      return hidePremiumTab ? 'items' : 'premium';
+    }),
     activeTab = _useState2[0],
     setActiveTab = _useState2[1];
   var _useStoreCart = useStoreCart(),
@@ -58557,37 +58568,50 @@ var Store = function Store(_ref) {
   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
-    })
-  }];
+  // Build tabs dynamically based on props
+  var tabIds = tabOrder != null ? tabOrder : ['premium', 'packs', 'items'];
+  var availableTabIds = tabIds.filter(function (id) {
+    return !(hidePremiumTab && id === 'premium');
+  });
+  var tabsMap = {
+    premium: {
+      id: 'premium',
+      title: 'Premium',
+      content: React.createElement(StorePacksSection, {
+        packs: packs.filter(function (pack) {
+          return pack.priceUSD >= 9.99;
+        }),
+        onAddToCart: handleAddPackToCart,
+        onSelectPack: setSelectedPack
+      })
+    },
+    packs: {
+      id: 'packs',
+      title: 'Packs',
+      content: React.createElement(StorePacksSection, {
+        packs: packs.filter(function (pack) {
+          return pack.priceUSD < 9.99;
+        }),
+        onAddToCart: handleAddPackToCart,
+        onSelectPack: setSelectedPack
+      })
+    },
+    items: {
+      id: 'items',
+      title: 'Items',
+      content: React.createElement(StoreItemsSection, {
+        items: filteredItems.items,
+        onAddToCart: handleAddToCart,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        userAccountType: userAccountType,
+        textInputItemKeys: textInputItemKeys
+      })
+    }
+  };
+  var tabs = availableTabIds.map(function (id) {
+    return tabsMap[id];
+  });
   return React.createElement(DraggableContainer, {
     title: "Store",
     onCloseButton: onClose,
@@ -58655,7 +58679,9 @@ var Store = function Store(_ref) {
     borderColor: "#f59e0b",
     hoverColor: "#fef3c7",
     activeTab: activeTab,
-    onTabChange: setActiveTab
+    onTabChange: function onTabChange(tabId) {
+      return setActiveTab(tabId);
+    }
   })), 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) + ")",
@@ -58864,7 +58890,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React.createElement(ItemWrapper$2, null, React.createElement(ItemIconContainer$4, null, React.createElement(SpriteContainer$6, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemWrapper$2, null, React.createElement(ItemIconContainer$4, null, React.createElement(SpriteContainer$5, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -58898,7 +58924,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: function onPointerDown() {
       return onLeftClick();
     }
-  }), React.createElement(QuantityInput$2, {
+  }), React.createElement(QuantityInput$1, {
     type: "text",
     value: inputQty,
     onChange: handleQuantityChange,
@@ -58936,7 +58962,7 @@ 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$6 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
   componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0;"]);
@@ -58948,7 +58974,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$2 = /*#__PURE__*/styled.input.withConfig({
+var QuantityInput$1 = /*#__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);