@rpg-engine/long-bow 0.8.21 → 0.8.22

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } 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';
@@ -27398,6 +27398,9 @@ var Icon = /*#__PURE__*/styled.img.withConfig({
   return width;
 });
 
+var ITEM_HEIGHT = 35;
+var MAX_ITEMS_VISIBLE = 10;
+var MAX_HEIGHT = MAX_ITEMS_VISIBLE * ITEM_HEIGHT;
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,
     width = _ref.width,
@@ -27450,7 +27453,8 @@ var Dropdown = function Dropdown(_ref) {
   }, React.createElement("label", null, "\u25BC"), " ", selectedOption), React.createElement(DropdownOptions$1, {
     className: "rpgui-dropdown-imp",
     opened: opened,
-    opensUp: opensUp
+    opensUp: opensUp,
+    optionsCount: options.length
   }, options.map(function (option) {
     return React.createElement("li", {
       key: option.id,
@@ -27465,23 +27469,25 @@ var Dropdown = function Dropdown(_ref) {
 var Container$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
-})(["position:relative;width:", ";"], function (props) {
+})(["position:relative;width:", ";max-height:", "px;"], function (props) {
   return props.width || '100%';
-});
+}, MAX_HEIGHT);
 var DropdownSelect$1 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Dropdown__DropdownSelect",
   componentId: "sc-8arn65-1"
-})(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
+})(["width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:", "px;label{display:inline-block;transform:translateY(-2px);}"], ITEM_HEIGHT);
 var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
   componentId: "sc-8arn65-2"
-})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
+})(["position:absolute;width:100%;max-height:", ";overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 12px;min-height:", "px;max-height:", "px;box-sizing:border-box;line-height:1.2;}"], function (props) {
+  return props.opened ? Math.min(props.optionsCount * ITEM_HEIGHT, MAX_HEIGHT) + "px" : '0';
+}, function (props) {
   return props.opened ? 'block' : 'none';
 }, function (props) {
   return props.opensUp ? '100%' : 'auto';
 }, function (props) {
   return props.opensUp ? 'auto' : '100%';
-});
+}, ITEM_HEIGHT, ITEM_HEIGHT);
 
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
@@ -29131,7 +29137,7 @@ var SearchContainer$1 = /*#__PURE__*/styled.div.withConfig({
 var ContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__ContentContainer",
   componentId: "sc-19q95ue-7"
-})(["flex:1;display:flex;flex-direction:column;padding:16px;padding-right:0;padding-bottom:0;width:100%;position:relative;min-height:250px;overflow:hidden;"]);
+})(["flex:1;display:flex;flex-direction:column;padding:16px;padding-right:0;padding-bottom:0;width:100%;position:relative;min-height:300px;overflow:hidden;"]);
 var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__RadioInputScroller",
   componentId: "sc-19q95ue-8"
@@ -31180,226 +31186,157 @@ var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1vguuz8-7"
 })(["width:64px;height:64px;background:rgba(0,0,0,0.3);border-radius:4px;display:flex;justify-content:center;align-items:center;position:relative;.sprite-from-atlas-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);transform-origin:center;}"]);
 
-var ITEMS_PER_PAGE$1 = 5;
-var formatItemName = function formatItemName(itemPath) {
-  var _itemPath$split$pop;
-  var cleanText = ((_itemPath$split$pop = itemPath.split('/').pop()) == null ? void 0 : _itemPath$split$pop.split('.').shift()) || '';
-  return cleanText.split('-').map(function (word) {
-    return word.charAt(0).toUpperCase() + word.slice(1);
-  }).join(' ');
-};
-var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
-  var _npc$loots, _npc$skills$strength, _npc$skills$dexterity, _npc$skills$resistanc;
-  var npc = _ref.npc,
+var InformationCenterItemDetails = function InformationCenterItemDetails(_ref) {
+  var item = _ref.item,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
     itemsAtlasIMG = _ref.itemsAtlasIMG,
-    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
-    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
-    iconAtlasIMG = _ref.iconAtlasIMG,
-    iconAtlasJSON = _ref.iconAtlasJSON,
+    droppedBy = _ref.droppedBy,
     onBack = _ref.onBack;
   var isMobile = isMobileOrTablet();
-  var _useState = useState(''),
-    lootSearchQuery = _useState[0],
-    setLootSearchQuery = _useState[1];
-  var _useState2 = useState(1),
-    currentLootPage = _useState2[0],
-    setCurrentLootPage = _useState2[1];
-  var formatText = function formatText(text) {
-    if (typeof text === 'number') {
-      return text.toString();
-    }
-    return text.toString().replace(/([A-Z])/g, ' $1').trim().replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').replace(/\s+/g, ' ');
+  var renderAllowedSlots = function renderAllowedSlots() {
+    var _item$allowedEquipSlo;
+    if (!((_item$allowedEquipSlo = item.allowedEquipSlotType) != null && _item$allowedEquipSlo.length)) return null;
+    return React.createElement(InfoItem, null, React.createElement(Label, null, "Equip Slots:"), React.createElement(Value, null, item.allowedEquipSlotType.join(', ')));
   };
-  var formatRarity = function formatRarity(rarity) {
-    switch (rarity) {
-      case 0.5:
-        return 'Very Rare';
-      case 1:
-        return 'Rare';
-      case 10:
-        return 'Uncommon';
-      case 15:
-        return 'Semi Common';
-      case 20:
-        return 'Common';
-      case 35:
-        return 'Very Common';
-      default:
-        return 'Unknown';
-    }
+  var renderRequirements = function renderRequirements() {
+    if (!item.minRequirements) return null;
+    return React.createElement(StyledCollapsible, {
+      title: "Requirements",
+      defaultOpen: !isMobile
+    }, React.createElement(RequirementsGrid, null, item.minRequirements.level && React.createElement(RequirementItem, null, React.createElement(Label, null, "Level:"), React.createElement(Value, null, item.minRequirements.level)), item.minRequirements.skill && React.createElement(RequirementItem, null, React.createElement(Label, null, item.minRequirements.skill.name, ":"), React.createElement(Value, null, item.minRequirements.skill.level))));
   };
-  var filteredLoots = ((_npc$loots = npc.loots) == null ? void 0 : _npc$loots.filter(function (loot) {
-    return formatItemName(loot.itemBlueprintKey).toLowerCase().includes(lootSearchQuery.toLowerCase());
-  })) || [];
-  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);
   return React.createElement(BaseInformationDetails, {
-    name: npc.name,
-    spriteKey: npc.key,
-    atlasJSON: entitiesAtlasJSON,
-    atlasIMG: entitiesAtlasIMG,
+    name: item.name,
+    spriteKey: item.texturePath,
+    atlasJSON: itemsAtlasJSON,
+    atlasIMG: itemsAtlasIMG,
     onBack: onBack
-  }, React.createElement(InfoSection, null, React.createElement(InfoItem, null, React.createElement(Label, null, "Type:"), React.createElement(Value, null, formatText(npc.subType))), React.createElement(InfoItem, null, React.createElement(Label, null, "Alignment:"), React.createElement(Value, null, formatText(npc.alignment))), React.createElement(InfoItem, null, React.createElement(Label, null, "Attack Type:"), React.createElement(Value, null, formatText(npc.attackType))), React.createElement(InfoItem, null, React.createElement(Label, null, "Range:"), React.createElement(Value, null, formatText(npc.maxRangeAttack))), React.createElement(InfoItem, null, React.createElement(Label, null, "Speed:"), React.createElement(Value, null, formatText(npc.speed)))), React.createElement(StyledCollapsible, {
-    title: "Stats",
+  }, React.createElement(InfoSection, null, React.createElement(InfoItem, null, React.createElement(Label, null, "Type:"), React.createElement(Value, null, item.type)), React.createElement(InfoItem, null, React.createElement(Label, null, "Subtype:"), React.createElement(Value, null, item.subType)), React.createElement(InfoItem, null, React.createElement(Label, null, "Tier:"), React.createElement(Value, null, item.tier)), React.createElement(InfoItem, null, React.createElement(Label, null, "Rarity:"), React.createElement(Value, null, item.rarity)), renderAllowedSlots()), React.createElement(StyledCollapsible, {
+    title: "Description",
     defaultOpen: !isMobile
-  }, React.createElement(StatGrid, null, React.createElement(StatItem, null, "HP: ", npc.baseHealth), React.createElement(StatItem, null, "Level: ", npc.skills.level), ((_npc$skills$strength = npc.skills.strength) == null ? void 0 : _npc$skills$strength.level) && React.createElement(StatItem, null, "Strength: ", npc.skills.strength.level), ((_npc$skills$dexterity = npc.skills.dexterity) == null ? void 0 : _npc$skills$dexterity.level) && React.createElement(StatItem, null, "Dexterity: ", npc.skills.dexterity.level), ((_npc$skills$resistanc = npc.skills.resistance) == null ? void 0 : _npc$skills$resistanc.level) && React.createElement(StatItem, null, "Resistance: ", npc.skills.resistance.level))), npc.loots && npc.loots.length > 0 && React.createElement(StyledCollapsible, {
-    title: "Loot",
+  }, React.createElement(Description$2, null, item.description || 'No description available.')), React.createElement(StyledCollapsible, {
+    title: "Stats",
     defaultOpen: !isMobile
-  }, React.createElement(LootSearchContainer, null, React.createElement(StyledSearchBar$1, {
-    value: lootSearchQuery,
-    onChange: setLootSearchQuery,
-    placeholder: "Search loot..."
-  })), React.createElement(LootGrid, null, paginatedLoots.map(function (loot, index) {
-    return React.createElement(LootItem, {
-      key: index
-    }, React.createElement(SpriteFromAtlas, {
-      atlasJSON: itemsAtlasJSON,
-      atlasIMG: itemsAtlasIMG,
-      spriteKey: loot.itemBlueprintKey,
-      width: 24,
-      height: 24,
-      imgScale: 1
-    }), React.createElement(LootDetails, null, React.createElement(LootName, null, formatItemName(loot.itemBlueprintKey)), React.createElement(LootInfo, null, React.createElement(LootChance, null, formatRarity(loot.chance)), loot.quantityRange && React.createElement(LootQuantity, null, "x", loot.quantityRange[0], "-", loot.quantityRange[1]))));
-  })), filteredLoots.length > ITEMS_PER_PAGE$1 && React.createElement(PaginationContainer$2, null, React.createElement(StyledPagination, {
-    currentPage: currentLootPage,
-    totalPages: totalLootPages,
-    onPageChange: setCurrentLootPage
-  }))), npc.entityEffects && npc.entityEffects.length > 0 && React.createElement(StyledCollapsible, {
+  }, React.createElement(StatGrid, null, React.createElement(StatItem, null, "Weight: ", item.weight), React.createElement(StatItem, null, "Stack Size: ", item.maxStackSize), item.rangeType && React.createElement(StatItem, null, "Range Type: ", item.rangeType), item.basePrice > 0 && React.createElement(StatItem, null, "Base Price: ", item.basePrice))), renderRequirements(), item.entityEffects && item.entityEffects.length > 0 && React.createElement(StyledCollapsible, {
     title: "Effects",
     defaultOpen: !isMobile
-  }, React.createElement(EffectsList, null, npc.entityEffects.map(function (effect, index) {
+  }, React.createElement(EffectsList, null, item.entityEffects.map(function (effect, index) {
     return React.createElement(EffectItem, {
       key: index
-    }, formatText(effect));
-  }))), npc.areaSpells && npc.areaSpells.length > 0 && React.createElement(StyledCollapsible, {
-    title: "Spells",
+    }, effect, item.entityEffectChance && React.createElement(EffectChance, null, "(", item.entityEffectChance, "%)"));
+  })), item.usableEffectDescription && React.createElement(EffectDescription, null, item.usableEffectDescription)), item.equippedBuff && item.equippedBuff.length > 0 && React.createElement(StyledCollapsible, {
+    title: "Equipped Buffs",
     defaultOpen: !isMobile
-  }, React.createElement(SpellsList, null, npc.areaSpells.map(function (spell, index) {
-    return React.createElement(SpellItem, {
+  }, React.createElement(BuffsList, null, item.equippedBuff.map(function (buff, index) {
+    return React.createElement(BuffItem, {
       key: index
-    }, React.createElement(SpellIconContainer, null, React.createElement(SpriteFromAtlas, {
-      atlasJSON: iconAtlasJSON,
-      atlasIMG: iconAtlasIMG,
-      spriteKey: spell.texturePath || spell.spellKey,
-      width: 24,
-      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, "%"))));
+    }, React.createElement(BuffName, null, buff.trait.replace(/^\w/, function (c) {
+      return c.toUpperCase();
+    })), React.createElement(BuffValue, null, "+", buff.buffPercentage, "%"));
+  })), item.equippedBuffDescription && React.createElement(BuffDescription, null, item.equippedBuffDescription)), droppedBy.length > 0 && React.createElement(StyledCollapsible, {
+    title: "Dropped By",
+    defaultOpen: !isMobile
+  }, React.createElement(DropList, null, droppedBy.map(function (npc) {
+    var loot = npc.loots.find(function (l) {
+      return l.itemBlueprintKey === item.key;
+    });
+    return React.createElement(DropItem, {
+      key: npc.id
+    }, React.createElement(NPCName, null, npc.name), React.createElement(DropRate, null, loot == null ? void 0 : loot.chance, "%"));
   }))));
 };
 var InfoSection = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__InfoSection",
-  componentId: "sc-fdu3xl-0"
+  displayName: "InformationCenterItemDetails__InfoSection",
+  componentId: "sc-zwf6pb-0"
 })(["display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;background:rgba(255,255,255,0.05);padding:12px;border-radius:4px;"]);
 var InfoItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__InfoItem",
