@rpg-engine/long-bow 0.8.30 → 0.8.32

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

@@ -21,8 +21,8 @@ var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
-var reactColorful = require('react-colorful');
 var ai = require('react-icons/ai');
+var reactColorful = require('react-colorful');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
 var capitalize = _interopDefault(require('lodash/capitalize'));
@@ -27525,284 +27525,6 @@ function useTouchTarget() {
   return getTouchTarget;
 }
 
-var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
-  var contextMenu = actionsByTypeList.map(function (action) {
-    return {
-      id: action,
-      text: shared.ItemSocketEventsDisplayLabels[action]
-    };
-  });
-  return contextMenu;
-};
-var generateContextMenu = function generateContextMenu(item, itemContainerType, isDepotSystem) {
-  var contextActionMenu = [];
-  if (itemContainerType === shared.ItemContainerType.Inventory) {
-    switch (item.type) {
-      case shared.ItemType.Weapon:
-      case shared.ItemType.Armor:
-      case shared.ItemType.Accessory:
-      case shared.ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Equipment);
-        break;
-      case shared.ItemType.Container:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Container);
-        break;
-      case shared.ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Consumable);
-        break;
-      case shared.ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.CraftingResource);
-        break;
-      case shared.ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Tool);
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Other);
-        break;
-    }
-    if (isDepotSystem) {
-      contextActionMenu.push({
-        id: shared.DepotSocketEvents.Deposit,
-        text: 'Deposit'
-      });
-    }
-    var contextActionMenuDontHaveUseWith = !contextActionMenu.find(function (action) {
-      return action.text.toLowerCase().includes('use with');
-    });
-    if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
-      contextActionMenu.push({
-        id: shared.ItemSocketEvents.UseWith,
-        text: shared.ItemSocketEvents.UseWith
-      });
-    }
-  }
-  if (itemContainerType === shared.ItemContainerType.Equipment) {
-    switch (item.type) {
-      case shared.ItemType.Container:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForEquipmentSet.Container);
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForEquipmentSet.Equipment);
-    }
-  }
-  if (itemContainerType === shared.ItemContainerType.Loot) {
-    switch (item.type) {
-      case shared.ItemType.Weapon:
-      case shared.ItemType.Armor:
-      case shared.ItemType.Accessory:
-      case shared.ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Equipment);
-        break;
-      case shared.ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Consumable);
-        break;
-      case shared.ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.CraftingResource);
-        break;
-      case shared.ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Tool);
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Other);
-        break;
-    }
-  }
-  if (itemContainerType === shared.ItemContainerType.MapContainer) {
-    switch (item.type) {
-      case shared.ItemType.Weapon:
-      case shared.ItemType.Armor:
-      case shared.ItemType.Accessory:
-      case shared.ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Equipment);
-        break;
-      case shared.ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Consumable);
-        break;
-      case shared.ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.CraftingResource);
-        break;
-      case shared.ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Tool);
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Other);
-        break;
-    }
-    var _contextActionMenuDontHaveUseWith = !contextActionMenu.find(function (action) {
-      return action.text.toLowerCase().includes('use with');
-    });
-    if (item.hasUseWith && _contextActionMenuDontHaveUseWith) {
-      contextActionMenu.push({
-        id: 'use-with',
-        text: 'Use with...'
-      });
-    }
-  }
-  if (itemContainerType === shared.ItemContainerType.Depot) {
-    contextActionMenu = [{
-      id: shared.ItemSocketEvents.GetItemInfo,
-      text: shared.ItemSocketEventsDisplayLabels.GetItemInfo
-    }, {
-      id: shared.DepotSocketEvents.Withdraw,
-      text: 'Withdraw'
-    }];
-  }
-  if (item.type && item.type === shared.ItemType.Container) {
-    var existInContextAction = contextActionMenu.some(function (item) {
-      return item.text === shared.DepotSocketEvents.OpenContainer || item.id === shared.ItemSocketEvents.ContainerOpen || item.text === 'Open';
-    });
-    if (!existInContextAction) {
-      contextActionMenu.push({
-        id: shared.DepotSocketEvents.OpenContainer,
-        text: 'Open'
-      });
-    }
-    if (itemContainerType === shared.ItemContainerType.Inventory) {
-      if (item.textureAtlas === 'items' && item.type === shared.ItemType.Container) {
-        contextActionMenu.push({
-          id: shared.ItemSocketEvents.ItemPropertyUpdate,
-          text: 'Set Color...'
-        });
-      }
-    }
-  }
-  if (item.attachedGems && item.attachedGems.length > 0) {
-    contextActionMenu.push({
-      id: shared.ItemSocketEvents.DetachGem,
-      text: "Detach Gems"
-    });
-  }
-  return contextActionMenu;
-};
-
-var initialDetailsState = {
-  item: null,
-  isTooltipVisible: false,
-  isTooltipMobileVisible: false,
-  isContextMenuVisible: false,
-  contextMenuPosition: {
-    x: 0,
-    y: 0
-  },
-  contextActions: [],
-  clearContextActions: function clearContextActions() {},
-  clearDetailsState: function clearDetailsState() {}
-};
-var ItemSlotDetailsContext = /*#__PURE__*/React.createContext({
-  detailsState: initialDetailsState,
-  updateDetailsState: function updateDetailsState() {},
-  clearDetailsState: function clearDetailsState() {},
-  setContextActions: function setContextActions() {},
-  clearContextActions: function clearContextActions() {}
-});
-var useItemSlotDetails = function useItemSlotDetails() {
-  return React.useContext(ItemSlotDetailsContext);
-};
-var ItemSlotDetailsProvider = function ItemSlotDetailsProvider(_ref) {
-  var children = _ref.children;
-  var _useState = React.useState(initialDetailsState),
-    detailsState = _useState[0],
-    setDetailsState = _useState[1];
-  var updateDetailsState = React.useCallback(function (newState) {
-    setDetailsState(function (prevState) {
-      return _extends({}, prevState, newState);
-    });
-  }, []);
-  var clearDetailsState = React.useCallback(function () {
-    setDetailsState(initialDetailsState);
-  }, [setDetailsState]);
-  var setContextActions = React.useCallback(function (item, containerType, isDepotSystem, isContextMenuDisabled) {
-    if (item && containerType && !isContextMenuDisabled) {
-      var newContextActions = generateContextMenu(item, containerType, isDepotSystem);
-      updateDetailsState({
-        contextActions: newContextActions
-      });
-    } else {
-      updateDetailsState({
-        contextActions: []
-      });
-    }
-  }, []);
-  var clearContextActions = React.useCallback(function () {
-    updateDetailsState({
-      contextActions: []
-    });
-  }, [updateDetailsState]);
-  var contextValue = React.useMemo(function () {
-    return {
-      detailsState: detailsState,
-      updateDetailsState: updateDetailsState,
-      clearDetailsState: clearDetailsState,
-      setContextActions: setContextActions,
-      clearContextActions: clearContextActions
-    };
-  }, [detailsState, updateDetailsState, clearDetailsState, setContextActions, clearContextActions]);
-  return React__default.createElement(ItemSlotDetailsContext.Provider, {
-    value: contextValue
-  }, children);
-};
-
-var initialDraggingState = {
-  item: null,
-  isDragging: false,
-  position: {
-    x: 0,
-    y: 0
-  },
-  dropPosition: null,
-  isFocused: false,
-  draggingDistance: 0
-};
-var ItemSlotDraggingContext = /*#__PURE__*/React.createContext({
-  draggingState: initialDraggingState,
-  updateDraggingState: function updateDraggingState() {},
-  clearDraggingState: function clearDraggingState() {}
-});
-var useItemSlotDragging = function useItemSlotDragging() {
-  return React.useContext(ItemSlotDraggingContext);
-};
-var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
-  var children = _ref.children;
-  var _useState = React.useState(initialDraggingState),
-    draggingState = _useState[0],
-    setDraggingState = _useState[1];
-  var updateDraggingState = React.useCallback(function (newState) {
-    setDraggingState(function (prevState) {
-      return _extends({}, prevState, newState);
-    });
-  }, []);
-  var clearDraggingState = React.useCallback(function () {
-    setDraggingState(initialDraggingState);
-  }, []);
-  var contextValue = React.useMemo(function () {
-    return {
-      draggingState: draggingState,
-      updateDraggingState: updateDraggingState,
-      clearDraggingState: clearDraggingState
-    };
-  }, [draggingState, updateDraggingState, clearDraggingState]);
-  return React__default.createElement(ItemSlotDraggingContext.Provider, {
-    value: contextValue
-  }, children);
-};
-
-var qualityColorHex = function qualityColorHex(item) {
-  switch (item == null ? void 0 : item.quality) {
-    case shared.ItemQualityLevel.HighQuality:
-      return '#00bfff';
-    case shared.ItemQualityLevel.Exceptional:
-      return '#ff8c00';
-    case shared.ItemQualityLevel.Mastercrafted:
-      return '#ff00ff';
-    case shared.ItemQualityLevel.Ancient:
-      return '#ffd700';
-    case shared.ItemQualityLevel.Mythic:
-      return '#ff0080';
-    default:
-      return 'transparent';
-  }
-};
-
 var rarityColor = function rarityColor(item) {
   switch (item == null ? void 0 : item.rarity) {
     case shared.ItemRarities.Uncommon:
@@ -27929,9 +27651,7 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
     }
     return React__default.createElement(ErrorBoundary, {
       key: item._id
-    }, item.quality && item.quality !== shared.ItemQualityLevel.Normal && React__default.createElement("div", {
-      className: "quality-star"
-    }, "\u2605"), React__default.createElement(SpriteFromAtlas, {
+    }, React__default.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       spriteKey: shared.getItemTextureKeyPath({
@@ -27971,7 +27691,268 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
         return renderItem(itemToRender);
     }
   };
-  return onRenderSlot(item);
+  return React__default.createElement(React__default.Fragment, null, onRenderSlot(item));
+};
+
+var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
+  var contextMenu = actionsByTypeList.map(function (action) {
+    return {
+      id: action,
+      text: shared.ItemSocketEventsDisplayLabels[action]
+    };
+  });
+  return contextMenu;
+};
+var generateContextMenu = function generateContextMenu(item, itemContainerType, isDepotSystem) {
+  var contextActionMenu = [];
+  if (itemContainerType === shared.ItemContainerType.Inventory) {
+    switch (item.type) {
+      case shared.ItemType.Weapon:
+      case shared.ItemType.Armor:
+      case shared.ItemType.Accessory:
+      case shared.ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Equipment);
+        break;
+      case shared.ItemType.Container:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Container);
+        break;
+      case shared.ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Consumable);
+        break;
+      case shared.ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.CraftingResource);
+        break;
+      case shared.ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Tool);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForInventory.Other);
+        break;
+    }
+    if (isDepotSystem) {
+      contextActionMenu.push({
+        id: shared.DepotSocketEvents.Deposit,
+        text: 'Deposit'
+      });
+    }
+    var contextActionMenuDontHaveUseWith = !contextActionMenu.find(function (action) {
+      return action.text.toLowerCase().includes('use with');
+    });
+    if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
+      contextActionMenu.push({
+        id: shared.ItemSocketEvents.UseWith,
+        text: shared.ItemSocketEvents.UseWith
+      });
+    }
+  }
+  if (itemContainerType === shared.ItemContainerType.Equipment) {
+    switch (item.type) {
+      case shared.ItemType.Container:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForEquipmentSet.Container);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForEquipmentSet.Equipment);
+    }
+  }
+  if (itemContainerType === shared.ItemContainerType.Loot) {
+    switch (item.type) {
+      case shared.ItemType.Weapon:
+      case shared.ItemType.Armor:
+      case shared.ItemType.Accessory:
+      case shared.ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Equipment);
+        break;
+      case shared.ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Consumable);
+        break;
+      case shared.ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.CraftingResource);
+        break;
+      case shared.ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Tool);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForLoot.Other);
+        break;
+    }
+  }
+  if (itemContainerType === shared.ItemContainerType.MapContainer) {
+    switch (item.type) {
+      case shared.ItemType.Weapon:
+      case shared.ItemType.Armor:
+      case shared.ItemType.Accessory:
+      case shared.ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Equipment);
+        break;
+      case shared.ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Consumable);
+        break;
+      case shared.ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.CraftingResource);
+        break;
+      case shared.ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Tool);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(shared.ActionsForMapContainer.Other);
+        break;
+    }
+    var _contextActionMenuDontHaveUseWith = !contextActionMenu.find(function (action) {
+      return action.text.toLowerCase().includes('use with');
+    });
+    if (item.hasUseWith && _contextActionMenuDontHaveUseWith) {
+      contextActionMenu.push({
+        id: 'use-with',
+        text: 'Use with...'
+      });
+    }
+  }
+  if (itemContainerType === shared.ItemContainerType.Depot) {
+    contextActionMenu = [{
+      id: shared.ItemSocketEvents.GetItemInfo,
+      text: shared.ItemSocketEventsDisplayLabels.GetItemInfo
+    }, {
+      id: shared.DepotSocketEvents.Withdraw,
+      text: 'Withdraw'
+    }];
+  }
+  if (item.type && item.type === shared.ItemType.Container) {
+    var existInContextAction = contextActionMenu.some(function (item) {
+      return item.text === shared.DepotSocketEvents.OpenContainer || item.id === shared.ItemSocketEvents.ContainerOpen || item.text === 'Open';
+    });
+    if (!existInContextAction) {
+      contextActionMenu.push({
+        id: shared.DepotSocketEvents.OpenContainer,
+        text: 'Open'
+      });
+    }
+    if (itemContainerType === shared.ItemContainerType.Inventory) {
+      if (item.textureAtlas === 'items' && item.type === shared.ItemType.Container) {
+        contextActionMenu.push({
+          id: shared.ItemSocketEvents.ItemPropertyUpdate,
+          text: 'Set Color...'
+        });
+      }
+    }
+  }
+  if (item.attachedGems && item.attachedGems.length > 0) {
+    contextActionMenu.push({
+      id: shared.ItemSocketEvents.DetachGem,
+      text: "Detach Gems"
+    });
+  }
+  return contextActionMenu;
+};
+
+var initialDetailsState = {
+  item: null,
+  isTooltipVisible: false,
+  isTooltipMobileVisible: false,
+  isContextMenuVisible: false,
+  contextMenuPosition: {
+    x: 0,
+    y: 0
+  },
+  contextActions: [],
+  clearContextActions: function clearContextActions() {},
+  clearDetailsState: function clearDetailsState() {}
+};
+var ItemSlotDetailsContext = /*#__PURE__*/React.createContext({
+  detailsState: initialDetailsState,
+  updateDetailsState: function updateDetailsState() {},
+  clearDetailsState: function clearDetailsState() {},
+  setContextActions: function setContextActions() {},
+  clearContextActions: function clearContextActions() {}
+});
+var useItemSlotDetails = function useItemSlotDetails() {
+  return React.useContext(ItemSlotDetailsContext);
+};
+var ItemSlotDetailsProvider = function ItemSlotDetailsProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(initialDetailsState),
+    detailsState = _useState[0],
+    setDetailsState = _useState[1];
+  var updateDetailsState = React.useCallback(function (newState) {
+    setDetailsState(function (prevState) {
+      return _extends({}, prevState, newState);
+    });
+  }, []);
+  var clearDetailsState = React.useCallback(function () {
+    setDetailsState(initialDetailsState);
+  }, [setDetailsState]);
+  var setContextActions = React.useCallback(function (item, containerType, isDepotSystem, isContextMenuDisabled) {
+    if (item && containerType && !isContextMenuDisabled) {
+      var newContextActions = generateContextMenu(item, containerType, isDepotSystem);
+      updateDetailsState({
+        contextActions: newContextActions
+      });
+    } else {
+      updateDetailsState({
+        contextActions: []
+      });
+    }
+  }, []);
+  var clearContextActions = React.useCallback(function () {
+    updateDetailsState({
+      contextActions: []
+    });
+  }, [updateDetailsState]);
+  var contextValue = React.useMemo(function () {
+    return {
+      detailsState: detailsState,
+      updateDetailsState: updateDetailsState,
+      clearDetailsState: clearDetailsState,
+      setContextActions: setContextActions,
+      clearContextActions: clearContextActions
+    };
+  }, [detailsState, updateDetailsState, clearDetailsState, setContextActions, clearContextActions]);
+  return React__default.createElement(ItemSlotDetailsContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+var initialDraggingState = {
+  item: null,
+  isDragging: false,
+  position: {
+    x: 0,
+    y: 0
+  },
+  dropPosition: null,
+  isFocused: false,
+  draggingDistance: 0
+};
+var ItemSlotDraggingContext = /*#__PURE__*/React.createContext({
+  draggingState: initialDraggingState,
+  updateDraggingState: function updateDraggingState() {},
+  clearDraggingState: function clearDraggingState() {}
+});
+var useItemSlotDragging = function useItemSlotDragging() {
+  return React.useContext(ItemSlotDraggingContext);
+};
+var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(initialDraggingState),
+    draggingState = _useState[0],
+    setDraggingState = _useState[1];
+  var updateDraggingState = React.useCallback(function (newState) {
+    setDraggingState(function (prevState) {
+      return _extends({}, prevState, newState);
+    });
+  }, []);
+  var clearDraggingState = React.useCallback(function () {
+    setDraggingState(initialDraggingState);
+  }, []);
+  var contextValue = React.useMemo(function () {
+    return {
+      draggingState: draggingState,
+      updateDraggingState: updateDraggingState,
+      clearDraggingState: clearDraggingState
+    };
+  }, [draggingState, updateDraggingState, clearDraggingState]);
+  return React__default.createElement(ItemSlotDraggingContext.Provider, {
+    value: contextValue
+  }, children);
 };
 
 var EquipmentSlotSpriteByType = {
@@ -28290,7 +28271,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
 var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}.quality-star{position:absolute;top:0.5rem;left:0.5rem;font-size:1.2rem;z-index:2;text-shadow:0 0 3px black;pointer-events:none;color:", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
 }, function (_ref3) {
@@ -28303,10 +28284,7 @@ var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   var item = _ref5.item;
   return "0 0 4px 3px " + rarityColor(item);
 }, function (_ref6) {
-  var item = _ref6.item;
-  return qualityColorHex(item);
-}, function (_ref7) {
-  var isSelectingShortcut = _ref7.isSelectingShortcut;
+  var isSelectingShortcut = _ref6.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled__default.div.withConfig({
@@ -28423,16 +28401,10 @@ var ItemInfo = function ItemInfo(_ref) {
 var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
-})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";box-shadow:", ";height:max-content;width:18rem;position:relative;", " @media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
+})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
   var _rarityColor;
   var item = _ref2.item;
   return (_rarityColor = rarityColor(item)) != null ? _rarityColor : uiColors.lightGray;
