@rpg-engine/long-bow 0.8.72 → 0.8.73

package/dist/hooks/useCharacterSkinNavigation.d.ts

@@ -0,0 +1,7 @@
+import { ICharacterProps } from '../components/Character/CharacterSelection';
+export declare const useCharacterSkinNavigation: (availableCharacters: ICharacterProps[], itemKey: string) => {
+    currentIndex: number;
+    currentCharacter: ICharacterProps;
+    handlePreviousSkin: () => void;
+    handleNextSkin: () => void;
+};

package/dist/hooks/usePackFiltering.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IItemPack } from '@rpg-engine/shared';
+export declare const usePackFiltering: (packs: IItemPack[]) => {
+    searchQuery: string;
+    setSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    filteredPacks: IItemPack[];
+};

package/dist/hooks/useQuantityControl.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const useQuantityControl: (initialQuantity?: number, min?: number, max?: number) => {
+    quantity: number;
+    setQuantity: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleQuantityChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleBlur: () => void;
+    incrementQuantity: () => void;
+    decrementQuantity: () => void;
+    resetQuantity: () => void;
+};

package/dist/hooks/useStoreFiltering.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IProductBlueprint, ItemType } from '@rpg-engine/shared';
+import { IOptionsProps } from '../components/Dropdown';
+export declare const useStoreFiltering: (items: IProductBlueprint[]) => {
+    searchQuery: string;
+    setSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedCategory: ItemType | "all";
+    setSelectedCategory: import("react").Dispatch<import("react").SetStateAction<ItemType | "all">>;
+    categoryOptions: IOptionsProps[];
+    filteredItems: IProductBlueprint[];
+};

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

@@ -57966,25 +57966,13 @@ var EmptyMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   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 useCharacterSkinNavigation = function useCharacterSkinNavigation(availableCharacters, itemKey) {
   var _useState = React.useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
-  // Get available characters from metadata
-  var availableCharacters = item.metadataType === shared.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
   React.useEffect(function () {
     setCurrentIndex(0);
-  }, [item.key]);
+  }, [itemKey]);
   var handlePreviousSkin = function handlePreviousSkin() {
     setCurrentIndex(function (prevIndex) {
       return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
@@ -57995,6 +57983,31 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
       return prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1;
     });
   };
+  var currentCharacter = availableCharacters[currentIndex];
+  return {
+    currentIndex: currentIndex,
+    currentCharacter: currentCharacter,
+    handlePreviousSkin: handlePreviousSkin,
+    handleNextSkin: handleNextSkin
+  };
+};
+
+var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
+  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType;
+  // Get available characters from metadata
+  var availableCharacters = item.metadataType === shared.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;
+  var _useCharacterSkinNavi = useCharacterSkinNavigation(availableCharacters, item.key),
+    currentCharacter = _useCharacterSkinNavi.currentCharacter,
+    handlePreviousSkin = _useCharacterSkinNavi.handlePreviousSkin,
+    handleNextSkin = _useCharacterSkinNavi.handleNextSkin;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCart = function handleAddToCart() {
     if (!hasRequiredAccount) return;
@@ -58011,8 +58024,9 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   var getSpriteKey = function getSpriteKey(textureKey) {
     return textureKey + '/down/standing/0.png';
   };
-  var currentCharacter = availableCharacters[currentIndex];
-  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: entityAtlasJSON,
     atlasIMG: entityAtlasIMG,
     spriteKey: getSpriteKey(currentCharacter.textureKey),
@@ -58020,7 +58034,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React__default.createElement(SpriteFromAtlas, {
+  }) : item.texturePath ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58028,7 +58042,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
+  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58046,7 +58060,11 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
 var ItemWrapper = /*#__PURE__*/styled__default.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;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemIconContainer",
   componentId: "sc-81xqsx-1"
@@ -58054,23 +58072,23 @@ var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemDetails",
   componentId: "sc-81xqsx-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemName",
   componentId: "sc-81xqsx-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var SelectedSkin = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkin",
   componentId: "sc-81xqsx-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
 var ItemPrice = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemPrice",
   componentId: "sc-81xqsx-5"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var Controls = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__Controls",
   componentId: "sc-81xqsx-6"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 // Styled arrow override for inline nav arrows
 var SkinNavArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
@@ -58084,42 +58102,77 @@ var SelectedSkinNav = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkinNav",
   componentId: "sc-81xqsx-9"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
+var DefaultIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreCharacterSkinRow__DefaultIcon",
+  componentId: "sc-81xqsx-10"
+})(["font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:32px;height:32px;"]);
 