-  componentId: "sc-fdu3xl-1"
+  displayName: "InformationCenterItemDetails__InfoItem",
+  componentId: "sc-zwf6pb-1"
 })(["display:flex;align-items:center;gap:8px;"]);
 var Label = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__Label",
-  componentId: "sc-fdu3xl-2"
+  displayName: "InformationCenterItemDetails__Label",
+  componentId: "sc-zwf6pb-2"
 })(["color:", ";font-size:0.5rem;opacity:0.8;"], uiColors.yellow);
 var Value = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__Value",
-  componentId: "sc-fdu3xl-3"
+  displayName: "InformationCenterItemDetails__Value",
+  componentId: "sc-zwf6pb-3"
 })(["color:", ";font-size:0.5rem;"], uiColors.white);
 var StyledCollapsible = /*#__PURE__*/styled(Collapsible).withConfig({
-  displayName: "InformationCenterNPCDetails__StyledCollapsible",
-  componentId: "sc-fdu3xl-4"
+  displayName: "InformationCenterItemDetails__StyledCollapsible",
+  componentId: "sc-zwf6pb-4"
 })(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden;"]);
+var Description$2 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "InformationCenterItemDetails__Description",
+  componentId: "sc-zwf6pb-5"
+})(["color:", ";font-size:0.5rem;margin:0;padding:12px;line-height:1.5;"], uiColors.white);
 var StatGrid = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__StatGrid",
-  componentId: "sc-fdu3xl-5"
+  displayName: "InformationCenterItemDetails__StatGrid",
+  componentId: "sc-zwf6pb-6"
 })(["display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px;"]);
 var StatItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__StatItem",
-  componentId: "sc-fdu3xl-6"
+  displayName: "InformationCenterItemDetails__StatItem",
+  componentId: "sc-zwf6pb-7"
 })(["color:", ";font-size:0.5rem;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"], uiColors.white);
 var EffectsList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__EffectsList",
-  componentId: "sc-fdu3xl-7"
+  displayName: "InformationCenterItemDetails__EffectsList",
+  componentId: "sc-zwf6pb-8"
 })(["display:flex;flex-wrap:wrap;gap:8px;padding:12px;"]);
 var EffectItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__EffectItem",
-  componentId: "sc-fdu3xl-8"
-})(["color:", ";font-size:0.5rem;background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;"], uiColors.white);
-var SpellsList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellsList",
-  componentId: "sc-fdu3xl-9"
+  displayName: "InformationCenterItemDetails__EffectItem",
+  componentId: "sc-zwf6pb-9"
+})(["display:flex;align-items:center;gap:4px;color:", ";font-size:0.5rem;background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;"], uiColors.white);
+var EffectChance = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__EffectChance",
+  componentId: "sc-zwf6pb-10"
+})(["color:", ";opacity:0.8;"], uiColors.yellow);
+var BuffsList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__BuffsList",
+  componentId: "sc-zwf6pb-11"
 })(["display:flex;flex-direction:column;gap:8px;padding:12px;"]);
-var SpellIconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellIconContainer",
-  componentId: "sc-fdu3xl-10"
-})(["display:flex;padding-right:30px;padding-bottom:30px;"]);
-var SpellContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellContent",
-  componentId: "sc-fdu3xl-11"
-})(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
-var SpellItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellItem",
-  componentId: "sc-fdu3xl-12"
-})(["display:flex;gap:8px;background:rgba(255,255,255,0.05);padding:8px;padding-left:10px;border-radius:4px;align-items:center;"]);
-var SpellName = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellName",
-  componentId: "sc-fdu3xl-13"
+var BuffItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__BuffItem",
+  componentId: "sc-zwf6pb-12"
+})(["display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
+var BuffName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__BuffName",
+  componentId: "sc-zwf6pb-13"
+})(["color:", ";font-size:0.5rem;"], uiColors.white);
+var BuffValue = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__BuffValue",
+  componentId: "sc-zwf6pb-14"
 })(["color:", ";font-size:0.5rem;"], uiColors.yellow);
-var SpellDetails = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellDetails",
-  componentId: "sc-fdu3xl-14"
-})(["display:flex;align-items:center;gap:8px;color:", ";font-size:0.45rem;opacity:0.8;"], uiColors.white);
-var SpellValue = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__SpellValue",
-  componentId: "sc-fdu3xl-15"
-})(["color:", ";"], uiColors.yellow);
-var Separator = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__Separator",
-  componentId: "sc-fdu3xl-16"
-})(["color:", ";opacity:0.5;"], uiColors.yellow);
-var LootSearchContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootSearchContainer",
-  componentId: "sc-fdu3xl-17"
-})(["padding:12px 12px 0;"]);
-var StyledSearchBar$1 = /*#__PURE__*/styled(SearchBar).withConfig({
-  displayName: "InformationCenterNPCDetails__StyledSearchBar",
-  componentId: "sc-fdu3xl-18"
-})(["width:100%;"]);
-var LootGrid = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootGrid",
-  componentId: "sc-fdu3xl-19"
-})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:12px;"]);
-var LootItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootItem",
-  componentId: "sc-fdu3xl-20"
-})(["display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
-var LootDetails = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootDetails",
-  componentId: "sc-fdu3xl-21"
-})(["flex:1;display:flex;flex-direction:column;gap:4px;"]);
-var LootName = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootName",
-  componentId: "sc-fdu3xl-22"
+var BuffDescription = /*#__PURE__*/styled.p.withConfig({
+  displayName: "InformationCenterItemDetails__BuffDescription",
+  componentId: "sc-zwf6pb-15"
+})(["color:", ";font-size:0.45rem;margin:0;padding:0 12px 12px;font-style:italic;"], uiColors.lightGray);
+var DropList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__DropList",
+  componentId: "sc-zwf6pb-16"
+})(["display:flex;flex-direction:column;gap:0.5rem;padding:12px;"]);
+var DropItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__DropItem",
+  componentId: "sc-zwf6pb-17"
+})(["display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:rgba(255,255,255,0.05);border-radius:4px;"]);
+var NPCName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__NPCName",
+  componentId: "sc-zwf6pb-18"
 })(["color:", ";font-size:0.5rem;"], uiColors.white);