-}, function (_ref3) {
-  var item = _ref3.item;
-  return "0 0 5px 2px " + rarityColor(item);
-}, function (_ref4) {
-  var item = _ref4.item;
-  return (item == null ? void 0 : item.quality) && item.quality !== shared.ItemQualityLevel.Normal && "\n    &::before {\n      content: '\u2605';\n      position: absolute;\n      top: 0.2rem;\n      left: 0.5rem;\n      font-size: 1.2rem;\n      color: " + qualityColorHex(item) + ";\n      text-shadow: 0 0 3px black;\n    }\n  ";
 });
 var Title$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Title",
@@ -28441,8 +28413,8 @@ var Title$1 = /*#__PURE__*/styled__default.div.withConfig({
 var Rarity = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Rarity",
   componentId: "sc-1xm4q8k-2"
-})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref5) {
-  var item = _ref5.item;
+})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref3) {
+  var item = _ref3.item;
   return rarityColor(item);
 });
 var Type = /*#__PURE__*/styled__default.div.withConfig({
@@ -28456,8 +28428,8 @@ var LevelRequirement = /*#__PURE__*/styled__default.div.withConfig({
 var Statistic = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Statistic",
   componentId: "sc-1xm4q8k-5"
-})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref6) {
-  var $isSpecial = _ref6.$isSpecial;
+})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref4) {
+  var $isSpecial = _ref4.$isSpecial;
   return $isSpecial ? uiColors.darkYellow : 'inherit';
 }, uiColors.lightGreen, uiColors.cardinal);
 var Description = /*#__PURE__*/styled__default.div.withConfig({
@@ -30860,6 +30832,59 @@ var ContentWrapper = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-ldufv0-3"
 })([""]);
 
