@rpg-engine/long-bow 0.8.33 → 0.8.35

package/dist/long-bow.esm.js

@@ -31879,6 +31879,12 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
   var _useState2 = useState(1),
     currentLootPage = _useState2[0],
     setCurrentLootPage = _useState2[1];
+  var _useState3 = useState(null),
+    selectedItem = _useState3[0],
+    setSelectedItem = _useState3[1];
+  useEffect(function () {
+    setCurrentLootPage(1);
+  }, [lootSearchQuery]);
   var formatText = function formatText(text) {
     if (typeof text === 'number') {
       return text.toString();
@@ -31910,6 +31916,25 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
   })) || [];
   var totalLootPages = Math.ceil(filteredLoots.length / ITEMS_PER_PAGE$1);
   var paginatedLoots = filteredLoots.slice((currentLootPage - 1) * ITEMS_PER_PAGE$1, currentLootPage * ITEMS_PER_PAGE$1);
+  var handleItemClick = function handleItemClick(loot) {
+    var item = {
+      key: loot.itemBlueprintKey,
+      name: formatItemName(loot.itemBlueprintKey),
+      texturePath: loot.itemBlueprintKey,
+      textureAtlas: 'items',
+      type: ItemType.Weapon,
+      subType: ItemSubType.Sword,
+      tier: 1,
+      rarity: ItemRarities.Common,
+      weight: 0,
+      maxStackSize: loot.quantityRange ? loot.quantityRange[1] : 1,
+      canSell: true,
+      description: 'A basic item.',
+      basePrice: 100,
+      allowedEquipSlotType: []
+    };
+    setSelectedItem(item);
+  };
   return React.createElement(BaseInformationDetails, {
     name: npc.name,
     spriteKey: npc.key,
@@ -31924,11 +31949,17 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
     defaultOpen: !isMobile
   }, React.createElement(LootSearchContainer, null, React.createElement(StyledSearchBar$1, {
     value: lootSearchQuery,
-    onChange: setLootSearchQuery,
+    onChange: function onChange(query) {
+      setLootSearchQuery(query);
+      setCurrentLootPage(1);
+    },
     placeholder: "Search loot..."
   })), React.createElement(LootGrid, null, paginatedLoots.map(function (loot, index) {
     return React.createElement(LootItem, {
-      key: index
+      key: loot.itemBlueprintKey + "-" + index,
+      onClick: function onClick() {
+        return handleItemClick(loot);
+      }
     }, React.createElement(SpriteFromAtlas, {
       atlasJSON: itemsAtlasJSON,
       atlasIMG: itemsAtlasIMG,
@@ -31962,7 +31993,15 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
       height: 24,
       imgScale: 1
     })), React.createElement(SpellContent, null, React.createElement(SpellName, null, formatText(spell.spellKey)), React.createElement(SpellDetails, null, "Power: ", React.createElement(SpellValue, null, formatText(spell.power)), React.createElement(Separator, null, "\u2022"), "Chance: ", React.createElement(SpellValue, null, spell.probability, "%"))));
-  }))));
+  }))), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
+    item: selectedItem,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    droppedBy: [npc],
+    onBack: function onBack() {
+      return setSelectedItem(null);
+    }
+  })));
 };
 var InfoSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__InfoSection",
@@ -32047,27 +32086,27 @@ var LootGrid = /*#__PURE__*/styled.div.withConfig({
 var LootItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootItem",
   componentId: "sc-fdu3xl-20"
-})(["display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.05);padding:4px;border-radius:4px;min-width:0;"]);
+})(["display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.05);padding:4px;border-radius:4px;min-width:0;cursor:pointer;user-select:none;transition:background-color 0.2s ease;&:hover{background:rgba(255,255,255,0.1);}"]);
 var LootDetails = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootDetails",
   componentId: "sc-fdu3xl-21"
-})(["flex:1;display:flex;flex-direction:column;gap:4px;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:4px;user-select:none;"]);
 var LootName = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootName",
   componentId: "sc-fdu3xl-22"
-})(["color:", ";font-size:0.5rem;"], uiColors.white);
+})(["color:", ";font-size:0.5rem;user-select:none;"], uiColors.white);
 var LootInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootInfo",
   componentId: "sc-fdu3xl-23"
-})(["display:flex;align-items:center;gap:8px;"]);
+})(["display:flex;align-items:center;gap:8px;user-select:none;"]);
 var LootChance = /*#__PURE__*/styled.span.withConfig({
   displayName: "InformationCenterNPCDetails__LootChance",
   componentId: "sc-fdu3xl-24"
-})(["color:", ";font-size:0.45rem;"], uiColors.yellow);
+})(["color:", ";font-size:0.45rem;user-select:none;"], uiColors.yellow);
 var LootQuantity = /*#__PURE__*/styled.span.withConfig({
   displayName: "InformationCenterNPCDetails__LootQuantity",
   componentId: "sc-fdu3xl-25"
-})(["color:", ";font-size:0.45rem;"], uiColors.lightGray);
+})(["color:", ";font-size:0.45rem;user-select:none;"], uiColors.lightGray);
 var PaginationContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterNPCDetails__PaginationContainer",
   componentId: "sc-fdu3xl-26"
@@ -32351,55 +32390,6 @@ var SearchBarActions$1 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-e3h0p2-1"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
 