-var LootInfo = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__LootInfo",
-  componentId: "sc-fdu3xl-23"
-})(["display:flex;align-items:center;gap:8px;"]);
-var LootChance = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__LootChance",
-  componentId: "sc-fdu3xl-24"
-})(["color:", ";font-size:0.45rem;"], uiColors.yellow);
-var LootQuantity = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCDetails__LootQuantity",
-  componentId: "sc-fdu3xl-25"
-})(["color:", ";font-size:0.45rem;"], uiColors.lightGray);
-var PaginationContainer$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCDetails__PaginationContainer",
-  componentId: "sc-fdu3xl-26"
-})(["display:flex;justify-content:center;padding:12px;"]);
-var StyledPagination = /*#__PURE__*/styled(Pagination).withConfig({
-  displayName: "InformationCenterNPCDetails__StyledPagination",
-  componentId: "sc-fdu3xl-27"
-})(["font-size:0.6rem;"]);
+var DropRate = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__DropRate",
+  componentId: "sc-zwf6pb-19"
+})(["color:", ";font-size:0.5rem;"], uiColors.yellow);
+var RequirementsGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__RequirementsGrid",
+  componentId: "sc-zwf6pb-20"
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px;"]);
+var RequirementItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__RequirementItem",
+  componentId: "sc-zwf6pb-21"
+})(["display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
+var EffectDescription = /*#__PURE__*/styled.p.withConfig({
+  displayName: "InformationCenterItemDetails__EffectDescription",
+  componentId: "sc-zwf6pb-22"
+})(["color:", ";font-size:0.45rem;margin:8px 0 0;padding:0 12px;font-style:italic;"], uiColors.lightGray);
 
 var TooltipContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseTooltip__TooltipContainer",
@@ -31435,599 +31372,728 @@ var BaseTooltip = function BaseTooltip(_ref) {
   }, children);
 };
 
-var EffectsList$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__EffectsList",
-  componentId: "sc-j2o39s-0"
-})(["display:flex;gap:8px;flex-wrap:wrap;"]);
-var EffectItem$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCTooltip__EffectItem",
-  componentId: "sc-j2o39s-1"
-})(["font-size:0.5rem;color:", ";background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;"], uiColors.white);
-var SpellList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__SpellList",
-  componentId: "sc-j2o39s-2"
-})(["display:flex;flex-direction:column;gap:2px;"]);
-var SpellItem$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__SpellItem",
-  componentId: "sc-j2o39s-3"
-})(["display:flex;align-items:center;justify-content:space-between;font-size:0.5rem;color:", ";background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px;"], uiColors.white);
-var SpellInfo = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCTooltip__SpellInfo",
-  componentId: "sc-j2o39s-4"
-})(["color:", ";margin-left:8px;opacity:0.8;"], uiColors.yellow);
-var LootList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__LootList",
-  componentId: "sc-j2o39s-5"
-})(["display:flex;flex-direction:column;gap:2px;"]);
-var LootItem$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__LootItem",
-  componentId: "sc-j2o39s-6"
-})(["display:flex;align-items:center;gap:4px;font-size:0.5rem;background:rgba(255,255,255,0.05);padding:4px 6px;border-radius:4px;.sprite-from-atlas-img{top:0px;left:0px;}"]);
-var LootName$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCTooltip__LootName",
-  componentId: "sc-j2o39s-7"
-})(["color:", ";flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:4px;"], uiColors.white);
-var LootChance$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterNPCTooltip__LootChance",
-  componentId: "sc-j2o39s-8"
-})(["color:", ";font-size:0.45rem;text-transform:lowercase;opacity:0.8;"], uiColors.yellow);
-var MoreIndicator = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterNPCTooltip__MoreIndicator",
-  componentId: "sc-j2o39s-9"
-})(["color:", ";font-size:0.45rem;text-align:center;margin-top:2px;opacity:0.7;"], uiColors.yellow);
-var formatText = function formatText(text) {
-  if (typeof text === 'number') {
-    return text.toString();
-  }
-  return text.toString().replace(/([A-Z])/g, ' $1').trim().replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').replace(/\s+/g, ' ');
-};
-var formatRarity = function formatRarity(rarity) {
-  switch (rarity) {
-    case 0.5:
-      return 'Very Rare';
-    case 1:
-      return 'Rare';
-    case 10:
-      return 'Uncommon';
-    case 15:
-      return 'Semi Common';
-    case 20:
-      return 'Common';
-    case 35:
-      return 'Very Common';
+var ItemHeader$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemTooltip__ItemHeader",
+  componentId: "sc-1ecf9mj-0"
+})(["display:flex;align-items:center;gap:8px;"]);
+var Description$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemTooltip__Description",
+  componentId: "sc-1ecf9mj-1"
+})(["color:", ";font-size:0.5rem;line-height:1.4;margin-top:8px;opacity:0.8;"], uiColors.white);
+var RarityText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemTooltip__RarityText",
+  componentId: "sc-1ecf9mj-2"
+})(["color:", ";font-size:0.5rem;"], function (props) {
+  switch (props.rarity.toLowerCase()) {
+    case 'legendary':
+      return '#ff8c00';
+    case 'rare':
+      return '#0070dd';
+    case 'uncommon':
+      return '#1eff00';
     default:
-      return 'Unknown';
+      return '#ffffff';
   }
-};
-var InformationCenterNPCTooltip = function InformationCenterNPCTooltip(_ref) {
-  var _npc$skills$strength, _npc$skills$dexterity, _npc$skills$resistanc;
-  var npc = _ref.npc,
-    itemsAtlasJSON = _ref.itemsAtlasJSON,
-    itemsAtlasIMG = _ref.itemsAtlasIMG;
-  return React.createElement(BaseTooltip, null, React.createElement(TooltipTitle$1, null, npc.name), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "HP: ", npc.baseHealth), React.createElement(StatItem$1, null, "LVL: ", npc.skills.level), React.createElement(StatItem$1, null, "STR: ", ((_npc$skills$strength = npc.skills.strength) == null ? void 0 : _npc$skills$strength.level) || '-'), React.createElement(StatItem$1, null, "DEX: ", ((_npc$skills$dexterity = npc.skills.dexterity) == null ? void 0 : _npc$skills$dexterity.level) || '-'), React.createElement(StatItem$1, null, "RES: ", ((_npc$skills$resistanc = npc.skills.resistance) == null ? void 0 : _npc$skills$resistanc.level) || '-'), React.createElement(StatItem$1, null, "SPD: ", formatText(npc.speed))), npc.entityEffects && npc.entityEffects.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Effects"), React.createElement(EffectsList$1, null, npc.entityEffects.map(function (effect) {
-    return React.createElement(EffectItem$1, {
-      key: effect
-    }, formatText(effect));
-  }))), npc.areaSpells && npc.areaSpells.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Spells"), React.createElement(SpellList, null, npc.areaSpells.map(function (spell) {
-    return React.createElement(SpellItem$1, {
-      key: spell.spellKey
-    }, formatText(spell.spellKey), React.createElement(SpellInfo, null, formatText(spell.power), ", ", spell.probability, "%"));
-  }))), npc.loots && npc.loots.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Possible Loot"), React.createElement(LootList, null, npc.loots.slice(0, 4).map(function (loot) {
-    return React.createElement(LootItem$1, {
-      key: loot.itemBlueprintKey
-    }, React.createElement(SpriteFromAtlas, {
-      atlasIMG: itemsAtlasIMG,
-      atlasJSON: itemsAtlasJSON,
-      spriteKey: loot.itemBlueprintKey,
-      imgScale: 1
-    }), React.createElement(LootName$1, null, formatText(loot.itemBlueprintKey)), React.createElement(LootChance$1, null, formatRarity(loot.chance)));
-  }), npc.loots.length > 4 && React.createElement(MoreIndicator, null, "..."))));
+});
+var InformationCenterItemTooltip = function InformationCenterItemTooltip(_ref) {
+  var item = _ref.item;
+  return React.createElement(BaseTooltip, null, React.createElement(ItemHeader$1, null, React.createElement(TooltipTitle$1, null, item.name)), React.createElement(Description$3, null, item.description), React.createElement(Section, null, React.createElement(SectionTitle, null, "Details"), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "Type: ", item.type), React.createElement(StatItem$1, null, "Weight: ", item.weight), item.attack !== undefined && React.createElement(StatItem$1, null, "Attack: ", item.attack), item.defense !== undefined && React.createElement(StatItem$1, null, "Defense: ", item.defense), item.tier !== undefined && React.createElement(StatItem$1, null, "Tier: ", item.tier), item.rangeType && React.createElement(StatItem$1, null, "Range: ", item.rangeType))), React.createElement(Section, null, React.createElement(SectionTitle, null, "Market"), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "Price: ", item.basePrice), item.rarity && React.createElement(StatItem$1, null, "Rarity:", ' ', React.createElement(RarityText, {
+    rarity: item.rarity
+  }, item.rarity)))));
 };
 