+var TOOLTIP_WIDTH = 300;
+var TOOLTIP_OFFSET = 10;
+var MIN_VISIBLE_HEIGHT = 100;
+var useTooltipPosition = function useTooltipPosition() {
+  var _useState = React.useState(null),
+    tooltipState = _useState[0],
+    setTooltipState = _useState[1];
+  var calculateTooltipPosition = function calculateTooltipPosition(rect) {
+    var viewportWidth = window.innerWidth;
+    var viewportHeight = window.innerHeight;
+    // Try to position to the right first
+    var x = rect.right + TOOLTIP_OFFSET;
+    // If it would overflow right, try positioning to the left
+    if (x + TOOLTIP_WIDTH > viewportWidth - TOOLTIP_OFFSET) {
+      x = rect.left - TOOLTIP_WIDTH - TOOLTIP_OFFSET;
+    }
+    // If left positioning would go off screen, position relative to viewport
+    if (x < TOOLTIP_OFFSET) {
+      x = TOOLTIP_OFFSET;
+    }
+    // Position vertically aligned with the top of the element
+    var y = rect.top;
+    // Ensure tooltip doesn't go above viewport
+    if (y < TOOLTIP_OFFSET) {
+      y = TOOLTIP_OFFSET;
+    }
+    // Ensure some part of tooltip is always visible if element is near bottom
+    if (y > viewportHeight - MIN_VISIBLE_HEIGHT) {
+      y = viewportHeight - MIN_VISIBLE_HEIGHT;
+    }
+    return {
+      x: x,
+      y: y
+    };
+  };
+  var handleMouseEnter = function handleMouseEnter(item, event) {
+    var rect = event.currentTarget.getBoundingClientRect();
+    setTooltipState({
+      item: item,
+      position: calculateTooltipPosition(rect)
+    });
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setTooltipState(null);
+  };
+  return {
+    tooltipState: tooltipState,
+    handleMouseEnter: handleMouseEnter,
+    handleMouseLeave: handleMouseLeave,
+    TOOLTIP_WIDTH: TOOLTIP_WIDTH
+  };
+};
+
 var usePagination = function usePagination(_ref) {
   var items = _ref.items,
     itemsPerPage = _ref.itemsPerPage,
@@ -30927,7 +30952,9 @@ var SearchBar = function SearchBar(_ref) {
   var value = _ref.value,
     _onChange = _ref.onChange,
     placeholder = _ref.placeholder,
-    className = _ref.className;
+    className = _ref.className,
+    rightElement = _ref.rightElement;
+  var hasRightElement = Boolean(rightElement);
   return React__default.createElement(Container$m, {
     className: className
   }, React__default.createElement(Input$1, {
@@ -30937,8 +30964,9 @@ var SearchBar = function SearchBar(_ref) {
       return _onChange(e.target.value);
     },
     placeholder: placeholder,
-    className: "rpgui-input"
-  }), React__default.createElement(IconContainer, null, React__default.createElement(SearchIcon, null)));
+    className: "rpgui-input",
+    "$hasRightElement": hasRightElement
+  }), React__default.createElement(IconContainer, null, React__default.createElement(SearchIcon, null), rightElement));
 };
 var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchBar__Container",