-var StoreItemRow = function StoreItemRow(_ref) {
-  var _item$requiredAccount;
-  var item = _ref.item,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType,
-    _ref$showTextInput = _ref.showTextInput,
-    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
-    _ref$textInputPlaceho = _ref.textInputPlaceholder,
-    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
-  var _useState = React.useState(1),
+var useQuantityControl = function useQuantityControl(initialQuantity, min, max) {
+  if (initialQuantity === void 0) {
+    initialQuantity = 1;
+  }
+  if (min === void 0) {
+    min = 1;
+  }
+  if (max === void 0) {
+    max = 99;
+  }
+  var _useState = React.useState(initialQuantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
-  var _useState2 = React.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));
+    var value = parseInt(e.target.value) || min;
+    setQuantity(Math.min(Math.max(min, value), max));
   };
   var handleBlur = function handleBlur() {
-    if (quantity < 1) setQuantity(1);
-    if (quantity > 99) setQuantity(99);
+    if (quantity < min) setQuantity(min);
+    if (quantity > max) setQuantity(max);
   };
   var incrementQuantity = function incrementQuantity() {
     setQuantity(function (prev) {
-      return Math.min(prev + 1, 99);
+      return Math.min(prev + 1, max);
     });
   };
   var decrementQuantity = function decrementQuantity() {
     setQuantity(function (prev) {
-      return Math.max(1, prev - 1);
+      return Math.max(min, prev - 1);
     });
   };
+  var resetQuantity = function resetQuantity() {
+    setQuantity(initialQuantity);
+  };
+  return {
+    quantity: quantity,
+    setQuantity: setQuantity,
+    handleQuantityChange: handleQuantityChange,
+    handleBlur: handleBlur,
+    incrementQuantity: incrementQuantity,
+    decrementQuantity: decrementQuantity,
+    resetQuantity: resetQuantity
+  };
+};
+
+var StoreItemRow = function StoreItemRow(_ref) {
+  var _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType,
+    _ref$showTextInput = _ref.showTextInput,
+    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
+    _ref$textInputPlaceho = _ref.textInputPlaceholder,
+    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
+  var _useState = React.useState(''),
+    textInputValue = _useState[0],
+    setTextInputValue = _useState[1];
+  var _useQuantityControl = useQuantityControl(),
+    quantity = _useQuantityControl.quantity,
+    handleQuantityChange = _useQuantityControl.handleQuantityChange,
+    handleBlur = _useQuantityControl.handleBlur,
+    incrementQuantity = _useQuantityControl.incrementQuantity,
+    decrementQuantity = _useQuantityControl.decrementQuantity,
+    resetQuantity = _useQuantityControl.resetQuantity;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCartInternal = function handleAddToCartInternal() {
     if (!hasRequiredAccount) return;
@@ -58130,10 +58183,12 @@ var StoreItemRow = function StoreItemRow(_ref) {
       setTextInputValue('');
     } else {
       onAddToCart(item, quantity);
-      setQuantity(1);
+      resetQuantity();
     }
   };
-  return React__default.createElement(ItemWrapper$1, null, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper$1, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58175,7 +58230,11 @@ var StoreItemRow = function StoreItemRow(_ref) {
 var ItemWrapper$1 = /*#__PURE__*/styled__default.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;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemIconContainer",
   componentId: "sc-ptotuo-1"
@@ -58183,15 +58242,15 @@ var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemDetails",
   componentId: "sc-ptotuo-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemName",
   componentId: "sc-ptotuo-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var ItemPrice$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemPrice",
   componentId: "sc-ptotuo-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var ItemDescription = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemDescription",
   componentId: "sc-ptotuo-5"
@@ -58199,7 +58258,7 @@ var ItemDescription = /*#__PURE__*/styled__default.div.withConfig({
 var Controls$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__Controls",
   componentId: "sc-ptotuo-6"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 var ArrowsContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ArrowsContainer",
   componentId: "sc-ptotuo-7"
@@ -58213,6 +58272,50 @@ var TextInput = /*#__PURE__*/styled__default.input.withConfig({
   componentId: "sc-ptotuo-9"
 })(["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 useStoreFiltering = function useStoreFiltering(items) {
+  var _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = React.useState('all'),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  var categoryOptions = React.useMemo(function () {
+    var uniqueCategories = Array.from(new Set(items.map(function (item) {
+      return item.itemType;
+    })));
+    var allCategories = ['all'].concat(uniqueCategories);
+    return allCategories.map(function (category, index) {
+      return {
+        id: index,
+        value: category,
+        option: category === 'all' ? 'All' : category
+      };
+    });
+  }, [items]);
+  var filteredItems = React.useMemo(function () {
+    return items.filter(function (item) {
+      var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = selectedCategory === 'all' || item.itemType === selectedCategory;
+      return matchesSearch && matchesCategory;
+    }).sort(function (a, b) {
+      var _a$store, _b$store;
+      var aHighlighted = ((_a$store = a.store) == null ? void 0 : _a$store.isHighlighted) || false;
+      var bHighlighted = ((_b$store = b.store) == null ? void 0 : _b$store.isHighlighted) || false;
+      if (aHighlighted && !bHighlighted) return -1;
+      if (!aHighlighted && bHighlighted) return 1;
+      return 0;
+    });
+  }, [items, searchQuery, selectedCategory]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    selectedCategory: selectedCategory,
+    setSelectedCategory: setSelectedCategory,
+    categoryOptions: categoryOptions,
+    filteredItems: filteredItems
+  };
+};
+
 var StoreItemsSection = function StoreItemsSection(_ref) {
   var items = _ref.items,
     onAddToCart = _ref.onAddToCart,
@@ -58221,12 +58324,12 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     userAccountType = _ref.userAccountType,
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var filteredItems = items.filter(function (item) {
-    return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
+  var _useStoreFiltering = useStoreFiltering(items),
+    searchQuery = _useStoreFiltering.searchQuery,
+    setSearchQuery = _useStoreFiltering.setSearchQuery,
+    setSelectedCategory = _useStoreFiltering.setSelectedCategory,
+    categoryOptions = _useStoreFiltering.categoryOptions,
+    filteredItems = _useStoreFiltering.filteredItems;
   var renderStoreItem = function renderStoreItem(item) {
     // Prefer a specialized character skin row when needed
     if (item.metadataType === shared.MetadataType.CharacterSkin) {
@@ -58261,19 +58364,40 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       userAccountType: userAccountType || shared.UserAccountTypes.Free
     });
   };
-  return React__default.createElement(ScrollableContent, {
+  return React__default.createElement(StoreContainer, null, React__default.createElement(SearchHeader$1, null, React__default.createElement(SearchBarContainer, null, React__default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: "Search items..."
+  })), React__default.createElement(DropdownContainer$1, null, React__default.createElement(Dropdown, {
+    options: categoryOptions,
+    onChange: function onChange(value) {
+      return setSelectedCategory(value);
+    },
+    width: "100%"
+  }))), React__default.createElement(ScrollableContent, {
     items: filteredItems,
     renderItem: renderStoreItem,
-    emptyMessage: "No items available.",
-    searchOptions: {
-      value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search items...'
-    },
+    emptyMessage: "No items match your filters.",
     layout: "list",
-    maxHeight: "400px"
-  });
+    maxHeight: "350px"
+  }));
 };
+var StoreContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__StoreContainer",
+  componentId: "sc-l6f466-0"
+})(["display:flex;flex-direction:column;height:100%;gap:0.5rem;"]);
+var SearchHeader$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchHeader",
+  componentId: "sc-l6f466-1"
+})(["display:flex;gap:0.5rem;align-items:center;padding-top:0.25rem;"]);
+var SearchBarContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchBarContainer",
+  componentId: "sc-l6f466-2"
+})(["flex:0.75;"]);
+var DropdownContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__DropdownContainer",
+  componentId: "sc-l6f466-3"
+})(["flex:0.25;min-width:140px;"]);
 
 var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
   var title = _ref.title,
