@rpg-engine/long-bow 0.8.11 → 0.8.12

package/dist/long-bow.esm.js

@@ -5,7 +5,7 @@ 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 dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaReddit } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaChevronUp, FaChevronDown, FaReddit } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -30774,6 +30774,1381 @@ var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ldufv0-3"
 })([""]);
 
+var usePagination = function usePagination(_ref) {
+  var items = _ref.items,
+    itemsPerPage = _ref.itemsPerPage,
+    _ref$dependencies = _ref.dependencies,
+    dependencies = _ref$dependencies === void 0 ? [] : _ref$dependencies;
+  var _useState = useState(1),
+    currentPage = _useState[0],
+    setCurrentPage = _useState[1];
+  var totalPages = Math.ceil(items.length / itemsPerPage);
+  var paginatedItems = items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  useEffect(function () {
+    setCurrentPage(1);
+  }, [].concat(dependencies));
+  return {
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage,
+    paginatedItems: paginatedItems,
+    totalPages: totalPages
+  };
+};
+
+var Pagination = function Pagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    onPageChange = _ref.onPageChange,
+    className = _ref.className;
+  return React.createElement(Container$l, {
+    className: className
+  }, React.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.max(1, currentPage - 1));
+    },
+    disabled: currentPage === 1
+  }, React.createElement(FaChevronLeft, {
+    size: 12
+  })), React.createElement(PageInfo$1, null, "Page ", currentPage, " of ", totalPages), React.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.min(totalPages, currentPage + 1));
+    },
+    disabled: currentPage === totalPages
+  }, React.createElement(FaChevronRight, {
+    size: 12
+  })));
+};
+var Container$l = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pagination__Container",
+  componentId: "sc-3k4m4u-0"
+})(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
+var PaginationButton$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Pagination__PaginationButton",
+  componentId: "sc-3k4m4u-1"
+})(["background:none;border:none;color:", ";cursor:", ";opacity:", ";padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s;&:hover:not(:disabled){opacity:1;}"], function (props) {
+  return props.disabled ? uiColors.darkGray : uiColors.yellow;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.disabled ? 0.5 : 0.8;
+});
+var PageInfo$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pagination__PageInfo",
+  componentId: "sc-3k4m4u-2"
+})(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
+
+var SearchBar = function SearchBar(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    className = _ref.className;
+  return React.createElement(Container$m, {
+    className: className
+  }, React.createElement(Input$1, {
+    type: "text",
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    },
+    placeholder: placeholder,
+    className: "rpgui-input"
+  }), React.createElement(IconContainer, null, React.createElement(SearchIcon, null)));
+};
+var Container$m = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchBar__Container",
+  componentId: "sc-13n8z02-0"
+})(["position:relative;width:100%;"]);
+var Input$1 = /*#__PURE__*/styled.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;}"]);
+var IconContainer = /*#__PURE__*/styled.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;"]);
+var SearchIcon = /*#__PURE__*/styled(FaSearch).withConfig({
+  displayName: "SearchBar__SearchIcon",
+  componentId: "sc-13n8z02-3"
+})(["font-size:1rem;color:#f59e0b;filter:drop-shadow(0 0 2px rgba(245,158,11,0.3));"]);
+
+var SearchHeader = function SearchHeader(_ref) {
+  var searchOptions = _ref.searchOptions,
+    filterOptions = _ref.filterOptions,
+    className = _ref.className;
+  if (!searchOptions && !filterOptions) return null;
+  return React.createElement(HeaderContainer$1, {
+    className: className
+  }, React.createElement(HeaderContent, null, searchOptions && React.createElement(SearchContainer$2, null, React.createElement(StyledSearchBar, {
+    value: searchOptions.value,
+    onChange: searchOptions.onChange,
+    placeholder: searchOptions.placeholder || 'Search...'
+  })), filterOptions && React.createElement(FilterContainer, null, React.createElement(StyledDropdown, {
+    options: filterOptions.options,
+    onChange: filterOptions.onOptionChange,
+    width: "200px"
+  }))));
+};
+var HeaderContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchHeader__HeaderContainer",
+  componentId: "sc-1xd17jb-0"
+})([""]);
+var HeaderContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchHeader__HeaderContent",
+  componentId: "sc-1xd17jb-1"
+})(["display:flex;justify-content:space-between;align-items:center;gap:1rem;background:rgba(0,0,0,0.2);padding:1rem;border-radius:4px;"]);
+var SearchContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchHeader__SearchContainer",
+  componentId: "sc-1xd17jb-2"
+})(["flex:1;"]);
+var FilterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchHeader__FilterContainer",
+  componentId: "sc-1xd17jb-3"
+})(["display:flex;justify-content:flex-end;"]);
+var StyledSearchBar = /*#__PURE__*/styled(SearchBar).withConfig({
+  displayName: "SearchHeader__StyledSearchBar",
+  componentId: "sc-1xd17jb-4"
+})(["width:100%;"]);
+var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+  displayName: "SearchHeader__StyledDropdown",
+  componentId: "sc-1xd17jb-5"
+})(["min-width:150px;"]);
+
+var PaginatedContent = function PaginatedContent(_ref) {
+  var items = _ref.items,
+    _ref$itemsPerPage = _ref.itemsPerPage,
+    itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
+    renderItem = _ref.renderItem,
+    _ref$emptyMessage = _ref.emptyMessage,
+    emptyMessage = _ref$emptyMessage === void 0 ? 'No items found' : _ref$emptyMessage,
+    className = _ref.className,
+    filterOptions = _ref.filterOptions,
+    searchOptions = _ref.searchOptions,
+    _ref$dependencies = _ref.dependencies,
+    dependencies = _ref$dependencies === void 0 ? [] : _ref$dependencies,
+    tabId = _ref.tabId,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'list' : _ref$layout,
+    _ref$gridColumns = _ref.gridColumns,
+    gridColumns = _ref$gridColumns === void 0 ? 4 : _ref$gridColumns,
+    _ref$itemHeight = _ref.itemHeight,
+    itemHeight = _ref$itemHeight === void 0 ? '180px' : _ref$itemHeight;
+  var _usePagination = usePagination({
+      items: items,
+      itemsPerPage: itemsPerPage,
+      dependencies: [].concat(dependencies, [tabId])
+    }),
+    currentPage = _usePagination.currentPage,
+    setCurrentPage = _usePagination.setCurrentPage,
+    paginatedItems = _usePagination.paginatedItems,
+    totalPages = _usePagination.totalPages;
+  return React.createElement(Container$n, {
+    className: className
+  }, (searchOptions || filterOptions) && React.createElement(SearchHeader, {
+    searchOptions: searchOptions,
+    filterOptions: filterOptions
+  }), items.length === 0 ? React.createElement(EmptyMessage, null, emptyMessage) : React.createElement(React.Fragment, null, React.createElement(Content, {
+    className: "PaginatedContent-content " + layout,
+    "$gridColumns": gridColumns,
+    "$itemHeight": itemHeight
+  }, paginatedItems.map(function (item, index) {
+    return React.createElement("div", {
+      key: index,
+      className: "PaginatedContent-item"
+    }, renderItem(item));
+  })), React.createElement(PaginationContainer$1, {
+    className: "PaginatedContent-pagination"
+  }, React.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: setCurrentPage
+  }))));
+};
+var Container$n = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaginatedContent__Container",
+  componentId: "sc-lzp9hn-0"
+})(["display:flex;flex-direction:column;gap:1rem;min-height:400px;width:100%;"]);
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaginatedContent__Content",
+  componentId: "sc-lzp9hn-1"
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:1rem;min-height:200px;max-height:", ";overflow-y:", ";&.grid{display:grid;grid-template-columns:repeat( ", ",minmax(0,1fr) );gap:1rem;align-items:start;.PaginatedContent-item{display:flex;align-items:flex-start;height:", ";}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], function (props) {
+  return props.$maxHeight;
+}, function (props) {
+  return props.$maxHeight ? 'auto' : 'visible';
+}, function (props) {
+  return props.$gridColumns;
+}, function (props) {
+  var _props$$itemHeight;
+  return (_props$$itemHeight = props.$itemHeight) != null ? _props$$itemHeight : 'auto';
+});
+var PaginationContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaginatedContent__PaginationContainer",
+  componentId: "sc-lzp9hn-2"
+})(["display:flex;justify-content:center;padding:1rem;"]);
+var EmptyMessage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PaginatedContent__EmptyMessage",
+  componentId: "sc-lzp9hn-3"
+})(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
+
+var Portal = function Portal(_ref) {
+  var children = _ref.children;
+  var _useState = useState(function () {
+      return document.createElement('div');
+    }),
+    container = _useState[0];
+  useEffect(function () {
+    document.body.appendChild(container);
+    return function () {
+      document.body.removeChild(container);
+    };
+  }, [container]);
+  return createPortal(children, container);
+};
+
+var InformationCenterCell = function InformationCenterCell(_ref) {
+  var name = _ref.name,
+    spriteKey = _ref.spriteKey,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseMove = _ref.onMouseMove,
+    onTouchStart = _ref.onTouchStart;
+  return React.createElement(CellContainer, {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseMove: onMouseMove,
+    onTouchStart: onTouchStart
+  }, React.createElement(SpriteContainer$1, null, React.createElement(SpriteFromAtlas, {
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    spriteKey: spriteKey,
+    width: 32,
+    height: 32,
+    imgScale: 1
+  })), React.createElement(CellName, null, name));
+};
+var CellContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterCell__CellContainer",
+  componentId: "sc-w48fdf-0"
+})(["position:relative;background:rgba(0,0,0,0.2);padding:0.75rem;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background-color 0.2s ease;width:100%;height:100%;min-width:120px;min-height:120px;box-sizing:border-box;&:hover{background:rgba(0,0,0,0.3);}"]);
+var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterCell__SpriteContainer",
+  componentId: "sc-w48fdf-1"
+})(["margin-bottom:0.5rem;display:flex;justify-content:center;align-items:center;width:64px;height:64px;position:relative;background:rgba(0,0,0,0.3);border-radius:4px;flex-shrink:0;.sprite-from-atlas-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);image-rendering:pixelated;}"]);
+var CellName = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "InformationCenterCell__CellName",
+  componentId: "sc-w48fdf-2"
+})(["font-size:0.7rem;color:#fef08a;margin:0;text-align:center;font-family:'Press Start 2P',cursive;line-height:1.2;word-break:break-word;max-width:100%;"]);
+
+var Collapsible = function Collapsible(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    className = _ref.className;
+  var _useState = useState(defaultOpen),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  return React.createElement(Container$o, {
+    className: className
+  }, React.createElement(Header$1, {
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, React.createElement(Title$3, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$1, null, children));
+};
+var Container$o = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Container",
+  componentId: "sc-s4h8ey-0"
+})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
+var Header$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Header",
+  componentId: "sc-s4h8ey-1"
+})(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
+var Title$3 = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "Collapsible__Title",
+  componentId: "sc-s4h8ey-2"
+})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
+var Icon$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Collapsible__Icon",
+  componentId: "sc-s4h8ey-3"
+})(["color:", ";font-size:0.6rem;display:flex;align-items:center;"], uiColors.yellow);
+var Content$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Content",
+  componentId: "sc-s4h8ey-4"
+})(["padding:12px;"]);
+
+var BaseInformationDetails = function BaseInformationDetails(_ref) {
+  var name = _ref.name,
+    spriteKey = _ref.spriteKey,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onBack = _ref.onBack,
+    children = _ref.children;
+  return React.createElement(Container$p, null, React.createElement(Overlay, {
+    onClick: onBack
+  }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
+    onClick: onBack
+  }, React.createElement(FaTimes, null)), React.createElement(Header$2, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    spriteKey: spriteKey,
+    width: 32,
+    height: 32,
+    imgScale: 1
+  })), React.createElement(Title$4, null, name)), React.createElement(Content$2, null, children)));
+};
+var Container$p = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__Container",
+  componentId: "sc-1vguuz8-0"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000;"]);
+var Overlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__Overlay",
+  componentId: "sc-1vguuz8-1"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);"]);
+var Modal = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__Modal",
+  componentId: "sc-1vguuz8-2"
+})(["position:relative;width:90%;max-width:800px;max-height:90vh;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);
+var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "BaseInformationDetails__CloseButton",
+  componentId: "sc-1vguuz8-3"
+})(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
+var Header$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__Header",
+  componentId: "sc-1vguuz8-4"
+})(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
+var Content$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__Content",
+  componentId: "sc-1vguuz8-5"
+})(["display:flex;flex-direction:column;gap:16px;"]);
+var Title$4 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "BaseInformationDetails__Title",
+  componentId: "sc-1vguuz8-6"
+})(["color:", ";font-size:1rem;margin:0;"], uiColors.yellow);
+var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseInformationDetails__SpriteContainer",
+  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 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,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
+    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 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 formatText(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,
+    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",
+    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",
+    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, formatText(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, {
+    title: "Effects",
+    defaultOpen: !isMobile
+  }, React.createElement(EffectsList, null, npc.entityEffects.map(function (effect, index) {
+    return React.createElement(EffectItem, {
+      key: index
+    }, formatText(effect));
+  }))), npc.areaSpells && npc.areaSpells.length > 0 && React.createElement(StyledCollapsible, {
+    title: "Spells",
+    defaultOpen: !isMobile
+  }, React.createElement(SpellsList, null, npc.areaSpells.map(function (spell, index) {
+    return React.createElement(SpellItem, {
+      key: index
+    }, 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 = /*#__PURE__*/styled.div.withConfig({
+  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 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__InfoItem",
+  componentId: "sc-fdu3xl-1"
+})(["display:flex;align-items:center;gap:8px;"]);
+var Label = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__Label",
+  componentId: "sc-fdu3xl-2"
+})(["color:", ";font-size:0.5rem;opacity:0.8;"], uiColors.yellow);
+var Value = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__Value",
+  componentId: "sc-fdu3xl-3"
+})(["color:", ";font-size:0.5rem;"], uiColors.white);
+var StyledCollapsible = /*#__PURE__*/styled(Collapsible).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledCollapsible",
+  componentId: "sc-fdu3xl-4"
+})(["background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden;"]);
+var StatGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__StatGrid",
+  componentId: "sc-fdu3xl-5"
+})(["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"
+})(["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"
+})(["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"
+})(["display:flex;flex-direction:column;gap:8px;padding:12px;"]);
+var SpellItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellItem",
+  componentId: "sc-fdu3xl-10"
+})(["display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;"]);
+var SpellName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellName",
+  componentId: "sc-fdu3xl-11"
+})(["color:", ";font-size:0.5rem;"], uiColors.yellow);
+var SpellDetails = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__SpellDetails",
+  componentId: "sc-fdu3xl-12"
+})(["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-13"
+})(["color:", ";"], uiColors.yellow);
+var Separator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__Separator",
+  componentId: "sc-fdu3xl-14"
+})(["color:", ";opacity:0.5;"], uiColors.yellow);
+var LootSearchContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootSearchContainer",
+  componentId: "sc-fdu3xl-15"
+})(["padding:12px 12px 0;"]);
+var StyledSearchBar$1 = /*#__PURE__*/styled(SearchBar).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledSearchBar",
+  componentId: "sc-fdu3xl-16"
+})(["width:100%;"]);
+var LootGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootGrid",
+  componentId: "sc-fdu3xl-17"
+})(["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-18"
+})(["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-19"
+})(["flex:1;display:flex;flex-direction:column;gap:4px;"]);
+var LootName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootName",
+  componentId: "sc-fdu3xl-20"
+})(["color:", ";font-size:0.5rem;"], uiColors.white);
+var LootInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__LootInfo",
+  componentId: "sc-fdu3xl-21"
+})(["display:flex;align-items:center;gap:8px;"]);
+var LootChance = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__LootChance",
+  componentId: "sc-fdu3xl-22"
+})(["color:", ";font-size:0.45rem;"], uiColors.yellow);
+var LootQuantity = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterNPCDetails__LootQuantity",
+  componentId: "sc-fdu3xl-23"
+})(["color:", ";font-size:0.45rem;"], uiColors.lightGray);
+var PaginationContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterNPCDetails__PaginationContainer",
+  componentId: "sc-fdu3xl-24"
+})(["display:flex;justify-content:center;padding:12px;"]);
+var StyledPagination = /*#__PURE__*/styled(Pagination).withConfig({
+  displayName: "InformationCenterNPCDetails__StyledPagination",
+  componentId: "sc-fdu3xl-25"
+})(["font-size:0.6rem;"]);
+
+var TooltipContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__TooltipContainer",
+  componentId: "sc-1auz5ec-0"
+})(["background-color:rgba(0,0,0,0.95);border-radius:4px;padding:8px;font-family:'Press Start 2P',cursive;font-size:0.6rem;width:", ";border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);"], function (props) {
+  return props.width || '280px';
+}, uiColors.darkGray);
+var TooltipTitle$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__TooltipTitle",
+  componentId: "sc-1auz5ec-1"
+})(["color:", ";font-size:0.6rem;letter-spacing:0.5px;margin-bottom:8px;"], uiColors.yellow);
+var Section = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__Section",
+  componentId: "sc-1auz5ec-2"
+})(["margin-top:6px;"]);
+var SectionTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__SectionTitle",
+  componentId: "sc-1auz5ec-3"
+})(["color:", ";font-size:0.5rem;margin-bottom:4px;opacity:0.7;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:4px;"], uiColors.yellow);
+var StatsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__StatsContainer",
+  componentId: "sc-1auz5ec-4"
+})(["display:grid;grid-template-columns:repeat(2,1fr);gap:2px 8px;"]);
+var StatItem$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseTooltip__StatItem",
+  componentId: "sc-1auz5ec-5"
+})(["color:", ";font-size:0.5rem;text-align:left;"], uiColors.white);
+var BaseTooltip = function BaseTooltip(_ref) {
+  var children = _ref.children,
+    width = _ref.width;
+  return React.createElement(TooltipContainer$1, {
+    width: width
+  }, 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';
+    default:
+      return 'Unknown';
+  }
+};
+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 InformationCenterBestiarySection = function InformationCenterBestiarySection(_ref) {
+  var bestiaryItems = _ref.bestiaryItems,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    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 _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
+        }
+      });
+    }
+  };
+  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
+        }
+      }));
+    }
+  };
+  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 renderItem = function renderItem(item) {
+    return React.createElement(InformationCenterCell, {
+      key: item.id,
+      name: item.name,
+      spriteKey: item.key,
+      atlasJSON: entitiesAtlasJSON,
+      atlasIMG: entitiesAtlasIMG,
+      onClick: function onClick() {
+        return handleMonsterClick(item);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        return handleMouseEnter(item, e);
+      },
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
+      onTouchStart: function onTouchStart(e) {
+        return handleTouchStart(item, e);
+      }
+    });
+  };
+  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",
+    searchOptions: {
+      value: searchQuery,
+      onChange: setSearchQuery,
+      placeholder: 'Search monsters...'
+    },
+    itemHeight: "180px"
+  }), tooltipData && React.createElement(Portal, null, React.createElement(TooltipWrapper, {
+    style: {
+      position: 'fixed',
+      left: tooltipData.position.x + 10,
+      top: tooltipData.position.y + 10
+    }
+  }, React.createElement(InformationCenterNPCTooltip, {
+    npc: tooltipData.npc,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG
+  }))), selectedMonster && React.createElement(InformationCenterNPCDetails, {
+    npc: selectedMonster,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    entitiesAtlasJSON: entitiesAtlasJSON,
+    entitiesAtlasIMG: entitiesAtlasIMG,
+    onBack: function onBack() {
+      return setSelectedMonster(null);
+    }
+  }));
+};
+var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
+  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$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 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,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    droppedBy = _ref.droppedBy,
+    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 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))));
+  };
+  return React.createElement(BaseInformationDetails, {
+    name: item.name,
+    spriteKey: item.texturePath,
+    atlasJSON: itemsAtlasJSON,
+    atlasIMG: itemsAtlasIMG,
+    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, {
+    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",
+    defaultOpen: !isMobile
+  }, React.createElement(EffectsList$2, null, item.entityEffects.map(function (effect, index) {
+    return React.createElement(EffectItem$2, {
+      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",
+    defaultOpen: !isMobile
+  }, React.createElement(BuffsList, null, item.equippedBuff.map(function (buff, index) {
+    return React.createElement(BuffItem, {
+      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",
+    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$1 = /*#__PURE__*/styled.div.withConfig({
+  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$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__InfoItem",
+  componentId: "sc-zwf6pb-1"
+})(["display:flex;align-items:center;gap:8px;"]);
+var Label$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InformationCenterItemDetails__Label",
+  componentId: "sc-zwf6pb-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"
+})(["color:", ";font-size:0.5rem;"], uiColors.white);
+var StyledCollapsible$2 = /*#__PURE__*/styled(Collapsible).withConfig({
+  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$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterItemDetails__StatGrid",
+  componentId: "sc-zwf6pb-6"
+})(["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"
+})(["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"
+})(["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"
+})(["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"
+})(["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 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 '#ffffff';
+  }
+});
+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 TOOLTIP_OFFSET = 20;
+var InformationCenterItemsSection = function InformationCenterItemsSection(_ref) {
+  var items = _ref.items,
+    bestiaryItems = _ref.bestiaryItems,
+    itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    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 _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
+      });
+    }
+  };
+  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);
+  };
+  var handleItemClick = function handleItemClick(item) {
+    setSelectedItem(item);
+    setHoveredItem(null);
+  };
+  var renderItem = function renderItem(item) {
+    return React.createElement(InformationCenterCell, {
+      key: item.key,
+      name: item.name,
+      spriteKey: item.texturePath,
+      atlasJSON: itemsAtlasJSON,
+      atlasIMG: itemsAtlasIMG,
+      onMouseEnter: function onMouseEnter(e) {
+        return handleMouseEnter(e, item);
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: function onTouchStart(e) {
+        return handleTouchStart(e, item);
+      },
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement(PaginatedContent, {
+    items: filteredItems,
+    renderItem: renderItem,
+    emptyMessage: "No items found",
+    filterOptions: {
+      options: itemCategoryOptions,
+      selectedOption: selectedItemCategory,
+      onOptionChange: setSelectedItemCategory
+    },
+    searchOptions: {
+      value: searchQuery,
+      onChange: setSearchQuery,
+      placeholder: 'Search items...'
+    },
+    dependencies: [selectedItemCategory],
+    tabId: tabId,
+    layout: "grid",
+    itemHeight: "180px"
+  }), hoveredItem && React.createElement(TooltipWrapper$1, {
+    style: {
+      top: tooltipPosition.y,
+      left: tooltipPosition.x
+    }
+  }, React.createElement(InformationCenterItemTooltip, {
+    item: hoveredItem
+  })), selectedItem && React.createElement(InformationCenterItemDetails, {
+    item: selectedItem,
+    itemsAtlasJSON: itemsAtlasJSON,
+    itemsAtlasIMG: itemsAtlasIMG,
+    droppedBy: getDroppedByNPCs(selectedItem.key, bestiaryItems),
+    onBack: function onBack() {
+      return setSelectedItem(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;"]);
+
+var InformationCenterTutorialsSection = function InformationCenterTutorialsSection(_ref) {
+  var videoGuides = _ref.videoGuides,
+    initialSearchQuery = _ref.initialSearchQuery,
+    tabId = _ref.tabId;
+  var _useState = useState(initialSearchQuery),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = useState('all'),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  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'
+  }];
+  var renderItem = function renderItem(guide) {
+    return React.createElement(GuideItem, {
+      key: guide.id
+    }, React.createElement(GuideThumbnail, null, React.createElement("img", {
+      src: guide.thumbnailUrl || '/placeholder-thumbnail.png',
+      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)));
+  };
+  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,
+      placeholder: 'Search guides...'
+    },
+    filterOptions: {
+      options: categoryOptions,
+      selectedOption: selectedCategory,
+      onOptionChange: setSelectedCategory
+    },
+    dependencies: [selectedCategory],
+    tabId: tabId,
+    layout: "grid",
+    gridColumns: 3,
+    itemsPerPage: 3,
+    itemHeight: "400px"
+  });
+};
+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);
+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;"]);
+var GuideContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenterTutorialsSection__GuideContent",
+  componentId: "sc-1gk05vk-2"
+})(["padding:12px;"]);
+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);
+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({
+  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);
+
+var InformationCenter = function InformationCenter(_ref) {
+  var itemsAtlasJSON = _ref.itemsAtlasJSON,
+    itemsAtlasIMG = _ref.itemsAtlasIMG,
+    entitiesAtlasJSON = _ref.entitiesAtlasJSON,
+    entitiesAtlasIMG = _ref.entitiesAtlasIMG,
+    _ref$faqItems = _ref.faqItems,
+    faqItems = _ref$faqItems === void 0 ? [] : _ref$faqItems,
+    _ref$bestiaryItems = _ref.bestiaryItems,
+    bestiaryItems = _ref$bestiaryItems === void 0 ? [] : _ref$bestiaryItems,
+    _ref$videoGuides = _ref.videoGuides,
+    videoGuides = _ref$videoGuides === void 0 ? [] : _ref$videoGuides,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    error = _ref.error,
+    _ref$initialSearchQue = _ref.initialSearchQuery,
+    initialSearchQuery = _ref$initialSearchQue === void 0 ? '' : _ref$initialSearchQue;
+  var _useState = useState('bestiary'),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var _useState2 = useState(null),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  if (loading) {
+    return React.createElement(LoadingMessage, null, "Loading...");
+  }
+  if (error) {
+    return React.createElement(ErrorMessage, null, error);
+  }
+  var tabs = [{
+    id: 'bestiary',
+    title: 'Bestiary',
+    content: React.createElement(InformationCenterBestiarySection, {
+      bestiaryItems: bestiaryItems,
+      itemsAtlasJSON: itemsAtlasJSON,
+      itemsAtlasIMG: itemsAtlasIMG,
+      entitiesAtlasJSON: entitiesAtlasJSON,
+      entitiesAtlasIMG: entitiesAtlasIMG,
+      initialSearchQuery: initialSearchQuery,
+      tabId: "bestiary"
+    })
+  }, {
+    id: 'items',
+    title: 'Items',
+    content: React.createElement(InformationCenterItemsSection, {
+      items: items,
+      bestiaryItems: bestiaryItems,
+      itemsAtlasJSON: itemsAtlasJSON,
+      itemsAtlasIMG: itemsAtlasIMG,
+      initialSearchQuery: initialSearchQuery,
+      tabId: "items"
+    })
+  }, {
+    id: 'faq',
+    title: 'FAQ',
+    content: React.createElement(InformationCenterFAQSection, {
+      faqItems: faqItems,
+      initialSearchQuery: initialSearchQuery,
+      tabId: "faq"
+    })
+  }, {
+    id: 'tutorials',
+    title: 'Tutorials',
+    content: React.createElement(InformationCenterTutorialsSection, {
+      videoGuides: videoGuides,
+      initialSearchQuery: initialSearchQuery,
+      tabId: "tutorials"
+    })
+  }];
+  return React.createElement(Container$r, null, React.createElement(InternalTabs, {
+    tabs: tabs,
+    activeTextColor: "#000000",
+    activeTab: activeTab,
+    onTabChange: setActiveTab,
+    activeColor: "#fef08a",
+    inactiveColor: "#6b7280",
+    borderColor: "#f59e0b",
+    hoverColor: "#fef3c7"
+  }), selectedItem && React.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.div.withConfig({
+  displayName: "InformationCenter__Container",
+  componentId: "sc-1ttl62e-0"
+})(["width:100%;max-width:800px;margin:0 auto;padding:1rem;"]);
+var LoadingMessage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenter__LoadingMessage",
+  componentId: "sc-1ttl62e-1"
+})(["text-align:center;color:#ffffff;padding:2rem;"]);
+var ErrorMessage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InformationCenter__ErrorMessage",
+  componentId: "sc-1ttl62e-2"
+})(["text-align:center;color:#ef4444;padding:2rem;"]);
+
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -30932,7 +32307,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$l, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$s, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -30950,7 +32325,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -31017,7 +32392,7 @@ var RangeSlider = /*#__PURE__*/React.memo(function (_ref) {
     style: {
       left: left
     }
-  })), React.createElement(Input$1, {
+  })), React.createElement(Input$2, {
     type: "range",
     style: {
       width: width
@@ -31030,7 +32405,7 @@ var RangeSlider = /*#__PURE__*/React.memo(function (_ref) {
     className: "rpgui-cursor-point"
   }));
 });