@@ -30947,11 +30975,13 @@ var Container$m = /*#__PURE__*/styled__default.div.withConfig({
 var Input$1 = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "SearchBar__Input",
   componentId: "sc-13n8z02-1"
-})(["width:100%;padding-right:2.5rem !important;background:rgba(0,0,0,0.2) !important;border:2px solid #f59e0b !important;box-shadow:0 0 10px rgba(245,158,11,0.3);color:#ffffff !important;font-family:'Press Start 2P',cursive !important;font-size:0.875rem !important;&::placeholder{color:rgba(255,255,255,0.5) !important;}"]);
+})(["width:100%;padding-right:", " !important;background:rgba(0,0,0,0.2) !important;border:2px solid #f59e0b !important;box-shadow:0 0 10px rgba(245,158,11,0.3);color:#ffffff !important;font-family:'Press Start 2P',cursive !important;font-size:0.875rem !important;&::placeholder{color:rgba(255,255,255,0.5) !important;}"], function (props) {
+  return props.$hasRightElement ? '6rem' : '2.5rem';
+});
 var IconContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchBar__IconContainer",
   componentId: "sc-13n8z02-2"
-})(["position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;pointer-events:none;"]);
+})(["position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:0.5rem;pointer-events:none;z-index:1;> *{pointer-events:auto;}"]);
 var SearchIcon = /*#__PURE__*/styled__default(fa.FaSearch).withConfig({
   displayName: "SearchBar__SearchIcon",
   componentId: "sc-13n8z02-3"
@@ -30967,7 +30997,8 @@ var SearchHeader = function SearchHeader(_ref) {
   }, React__default.createElement(HeaderContent, null, searchOptions && React__default.createElement(SearchContainer$2, null, React__default.createElement(StyledSearchBar, {
     value: searchOptions.value,
     onChange: searchOptions.onChange,
-    placeholder: searchOptions.placeholder || 'Search...'
+    placeholder: searchOptions.placeholder || 'Search...',
+    rightElement: searchOptions.rightElement
   })), filterOptions && React__default.createElement(FilterContainer, null, React__default.createElement(StyledDropdown, {
     options: filterOptions.options,
     onChange: filterOptions.onOptionChange,
@@ -31164,7 +31195,7 @@ var Icon$1 = /*#__PURE__*/styled__default.span.withConfig({
 var Content$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Collapsible__Content",
   componentId: "sc-s4h8ey-4"
-})(["padding:12px;"]);
+})(["padding:6px;"]);
 
 var BaseInformationDetails = function BaseInformationDetails(_ref) {
   var name = _ref.name,
@@ -31189,15 +31220,15 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
 var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
-})(["position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:1000;"]);
+})(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
 var Overlay = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Overlay",
   componentId: "sc-1vguuz8-1"
-})(["position:absolute;inset:0;background-color:rgba(0,0,0,0.8);"]);
+})(["position:fixed;inset:0;background-color:rgba(0,0,0,0.8);"]);
 var Modal = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
-})(["position:relative;width:90%;height:90%;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:16px;overflow-y:auto;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
+})(["position:fixed;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90%;top:5%;left:5%;max-width:800px;margin:0 auto;@media (max-width:768px){width:100%;height:100%;top:0;left:0;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
 var CloseButton$5 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
@@ -31209,7 +31240,7 @@ var Header$2 = /*#__PURE__*/styled__default.div.withConfig({
 var Content$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Content",
   componentId: "sc-1vguuz8-5"
-})(["display:flex;flex-direction:column;gap:16px;height:100%;overflow:auto;"]);
+})(["display:flex;flex-direction:column;gap:12px;height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;@media (max-width:768px){height:calc(100% - 64px);gap:8px;padding-right:4px;margin-right:-4px;}"]);
 var Title$4 = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
@@ -31435,7 +31466,180 @@ var InformationCenterItemTooltip = function InformationCenterItemTooltip(_ref) {
   }, item.rarity)))));
 };
 