-var InformationCenterBestiarySection = function InformationCenterBestiarySection(_ref) {
-  var bestiaryItems = _ref.bestiaryItems,
+var TOOLTIP_OFFSET = 200;
+var formatItemType = function formatItemType(type) {
+  var words = type.split(/(?=[A-Z])/);
+  if (words.length === 1) {
+    return words[0];
+  }
+  return words.map(function (word, index) {
+    if (index === 0) {
+      return word.charAt(0) + '.';
+    }
+    return word;
+  }).join(' ');
+};
+var InformationCenterItemsSection = function InformationCenterItemsSection(_ref) {
+  var items = _ref.items,
+    bestiaryItems = _ref.bestiaryItems,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
     itemsAtlasIMG = _ref.itemsAtlasIMG,
-    iconsAtlasIMG = _ref.iconsAtlasIMG,
-    iconsAtlasJSON = _ref.iconsAtlasJSON,
-    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
-    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
   var _useState = useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
-  var _useState2 = useState(null),
-    tooltipData = _useState2[0],
-    setTooltipData = _useState2[1];
+  var _useState2 = useState('all'),
+    selectedItemCategory = _useState2[0],
+    setSelectedItemCategory = _useState2[1];
   var _useState3 = useState(null),
-    selectedMonster = _useState3[0],
-    setSelectedMonster = _useState3[1];
-  var _useState4 = useState('ontouchstart' in window),
-    isTouchDevice = _useState4[0];
-  var handleMouseEnter = function handleMouseEnter(monster, event) {
-    if (!isTouchDevice && !selectedMonster) {
-      setTooltipData({
-        npc: monster,
-        position: {
-          x: event.clientX,
-          y: event.clientY
-        }
+    hoveredItem = _useState3[0],
+    setHoveredItem = _useState3[1];
+  var _useState4 = useState({
+      x: 0,
+      y: 0
+    }),
+    tooltipPosition = _useState4[0],
+    setTooltipPosition = _useState4[1];
+  var _useState5 = useState(null),
+    selectedItem = _useState5[0],
+    setSelectedItem = _useState5[1];
+  var itemCategoryOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Items'
+  }].concat(Object.values(ItemType).map(function (type, index) {
+    return {
+      id: index + 1,
+      value: type,
+      option: formatItemType(type)
+    };
+  }));
+  var filteredItems = items.filter(function (item) {
+    return (selectedItemCategory === 'all' || item.type === selectedItemCategory) && item.name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  var getDroppedByNPCs = function getDroppedByNPCs(itemId, npcs) {
+    return npcs.filter(function (npc) {
+      var _npc$loots;
+      return (_npc$loots = npc.loots) == null ? void 0 : _npc$loots.some(function (loot) {
+        return loot.itemBlueprintKey === itemId;
+      });
+    }) || [];
+  };
+  var handleMouseEnter = function handleMouseEnter(e, item) {
+    setTooltipPosition({
+      x: e.clientX + TOOLTIP_OFFSET,
+      y: e.clientY
+    });
+    setHoveredItem(item);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (hoveredItem) {
+      setTooltipPosition({
+        x: e.clientX + TOOLTIP_OFFSET,
+        y: e.clientY
       });
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    if (!isTouchDevice) {
-      setTooltipData(null);
-    }
+    setHoveredItem(null);
   };
-  var handleMouseMove = function handleMouseMove(event) {
-    if (!isTouchDevice && tooltipData) {
-      setTooltipData(_extends({}, tooltipData, {
-        position: {
-          x: event.clientX,
-          y: event.clientY
-        }
-      }));
-    }
+  var handleTouchStart = function handleTouchStart(e, item) {
+    var touch = e.touches[0];
+    setTooltipPosition({
+      x: touch.clientX + TOOLTIP_OFFSET,
+      y: touch.clientY
+    });
+    setHoveredItem(item);
   };
-  var handleTouchStart = function handleTouchStart(monster, event) {
-    if (isTouchDevice) {
-      event.preventDefault();
-      var touch = event.touches[0];
-      if ((tooltipData == null ? void 0 : tooltipData.npc.id) === monster.id) {
-        setTooltipData(null);
-      } else {
-        setTooltipData({
-          npc: monster,
-          position: {
-            x: touch.clientX,
-            y: touch.clientY
-          }
-        });
-      }
-    }
+  var handleItemClick = function handleItemClick(item) {
+    setSelectedItem(item);
+    setHoveredItem(null);
   };
-  var handleMonsterClick = function handleMonsterClick(monster) {
-    setSelectedMonster(monster);
-    setTooltipData(null);
+  var handleSearchChange = function handleSearchChange(newQuery) {
+    setSearchQuery(newQuery);
+    if (newQuery && selectedItemCategory !== 'all') {
+      setSelectedItemCategory('all');
+    }
   };
   var renderItem = function renderItem(item) {
     return React.createElement(InformationCenterCell, {
-      key: item.id,
+      key: item.key,
       name: item.name,
-      spriteKey: item.key,
-      atlasJSON: entitiesAtlasJSON,
-      atlasIMG: entitiesAtlasIMG,
-      onClick: function onClick() {
-        return handleMonsterClick(item);
-      },
+      spriteKey: item.texturePath,
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
       onMouseEnter: function onMouseEnter(e) {
-        return handleMouseEnter(item, e);
+        return handleMouseEnter(e, item);
       },
-      onMouseLeave: handleMouseLeave,
       onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
       onTouchStart: function onTouchStart(e) {
-        return handleTouchStart(item, e);
+        return handleTouchStart(e, item);
+      },
+      onClick: function onClick() {
+        return handleItemClick(item);
       }
     });
   };
-  var filteredItems = bestiaryItems.filter(function (item) {
-    return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
   return React.createElement(React.Fragment, null, React.createElement(PaginatedContent, {
     items: filteredItems,
     renderItem: renderItem,
-    emptyMessage: "No monsters found",
-    tabId: tabId,
-    layout: "grid",
+    emptyMessage: "No items found",
+    filterOptions: {
+      options: itemCategoryOptions,
+      selectedOption: selectedItemCategory,
+      onOptionChange: setSelectedItemCategory
+    },
     searchOptions: {
       value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search monsters...'
+      onChange: handleSearchChange,
+      placeholder: 'Search items...'
     },
+    dependencies: [selectedItemCategory],
+    tabId: tabId,
+    layout: "grid",
     itemHeight: "180px"
-  }), tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper, {
+  }), hoveredItem && React.createElement(TooltipWrapper, {
     style: {
-      position: 'fixed',
-      left: tooltipData.position.x + 10,
-      top: tooltipData.position.y + 10
+      top: tooltipPosition.y,
+      left: tooltipPosition.x
     }
-  }, React.createElement(InformationCenterNPCTooltip, {
-    npc: tooltipData.npc,
-    itemsAtlasJSON: itemsAtlasJSON,
-    itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React.createElement(InformationCenterNPCDetails, {
-    npc: selectedMonster,
+  }, React.createElement(InformationCenterItemTooltip, {
+    item: hoveredItem
+  })), selectedItem && React.createElement(InformationCenterItemDetails, {
+    item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
-    iconAtlasIMG: iconsAtlasIMG,
-    iconAtlasJSON: iconsAtlasJSON,
-    entitiesAtlasJSON: entitiesAtlasJSON,
-    entitiesAtlasIMG: entitiesAtlasIMG,
+    droppedBy: getDroppedByNPCs(selectedItem.key, bestiaryItems),
     onBack: function onBack() {
-      return setSelectedMonster(null);
+      return setSelectedItem(null);
     }
   }));
 };
 var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterBestiarySection__TooltipWrapper",
-  componentId: "sc-e3h0p2-0"
-})(["position:fixed;z-index:1000;pointer-events:none;width:300px;"]);
+  displayName: "InformationCenterItemsSection__TooltipWrapper",
+  componentId: "sc-1wmpapt-0"
+})(["position:fixed;z-index:1000;pointer-events:none;transition:transform 0.1s ease;"]);
 
-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$1, {
-      title: item.question
-    }, React.createElement(Answer$1, null, item.answer));
-  };
-  return React.createElement(Container$q, 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 ITEMS_PER_PAGE$1 = 5;
+var formatItemName = function formatItemName(itemPath) {
+  var _itemPath$split$pop;
+  var cleanText = ((_itemPath$split$pop = itemPath.split('/').pop()) == null ? void 0 : _itemPath$split$pop.split('.').shift()) || '';
+  return cleanText.split('-').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterFaqSection__Container",
-  componentId: "sc-ofmaa9-0"
-})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
-var StyledCollapsible$1 = /*#__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 InformationCenterItemDetails = function InformationCenterItemDetails(_ref) {
-  var item = _ref.item,
+var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
+  var _npc$loots, _npc$skills$strength, _npc$skills$dexterity, _npc$skills$resistanc;
+  var npc = _ref.npc,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
     itemsAtlasIMG = _ref.itemsAtlasIMG,
-    droppedBy = _ref.droppedBy,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
+    iconAtlasIMG = _ref.iconAtlasIMG,
+    iconAtlasJSON = _ref.iconAtlasJSON,
     onBack = _ref.onBack;
   var isMobile = isMobileOrTablet();
-  var renderAllowedSlots = function renderAllowedSlots() {
-    var _item$allowedEquipSlo;
-    if (!((_item$allowedEquipSlo = item.allowedEquipSlotType) != null && _item$allowedEquipSlo.length)) return null;
-    return React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Equip Slots:"), React.createElement(Value$1, null, item.allowedEquipSlotType.join(', ')));
+  var _useState = useState(''),
+    lootSearchQuery = _useState[0],
+    setLootSearchQuery = _useState[1];
+  var _useState2 = useState(1),
+    currentLootPage = _useState2[0],
+    setCurrentLootPage = _useState2[1];
+  var formatText = function formatText(text) {
+    if (typeof text === 'number') {
+      return text.toString();
+    }
+    return text.toString().replace(/([A-Z])/g, ' $1').trim().replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').replace(/\s+/g, ' ').replace(/^\w/, function (c) {
+      return c.toUpperCase();
+    });
   };
-  var renderRequirements = function renderRequirements() {
-    if (!item.minRequirements) return null;
-    return React.createElement(StyledCollapsible$2, {
-      title: "Requirements",
-      defaultOpen: !isMobile
-    }, React.createElement(RequirementsGrid, null, item.minRequirements.level && React.createElement(RequirementItem, null, React.createElement(Label$1, null, "Level:"), React.createElement(Value$1, null, item.minRequirements.level)), item.minRequirements.skill && React.createElement(RequirementItem, null, React.createElement(Label$1, null, item.minRequirements.skill.name, ":"), React.createElement(Value$1, null, item.minRequirements.skill.level))));
+  var formatRarity = function formatRarity(rarity) {
+    switch (rarity) {
+      case 0.5:
+        return 'Very Rare';
+      case 1:
+        return 'Rare';
+      case 10:
+        return 'Uncommon';
+      case 15:
+        return 'Semi Common';
+      case 20:
+        return 'Common';
+      case 35:
+        return 'Very Common';
+      default:
+        return 'Unknown';
+    }
   };
+  var filteredLoots = ((_npc$loots = npc.loots) == null ? void 0 : _npc$loots.filter(function (loot) {
+    return formatItemName(loot.itemBlueprintKey).toLowerCase().includes(lootSearchQuery.toLowerCase());
+  })) || [];
+  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);
   return React.createElement(BaseInformationDetails, {
-    name: item.name,
-    spriteKey: item.texturePath,
-    atlasJSON: itemsAtlasJSON,
-    atlasIMG: itemsAtlasIMG,
+    name: npc.name,
+    spriteKey: npc.key,
+    atlasJSON: entitiesAtlasJSON,
+    atlasIMG: entitiesAtlasIMG,
     onBack: onBack
-  }, React.createElement(InfoSection$1, null, React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Type:"), React.createElement(Value$1, null, item.type)), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Subtype:"), React.createElement(Value$1, null, item.subType)), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Tier:"), React.createElement(Value$1, null, item.tier)), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Rarity:"), React.createElement(Value$1, null, item.rarity)), renderAllowedSlots()), React.createElement(StyledCollapsible$2, {
-    title: "Description",
-    defaultOpen: !isMobile
-  }, React.createElement(Description$2, null, item.description || 'No description available.')), React.createElement(StyledCollapsible$2, {
+  }, React.createElement(InfoSection$1, null, React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Type:"), React.createElement(Value$1, null, formatText(npc.subType))), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Alignment:"), React.createElement(Value$1, null, formatText(npc.alignment))), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Attack Type:"), React.createElement(Value$1, null, formatText(npc.attackType))), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Range:"), React.createElement(Value$1, null, formatText(npc.maxRangeAttack))), React.createElement(InfoItem$1, null, React.createElement(Label$1, null, "Speed:"), React.createElement(Value$1, null, formatText(npc.speed)))), React.createElement(StyledCollapsible$1, {
     title: "Stats",
     defaultOpen: !isMobile
-  }, React.createElement(StatGrid$1, null, React.createElement(StatItem$2, null, "Weight: ", item.weight), React.createElement(StatItem$2, null, "Stack Size: ", item.maxStackSize), item.rangeType && React.createElement(StatItem$2, null, "Range Type: ", item.rangeType), item.basePrice > 0 && React.createElement(StatItem$2, null, "Base Price: ", item.basePrice))), renderRequirements(), item.entityEffects && item.entityEffects.length > 0 && React.createElement(StyledCollapsible$2, {
-    title: "Effects",
+  }, React.createElement(StatGrid$1, null, React.createElement(StatItem$2, null, "HP: ", npc.baseHealth), React.createElement(StatItem$2, null, "Level: ", npc.skills.level), ((_npc$skills$strength = npc.skills.strength) == null ? void 0 : _npc$skills$strength.level) && React.createElement(StatItem$2, null, "Strength: ", npc.skills.strength.level), ((_npc$skills$dexterity = npc.skills.dexterity) == null ? void 0 : _npc$skills$dexterity.level) && React.createElement(StatItem$2, null, "Dexterity: ", npc.skills.dexterity.level), ((_npc$skills$resistanc = npc.skills.resistance) == null ? void 0 : _npc$skills$resistanc.level) && React.createElement(StatItem$2, null, "Resistance: ", npc.skills.resistance.level))), npc.loots && npc.loots.length > 0 && React.createElement(StyledCollapsible$1, {
+    title: "Loot",
     defaultOpen: !isMobile
-  }, React.createElement(EffectsList$2, null, item.entityEffects.map(function (effect, index) {
-    return React.createElement(EffectItem$2, {
+  }, React.createElement(LootSearchContainer, null, React.createElement(StyledSearchBar$1, {
+    value: lootSearchQuery,
+    onChange: setLootSearchQuery,
+    placeholder: "Search loot..."
+  })), React.createElement(LootGrid, null, paginatedLoots.map(function (loot, index) {
+    return React.createElement(LootItem, {
       key: index
-    }, effect, item.entityEffectChance && React.createElement(EffectChance, null, "(", item.entityEffectChance, "%)"));
-  })), item.usableEffectDescription && React.createElement(EffectDescription, null, item.usableEffectDescription)), item.equippedBuff && item.equippedBuff.length > 0 && React.createElement(StyledCollapsible$2, {
-    title: "Equipped Buffs",
+    }, React.createElement(SpriteFromAtlas, {
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
+      spriteKey: loot.itemBlueprintKey,
+      width: 24,
+      height: 24,
+      imgScale: 1
+    }), React.createElement(LootDetails, null, React.createElement(LootName, null, formatItemName(loot.itemBlueprintKey)), React.createElement(LootInfo, null, React.createElement(LootChance, null, formatRarity(loot.chance)), loot.quantityRange && React.createElement(LootQuantity, null, "x", loot.quantityRange[0], "-", loot.quantityRange[1]))));
+  })), filteredLoots.length > ITEMS_PER_PAGE$1 && React.createElement(PaginationContainer$2, null, React.createElement(StyledPagination, {
+    currentPage: currentLootPage,
+    totalPages: totalLootPages,
+    onPageChange: setCurrentLootPage
+  }))), npc.entityEffects && npc.entityEffects.length > 0 && React.createElement(StyledCollapsible$1, {
+    title: "Effects",
     defaultOpen: !isMobile
-  }, React.createElement(BuffsList, null, item.equippedBuff.map(function (buff, index) {
-    return React.createElement(BuffItem, {
+  }, React.createElement(EffectsList$1, null, npc.entityEffects.map(function (effect, index) {
+    return React.createElement(EffectItem$1, {
       key: index
-    }, React.createElement(BuffName, null, buff.trait), React.createElement(BuffValue, null, "+", buff.buffPercentage, "%"));
-  })), item.equippedBuffDescription && React.createElement(BuffDescription, null, item.equippedBuffDescription)), droppedBy.length > 0 && React.createElement(StyledCollapsible$2, {
-    title: "Dropped By",
+    }, formatText(effect));
+  }))), npc.areaSpells && npc.areaSpells.length > 0 && React.createElement(StyledCollapsible$1, {
+    title: "Spells",
     defaultOpen: !isMobile
-  }, React.createElement(DropList, null, droppedBy.map(function (npc) {
-    var loot = npc.loots.find(function (l) {
-      return l.itemBlueprintKey === item.key;
-    });
-    return React.createElement(DropItem, {
-      key: npc.id
-    }, React.createElement(NPCName, null, npc.name), React.createElement(DropRate, null, loot == null ? void 0 : loot.chance, "%"));
+  }, React.createElement(SpellsList, null, npc.areaSpells.map(function (spell, index) {
+    return React.createElement(SpellItem, {
+      key: index
+    }, React.createElement(SpellIconContainer, null, React.createElement(SpriteFromAtlas, {
+      atlasJSON: iconAtlasJSON,
+      atlasIMG: iconAtlasIMG,
+      spriteKey: spell.texturePath || spell.spellKey,
+      width: 24,
+      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, "%"))));
   }))));
 };
 var InfoSection$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__InfoSection",
-  componentId: "sc-zwf6pb-0"
+  displayName: "InformationCenterNPCDetails__InfoSection",
+  componentId: "sc-fdu3xl-0"
 })(["display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;background:rgba(255,255,255,0.05);padding:12px;border-radius:4px;"]);
 var InfoItem$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__InfoItem",
-  componentId: "sc-zwf6pb-1"
+  displayName: "InformationCenterNPCDetails__InfoItem",
+  componentId: "sc-fdu3xl-1"
 })(["display:flex;align-items:center;gap:8px;"]);
 var Label$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__Label",
-  componentId: "sc-zwf6pb-2"
+  displayName: "InformationCenterNPCDetails__Label",
+  componentId: "sc-fdu3xl-2"
 })(["color:", ";font-size:0.5rem;opacity:0.8;"], uiColors.yellow);
 var Value$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__Value",
-  componentId: "sc-zwf6pb-3"
+  displayName: "InformationCenterNPCDetails__Value",
+  componentId: "sc-fdu3xl-3"
 })(["color:", ";font-size:0.5rem;"], uiColors.white);
-var StyledCollapsible$2 = /*#__PURE__*/styled(Collapsible).withConfig({
-  displayName: "InformationCenterItemDetails__StyledCollapsible",
-  componentId: "sc-zwf6pb-4"
+var StyledCollapsible$1 = /*#__PURE__*/styled(Collapsible).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledCollapsible",
+  componentId: "sc-fdu3xl-4"
 })(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden;"]);
-var Description$2 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "InformationCenterItemDetails__Description",
-  componentId: "sc-zwf6pb-5"
-})(["color:", ";font-size:0.5rem;margin:0;padding:12px;line-height:1.5;"], uiColors.white);
 var StatGrid$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__StatGrid",
-  componentId: "sc-zwf6pb-6"
+  displayName: "InformationCenterNPCDetails__StatGrid",
+  componentId: "sc-fdu3xl-5"
 })(["display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px;"]);
 var StatItem$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__StatItem",
-  componentId: "sc-zwf6pb-7"
+  displayName: "InformationCenterNPCDetails__StatItem",
+  componentId: "sc-fdu3xl-6"
 })(["color:", ";font-size:0.5rem;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"], uiColors.white);
-var EffectsList$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__EffectsList",
-  componentId: "sc-zwf6pb-8"
+var EffectsList$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__EffectsList",
+  componentId: "sc-fdu3xl-7"
 })(["display:flex;flex-wrap:wrap;gap:8px;padding:12px;"]);