-var Input$1 = /*#__PURE__*/styled.input.withConfig({
+var Input$2 = /*#__PURE__*/styled.input.withConfig({
   displayName: "RangeSlider__Input",
   componentId: "sc-v8mte9-0"
 })(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
@@ -31064,7 +32439,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
   return React.createElement(StyledContainer, {
     type: RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React.createElement(CloseButton$5, {
+  }, React.createElement(CloseButton$6, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React.createElement("h2", null, title), React.createElement(StyledForm, {
@@ -31109,7 +32484,7 @@ var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
   displayName: "QuantitySelector__StyledContainer",
   componentId: "sc-z4ut57-0"
 })(["position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem;h2{margin:0;margin-bottom:1rem;font-size:1rem;}"]);
-var CloseButton$5 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuantitySelector__CloseButton",
   componentId: "sc-z4ut57-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;cursor:pointer;"]);
@@ -31402,7 +32777,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "20rem",
     onCloseButton: onClose
-  }, React.createElement(Container$m, null, React.createElement(Header$1, null, "Select Color"), React.createElement(HexColorPicker, {
+  }, React.createElement(Container$t, null, React.createElement(Header$3, null, "Select Color"), React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -31414,11 +32789,11 @@ var ColorSelector = function ColorSelector(_ref) {
     onClick: handleConfirm
   }, "Confirm"))) : null;
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["padding:2rem;text-align:center;background:inherit;"]);
-var Header$1 = /*#__PURE__*/styled.h2.withConfig({
+var Header$3 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "ItemPropertyColorSelector__Header",
   componentId: "sc-me1r4z-1"
 })(["font-family:'Press Start 2P',cursive;color:white;font-size:1rem;margin-bottom:1rem;"]);
@@ -31471,7 +32846,7 @@ var GemSelector = function GemSelector(_ref) {
     scale: scale,
     cancelDrag: ".gem-selector-container",
     onCloseButton: onClose
-  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$2, null, React.createElement(Title$3, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
+  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$4, null, React.createElement(Title$5, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
     return React.createElement(GemItem, {
       key: gem.key + "-" + index
     }, React.createElement(CheckItemWrapper, null, React.createElement(CheckItem, {
@@ -31502,7 +32877,7 @@ var GemSelector = function GemSelector(_ref) {
     disabled: selectedGems.length === 0
   }, "Confirm"))));
 };
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "GemSelector__Title",
   componentId: "sc-gbt8g4-0"
 })(["font-size:0.8rem;color:", " !important;"], uiColors.yellow);
@@ -31510,7 +32885,7 @@ var Subtitle = /*#__PURE__*/styled.h2.withConfig({
   displayName: "GemSelector__Subtitle",
   componentId: "sc-gbt8g4-1"
 })(["font-size:0.6rem;color:", ";margin:0;"], uiColors.white);
-var Header$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "GemSelector__Header",
   componentId: "sc-gbt8g4-2"
 })(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
@@ -31575,7 +32950,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$4, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
+  }, React.createElement(Title$6, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
     className: "golden"
   })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
     return React.createElement(RadioOptionsWrapper$1, {
@@ -31604,7 +32979,7 @@ var ItemSelector = function ItemSelector(_ref) {
     buttonType: ButtonTypes.RPGUIButton
   }, "Select")));
 };
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
@@ -31710,15 +33085,15 @@ var Leaderboard = function Leaderboard(props) {
       option: itemType
     };
   });