-var TOOLTIP_OFFSET = 200;
+var AdvancedFilters = function AdvancedFilters(_ref) {
+  var isOpen = _ref.isOpen,
+    onToggle = _ref.onToggle,
+    sections = _ref.sections,
+    onClearAll = _ref.onClearAll,
+    hasActiveFilters = _ref.hasActiveFilters;
+  var renderFilterSection = function renderFilterSection(section) {
+    switch (section.type) {
+      case 'range':
+        var rangeValue = section.value;
+        return React__default.createElement(FilterSection, {
+          key: section.key
+        }, React__default.createElement(Label$1, null, section.label), React__default.createElement(RangeInputs, null, React__default.createElement(Input, {
+          type: "number",
+          min: 0,
+          placeholder: "Min",
+          value: rangeValue[0] || '',
+          onChange: function onChange(e) {
+            return section.onChange([e.target.value ? Number(e.target.value) : undefined, rangeValue[1]]);
+          }
+        }), React__default.createElement(ai.AiFillCaretRight, null), React__default.createElement(Input, {
+          type: "number",
+          min: 0,
+          placeholder: "Max",
+          value: rangeValue[1] || '',
+          onChange: function onChange(e) {
+            return section.onChange([rangeValue[0], e.target.value ? Number(e.target.value) : undefined]);
+          }
+        })));
+      case 'dropdown':
+        return React__default.createElement(FilterSection, {
+          key: section.key
+        }, React__default.createElement(Label$1, null, section.label), React__default.createElement(Dropdown, {
+          options: section.options || [],
+          onChange: section.onChange,
+          width: "100%"
+        }));
+      default:
+        return null;
+    }
+  };
+  return React__default.createElement(Container$q, null, React__default.createElement(FilterButton, {
+    onClick: onToggle,
+    "$hasActiveFilters": hasActiveFilters
+  }, hasActiveFilters ? React__default.createElement(ai.AiFillFilter, {
+    size: 20
+  }) : React__default.createElement(ai.AiOutlineFilter, {
+    size: 20
+  }), React__default.createElement(FilterCount, {
+    "$visible": hasActiveFilters
+  }, sections.filter(function (section) {
+    if (section.type === 'range') {
+      var rangeValue = section.value;
+      return rangeValue[0] !== undefined || rangeValue[1] !== undefined;
+    }
+    return section.value !== 'all';
+  }).length)), isOpen && React__default.createElement(FiltersPanel, null, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters")), sections.map(renderFilterSection), hasActiveFilters && React__default.createElement(ClearFiltersButton, {
+    onClick: onClearAll
+  }, "Clear All Filters")));
+};
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__Container",
+  componentId: "sc-1xj6ldr-0"
+})(["position:relative;margin-left:0.5rem;"]);
+var FilterButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "AdvancedFilters__FilterButton",
+  componentId: "sc-1xj6ldr-1"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;color:", ";cursor:pointer;transition:all 0.2s;&:hover{color:", ";}"], function (_ref2) {
+  var $hasActiveFilters = _ref2.$hasActiveFilters;
+  return $hasActiveFilters ? '#ffd700' : 'rgba(255, 255, 255, 0.8)';
+}, function (_ref3) {
+  var $hasActiveFilters = _ref3.$hasActiveFilters;
+  return $hasActiveFilters ? '#ffd700' : '#ffffff';
+});
+var FilterCount = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__FilterCount",
+  componentId: "sc-1xj6ldr-2"
+})(["position:absolute;top:-4px;right:-4px;background:#ffd700;color:#000;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:bold;display:flex;align-items:center;justify-content:center;opacity:", ";transform:scale(", ");transition:all 0.2s;"], function (_ref4) {
+  var $visible = _ref4.$visible;
+  return $visible ? 1 : 0;
+}, function (_ref5) {
+  var $visible = _ref5.$visible;
+  return $visible ? 1 : 0.5;
+});
+var FiltersPanel = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__FiltersPanel",
+  componentId: "sc-1xj6ldr-3"
+})(["position:absolute;top:calc(100% + 0.75rem);right:-8px;background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:1rem;z-index:1000;min-width:280px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.3);&:before{content:'';position:absolute;top:-6px;right:16px;width:12px;height:12px;background:#1a1a1a;border-left:1px solid #333;border-top:1px solid #333;transform:rotate(45deg);}"]);
+var FilterHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__FilterHeader",
+  componentId: "sc-1xj6ldr-4"
+})(["display:flex;align-items:center;justify-content:space-between;padding-bottom:0.75rem;margin-bottom:0.5rem;border-bottom:1px solid #333;"]);
+var FilterTitle = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__FilterTitle",
+  componentId: "sc-1xj6ldr-5"
+})(["font-weight:600;color:#ffd700;font-size:0.875rem;"]);
+var FilterSection = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__FilterSection",
+  componentId: "sc-1xj6ldr-6"
+})(["display:flex;flex-direction:column;gap:0.5rem;"]);
+var Label$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__Label",
+  componentId: "sc-1xj6ldr-7"
+})(["color:#999;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;"]);
+var RangeInputs = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__RangeInputs",
+  componentId: "sc-1xj6ldr-8"
+})(["display:flex;align-items:center;gap:0.5rem;input{width:80px;background:#262626 !important;border:1px solid #333 !important;color:#fff !important;}svg{color:#666;font-size:0.875rem;}"]);
+var ClearFiltersButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "AdvancedFilters__ClearFiltersButton",
+  componentId: "sc-1xj6ldr-9"
+})(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.75rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;&:hover{color:#ffd700;}"]);
+
+var ItemsAdvancedFilters = function ItemsAdvancedFilters(_ref) {
+  var isOpen = _ref.isOpen,
+    onToggle = _ref.onToggle,
+    onTierChange = _ref.onTierChange,
+    onTypeChange = _ref.onTypeChange,
+    selectedTier = _ref.selectedTier,
+    selectedType = _ref.selectedType;
+  var tierOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Tiers'
+  }].concat(Array.from({
+    length: 5
+  }, function (_, i) {
+    return {
+      id: i + 1,
+      value: String(i + 1),
+      option: "Tier " + (i + 1)
+    };
+  }));
+  var typeOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Types'
+  }].concat(Object.entries(shared.ItemType).map(function (_ref2, index) {
+    var value = _ref2[1];
+    return {
+      id: index + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }));
+  var hasActiveFilters = selectedTier !== 'all' || selectedType !== 'all';
+  var handleClearFilters = function handleClearFilters() {
+    onTierChange('all');
+    onTypeChange('all');
+  };
+  var sections = [{
+    type: 'dropdown',
+    label: 'Tier',
+    key: 'tier',
+    options: tierOptions,
+    value: selectedTier,
+    onChange: onTierChange
+  }, {
+    type: 'dropdown',
+    label: 'Item Type',
+    key: 'type',
+    options: typeOptions,
+    value: selectedType,
+    onChange: onTypeChange
+  }];
+  return React__default.createElement(AdvancedFilters, {
+    isOpen: isOpen,
+    onToggle: onToggle,
+    sections: sections,
+    onClearAll: handleClearFilters,
+    hasActiveFilters: hasActiveFilters
+  });
+};
+
 var formatItemType = function formatItemType(type) {
   var words = type.split(/(?=[A-Z])/);
   if (words.length === 1) {
@@ -31455,38 +31659,35 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     itemsAtlasIMG = _ref.itemsAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
+  var isMobile = shared.isMobileOrTablet();
   var _useState = React.useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
   var _useState2 = React.useState('all'),
     selectedItemCategory = _useState2[0],
     setSelectedItemCategory = _useState2[1];
-  var _useState3 = React.useState(null),
-    hoveredItem = _useState3[0],
-    setHoveredItem = _useState3[1];
-  var _useState4 = React.useState({
-      x: 0,
-      y: 0
-    }),
-    tooltipPosition = _useState4[0],
-    setTooltipPosition = _useState4[1];
+  var _useState3 = React.useState('all'),
+    selectedTier = _useState3[0],
+    setSelectedTier = _useState3[1];
+  var _useState4 = React.useState(false),
+    isAdvancedFiltersOpen = _useState4[0],
+    setIsAdvancedFiltersOpen = _useState4[1];
   var _useState5 = React.useState(null),
     selectedItem = _useState5[0],
     setSelectedItem = _useState5[1];
-  var itemCategoryOptions = [{
-    id: 0,
-    value: 'all',
-    option: 'All Items'
-  }].concat(Object.values(shared.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 _useTooltipPosition = useTooltipPosition(),
+    tooltipState = _useTooltipPosition.tooltipState,
+    handleMouseEnter = _useTooltipPosition.handleMouseEnter,
+    handleMouseLeave = _useTooltipPosition.handleMouseLeave,
+    TOOLTIP_WIDTH = _useTooltipPosition.TOOLTIP_WIDTH;
+  var filteredItems = React.useMemo(function () {
+    return items.filter(function (item) {
+      var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = selectedItemCategory === 'all' || item.type === selectedItemCategory;
+      var matchesTier = selectedTier === 'all' || String(item.tier) === selectedTier;
+      return matchesSearch && matchesCategory && matchesTier;
+    });
+  }, [items, searchQuery, selectedItemCategory, selectedTier]);
   var getDroppedByNPCs = function getDroppedByNPCs(itemId, npcs) {
     return npcs.filter(function (npc) {
       var _npc$loots;
@@ -31495,35 +31696,12 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
       });
     }) || [];
   };
-  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() {
-    setHoveredItem(null);
-  };
   var handleTouchStart = function handleTouchStart(e, item) {
-    var touch = e.touches[0];
-    setTooltipPosition({
-      x: touch.clientX + TOOLTIP_OFFSET,
-      y: touch.clientY
-    });
-    setHoveredItem(item);
+    e.preventDefault();
+    setSelectedItem(item);
   };
   var handleItemClick = function handleItemClick(item) {
     setSelectedItem(item);
-    setHoveredItem(null);
   };
   var handleSearchChange = function handleSearchChange(newQuery) {
     setSearchQuery(newQuery);
@@ -31539,9 +31717,8 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
       atlasJSON: itemsAtlasJSON,
       atlasIMG: itemsAtlasIMG,
       onMouseEnter: function onMouseEnter(e) {
-        return handleMouseEnter(e, item);
+        return handleMouseEnter(item, e);
       },
-      onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       onTouchStart: function onTouchStart(e) {
         return handleTouchStart(e, item);
@@ -31551,32 +31728,40 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
       }
     });
   };
+  var SearchBarRightElement = React__default.createElement(SearchBarActions, null, React__default.createElement(ItemsAdvancedFilters, {
+    isOpen: isAdvancedFiltersOpen,
+    onToggle: function onToggle() {
+      return setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen);
+    },
+    onTierChange: setSelectedTier,
+    onTypeChange: setSelectedItemCategory,
+    selectedTier: selectedTier,
+    selectedType: selectedItemCategory
+  }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(PaginatedContent, {
     items: filteredItems,
     renderItem: renderItem,
     emptyMessage: "No items found",
-    filterOptions: {
-      options: itemCategoryOptions,
-      selectedOption: selectedItemCategory,
-      onOptionChange: setSelectedItemCategory
-    },
     searchOptions: {
       value: searchQuery,
       onChange: handleSearchChange,
-      placeholder: 'Search items...'
+      placeholder: 'Search items...',
+      rightElement: SearchBarRightElement
     },
-    dependencies: [selectedItemCategory],
+    dependencies: [selectedItemCategory, selectedTier],
     tabId: tabId,
     layout: "grid",
     itemHeight: "180px"
-  }), hoveredItem && React__default.createElement(TooltipWrapper, {
+  }), !isMobile && tooltipState && tooltipState.item && React__default.createElement(Portal, null, React__default.createElement(TooltipWrapper, {
+    width: TOOLTIP_WIDTH,
     style: {
-      top: tooltipPosition.y,
-      left: tooltipPosition.x
+      position: 'fixed',
+      left: tooltipState.position.x + "px",
+      top: tooltipState.position.y + "px"
     }
   }, React__default.createElement(InformationCenterItemTooltip, {
-    item: hoveredItem
-  })), selectedItem && React__default.createElement(InformationCenterItemDetails, {
+    item: tooltipState.item
+  }))), selectedItem && React__default.createElement(Portal, null, React__default.createElement(InformationCenterItemDetails, {
     item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -31584,12 +31769,87 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     onBack: function onBack() {
       return setSelectedItem(null);
     }
-  }));
+  })));
 };
 var TooltipWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterItemsSection__TooltipWrapper",
   componentId: "sc-1wmpapt-0"