@@ -58338,13 +58462,30 @@ var CardFooter = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-ngkh06-6"
 })(["margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);"]);
 
+var usePackFiltering = function usePackFiltering(packs) {
+  var _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredPacks = React.useMemo(function () {
+    return packs.filter(function (pack) {
+      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [packs, searchQuery]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    filteredPacks: filteredPacks
+  };
+};
+
 var StorePacksSection = function StorePacksSection(_ref) {
   var packs = _ref.packs,
     onAddToCart = _ref.onAddToCart,
     onSelectPack = _ref.onSelectPack;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
+  var _usePackFiltering = usePackFiltering(packs),
+    searchQuery = _usePackFiltering.searchQuery,
+    setSearchQuery = _usePackFiltering.setSearchQuery,
+    filteredPacks = _usePackFiltering.filteredPacks;
   var renderPackFooter = React.useCallback(function (pack) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Price, null, "$", pack.priceUSD), React__default.createElement(CTAButton, {
       icon: React__default.createElement(fa.FaCartPlus, null),
@@ -58367,11 +58508,6 @@ var StorePacksSection = function StorePacksSection(_ref) {
       }
     });
   }, [onSelectPack, renderPackFooter]);
-  var filteredPacks = React.useMemo(function () {
-    return packs.filter(function (pack) {
-      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
-    });
-  }, [packs, searchQuery]);
   return React__default.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,