-  return React.createElement(React.Fragment, null, React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
+  return React.createElement(React.Fragment, null, React.createElement(WrapperContainer, null, React.createElement(StyledDropdown$1, {
     options: rankTypeOptions,
     onChange: onChangeRankType,
     width: "80%"
-  }), rankType === 'Class' ? React.createElement(StyledDropdown, {
+  }), rankType === 'Class' ? React.createElement(StyledDropdown$1, {
     options: classTypeOptions,
     onChange: onChangeClassType,
     width: "100%"
-  }) : null, rankType === 'Skill' ? React.createElement(StyledDropdown, {
+  }) : null, rankType === 'Skill' ? React.createElement(StyledDropdown$1, {
     options: skillTypeOptions,
     onChange: onChangeSkillType,
     width: "100%"
@@ -31734,7 +33109,7 @@ var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Leaderboard__WrapperContainer",
   componentId: "sc-1wdsq7i-0"
 })(["display:grid;grid-template-columns:50% 50%;justify-content:space-between;width:calc(100% - 40px);margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
-var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+var StyledDropdown$1 = /*#__PURE__*/styled(Dropdown).withConfig({
   displayName: "Leaderboard__StyledDropdown",
   componentId: "sc-1wdsq7i-1"
 })(["margin:3px !important;width:170px !important;"]);
@@ -31752,7 +33127,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$n, {
+  return React.createElement(Container$u, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -31769,7 +33144,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -31788,7 +33163,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$o, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$v, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -31802,7 +33177,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -31815,7 +33190,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$p, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$w, {
     onPointerDown: onClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -31838,7 +33213,7 @@ var Background = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -31864,7 +33239,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
   var renderGems = function renderGems(item) {
     return item.attachedGems && onRenderGems(item);
   };
-  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer$3, null, React.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -31930,7 +33305,7 @@ var GoldContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__GoldContainer",
   componentId: "sc-wmpr1o-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
-var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
   componentId: "sc-wmpr1o-6"
 })(["position:relative;left:0.5rem;"]);
@@ -32115,15 +33490,15 @@ var BuyPanel = function BuyPanel(_ref) {
     className: "big-input",
     onBlur: enableHotkeys,
     onFocus: disableHotkeys
-  }))), React.createElement(WrapperContainer$1, null, React.createElement(StyledDropdown$1, {
+  }))), React.createElement(WrapperContainer$1, null, React.createElement(StyledDropdown$2, {
     options: itemTypeOptions,
     onChange: onChangeType,
     width: "95%"
-  }), React.createElement(StyledDropdown$1, {
+  }), React.createElement(StyledDropdown$2, {
     options: itemRarityOptions,
     onChange: onChangeRarity,
     width: "95%"
-  }), React.createElement(StyledDropdown$1, {
+  }), React.createElement(StyledDropdown$2, {
     options: orderByOptions,
     onChange: onChangeOrder,
     width: "100%"
@@ -32167,7 +33542,7 @@ var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__ItemComponentScrollWrapper",
   componentId: "sc-1si8t7i-4"
 })(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
-var StyledDropdown$1 = /*#__PURE__*/styled(Dropdown).withConfig({
+var StyledDropdown$2 = /*#__PURE__*/styled(Dropdown).withConfig({
   displayName: "BuyPanel__StyledDropdown",
   componentId: "sc-1si8t7i-5"
 })(["margin:3px !important;width:170px !important;"]);
@@ -32363,13 +33738,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$q, {
+  return React.createElement(Container$x, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -32515,7 +33890,7 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$7, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
@@ -32538,7 +33913,7 @@ var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32587,7 +33962,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$6, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$8, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -32614,7 +33989,7 @@ var RowsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyDashboard__RowsWrapper",
   componentId: "sc-16cm41r-1"
 })(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
-var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32651,7 +34026,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$7, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$9, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -32670,7 +34045,7 @@ var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$7 = /*#__PURE__*/styled.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -33022,7 +34397,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$r, {
+  return React.createElement(Container$y, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -33052,7 +34427,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -33108,11 +34483,11 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$a, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
-  }))), React.createElement(Content, null, React.createElement("p", null, quests[currentIndex].description)), React.createElement(QuestColumn, {
+  }))), React.createElement(Content$3, null, React.createElement("p", null, quests[currentIndex].description)), React.createElement(QuestColumn, {
     className: "dark-background",
     justifyContent: "flex-end"
   }, buttons && buttons.map(function (button, index) {
@@ -33127,11 +34502,11 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$a, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
-  }))), React.createElement(Content, null, React.createElement("p", null, quests[0].description)), React.createElement(QuestColumn, {
+  }))), React.createElement(Content$3, null, React.createElement("p", null, quests[0].description)), React.createElement(QuestColumn, {
     className: "dark-background",
     justifyContent: "flex-end"
   }, buttons && buttons.map(function (button, index) {
@@ -33158,7 +34533,7 @@ var QuestsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__QuestsContainer",
   componentId: "sc-1wccpiy-2"
 })(["display:flex;align-items:center;"]);
-var Content = /*#__PURE__*/styled.div.withConfig({
+var Content$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__Content",
   componentId: "sc-1wccpiy-3"
 })(["padding:18px;h1{text-align:left;margin:14px 0px;}"]);
@@ -33174,7 +34549,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-1wccpiy-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$a = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -33193,19 +34568,19 @@ var QuestList = function QuestList(_ref) {
     return React.createElement(QuestCard, {
       key: i,
       style: styles == null ? void 0 : styles.card
-    }, React.createElement(QuestItem, null, React.createElement(Label, {
+    }, React.createElement(QuestItem, null, React.createElement(Label$2, {
       style: styles == null ? void 0 : styles.label
-    }, "Title:"), React.createElement(Value, {
+    }, "Title:"), React.createElement(Value$2, {
       style: styles == null ? void 0 : styles.value
-    }, formatQuestText(quest.title))), React.createElement(QuestItem, null, React.createElement(Label, {
+    }, formatQuestText(quest.title))), React.createElement(QuestItem, null, React.createElement(Label$2, {
       style: styles == null ? void 0 : styles.label
-    }, "Status:"), React.createElement(Value, {
+    }, "Status:"), React.createElement(Value$2, {
       style: _extends({}, styles == null ? void 0 : styles.value, {
         color: getQuestStatusColor(quest.status)
       })
-    }, (_formatQuestStatus = formatQuestStatus(quest.status)) != null ? _formatQuestStatus : 'Unknown')), React.createElement(QuestItem, null, React.createElement(Label, {
+    }, (_formatQuestStatus = formatQuestStatus(quest.status)) != null ? _formatQuestStatus : 'Unknown')), React.createElement(QuestItem, null, React.createElement(Label$2, {
       style: styles == null ? void 0 : styles.label
-    }, "Description:"), React.createElement(Value, {
+    }, "Description:"), React.createElement(Value$2, {
       style: styles == null ? void 0 : styles.value
     }, quest.description)));
   }) : React.createElement(NoQuestContainer, null, React.createElement("p", null, "There are no ongoing quests")));
@@ -33222,11 +34597,11 @@ var QuestItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestList__QuestItem",
   componentId: "sc-1c1y8sp-2"
 })(["display:flex;margin-bottom:5px;flex-wrap:wrap;&:last-child{margin-bottom:0;}"]);