-})(["position:fixed;z-index:1000;pointer-events:none;transition:transform 0.1s ease;"]);
+})(["z-index:1000;pointer-events:none;width:", ";"], function (props) {
+  return props.width + "px";
+});
+var SearchBarActions = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "InformationCenterItemsSection__SearchBarActions",
+  componentId: "sc-1wmpapt-1"
+})(["display:flex;align-items:center;gap:0.5rem;"]);
+
+var BestiaryAdvancedFilters = function BestiaryAdvancedFilters(_ref) {
+  var isOpen = _ref.isOpen,
+    onToggle = _ref.onToggle,
+    onLevelRangeChange = _ref.onLevelRangeChange,
+    onSubtypeChange = _ref.onSubtypeChange,
+    onAttackTypeChange = _ref.onAttackTypeChange,
+    levelRange = _ref.levelRange,
+    selectedSubtype = _ref.selectedSubtype,
+    selectedAttackType = _ref.selectedAttackType;
+  var subtypeOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Types'
+  }].concat(Object.entries(shared.NPCSubtype).map(function (_ref2, index) {
+    var value = _ref2[1];
+    return {
+      id: index + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }));
+  var attackTypeOptions = [{
+    id: 0,
+    value: 'all',
+    option: 'All Attack Types'
+  }].concat(Object.entries(shared.EntityAttackType).map(function (_ref3, index) {
+    var value = _ref3[1];
+    return {
+      id: index + 1,
+      value: value,
+      option: formatItemType(value)
+    };
+  }));
+  var hasActiveFilters = levelRange[0] !== undefined || levelRange[1] !== undefined || selectedSubtype !== 'all' || selectedAttackType !== 'all';
+  var handleClearFilters = function handleClearFilters() {
+    onLevelRangeChange([undefined, undefined]);
+    onSubtypeChange('all');
+    onAttackTypeChange('all');
+  };
+  var sections = [{
+    type: 'range',
+    label: 'Level Range',
+    key: 'level',
+    value: levelRange,
+    onChange: onLevelRangeChange
+  }, {
+    type: 'dropdown',
+    label: 'Monster Type',
+    key: 'subtype',
+    options: subtypeOptions,
+    value: selectedSubtype,
+    onChange: onSubtypeChange
+  }, {
+    type: 'dropdown',
+    label: 'Attack Type',
+    key: 'attackType',
+    options: attackTypeOptions,
+    value: selectedAttackType,
+    onChange: onAttackTypeChange
+  }];
+  return React__default.createElement(AdvancedFilters, {
+    isOpen: isOpen,
+    onToggle: onToggle,
+    sections: sections,
+    onClearAll: handleClearFilters,
+    hasActiveFilters: hasActiveFilters
+  });
+};
 
 var ITEMS_PER_PAGE$1 = 5;
 var formatItemName = function formatItemName(itemPath) {
@@ -31653,7 +31913,7 @@ var InformationCenterNPCDetails = function InformationCenterNPCDetails(_ref) {
     atlasJSON: entitiesAtlasJSON,
     atlasIMG: entitiesAtlasIMG,
     onBack: onBack
-  }, React__default.createElement(InfoSection$1, null, React__default.createElement(InfoItem$1, null, React__default.createElement(Label$1, null, "Type:"), React__default.createElement(Value$1, null, formatText(npc.subType))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$1, null, "Alignment:"), React__default.createElement(Value$1, null, formatText(npc.alignment))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$1, null, "Attack Type:"), React__default.createElement(Value$1, null, formatText(npc.attackType))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$1, null, "Range:"), React__default.createElement(Value$1, null, formatText(npc.maxRangeAttack))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$1, null, "Speed:"), React__default.createElement(Value$1, null, formatText(npc.speed)))), React__default.createElement(StyledCollapsible$1, {
+  }, React__default.createElement(InfoSection$1, null, React__default.createElement(InfoItem$1, null, React__default.createElement(Label$2, null, "Type:"), React__default.createElement(Value$1, null, formatText(npc.subType))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$2, null, "Alignment:"), React__default.createElement(Value$1, null, formatText(npc.alignment))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$2, null, "Attack Type:"), React__default.createElement(Value$1, null, formatText(npc.attackType))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$2, null, "Range:"), React__default.createElement(Value$1, null, formatText(npc.maxRangeAttack))), React__default.createElement(InfoItem$1, null, React__default.createElement(Label$2, null, "Speed:"), React__default.createElement(Value$1, null, formatText(npc.speed)))), React__default.createElement(StyledCollapsible$1, {
     title: "Stats",
     defaultOpen: !isMobile
   }, React__default.createElement(StatGrid$1, null, React__default.createElement(StatItem$2, null, "HP: ", npc.baseHealth), React__default.createElement(StatItem$2, null, "Level: ", npc.skills.level), ((_npc$skills$strength = npc.skills.strength) == null ? void 0 : _npc$skills$strength.level) && React__default.createElement(StatItem$2, null, "Strength: ", npc.skills.strength.level), ((_npc$skills$dexterity = npc.skills.dexterity) == null ? void 0 : _npc$skills$dexterity.level) && React__default.createElement(StatItem$2, null, "Dexterity: ", npc.skills.dexterity.level), ((_npc$skills$resistanc = npc.skills.resistance) == null ? void 0 : _npc$skills$resistanc.level) && React__default.createElement(StatItem$2, null, "Resistance: ", npc.skills.resistance.level))), npc.loots && npc.loots.length > 0 && React__default.createElement(StyledCollapsible$1, {
@@ -31709,7 +31969,7 @@ var InfoItem$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterNPCDetails__InfoItem",
   componentId: "sc-fdu3xl-1"
 })(["display:flex;align-items:center;gap:8px;"]);
-var Label$1 = /*#__PURE__*/styled__default.span.withConfig({
+var Label$2 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "InformationCenterNPCDetails__Label",
   componentId: "sc-fdu3xl-2"
 })(["color:", ";font-size:0.5rem;opacity:0.8;"], uiColors.yellow);
@@ -31720,7 +31980,7 @@ var Value$1 = /*#__PURE__*/styled__default.span.withConfig({
 var StyledCollapsible$1 = /*#__PURE__*/styled__default(Collapsible).withConfig({
   displayName: "InformationCenterNPCDetails__StyledCollapsible",
   componentId: "sc-fdu3xl-4"
-})(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:auto;scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray);
+})(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:visible;scrollbar-width:thin;scrollbar-color:", " transparent;width:100%;box-sizing:border-box;"], uiColors.darkGray);
 var StatGrid$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterNPCDetails__StatGrid",
   componentId: "sc-fdu3xl-5"
@@ -31772,19 +32032,19 @@ var Separator = /*#__PURE__*/styled__default.span.withConfig({
 var LootSearchContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootSearchContainer",
   componentId: "sc-fdu3xl-17"
-})(["padding:12px 12px 0;"]);
+})(["padding:8px;background:rgba(0,0,0,0.2);border-radius:4px;margin:8px 8px 4px;box-sizing:border-box;"]);
 var StyledSearchBar$1 = /*#__PURE__*/styled__default(SearchBar).withConfig({
   displayName: "InformationCenterNPCDetails__StyledSearchBar",
   componentId: "sc-fdu3xl-18"
-})(["width:100%;"]);
+})(["width:100%;box-sizing:border-box;input{background:rgba(0,0,0,0.2) !important;border:1px solid rgba(255,255,255,0.1) !important;box-sizing:border-box;&:focus{border-color:", " !important;}}"], uiColors.yellow);
 var LootGrid = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootGrid",
   componentId: "sc-fdu3xl-19"
