@rpg-engine/long-bow 0.8.214 → 0.8.215

package/dist/long-bow.esm.js

@@ -6,7 +6,7 @@ import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemConta
 export { MarketplaceAcceptedCurrency } 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, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaLock, FaRocket, FaHeadset, FaStar, FaShoppingBag, FaTrash, FaCoins, FaInfoCircle, FaBolt, FaCartPlus, FaCheckCircle, FaTicketAlt, FaExclamationCircle, FaArrowLeft, FaUsers, FaWallet, FaHistory } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaLock, FaRocket, FaHeadset, FaStar, FaShoppingBag, FaTrash, FaCoins, FaInfoCircle, FaBolt, FaCartPlus, FaFilter, FaCheckCircle, FaTicketAlt, FaExclamationCircle, FaArrowLeft, FaUsers, FaWallet, FaHistory } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -39200,7 +39200,19 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       currencySymbol: currencySymbol
     }, meta));
   };
-  return React.createElement(StoreContainer, null, React.createElement(SearchHeader$2, null, React.createElement(SearchBarContainer$1, null, React.createElement(SearchBar, {
+  var _useState = useState(false),
+    showFilters = _useState[0],
+    setShowFilters = _useState[1];
+  return React.createElement(StoreContainer, null, React.createElement(FilterBar, null, React.createElement(FilterToggle, {
+    "$active": showFilters,
+    onClick: function onClick() {
+      return setShowFilters(function (prev) {
+        return !prev;
+      });
+    }
+  }, React.createElement(FaFilter, {
+    size: 12
+  }), React.createElement("span", null, "Filter"))), showFilters && React.createElement(SearchHeader$2, null, React.createElement(SearchBarContainer$1, null, React.createElement(SearchBar, {
     value: searchQuery,
     onChange: setSearchQuery,
     placeholder: "Search items..."
@@ -39220,7 +39232,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     renderItem: renderStoreItem,
     emptyMessage: "No items match your filters.",
     layout: "list",
-    maxHeight: "50vh"
+    maxHeight: "none"
   }));
 };
 var StoreContainer = /*#__PURE__*/styled.div.withConfig({
@@ -39235,6 +39247,17 @@ var SearchBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemsSection__SearchBarContainer",
   componentId: "sc-l6f466-2"
 })(["flex:0.75;"]);
+var FilterBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemsSection__FilterBar",
+  componentId: "sc-l6f466-3"
+})(["display:flex;padding-top:0.25rem;"]);
+var FilterToggle = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StoreItemsSection__FilterToggle",
+  componentId: "sc-l6f466-4"
+})(["display:flex;align-items:center;gap:0.4rem;background:", ";border:1px solid rgba(255,255,255,0.3);color:#fff;padding:0.3rem 0.6rem;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',cursive;font-size:0.55rem;&:hover{background:rgba(255,255,255,0.1);}"], function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? 'rgba(255,255,255,0.15)' : 'transparent';
+});
 
 var usePackFiltering = function usePackFiltering(packs) {
   var _useState = useState(''),