-var Label = /*#__PURE__*/styled.span.withConfig({
+var Label$2 = /*#__PURE__*/styled.span.withConfig({
   displayName: "QuestList__Label",
   componentId: "sc-1c1y8sp-3"
 })(["font-weight:bold;color:", " !important;margin-right:10px;"], uiColors.yellow);
-var Value = /*#__PURE__*/styled.span.withConfig({
+var Value$2 = /*#__PURE__*/styled.span.withConfig({
   displayName: "QuestList__Value",
   componentId: "sc-1c1y8sp-4"
 })(["flex-grow:1;color:", ";word-wrap:break-word;"], uiColors.white);
@@ -33293,9 +34668,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$s, null, children);
+  return React.createElement(Container$z, null, children);
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -33451,7 +34826,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React.createElement(Container$t, {
+  return React.createElement(Container$A, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -33460,7 +34835,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -33516,7 +34891,7 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     var result = level * (buffAndDebuff / 100);
     return result > 0 ? "+" + result.toFixed(2) : "" + result.toFixed(2);
   };
-  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React.createElement(React.Fragment, null, buffAndDebuff > 0 ? React.createElement(BuffAndDebuffContainer, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameBuff, null, skillName), React.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement(TitleNameBuffContainer, null, React.createElement(TitleNameBuff, null, "(+", formatBuffAndDebuff(buffAndDebuff), "%)"))) : buffAndDebuff < 0 ? React.createElement(React.Fragment, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameDebuff, null, skillName), React.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement("div", null, React.createElement(TitleNameDebuff, null, "(", formatBuffAndDebuff(buffAndDebuff), "%)"))) : React.createElement(TitleName, null, skillName)), !buffAndDebuff && React.createElement(TitleNameContainer, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level))), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$2, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React.createElement(React.Fragment, null, buffAndDebuff > 0 ? React.createElement(BuffAndDebuffContainer, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameBuff, null, skillName), React.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement(TitleNameBuffContainer, null, React.createElement(TitleNameBuff, null, "(+", formatBuffAndDebuff(buffAndDebuff), "%)"))) : buffAndDebuff < 0 ? React.createElement(React.Fragment, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameDebuff, null, skillName), React.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement("div", null, React.createElement(TitleNameDebuff, null, "(", formatBuffAndDebuff(buffAndDebuff), "%)"))) : React.createElement(TitleName, null, skillName)), !buffAndDebuff && React.createElement(TitleNameContainer, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level))), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$4, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -33532,7 +34907,7 @@ var ProgressBarWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressBarWrapper",
   componentId: "sc-5vuroc-0"
 })(["position:relative;&:hover ", ",&:active ", "{visibility:visible;}width:100%;height:auto;top:8px;"], Tooltip, Tooltip);