-var EffectItem$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__EffectItem",
-  componentId: "sc-zwf6pb-9"
-})(["display:flex;align-items:center;gap:4px;color:", ";font-size:0.5rem;background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;"], uiColors.white);
-var EffectChance = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__EffectChance",
-  componentId: "sc-zwf6pb-10"
-})(["color:", ";opacity:0.8;"], uiColors.yellow);
-var BuffsList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__BuffsList",
-  componentId: "sc-zwf6pb-11"
+var EffectItem$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__EffectItem",
+  componentId: "sc-fdu3xl-8"
+})(["color:", ";font-size:0.5rem;background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;"], uiColors.white);
+var SpellsList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellsList",
+  componentId: "sc-fdu3xl-9"
 })(["display:flex;flex-direction:column;gap:8px;padding:12px;"]);
-var BuffItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__BuffItem",
-  componentId: "sc-zwf6pb-12"
-})(["display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
-var BuffName = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__BuffName",
-  componentId: "sc-zwf6pb-13"
-})(["color:", ";font-size:0.5rem;"], uiColors.white);
-var BuffValue = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__BuffValue",
-  componentId: "sc-zwf6pb-14"
-})(["color:", ";font-size:0.5rem;"], uiColors.yellow);
-var BuffDescription = /*#__PURE__*/styled.p.withConfig({
-  displayName: "InformationCenterItemDetails__BuffDescription",
-  componentId: "sc-zwf6pb-15"
-})(["color:", ";font-size:0.45rem;margin:0;padding:0 12px 12px;font-style:italic;"], uiColors.lightGray);
-var DropList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__DropList",
-  componentId: "sc-zwf6pb-16"
-})(["display:flex;flex-direction:column;gap:0.5rem;padding:12px;"]);
-var DropItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__DropItem",
-  componentId: "sc-zwf6pb-17"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:rgba(255,255,255,0.05);border-radius:4px;"]);
-var NPCName = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__NPCName",
-  componentId: "sc-zwf6pb-18"
-})(["color:", ";font-size:0.5rem;"], uiColors.white);
-var DropRate = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemDetails__DropRate",
-  componentId: "sc-zwf6pb-19"
+var SpellIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellIconContainer",
+  componentId: "sc-fdu3xl-10"
+})(["display:flex;padding-right:30px;padding-bottom:30px;"]);
+var SpellContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellContent",
+  componentId: "sc-fdu3xl-11"
+})(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
+var SpellItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellItem",
+  componentId: "sc-fdu3xl-12"
+})(["display:flex;gap:8px;background:rgba(255,255,255,0.05);padding:8px;padding-left:10px;border-radius:4px;align-items:center;"]);
+var SpellName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellName",
+  componentId: "sc-fdu3xl-13"
 })(["color:", ";font-size:0.5rem;"], uiColors.yellow);