-})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:12px;"]);
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px;padding:4px 8px;width:100%;max-width:100%;box-sizing:border-box;@media (max-width:768px){grid-template-columns:1fr;padding:4px;}"]);
 var LootItem = /*#__PURE__*/styled__default.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;"]);
+})(["display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.05);padding:4px;border-radius:4px;min-width:0;"]);
 var LootDetails = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterNPCDetails__LootDetails",
   componentId: "sc-fdu3xl-21"
@@ -31913,67 +32173,41 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
+  var isMobile = shared.isMobileOrTablet();
   var _useState = React.useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
   var _useState2 = React.useState(null),
-    tooltipData = _useState2[0],
-    setTooltipData = _useState2[1];
-  var _useState3 = React.useState(null),
-    selectedMonster = _useState3[0],
-    setSelectedMonster = _useState3[1];
-  var _useState4 = React.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() {
-    if (!isTouchDevice) {
-      setTooltipData(null);
-    }
-  };
-  var handleMouseMove = function handleMouseMove(event) {
-    if (!isTouchDevice && tooltipData) {
-      setTooltipData(_extends({}, tooltipData, {
-        position: {
-          x: event.clientX,
-          y: event.clientY
-        }
-      }));
-    }
-  };
+    selectedMonster = _useState2[0],
+    setSelectedMonster = _useState2[1];
+  var _useState3 = React.useState('all'),
+    selectedBestiaryCategory = _useState3[0],
+    setSelectedBestiaryCategory = _useState3[1];
+  var _useTooltipPosition = useTooltipPosition(),
+    tooltipState = _useTooltipPosition.tooltipState,
+    handleMouseEnter = _useTooltipPosition.handleMouseEnter,
+    handleMouseLeave = _useTooltipPosition.handleMouseLeave,
+    TOOLTIP_WIDTH = _useTooltipPosition.TOOLTIP_WIDTH;
+  // Advanced filters state
+  var _useState4 = React.useState(false),
+    isAdvancedFiltersOpen = _useState4[0],
+    setIsAdvancedFiltersOpen = _useState4[1];
+  var _useState5 = React.useState([undefined, undefined]),
+    levelRange = _useState5[0],
+    setLevelRange = _useState5[1];
+  var _useState6 = React.useState('all'),
+    selectedSubtype = _useState6[0],
+    setSelectedSubtype = _useState6[1];
+  var _useState7 = React.useState('all'),
+    selectedAttackType = _useState7[0],
+    setSelectedAttackType = _useState7[1];
   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
-          }
-        });
-      }
-    }
+    event.preventDefault();
+    setSelectedMonster(monster);
   };
   var handleMonsterClick = function handleMonsterClick(monster) {
     setSelectedMonster(monster);
-    setTooltipData(null);
   };
-  var _useState5 = React.useState('all'),
-    selectedBestiaryCategory = _useState5[0],
-    setSelectedBestiaryCategory = _useState5[1];
   var bestiaryCategoryOptions = [{
     id: 0,
     value: 'all',
@@ -31982,10 +32216,13 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     id: 1,
     value: 'bosses',
     option: 'Bosses'
-  }].concat(Object.entries(shared.NPCAlignment).map(function (_ref2, index) {
+  }].concat(Object.entries(shared.NPCAlignment).filter(function (_ref2) {
     var value = _ref2[1];
+    return value !== shared.NPCAlignment.Friendly;
+  }).map(function (_ref3, index) {
+    var value = _ref3[1];
     return {
-      id: index + 1,
+      id: index + 2,
       value: value,
       option: formatItemType(value)
     };
@@ -32004,7 +32241,6 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
         return handleMouseEnter(item, e);
       },
       onMouseLeave: handleMouseLeave,
-      onMouseMove: handleMouseMove,
       onTouchStart: function onTouchStart(e) {
         return handleTouchStart(item, e);
       }
@@ -32012,7 +32248,9 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
   };
   var filteredItems = React.useMemo(function () {
     return bestiaryItems.filter(function (item) {
+      // Basic search filter
       var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      // Category filter
       var matchesCategory = true;
       if (selectedBestiaryCategory === 'bosses') {
         matchesCategory = item.isBoss === true;
@@ -32021,15 +32259,33 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
       } else if (selectedBestiaryCategory !== 'all') {
         matchesCategory = item.alignment === selectedBestiaryCategory;
       }
-      return matchesSearch && matchesCategory;
+      // Advanced filters
+      var matchesLevel = (!levelRange[0] || item.skills.level >= levelRange[0]) && (!levelRange[1] || item.skills.level <= levelRange[1]);
+      var matchesSubtype = selectedSubtype === 'all' || item.subType === selectedSubtype;
+      var matchesAttackType = selectedAttackType === 'all' || item.attackType === selectedAttackType;
+      // Filter out friendly NPCs
+      var isNotFriendly = item.alignment !== shared.NPCAlignment.Friendly;
+      return matchesSearch && matchesCategory && matchesLevel && matchesSubtype && matchesAttackType && isNotFriendly;
     });
-  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+  }, [bestiaryItems, searchQuery, selectedBestiaryCategory, levelRange, selectedSubtype, selectedAttackType]);
   var handleSearchChange = function handleSearchChange(newQuery) {
     setSearchQuery(newQuery);
     if (newQuery && selectedBestiaryCategory !== 'all') {
       setSelectedBestiaryCategory('all');
     }
   };
+  var SearchBarRightElement = React__default.createElement(SearchBarActions$1, null, React__default.createElement(BestiaryAdvancedFilters, {
+    isOpen: isAdvancedFiltersOpen,
+    onToggle: function onToggle() {
+      return setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen);
+    },
+    onLevelRangeChange: setLevelRange,
+    onSubtypeChange: setSelectedSubtype,
+    onAttackTypeChange: setSelectedAttackType,
+    levelRange: levelRange,
+    selectedSubtype: selectedSubtype,
+    selectedAttackType: selectedAttackType
+  }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(PaginatedContent, {
     items: filteredItems,
     renderItem: renderItem,
@@ -32044,21 +32300,23 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     searchOptions: {
       value: searchQuery,
       onChange: handleSearchChange,
-      placeholder: 'Search monsters...'
+      placeholder: 'Search monsters...',
+      rightElement: SearchBarRightElement
     },
-    dependencies: [selectedBestiaryCategory],
+    dependencies: [selectedBestiaryCategory, levelRange, selectedSubtype, selectedAttackType],
     itemHeight: "180px"
-  }), tooltipData && React__default.createElement(Portal, null, React__default.createElement(TooltipWrapper$1, {
+  }), !isMobile && tooltipState && tooltipState.item && React__default.createElement(Portal, null, React__default.createElement(TooltipWrapper$1, {
+    width: TOOLTIP_WIDTH,
     style: {
       position: 'fixed',
-      left: tooltipData.position.x + 10,
-      top: tooltipData.position.y + 10
+      left: tooltipState.position.x + "px",
+      top: tooltipState.position.y + "px"
     }
   }, React__default.createElement(InformationCenterNPCTooltip, {
-    npc: tooltipData.npc,
+    npc: tooltipState.item,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React__default.createElement(InformationCenterNPCDetails, {
+  }))), selectedMonster && React__default.createElement(Portal, null, React__default.createElement(InformationCenterNPCDetails, {
     npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -32069,12 +32327,18 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     onBack: function onBack() {
       return setSelectedMonster(null);
     }
-  }));
+  })));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterBestiarySection__TooltipWrapper",
   componentId: "sc-e3h0p2-0"
-})(["position:fixed;z-index:1000;pointer-events:none;width:300px;"]);
+})(["z-index:1000;pointer-events:none;width:", ";"], function (props) {
+  return props.width + "px";
+});
+var SearchBarActions$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "InformationCenterBestiarySection__SearchBarActions",
+  componentId: "sc-e3h0p2-1"
+})(["display:flex;align-items:center;gap:0.5rem;"]);
 
 var InformationCenterFAQSection = function InformationCenterFAQSection(_ref) {
   var faqItems = _ref.faqItems,
@@ -32097,7 +32361,7 @@ var InformationCenterFAQSection = function InformationCenterFAQSection(_ref) {
       title: item.question
     }, React__default.createElement(Answer$1, null, item.answer));
   };