-var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__SpriteContainer",
   componentId: "sc-5vuroc-1"
 })(["position:relative;top:-3px;left:0;"]);
@@ -33686,7 +35061,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React.createElement(CloseButton$6, {
+  }, onCloseButton && React.createElement(CloseButton$7, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -33721,7 +35096,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$6 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -33793,7 +35168,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$u, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$B, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React.createElement(ButtonsContainer$1, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
@@ -33811,7 +35186,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -33847,7 +35222,7 @@ var formatSpellCastingType = function formatSpellCastingType(castingType) {
   return formattedCastingType;
 };
 
-var SpellInfo = function SpellInfo(_ref) {
+var SpellInfo$1 = function SpellInfo(_ref) {
   var spell = _ref.spell;
   var magicWords = spell.magicWords,
     name = spell.name,
@@ -33857,7 +35232,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$v, null, React.createElement(Header$3, null, React.createElement("div", null, React.createElement(Title$9, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$C, null, React.createElement(Header$5, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -33881,13 +35256,13 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "label"
   }, "Required Item:"), React.createElement("div", {
     className: "value"
-  }, requiredItem))), React.createElement(Description$2, null, description));
+  }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$9 = /*#__PURE__*/styled.div.withConfig({
+var Title$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -33895,11 +35270,11 @@ var Type$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Type",
   componentId: "sc-4hbw3q-2"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
-var Description$2 = /*#__PURE__*/styled.div.withConfig({
+var Description$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$3 = /*#__PURE__*/styled.div.withConfig({
+var Header$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -33913,7 +35288,7 @@ var SpellInfoDisplay = function SpellInfoDisplay(_ref) {
     isMobile = _ref.isMobile;
   return React.createElement(Flex$3, {
     "$isMobile": isMobile
-  }, React.createElement(SpellInfo, {
+  }, React.createElement(SpellInfo$1, {
     spell: spell
   }));
 };
@@ -33937,7 +35312,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$w, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$D, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -33962,7 +35337,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -34003,13 +35378,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$x, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$E, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -34082,11 +35457,11 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$y, {
+  }, React.createElement(Container$F, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+  }, disabled && React.createElement(Overlay$1, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -34095,13 +35470,13 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$c, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React.createElement(Description$3, null, description)), React.createElement(Divider$1, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+  }, "(", magicWords, ")")), React.createElement(Description$5, null, description)), React.createElement(Divider$1, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
-var Container$y = /*#__PURE__*/styled.button.withConfig({
+var Container$F = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -34116,11 +35491,11 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$a = /*#__PURE__*/styled.p.withConfig({
+var Title$c = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$3 = /*#__PURE__*/styled.div.withConfig({
+var Description$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -34132,7 +35507,7 @@ var Cost = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay = /*#__PURE__*/styled.p.withConfig({
+var Overlay$1 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
@@ -34180,7 +35555,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$z, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$G, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -34196,7 +35571,7 @@ var Spellbook = function Spellbook(_ref) {
     onFocus: onInputFocus,
     onBlur: onInputBlur,
     id: "spellbook-search"
-  }), React.createElement(SpellList, null, spellsToDisplay.map(function (spell) {
+  }), React.createElement(SpellList$1, null, spellsToDisplay.map(function (spell) {
     return React.createElement(Fragment, {
       key: spell.key
     }, React.createElement(Spell, Object.assign({
@@ -34212,15 +35587,15 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$b = /*#__PURE__*/styled.h1.withConfig({
+var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
-var SpellList = /*#__PURE__*/styled.div.withConfig({
+var SpellList$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__SpellList",
   componentId: "sc-r02nfq-2"
 })(["width:100%;min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;"]);
@@ -34402,7 +35777,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$7, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$8, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -34419,7 +35794,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$7 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$8 = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -34528,7 +35903,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$3, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$5, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -34600,7 +35975,7 @@ var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
   componentId: "sc-mja0b5-3"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 40px;"]);
-var SpriteContainer$3 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
   componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0;"]);
@@ -34698,7 +36073,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$A, null, React.createElement(Title$c, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$H, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -34715,7 +36090,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     });
-  })), React.createElement(InfoSection, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$3, null, React.createElement(Button, {
+  })), React.createElement(InfoSection$2, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$3, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -34726,11 +36101,11 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$H = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$c = /*#__PURE__*/styled.h1.withConfig({
+var Title$e = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -34738,7 +36113,7 @@ var ScrollWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ScrollWrapper",
   componentId: "sc-1wjsz1l-2"
 })(["overflow-y:scroll;height:250px;width:100%;margin-top:0.3rem;overflow-x:hidden;padding:0 0.3rem;"]);
-var InfoSection = /*#__PURE__*/styled.div.withConfig({
+var InfoSection$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__InfoSection",
   componentId: "sc-1wjsz1l-3"
 })(["margin-top:0.3rem;padding:0 0.5rem;"]);
@@ -34760,11 +36135,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$B, {
+  return React.createElement(Container$I, {
     maxLines: maxLines
   }, children);
 };
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$I = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -34872,7 +36247,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$C, null, React.createElement(Stepper, {
+  return React.createElement(Container$J, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -34889,7 +36264,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -34910,5 +36285,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map