-var RequirementsGrid = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__RequirementsGrid",
-  componentId: "sc-zwf6pb-20"
-})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px;"]);
-var RequirementItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemDetails__RequirementItem",
-  componentId: "sc-zwf6pb-21"
+var SpellDetails = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellDetails",
+  componentId: "sc-fdu3xl-14"
+})(["display:flex;align-items:center;gap:8px;color:", ";font-size:0.45rem;opacity:0.8;"], uiColors.white);
+var SpellValue = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellValue",
+  componentId: "sc-fdu3xl-15"
+})(["color:", ";"], uiColors.yellow);
+var Separator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__Separator",
+  componentId: "sc-fdu3xl-16"
+})(["color:", ";opacity:0.5;"], uiColors.yellow);
+var LootSearchContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootSearchContainer",
+  componentId: "sc-fdu3xl-17"
+})(["padding:12px 12px 0;"]);
+var StyledSearchBar$1 = /*#__PURE__*/styled(SearchBar).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledSearchBar",
+  componentId: "sc-fdu3xl-18"
+})(["width:100%;"]);
+var LootGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootGrid",
+  componentId: "sc-fdu3xl-19"
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:12px;"]);
+var LootItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootItem",
+  componentId: "sc-fdu3xl-20"
 })(["display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
-var EffectDescription = /*#__PURE__*/styled.p.withConfig({
-  displayName: "InformationCenterItemDetails__EffectDescription",
-  componentId: "sc-zwf6pb-22"
-})(["color:", ";font-size:0.45rem;margin:8px 0 0;padding:0 12px;font-style:italic;"], uiColors.lightGray);
-
-var ItemHeader$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemTooltip__ItemHeader",
-  componentId: "sc-1ecf9mj-0"
+var LootDetails = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootDetails",
+  componentId: "sc-fdu3xl-21"
+})(["flex:1;display:flex;flex-direction:column;gap:4px;"]);
+var LootName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootName",
+  componentId: "sc-fdu3xl-22"
+})(["color:", ";font-size:0.5rem;"], uiColors.white);
+var LootInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootInfo",
+  componentId: "sc-fdu3xl-23"
 })(["display:flex;align-items:center;gap:8px;"]);
-var Description$3 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemTooltip__Description",
-  componentId: "sc-1ecf9mj-1"
-})(["color:", ";font-size:0.5rem;line-height:1.4;margin-top:8px;opacity:0.8;"], uiColors.white);
-var RarityText = /*#__PURE__*/styled.span.withConfig({
-  displayName: "InformationCenterItemTooltip__RarityText",
-  componentId: "sc-1ecf9mj-2"
-})(["color:", ";font-size:0.5rem;"], function (props) {
-  switch (props.rarity.toLowerCase()) {
-    case 'legendary':
-      return '#ff8c00';
-    case 'rare':
-      return '#0070dd';
-    case 'uncommon':
-      return '#1eff00';
+var LootChance = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__LootChance",
+  componentId: "sc-fdu3xl-24"
+})(["color:", ";font-size:0.45rem;"], uiColors.yellow);
+var LootQuantity = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__LootQuantity",
+  componentId: "sc-fdu3xl-25"
+})(["color:", ";font-size:0.45rem;"], uiColors.lightGray);
+var PaginationContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__PaginationContainer",
+  componentId: "sc-fdu3xl-26"
+})(["display:flex;justify-content:center;padding:12px;"]);
+var StyledPagination = /*#__PURE__*/styled(Pagination).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledPagination",
+  componentId: "sc-fdu3xl-27"
+})(["font-size:0.6rem;"]);
+
+var EffectsList$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__EffectsList",
+  componentId: "sc-j2o39s-0"
+})(["display:flex;gap:8px;flex-wrap:wrap;"]);
+var EffectItem$2 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCTooltip__EffectItem",
+  componentId: "sc-j2o39s-1"
+})(["font-size:0.5rem;color:", ";background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;"], uiColors.white);
+var SpellList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__SpellList",
+  componentId: "sc-j2o39s-2"
+})(["display:flex;flex-direction:column;gap:2px;"]);
+var SpellItem$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__SpellItem",
+  componentId: "sc-j2o39s-3"
+})(["display:flex;align-items:center;justify-content:space-between;font-size:0.5rem;color:", ";background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px;"], uiColors.white);
+var SpellInfo = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCTooltip__SpellInfo",
+  componentId: "sc-j2o39s-4"
+})(["color:", ";margin-left:8px;opacity:0.8;"], uiColors.yellow);
+var LootList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__LootList",
+  componentId: "sc-j2o39s-5"
+})(["display:flex;flex-direction:column;gap:2px;"]);
+var LootItem$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__LootItem",
+  componentId: "sc-j2o39s-6"
+})(["display:flex;align-items:center;gap:4px;font-size:0.5rem;background:rgba(255,255,255,0.05);padding:4px 6px;border-radius:4px;.sprite-from-atlas-img{top:0px;left:0px;}"]);
+var LootName$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCTooltip__LootName",
+  componentId: "sc-j2o39s-7"
+})(["color:", ";flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:4px;"], uiColors.white);
+var LootChance$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCTooltip__LootChance",
+  componentId: "sc-j2o39s-8"
+})(["color:", ";font-size:0.45rem;text-transform:lowercase;opacity:0.8;"], uiColors.yellow);
+var MoreIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCTooltip__MoreIndicator",
+  componentId: "sc-j2o39s-9"
+})(["color:", ";font-size:0.45rem;text-align:center;margin-top:2px;opacity:0.7;"], uiColors.yellow);
+var formatText = function formatText(text) {
+  if (typeof text === 'number') {
+    return text.toString();
+  }
+  return text.toString().replace(/([A-Z])/g, ' $1').trim().replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').replace(/\s+/g, ' ');
+};
+var formatRarity = function formatRarity(rarity) {
+  switch (rarity) {
+    case 0.5:
+      return 'Very Rare';
+    case 1:
+      return 'Rare';
+    case 10:
+      return 'Uncommon';
+    case 15:
+      return 'Semi Common';
+    case 20:
+      return 'Common';
+    case 35:
+      return 'Very Common';
     default:
-      return '#ffffff';
+      return 'Unknown';
   }
-});
-var InformationCenterItemTooltip = function InformationCenterItemTooltip(_ref) {
-  var item = _ref.item;
-  return React.createElement(BaseTooltip, null, React.createElement(ItemHeader$1, null, React.createElement(TooltipTitle$1, null, item.name)), React.createElement(Description$3, null, item.description), React.createElement(Section, null, React.createElement(SectionTitle, null, "Details"), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "Type: ", item.type), React.createElement(StatItem$1, null, "Weight: ", item.weight), item.attack !== undefined && React.createElement(StatItem$1, null, "Attack: ", item.attack), item.defense !== undefined && React.createElement(StatItem$1, null, "Defense: ", item.defense), item.tier !== undefined && React.createElement(StatItem$1, null, "Tier: ", item.tier), item.rangeType && React.createElement(StatItem$1, null, "Range: ", item.rangeType))), React.createElement(Section, null, React.createElement(SectionTitle, null, "Market"), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "Price: ", item.basePrice), item.rarity && React.createElement(StatItem$1, null, "Rarity:", ' ', React.createElement(RarityText, {
-    rarity: item.rarity
-  }, item.rarity)))));
+};
+var InformationCenterNPCTooltip = function InformationCenterNPCTooltip(_ref) {
+  var _npc$skills$strength, _npc$skills$dexterity, _npc$skills$resistanc;
+  var npc = _ref.npc,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG;
+  return React.createElement(BaseTooltip, null, React.createElement(TooltipTitle$1, null, npc.name), React.createElement(StatsContainer, null, React.createElement(StatItem$1, null, "HP: ", npc.baseHealth), React.createElement(StatItem$1, null, "LVL: ", npc.skills.level), React.createElement(StatItem$1, null, "STR: ", ((_npc$skills$strength = npc.skills.strength) == null ? void 0 : _npc$skills$strength.level) || '-'), React.createElement(StatItem$1, null, "DEX: ", ((_npc$skills$dexterity = npc.skills.dexterity) == null ? void 0 : _npc$skills$dexterity.level) || '-'), React.createElement(StatItem$1, null, "RES: ", ((_npc$skills$resistanc = npc.skills.resistance) == null ? void 0 : _npc$skills$resistanc.level) || '-'), React.createElement(StatItem$1, null, "SPD: ", formatText(npc.speed))), npc.entityEffects && npc.entityEffects.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Effects"), React.createElement(EffectsList$2, null, npc.entityEffects.map(function (effect) {
+    return React.createElement(EffectItem$2, {
+      key: effect
+    }, formatText(effect));
+  }))), npc.areaSpells && npc.areaSpells.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Spells"), React.createElement(SpellList, null, npc.areaSpells.map(function (spell) {
+    return React.createElement(SpellItem$1, {
+      key: spell.spellKey
+    }, formatText(spell.spellKey), React.createElement(SpellInfo, null, formatText(spell.power), ", ", spell.probability, "%"));
+  }))), npc.loots && npc.loots.length > 0 && React.createElement(Section, null, React.createElement(SectionTitle, null, "Possible Loot"), React.createElement(LootList, null, npc.loots.slice(0, 4).map(function (loot) {
+    return React.createElement(LootItem$1, {
+      key: loot.itemBlueprintKey
+    }, React.createElement(SpriteFromAtlas, {
+      atlasIMG: itemsAtlasIMG,
+      atlasJSON: itemsAtlasJSON,
+      spriteKey: loot.itemBlueprintKey,
+      imgScale: 1
+    }), React.createElement(LootName$1, null, formatItemName(loot.itemBlueprintKey)), React.createElement(LootChance$1, null, formatRarity(loot.chance)));
+  }), npc.loots.length > 4 && React.createElement(MoreIndicator, null, "..."))));
 };
 