-var InformationCenterFAQSection = function InformationCenterFAQSection(_ref) {
-  var faqItems = _ref.faqItems,
-    initialSearchQuery = _ref.initialSearchQuery,
-    tabId = _ref.tabId;
-  var _useState = useState(initialSearchQuery),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  useEffect(function () {
-    setSearchQuery(initialSearchQuery);
-  }, [initialSearchQuery]);
-  var filteredFaqs = useMemo(function () {
-    if (!searchQuery) return faqItems;
-    return faqItems.filter(function (faq) {
-      return faq.question.toLowerCase().includes(searchQuery.toLowerCase()) || faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
-    });
-  }, [searchQuery, faqItems]);
-  var renderItem = function renderItem(item) {
-    return React.createElement(StyledCollapsible$2, {
-      title: item.question
-    }, React.createElement(Answer$1, null, item.answer));
-  };
-  return React.createElement(Container$r, null, React.createElement(SearchHeader, {
-    searchOptions: {
-      value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search FAQs...'
-    }
-  }), React.createElement(PaginatedContent, {
-    items: filteredFaqs,
-    renderItem: renderItem,
-    emptyMessage: "No FAQ items found",
-    tabId: tabId,
-    layout: "list",
-    itemsPerPage: 10
-  }));
-};
-var Container$r = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterFaqSection__Container",
-  componentId: "sc-ofmaa9-0"
-})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
-var StyledCollapsible$2 = /*#__PURE__*/styled(Collapsible).withConfig({
-  displayName: "InformationCenterFaqSection__StyledCollapsible",
-  componentId: "sc-ofmaa9-1"
-})(["margin-bottom:0.5rem;&:last-child{margin-bottom:0;}"]);
-var Answer$1 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "InformationCenterFaqSection__Answer",
-  componentId: "sc-ofmaa9-2"
-})(["font-size:0.9rem;color:#ffffff;margin:0;line-height:1.5;"]);
-
 var ITEMS_PER_PAGE$2 = 3;
 var GRID_COLUMNS = 3;
 var InformationCenterTutorialsSection = function InformationCenterTutorialsSection(_ref) {
@@ -32539,8 +32529,6 @@ var InformationCenter = function InformationCenter(_ref) {
     entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     iconsAtlasIMG = _ref.iconsAtlasIMG,
     iconsAtlasJSON = _ref.iconsAtlasJSON,
-    _ref$faqItems = _ref.faqItems,
-    faqItems = _ref$faqItems === void 0 ? [] : _ref$faqItems,
     _ref$bestiaryItems = _ref.bestiaryItems,
     bestiaryItems = _ref$bestiaryItems === void 0 ? [] : _ref$bestiaryItems,
     _ref$videoGuides = _ref.videoGuides,
@@ -32586,14 +32574,6 @@ var InformationCenter = function InformationCenter(_ref) {
       initialSearchQuery: initialSearchQuery,
       tabId: "items"
     })
-  }, {
-    id: 'faq',
-    title: 'FAQ',
-    content: React.createElement(InformationCenterFAQSection, {
-      faqItems: faqItems,
-      initialSearchQuery: initialSearchQuery,
-      tabId: "faq"
-    })
   }, {
     id: 'tutorials',
     title: 'Tutorials',
@@ -32606,7 +32586,7 @@ var InformationCenter = function InformationCenter(_ref) {
   return React.createElement(DraggableContainer, {
     title: "Information Center",
     type: RPGUIContainerTypes.Framed
-  }, React.createElement(Container$s, null, React.createElement(InternalTabs, {
+  }, React.createElement(Container$r, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -32617,7 +32597,7 @@ var InformationCenter = function InformationCenter(_ref) {
     hoverColor: "#fef3c7"
   })));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
 })(["width:100%;max-width:800px;margin:0 auto;padding:1rem;"]);
@@ -32788,7 +32768,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$t, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$s, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -32806,7 +32786,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -33251,7 +33231,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     e.stopPropagation();
     onClose();
   };
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$u, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$t, {
     onClick: handleClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -33274,7 +33254,7 @@ var Background = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -33329,7 +33309,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$v, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$u, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -33345,7 +33325,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__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;"]);
@@ -33701,7 +33681,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$w, {
+  return React.createElement(Container$v, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -33718,7 +33698,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__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) {
@@ -33737,7 +33717,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$x, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$w, 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));
@@ -33751,7 +33731,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__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);
@@ -34272,13 +34252,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$y, {
+  return React.createElement(Container$x, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -34931,7 +34911,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$z, {
+  return React.createElement(Container$y, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -34961,7 +34941,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__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) {
@@ -35202,9 +35182,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$A, null, children);
+  return React.createElement(Container$z, null, children);
 };
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__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;}"]);
@@ -35360,7 +35340,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$B, {
+  return React.createElement(Container$A, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -35369,7 +35349,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35702,7 +35682,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$C, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$B, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React.createElement(ButtonsContainer$1, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
@@ -35720,7 +35700,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__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% );}"]);
@@ -35766,7 +35746,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$D, 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$C, 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", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -35792,7 +35772,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$D = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__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);
@@ -35846,7 +35826,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$E, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$D, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -35871,7 +35851,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$E = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__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;}"]);
@@ -35912,13 +35892,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$F, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$E, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$F = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__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;"]);
@@ -35991,7 +35971,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$G, {
+  }, React.createElement(Container$F, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -36010,7 +35990,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$G = /*#__PURE__*/styled.button.withConfig({
+var Container$F = /*#__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) {
@@ -36089,7 +36069,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$H, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$G, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36125,7 +36105,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$H = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -36607,7 +36587,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$I, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$H, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -36635,7 +36615,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$I = /*#__PURE__*/styled.div.withConfig({
+var Container$H = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -36669,11 +36649,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$J, {
+  return React.createElement(Container$I, {
     maxLines: maxLines
   }, children);
 };
-var Container$J = /*#__PURE__*/styled.div.withConfig({
+var Container$I = /*#__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) {
@@ -36781,7 +36761,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$K, null, React.createElement(Stepper, {
+  return React.createElement(Container$J, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -36798,7 +36778,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$K = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);