-  return React__default.createElement(Container$q, null, React__default.createElement(SearchHeader, {
+  return React__default.createElement(Container$r, null, React__default.createElement(SearchHeader, {
     searchOptions: {
       value: searchQuery,
       onChange: setSearchQuery,
@@ -32112,7 +32376,7 @@ var InformationCenterFAQSection = function InformationCenterFAQSection(_ref) {
     itemsPerPage: 10
   }));
 };
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenterFaqSection__Container",
   componentId: "sc-ofmaa9-0"
 })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -32280,9 +32544,6 @@ var InformationCenter = function InformationCenter(_ref) {
   var _useState = React.useState('bestiary'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
-  var _useState2 = React.useState(null),
-    selectedItem = _useState2[0],
-    setSelectedItem = _useState2[1];
   if (loading) {
     return React__default.createElement(LoadingMessage, null, "Loading...");
   }
@@ -32332,8 +32593,9 @@ var InformationCenter = function InformationCenter(_ref) {
     })
   }];
   return React__default.createElement(DraggableContainer, {
-    title: "Information Center"
-  }, React__default.createElement(Container$r, null, React__default.createElement(InternalTabs, {
+    title: "Information Center",
+    type: exports.RPGUIContainerTypes.Framed
+  }, React__default.createElement(Container$s, null, React__default.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -32342,22 +32604,9 @@ var InformationCenter = function InformationCenter(_ref) {
     inactiveColor: "#6b7280",
     borderColor: "#f59e0b",
     hoverColor: "#fef3c7"
-  }), selectedItem && React__default.createElement(InformationCenterItemDetails, {
-    item: selectedItem,
-    itemsAtlasJSON: itemsAtlasJSON,
-    itemsAtlasIMG: itemsAtlasIMG,
-    droppedBy: bestiaryItems.filter(function (npc) {
-      var _npc$loots;
-      return (_npc$loots = npc.loots) == null ? void 0 : _npc$loots.some(function (loot) {
-        return loot.itemBlueprintKey === selectedItem.key;
-      });
-    }),
-    onBack: function onBack() {
-      return setSelectedItem(null);
-    }
   })));
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
 })(["width:100%;max-width:800px;margin:0 auto;padding:1rem;"]);
@@ -32528,7 +32777,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$s, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$t, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -32546,7 +32795,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -32990,7 +33239,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     e.stopPropagation();
     onClose();
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$t, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$u, {
     onClick: handleClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -33013,7 +33262,7 @@ var Background = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -33068,7 +33317,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React__default.createElement(Container$u, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
+  }, React__default.createElement(Container$v, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -33084,7 +33333,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
@@ -33440,7 +33689,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$v, {
+  return React__default.createElement(Container$w, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -33457,7 +33706,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -33476,7 +33725,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$w, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$x, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -33490,7 +33739,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -34011,13 +34260,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React__default.createElement(Container$x, {
+  return React__default.createElement(Container$y, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$x = /*#__PURE__*/styled__default.div.withConfig({
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -34669,7 +34918,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$y, {
+  return React__default.createElement(Container$z, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -34699,7 +34948,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -34840,17 +35089,17 @@ var QuestList = function QuestList(_ref) {
     return React__default.createElement(QuestCard, {
       key: i,
       style: styles == null ? void 0 : styles.card
-    }, React__default.createElement(QuestItem, null, React__default.createElement(Label$2, {
+    }, React__default.createElement(QuestItem, null, React__default.createElement(Label$3, {
       style: styles == null ? void 0 : styles.label
     }, "Title:"), React__default.createElement(Value$2, {
       style: styles == null ? void 0 : styles.value
-    }, formatQuestText(quest.title))), React__default.createElement(QuestItem, null, React__default.createElement(Label$2, {
+    }, formatQuestText(quest.title))), React__default.createElement(QuestItem, null, React__default.createElement(Label$3, {
       style: styles == null ? void 0 : styles.label
     }, "Status:"), React__default.createElement(Value$2, {
       style: _extends({}, styles == null ? void 0 : styles.value, {
         color: getQuestStatusColor(quest.status)
       })
-    }, (_formatQuestStatus = formatQuestStatus(quest.status)) != null ? _formatQuestStatus : 'Unknown')), React__default.createElement(QuestItem, null, React__default.createElement(Label$2, {
+    }, (_formatQuestStatus = formatQuestStatus(quest.status)) != null ? _formatQuestStatus : 'Unknown')), React__default.createElement(QuestItem, null, React__default.createElement(Label$3, {
       style: styles == null ? void 0 : styles.label
     }, "Description:"), React__default.createElement(Value$2, {
       style: styles == null ? void 0 : styles.value
@@ -34869,7 +35118,7 @@ var QuestItem = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestList__QuestItem",
   componentId: "sc-1c1y8sp-2"
 })(["display:flex;margin-bottom:5px;flex-wrap:wrap;&:last-child{margin-bottom:0;}"]);
-var Label$2 = /*#__PURE__*/styled__default.span.withConfig({
+var Label$3 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "QuestList__Label",
   componentId: "sc-1c1y8sp-3"
 })(["font-weight:bold;color:", " !important;margin-right:10px;"], uiColors.yellow);
@@ -34940,9 +35189,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$z, null, children);
+  return React__default.createElement(Container$A, null, children);
 };
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -35098,7 +35347,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React__default.createElement(Container$A, {
+  return React__default.createElement(Container$B, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -35107,7 +35356,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$A = /*#__PURE__*/styled__default.div.withConfig({
+var Container$B = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35440,7 +35689,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React__default.createElement(Container$B, null, React__default.createElement(HeaderImage, {
+  }, React__default.createElement(Container$C, null, React__default.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React__default.createElement(ButtonsContainer$1, null, React__default.createElement(MainButtons, null, React__default.createElement(SocialButton$1, {
@@ -35458,7 +35707,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React__default.createElement(fa.FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$B = /*#__PURE__*/styled__default.div.withConfig({
+var Container$C = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -35504,7 +35753,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$C, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$D, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -35530,7 +35779,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$4, null, description));
 };
-var Container$C = /*#__PURE__*/styled__default.div.withConfig({
+var Container$D = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -35584,7 +35833,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$D, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$E, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -35609,7 +35858,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$D = /*#__PURE__*/styled__default.div.withConfig({
+var Container$E = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -35650,13 +35899,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$E, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$F, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$E = /*#__PURE__*/styled__default.div.withConfig({
+var Container$F = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -35729,7 +35978,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$F, {
+  }, React__default.createElement(Container$G, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -35748,7 +35997,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$F = /*#__PURE__*/styled__default.button.withConfig({
+var Container$G = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -35827,7 +36076,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$G, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$H, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -35863,7 +36112,7 @@ var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$G = /*#__PURE__*/styled__default.div.withConfig({
+var Container$H = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -36345,7 +36594,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$H, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$I, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -36373,7 +36622,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$H = /*#__PURE__*/styled__default.div.withConfig({
+var Container$I = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -36407,11 +36656,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$I, {
+  return React__default.createElement(Container$J, {
     maxLines: maxLines
   }, children);
 };
-var Container$I = /*#__PURE__*/styled__default.div.withConfig({
+var Container$J = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -36519,7 +36768,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$J, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$K, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -36536,7 +36785,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$J = /*#__PURE__*/styled__default.div.withConfig({
+var Container$K = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);