-var TOOLTIP_OFFSET = 20;
-var InformationCenterItemsSection = function InformationCenterItemsSection(_ref) {
-  var items = _ref.items,
-    bestiaryItems = _ref.bestiaryItems,
+var InformationCenterBestiarySection = function InformationCenterBestiarySection(_ref) {
+  var bestiaryItems = _ref.bestiaryItems,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
     itemsAtlasIMG = _ref.itemsAtlasIMG,
+    iconsAtlasIMG = _ref.iconsAtlasIMG,
+    iconsAtlasJSON = _ref.iconsAtlasJSON,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
   var _useState = useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
-  var _useState2 = useState('all'),
-    selectedItemCategory = _useState2[0],
-    setSelectedItemCategory = _useState2[1];
+  var _useState2 = useState(null),
+    tooltipData = _useState2[0],
+    setTooltipData = _useState2[1];
   var _useState3 = useState(null),
-    hoveredItem = _useState3[0],
-    setHoveredItem = _useState3[1];
-  var _useState4 = useState({
-      x: 0,
-      y: 0
-    }),
-    tooltipPosition = _useState4[0],
-    setTooltipPosition = _useState4[1];
-  var _useState5 = useState(null),
-    selectedItem = _useState5[0],
-    setSelectedItem = _useState5[1];
-  var itemCategoryOptions = [{
-    id: 0,
-    value: 'all',
-    option: 'All Items'
-  }, {
-    id: 1,
-    value: ItemType.Consumable,
-    option: 'Consumables'
-  }, {
-    id: 2,
-    value: ItemType.Weapon,
-    option: 'Weapons'
-  }, {
-    id: 3,
-    value: ItemType.Armor,
-    option: 'Armor'
-  }];
-  var filteredItems = items.filter(function (item) {
-    return (selectedItemCategory === 'all' || item.type === selectedItemCategory) && item.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
-  var getDroppedByNPCs = function getDroppedByNPCs(itemId, npcs) {
-    return npcs.filter(function (npc) {
-      var _npc$loots;
-      return (_npc$loots = npc.loots) == null ? void 0 : _npc$loots.some(function (loot) {
-        return loot.itemBlueprintKey === itemId;
-      });
-    }) || [];
-  };
-  var handleMouseEnter = function handleMouseEnter(e, item) {
-    setTooltipPosition({
-      x: e.clientX + TOOLTIP_OFFSET,
-      y: e.clientY
-    });
-    setHoveredItem(item);
-  };
-  var handleMouseMove = function handleMouseMove(e) {
-    if (hoveredItem) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY
+    selectedMonster = _useState3[0],
+    setSelectedMonster = _useState3[1];
+  var _useState4 = useState('ontouchstart' in window),
+    isTouchDevice = _useState4[0];
+  var handleMouseEnter = function handleMouseEnter(monster, event) {
+    if (!isTouchDevice && !selectedMonster) {
+      setTooltipData({
+        npc: monster,
+        position: {
+          x: event.clientX,
+          y: event.clientY
+        }
       });
     }
   };
   var handleMouseLeave = function handleMouseLeave() {
-    setHoveredItem(null);
+    if (!isTouchDevice) {
+      setTooltipData(null);
+    }
   };
-  var handleTouchStart = function handleTouchStart(e, item) {
-    var touch = e.touches[0];
-    setTooltipPosition({
-      x: touch.clientX + TOOLTIP_OFFSET,
-      y: touch.clientY
-    });
-    setHoveredItem(item);
+  var handleMouseMove = function handleMouseMove(event) {
+    if (!isTouchDevice && tooltipData) {
+      setTooltipData(_extends({}, tooltipData, {
+        position: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      }));
+    }
   };
-  var handleItemClick = function handleItemClick(item) {
-    setSelectedItem(item);
-    setHoveredItem(null);
+  var handleTouchStart = function handleTouchStart(monster, event) {
+    if (isTouchDevice) {
+      event.preventDefault();
+      var touch = event.touches[0];
+      if ((tooltipData == null ? void 0 : tooltipData.npc.id) === monster.id) {
+        setTooltipData(null);
+      } else {
+        setTooltipData({
+          npc: monster,
+          position: {
+            x: touch.clientX,
+            y: touch.clientY
+          }
+        });
+      }
+    }
+  };
+  var handleMonsterClick = function handleMonsterClick(monster) {
+    setSelectedMonster(monster);
+    setTooltipData(null);
   };
+  var _useState5 = useState('all'),
+    selectedBestiaryCategory = _useState5[0],
+    setSelectedBestiaryCategory = _useState5[1];
+  var bestiaryCategoryOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Monsters'
+  }, {
+    id: 1,
+    value: 'bosses',
+    option: 'Bosses'
+  }].concat(Object.entries(NPCAlignment).map(function (_ref2, index) {
+    var value = _ref2[1];
+    return {
+      id: index + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }));
   var renderItem = function renderItem(item) {
     return React.createElement(InformationCenterCell, {
-      key: item.key,
+      key: item.id,
       name: item.name,
-      spriteKey: item.texturePath,
-      atlasJSON: itemsAtlasJSON,
-      atlasIMG: itemsAtlasIMG,
+      spriteKey: item.key,
+      atlasJSON: entitiesAtlasJSON,
+      atlasIMG: entitiesAtlasIMG,
+      onClick: function onClick() {
+        return handleMonsterClick(item);
+      },
       onMouseEnter: function onMouseEnter(e) {
-        return handleMouseEnter(e, item);
+        return handleMouseEnter(item, e);
       },
-      onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
       onTouchStart: function onTouchStart(e) {
-        return handleTouchStart(e, item);
-      },
-      onClick: function onClick() {
-        return handleItemClick(item);
+        return handleTouchStart(item, e);
+      }
+    });
+  };
+  var filteredItems = useMemo(function () {
+    return bestiaryItems.filter(function (item) {
+      var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = true;
+      if (selectedBestiaryCategory === 'bosses') {
+        matchesCategory = item.isBoss === true;
+      } else if (selectedBestiaryCategory === NPCAlignment.Hostile) {
+        matchesCategory = item.alignment === NPCAlignment.Hostile && !item.isBoss;
+      } else if (selectedBestiaryCategory !== 'all') {
+        matchesCategory = item.alignment === selectedBestiaryCategory;
       }
+      return matchesSearch && matchesCategory;
     });
+  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+  var handleSearchChange = function handleSearchChange(newQuery) {
+    setSearchQuery(newQuery);
+    if (newQuery && selectedBestiaryCategory !== 'all') {
+      setSelectedBestiaryCategory('all');
+    }
   };
   return React.createElement(React.Fragment, null, React.createElement(PaginatedContent, {
     items: filteredItems,
     renderItem: renderItem,
-    emptyMessage: "No items found",
+    emptyMessage: "No monsters found",
+    tabId: tabId,
+    layout: "grid",
     filterOptions: {
-      options: itemCategoryOptions,
-      selectedOption: selectedItemCategory,
-      onOptionChange: setSelectedItemCategory
+      options: bestiaryCategoryOptions,
+      selectedOption: selectedBestiaryCategory,
+      onOptionChange: setSelectedBestiaryCategory
     },
     searchOptions: {
       value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search items...'
+      onChange: handleSearchChange,
+      placeholder: 'Search monsters...'
     },
-    dependencies: [selectedItemCategory],
-    tabId: tabId,
-    layout: "grid",
+    dependencies: [selectedBestiaryCategory],
     itemHeight: "180px"
-  }), hoveredItem && React.createElement(TooltipWrapper$1, {
+  }), tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper$1, {
     style: {
-      top: tooltipPosition.y,
-      left: tooltipPosition.x
+      position: 'fixed',
+      left: tooltipData.position.x + 10,
+      top: tooltipData.position.y + 10
     }
-  }, React.createElement(InformationCenterItemTooltip, {
-    item: hoveredItem
-  })), selectedItem && React.createElement(InformationCenterItemDetails, {
-    item: selectedItem,
+  }, React.createElement(InformationCenterNPCTooltip, {
+    npc: tooltipData.npc,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG
+  }))), selectedMonster && React.createElement(InformationCenterNPCDetails, {
+    npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
-    droppedBy: getDroppedByNPCs(selectedItem.key, bestiaryItems),
+    iconAtlasIMG: iconsAtlasIMG,
+    iconAtlasJSON: iconsAtlasJSON,
+    entitiesAtlasJSON: entitiesAtlasJSON,
+    entitiesAtlasIMG: entitiesAtlasIMG,
     onBack: function onBack() {
-      return setSelectedItem(null);
+      return setSelectedMonster(null);
     }
   }));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InformationCenterItemsSection__TooltipWrapper",
-  componentId: "sc-1wmpapt-0"
-})(["position:fixed;z-index:1000;pointer-events:none;transition:transform 0.1s ease;"]);
+  displayName: "InformationCenterBestiarySection__TooltipWrapper",
+  componentId: "sc-e3h0p2-0"
+})(["position:fixed;z-index:1000;pointer-events:none;width:300px;"]);
+
+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$q, 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$q = /*#__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) {
   var videoGuides = _ref.videoGuides,
     initialSearchQuery = _ref.initialSearchQuery,
@@ -32038,84 +32104,119 @@ var InformationCenterTutorialsSection = function InformationCenterTutorialsSecti
   var _useState2 = useState('all'),
     selectedCategory = _useState2[0],
     setSelectedCategory = _useState2[1];
+  var _useState3 = useState(1),
+    setCurrentPage = _useState3[1];
+  var getYouTubeThumbnail = function getYouTubeThumbnail(videoUrl) {
+    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    var match = videoUrl.match(regExp);
+    var videoId = match && match[2].length === 11 ? match[2] : null;
+    return videoId ? "https://img.youtube.com/vi/" + videoId + "/hqdefault.jpg" : '/placeholder-thumbnail.png';
+  };
   var categoryOptions = [{
     id: 0,
     value: 'all',
-    option: 'All'
-  }, {
-    id: 1,
-    value: 'Combat',
-    option: 'Combat'
-  }, {
-    id: 2,
-    value: 'Crafting',
-    option: 'Crafting'
-  }, {
-    id: 3,
-    value: 'Exploration',
-    option: 'Exploration'
-  }, {
-    id: 4,
-    value: 'General',
-    option: 'General'
-  }];
+    option: 'All Categories'
+  }].concat(VideoGuideCategory ? Object.entries(VideoGuideCategory).map(function (_ref2, index) {
+    var value = _ref2[1];
+    return {
+      id: index + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }) : [], VideoGuideLanguage ? Object.entries(VideoGuideLanguage).map(function (_ref3, index) {
+    var value = _ref3[1];
+    return {
+      id: index + (VideoGuideCategory ? Object.entries(VideoGuideCategory).length : 0) + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }) : []);
+  var handleVideoClick = function handleVideoClick(videoUrl) {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer');
+  };
   var renderItem = function renderItem(guide) {
     return React.createElement(GuideItem, {
-      key: guide.id
+      key: guide.id,
+      onClick: function onClick() {
+        return handleVideoClick(guide.videoUrl);
+      }
     }, React.createElement(GuideThumbnail, null, React.createElement("img", {
-      src: guide.thumbnailUrl || '/placeholder-thumbnail.png',
+      src: guide.localImage || getYouTubeThumbnail(guide.videoUrl),
       alt: guide.title
-    })), React.createElement(GuideContent, null, React.createElement(GuideTitle, null, guide.title), React.createElement(GuideDescription, null, guide.description), React.createElement(GuideCategory, null, guide.category)));
+    })), React.createElement(GuideContent, null, React.createElement(GuideTitle, null, guide.title), React.createElement(GuideDescription, null, guide.description), React.createElement(GuideLabelsContainer, null, React.createElement(GuideCategory, null, guide.category), React.createElement(GuideLanguage, null, guide.language))));
+  };
+  var filteredGuides = useMemo(function () {
+    return videoGuides.filter(function (guide) {
+      var matchesSearch = guide.title.toLowerCase().includes(searchQuery.toLowerCase()) || guide.description.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = selectedCategory === 'all' || Object.values(VideoGuideCategory).includes(selectedCategory) && guide.category === selectedCategory || Object.values(VideoGuideLanguage).includes(selectedCategory) && guide.language === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [videoGuides, searchQuery, selectedCategory]);
+  var handleSearchChange = function handleSearchChange(newQuery) {
+    setSearchQuery(newQuery);
+    setCurrentPage(1);
+    if (newQuery && selectedCategory !== 'all') {
+      setSelectedCategory('all');
+    }
+  };
+  var handleCategoryChange = function handleCategoryChange(category) {
+    setSelectedCategory(category);
+    setCurrentPage(1);
   };
-  var filteredGuides = videoGuides.filter(function (guide) {
-    return (selectedCategory === 'all' || guide.category === selectedCategory) && (guide.title.toLowerCase().includes(searchQuery.toLowerCase()) || guide.description.toLowerCase().includes(searchQuery.toLowerCase()));
-  });
   return React.createElement(PaginatedContent, {
     items: filteredGuides,
     renderItem: renderItem,
     emptyMessage: "No guides found",
     searchOptions: {
       value: searchQuery,
-      onChange: setSearchQuery,
+      onChange: handleSearchChange,
       placeholder: 'Search guides...'
     },
     filterOptions: {
       options: categoryOptions,
       selectedOption: selectedCategory,
-      onOptionChange: setSelectedCategory
+      onOptionChange: handleCategoryChange
     },
     dependencies: [selectedCategory],
     tabId: tabId,
     layout: "grid",
-    gridColumns: 3,
-    itemsPerPage: 3,
-    itemHeight: "400px"
+    gridColumns: GRID_COLUMNS,
+    itemsPerPage: ITEMS_PER_PAGE$2,
+    itemHeight: "320px"
   });
 };
 var GuideItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideItem",
   componentId: "sc-1gk05vk-0"
-})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";cursor:pointer;transition:transform 0.2s ease;height:100%;&:hover{transform:translateY(-2px);}"], uiColors.darkGray);
+})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";cursor:pointer;transition:transform 0.2s ease;display:flex;flex-direction:column;height:100%;padding:0;&:hover{transform:translateY(-2px);}"], uiColors.darkGray);
 var GuideThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideThumbnail",
   componentId: "sc-1gk05vk-1"
-})(["width:100%;height:168px;background:rgba(0,0,0,0.2);overflow:hidden;img{width:100%;height:100%;object-fit:cover;}font-size:0.8rem;line-height:1.8;"]);
+})(["width:100%;height:168px;background:rgba(0,0,0,0.2);overflow:hidden;img{width:100%;height:100%;object-fit:cover;}"]);
 var GuideContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideContent",
   componentId: "sc-1gk05vk-2"
-})(["padding:12px;"]);
+})(["padding:0 12px 12px;flex:1;display:flex;flex-direction:column;"]);
 var GuideTitle = /*#__PURE__*/styled.h3.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideTitle",
   componentId: "sc-1gk05vk-3"
-})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;margin-bottom:8px;"], uiColors.yellow);
+})(["margin:0;font-size:0.6rem !important;color:", ";font-family:'Press Start 2P',cursive;margin-bottom:5px;"], uiColors.yellow);
 var GuideDescription = /*#__PURE__*/styled.p.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideDescription",
   componentId: "sc-1gk05vk-4"
-})(["margin:0;font-size:0.55rem;color:", ";font-family:'Press Start 2P',cursive;margin-bottom:8px;line-height:1.4;"], uiColors.lightGray);
-var GuideCategory = /*#__PURE__*/styled.span.withConfig({
+})(["margin:0;font-size:0.5rem !important;color:", ";text-align:center;font-family:'Press Start 2P',cursive;margin-bottom:8px;line-height:1.4;"], uiColors.lightGray);
+var GuideCategory = /*#__PURE__*/styled.label.withConfig({
   displayName: "InformationCenterTutorialsSection__GuideCategory",
   componentId: "sc-1gk05vk-5"
-})(["font-size:0.5rem;color:", ";font-family:'Press Start 2P',cursive;background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;"], uiColors.yellow);
+})(["font-size:0.5rem !important;font-family:'Press Start 2P',cursive;color:", " !important;line-height:1.4;&::before{content:'\uD83C\uDFF7\uFE0F';padding-right:6px;font-size:0.7rem;transform:translateY(-2px);display:inline-block;}"], uiColors.yellow);
+var GuideLanguage = /*#__PURE__*/styled.label.withConfig({
+  displayName: "InformationCenterTutorialsSection__GuideLanguage",
+  componentId: "sc-1gk05vk-6"
+})(["font-size:0.5rem !important;font-family:'Press Start 2P',cursive;color:", " !important;line-height:1.4;&::before{content:'\uD83C\uDF10';padding-right:6px;font-size:0.6rem;transform:translateY(-2px);display:inline-block;}"], uiColors.blue);
+var GuideLabelsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterTutorialsSection__GuideLabelsContainer",
+  componentId: "sc-1gk05vk-7"
+})(["display:flex;justify-content:space-between;padding:0 6px 6px;"]);
 
 var InformationCenter = function InformationCenter(_ref) {
   var itemsAtlasJSON = _ref.itemsAtlasJSON,