@rpg-engine/long-bow 0.8.34 → 0.8.36

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

@@ -27525,175 +27525,6 @@ function useTouchTarget() {
   return getTouchTarget;
 }
 
-var rarityColor = function rarityColor(item) {
-  switch (item == null ? void 0 : item.rarity) {
-    case shared.ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case shared.ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case shared.ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case shared.ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
-
-var gemColors = {
-  'emerald-gem': '#50C878',
-  'topaz-radiance': '#FFC87C',
-  'sapphire-gem': '#0F52BA',
-  'ruby-gem': '#E0115F',
-  'misty-quartz-gem': '#D9D9F3',
-  'coral-reef-gem': '#FF7F50',
-  'jasper-gem': '#D73B3E',
-  'earthstone-gem': '#8B4513',
-  'obsidian-gem': '#0B0C0E',
-  'amethyst-gem': '#9966CC'
-};
-var defaultColor = '#FFFFFF'; // Default color (white)
-var onRenderGems = function onRenderGems(item) {
-  var _item$attachedGems;
-  var gemQty = ((_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.length) || 0;
-  if (gemQty > 0) {
-    return React__default.createElement(ItemSlotQty, {
-      item: item
-    });
-  }
-  return undefined;
-};
-var ItemSlotQty = function ItemSlotQty(_ref) {
-  var _item$attachedGems2;
-  var item = _ref.item;
-  var itemId = item._id;
-  return React__default.createElement(ItemQtyContainer, {
-    key: "qty-" + itemId,
-    className: "item-slot-qty"
-  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
-    return React__default.createElement(Gem, {
-      key: itemId + "-gem-" + index,
-      color: gemColors[gem.key] || defaultColor
-    });
-  }));
-};
-var ItemQtyContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemGem__ItemQtyContainer",
-  componentId: "sc-1ekseaq-0"
-})(["position:relative;width:85%;height:16px;top:28px;left:0px;pointer-events:none;transform:scale(0.8);display:flex;align-items:center;justify-content:flex-start;opacity:0.8;"]);
-var Gem = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemGem__Gem",
-  componentId: "sc-1ekseaq-1"
-})(["width:8px;height:8px;background:", ";border:1px solid black;transform:rotate(45deg);margin:0 2px;box-shadow:0 0 5px ", ";transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:rotate(45deg) scale(1.2);box-shadow:0 0 10px ", ";}"], function (_ref2) {
-  var color = _ref2.color;
-  return "radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8), transparent 30%), \n     linear-gradient(45deg, " + color + ", " + color + " 50%, rgba(255, 255, 255, 0.2))";
-}, function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, function (_ref4) {
-  var color = _ref4.color;
-  return color;
-});
-
-var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
-  var isFractionalStackQty = stackQty % 1 !== 0;
-  var isLargerThan999 = stackQty > 999;
-  var qtyClassName = 'regular';
-  if (isLargerThan999) qtyClassName = 'small';
-  if (isFractionalStackQty) qtyClassName = 'xsmall';
-  if (stackQty > 1) {
-    return React__default.createElement(ItemSlotQty$1, {
-      itemId: itemId,
-      stackQty: stackQty,
-      qtyClassName: qtyClassName
-    });
-  }
-  return undefined;
-};
-var ItemSlotQty$1 = function ItemSlotQty(_ref) {
-  var itemId = _ref.itemId,
-    stackQty = _ref.stackQty,
-    qtyClassName = _ref.qtyClassName;
-  return React__default.createElement(ItemQtyContainer$1, {
-    key: "qty-" + itemId,
-    className: "item-slot-qty"
-  }, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "48px"
-  }, React__default.createElement(ItemQty, {
-    className: qtyClassName
-  }, Math.round(stackQty * 100) / 100, ' ')));
-};
-var ItemQtyContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemSlotQty__ItemQtyContainer",
-  componentId: "sc-keb1s5-0"
-})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
-var ItemQty = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "ItemSlotQty__ItemQty",
-  componentId: "sc-keb1s5-1"
-})(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
-
-var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
-  var containerType = _ref.containerType,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    slotSpriteMask = _ref.slotSpriteMask,
-    item = _ref.item;
-  var renderStackInfo = function renderStackInfo(item) {
-    return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
-  };
-  var renderGems = function renderGems(item) {
-    return item.attachedGems && onRenderGems(item);
-  };
-  var renderItem = function renderItem(item) {
-    if (!(item != null && item.texturePath)) {
-      return null;
-    }
-    return React__default.createElement(ErrorBoundary, {
-      key: item._id
-    }, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: shared.getItemTextureKeyPath({
-        key: item.texturePath,
-        texturePath: item.texturePath,
-        stackQty: item.stackQty || 1,
-        isStackable: item.isStackable
-      }, atlasJSON),
-      imgScale: 3,
-      imgClassname: "sprite-from-atlas-img--item",
-      tintColor: item.tintColor
-    }), renderStackInfo(item), renderGems(item));
-  };
-  var renderEquipment = function renderEquipment(itemToRender) {
-    var _itemToRender$allowed;
-    if (!(itemToRender != null && itemToRender.texturePath) || !((_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask))) {
-      return React__default.createElement(ErrorBoundary, {
-        key: uuid.v4()
-      }, React__default.createElement(SpriteFromAtlas, {
-        key: uuid.v4(),
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
-        imgScale: 3,
-        grayScale: true,
-        opacity: 0.4,
-        imgClassname: "sprite-from-atlas-img--item"
-      }));
-    }
-    return renderItem(itemToRender);
-  };
-  var onRenderSlot = function onRenderSlot(itemToRender) {
-    switch (containerType) {
-      case shared.ItemContainerType.Equipment:
-        return renderEquipment(itemToRender);
-      default:
-        return renderItem(itemToRender);
-    }
-  };
-  return React__default.createElement(React__default.Fragment, null, onRenderSlot(item));
-};
-
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -27955,6 +27786,194 @@ var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
   }, children);
 };
 
+var qualityColorHex = function qualityColorHex(item) {
+  switch (item == null ? void 0 : item.quality) {
+    case shared.ItemQualityLevel.HighQuality:
+      return '#00bfff';
+    case shared.ItemQualityLevel.Exceptional:
+      return '#ff8c00';
+    case shared.ItemQualityLevel.Mastercrafted:
+      return '#ff00ff';
+    case shared.ItemQualityLevel.Ancient:
+      return '#ffd700';
+    case shared.ItemQualityLevel.Mythic:
+      return '#ff0080';
+    default:
+      return 'transparent';
+  }
+};
+
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case shared.ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case shared.ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case shared.ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case shared.ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};
+
+var gemColors = {
+  'emerald-gem': '#50C878',
+  'topaz-radiance': '#FFC87C',
+  'sapphire-gem': '#0F52BA',
+  'ruby-gem': '#E0115F',
+  'misty-quartz-gem': '#D9D9F3',
+  'coral-reef-gem': '#FF7F50',
+  'jasper-gem': '#D73B3E',
+  'earthstone-gem': '#8B4513',
+  'obsidian-gem': '#0B0C0E',
+  'amethyst-gem': '#9966CC'
+};
+var defaultColor = '#FFFFFF'; // Default color (white)
+var onRenderGems = function onRenderGems(item) {
+  var _item$attachedGems;
+  var gemQty = ((_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.length) || 0;
+  if (gemQty > 0) {
+    return React__default.createElement(ItemSlotQty, {
+      item: item
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty = function ItemSlotQty(_ref) {
+  var _item$attachedGems2;
+  var item = _ref.item;
+  var itemId = item._id;
+  return React__default.createElement(ItemQtyContainer, {
+    key: "qty-" + itemId,
+    className: "item-slot-qty"
+  }, (_item$attachedGems2 = item.attachedGems) == null ? void 0 : _item$attachedGems2.map(function (gem, index) {
+    return React__default.createElement(Gem, {
+      key: itemId + "-gem-" + index,
+      color: gemColors[gem.key] || defaultColor
+    });
+  }));
+};
+var ItemQtyContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemGem__ItemQtyContainer",
+  componentId: "sc-1ekseaq-0"
+})(["position:relative;width:85%;height:16px;top:28px;left:0px;pointer-events:none;transform:scale(0.8);display:flex;align-items:center;justify-content:flex-start;opacity:0.8;"]);
+var Gem = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemGem__Gem",
+  componentId: "sc-1ekseaq-1"
+})(["width:8px;height:8px;background:", ";border:1px solid black;transform:rotate(45deg);margin:0 2px;box-shadow:0 0 5px ", ";transition:transform 0.2s,box-shadow 0.2s;&:hover{transform:rotate(45deg) scale(1.2);box-shadow:0 0 10px ", ";}"], function (_ref2) {
+  var color = _ref2.color;
+  return "radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8), transparent 30%), \n     linear-gradient(45deg, " + color + ", " + color + " 50%, rgba(255, 255, 255, 0.2))";
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var color = _ref4.color;
+  return color;
+});
+
+var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
+  var isFractionalStackQty = stackQty % 1 !== 0;
+  var isLargerThan999 = stackQty > 999;
+  var qtyClassName = 'regular';
+  if (isLargerThan999) qtyClassName = 'small';
+  if (isFractionalStackQty) qtyClassName = 'xsmall';
+  if (stackQty > 1) {
+    return React__default.createElement(ItemSlotQty$1, {
+      itemId: itemId,
+      stackQty: stackQty,
+      qtyClassName: qtyClassName
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty$1 = function ItemSlotQty(_ref) {
+  var itemId = _ref.itemId,
+    stackQty = _ref.stackQty,
+    qtyClassName = _ref.qtyClassName;
+  return React__default.createElement(ItemQtyContainer$1, {
+    key: "qty-" + itemId,
+    className: "item-slot-qty"
+  }, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "48px"
+  }, React__default.createElement(ItemQty, {
+    className: qtyClassName
+  }, Math.round(stackQty * 100) / 100, ' ')));
+};
+var ItemQtyContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemSlotQty__ItemQtyContainer",
+  componentId: "sc-keb1s5-0"
+})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
+var ItemQty = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "ItemSlotQty__ItemQty",
+  componentId: "sc-keb1s5-1"
+})(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
+
+var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
+  var containerType = _ref.containerType,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    slotSpriteMask = _ref.slotSpriteMask,
+    item = _ref.item;
+  var renderStackInfo = function renderStackInfo(item) {
+    return item.stackQty && item.stackQty > 1 && onRenderStackInfo(item._id, item.stackQty);
+  };
+  var renderGems = function renderGems(item) {
+    return item.attachedGems && onRenderGems(item);
+  };
+  var renderItem = function renderItem(item) {
+    if (!(item != null && item.texturePath)) {
+      return null;
+    }
+    return React__default.createElement(ErrorBoundary, {
+      key: item._id
+    }, item.quality && item.quality !== shared.ItemQualityLevel.Normal && React__default.createElement("div", {
+      className: "quality-star"
+    }, "\u2605"), React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: shared.getItemTextureKeyPath({
+        key: item.texturePath,
+        texturePath: item.texturePath,
+        stackQty: item.stackQty || 1,
+        isStackable: item.isStackable
+      }, atlasJSON),
+      imgScale: 3,
+      imgClassname: "sprite-from-atlas-img--item",
+      tintColor: item.tintColor
+    }), renderStackInfo(item), renderGems(item));
+  };
+  var renderEquipment = function renderEquipment(itemToRender) {
+    var _itemToRender$allowed;
+    if (!(itemToRender != null && itemToRender.texturePath) || !((_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask))) {
+      return React__default.createElement(ErrorBoundary, {
+        key: uuid.v4()
+      }, React__default.createElement(SpriteFromAtlas, {
+        key: uuid.v4(),
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
+        imgScale: 3,
+        grayScale: true,
+        opacity: 0.4,
+        imgClassname: "sprite-from-atlas-img--item"
+      }));
+    }
+    return renderItem(itemToRender);
+  };
+  var onRenderSlot = function onRenderSlot(itemToRender) {
+    switch (containerType) {
+      case shared.ItemContainerType.Equipment:
+        return renderEquipment(itemToRender);
+      default:
+        return renderItem(itemToRender);
+    }
+  };
+  return onRenderSlot(item);
+};
+
 var EquipmentSlotSpriteByType = {
   Neck: 'accessories/corruption-necklace.png',
   LeftHand: 'swords/broad-sword.png',
@@ -28271,7 +28290,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
 var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}.quality-star{position:absolute;top:0.5rem;left:0.5rem;font-size:1.2rem;z-index:2;text-shadow:0 0 3px black;pointer-events:none;color:", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
 }, function (_ref3) {
@@ -28284,7 +28303,10 @@ var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   var item = _ref5.item;
   return "0 0 4px 3px " + rarityColor(item);
 }, function (_ref6) {
-  var isSelectingShortcut = _ref6.isSelectingShortcut;
+  var item = _ref6.item;
+  return qualityColorHex(item);
+}, function (_ref7) {
+  var isSelectingShortcut = _ref7.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled__default.div.withConfig({
@@ -28401,10 +28423,16 @@ var ItemInfo = function ItemInfo(_ref) {
 var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
-})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
+})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";box-shadow:", ";height:max-content;width:18rem;position:relative;", " @media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
   var _rarityColor;
   var item = _ref2.item;
   return (_rarityColor = rarityColor(item)) != null ? _rarityColor : uiColors.lightGray;
+}, function (_ref3) {
+  var item = _ref3.item;
+  return "0 0 5px 2px " + rarityColor(item);
+}, function (_ref4) {
+  var item = _ref4.item;
+  return (item == null ? void 0 : item.quality) && item.quality !== shared.ItemQualityLevel.Normal && "\n    &::before {\n      content: '\u2605';\n      position: absolute;\n      top: 0.2rem;\n      left: 0.5rem;\n      font-size: 1.2rem;\n      color: " + qualityColorHex(item) + ";\n      text-shadow: 0 0 3px black;\n    }\n  ";
 });
 var Title$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Title",
@@ -28413,8 +28441,8 @@ var Title$1 = /*#__PURE__*/styled__default.div.withConfig({
 var Rarity = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Rarity",
   componentId: "sc-1xm4q8k-2"
-})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref3) {
-  var item = _ref3.item;
+})(["font-size:", ";font-weight:normal;margin-top:0.2rem;color:", ";filter:brightness(1.5);"], uiFonts.size.small, function (_ref5) {
+  var item = _ref5.item;
   return rarityColor(item);
 });
 var Type = /*#__PURE__*/styled__default.div.withConfig({
@@ -28428,8 +28456,8 @@ var LevelRequirement = /*#__PURE__*/styled__default.div.withConfig({
 var Statistic = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Statistic",
   componentId: "sc-1xm4q8k-5"
-})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref4) {
-  var $isSpecial = _ref4.$isSpecial;
+})(["margin-bottom:0.4rem;width:100%;color:", ";.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], function (_ref6) {
+  var $isSpecial = _ref6.$isSpecial;
   return $isSpecial ? uiColors.darkYellow : 'inherit';
 }, uiColors.lightGreen, uiColors.cardinal);
 var Description = /*#__PURE__*/styled__default.div.withConfig({
@@ -30770,6 +30798,9 @@ var FadeInCarouselImg = /*#__PURE__*/styled__default(CarouselImg).withConfig({
   componentId: "sc-gdvbly-5"
 })(["animation:", " 0.5s;"], fadeIn);
 
+var UI_BREAKPOINT_MOBILE = '950px';
+var UI_BREAKPOINT_SMALL_LAPTOP = '1400px';
+
 var InternalTabs = function InternalTabs(_ref) {
   var _tabs$find;
   var tabs = _ref.tabs,
@@ -30818,39 +30849,56 @@ var TabHeader = /*#__PURE__*/styled__default.div.withConfig({
 var TabButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "InternalTabs__TabButton",
   componentId: "sc-ldufv0-2"
-})(["flex:1;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
+})(["flex:1;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:480px){padding:0.375rem 0.75rem;font-size:0.8125rem;}@media (min-width:", "){padding:0.5rem 1rem;font-size:0.875rem;}&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
   return props.borderColor;
 }, function (props) {
   return props.active ? props.activeColor : 'transparent';
 }, function (props) {
   return props.active ? props.activeTextColor : props.inactiveColor;
-}, function (props) {
+}, UI_BREAKPOINT_MOBILE, function (props) {
   return props.active ? props.activeColor : props.hoverColor;
 });
 var ContentWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InternalTabs__ContentWrapper",
   componentId: "sc-ldufv0-3"
-})([""]);
+})(["width:100%;"]);
 
-var TOOLTIP_WIDTH = 300;
 var TOOLTIP_OFFSET = 10;
 var MIN_VISIBLE_HEIGHT = 100;
 var useTooltipPosition = function useTooltipPosition() {
+  // Dynamically calculate tooltip width based on screen size
+  var getTooltipWidth = function getTooltipWidth() {
+    var viewportWidth = window.innerWidth;
+    if (viewportWidth < 360) {
+      return Math.min(280, viewportWidth - 20);
+    }
+    if (viewportWidth < 480) {
+      return 300;
+    }
+    return 320;
+  };
+  var TOOLTIP_WIDTH = getTooltipWidth();
   var _useState = React.useState(null),
     tooltipState = _useState[0],
     setTooltipState = _useState[1];
   var calculateTooltipPosition = function calculateTooltipPosition(rect) {
     var viewportWidth = window.innerWidth;
     var viewportHeight = window.innerHeight;
+    var tooltipWidth = getTooltipWidth();
     // Try to position to the right first
     var x = rect.right + TOOLTIP_OFFSET;
     // If it would overflow right, try positioning to the left
-    if (x + TOOLTIP_WIDTH > viewportWidth - TOOLTIP_OFFSET) {
-      x = rect.left - TOOLTIP_WIDTH - TOOLTIP_OFFSET;
+    if (x + tooltipWidth > viewportWidth - TOOLTIP_OFFSET) {
+      x = rect.left - tooltipWidth - TOOLTIP_OFFSET;
     }
-    // If left positioning would go off screen, position relative to viewport
+    // If left positioning would go off screen, center it or position relative to viewport
     if (x < TOOLTIP_OFFSET) {
-      x = TOOLTIP_OFFSET;
+      if (viewportWidth < 400) {
+        // For very small screens, center the tooltip
+        x = Math.max(TOOLTIP_OFFSET, (viewportWidth - tooltipWidth) / 2);
+      } else {
+        x = TOOLTIP_OFFSET;
+      }
     }
     // Position vertically aligned with the top of the element
     var y = rect.top;
@@ -31083,15 +31131,17 @@ var PaginatedContent = function PaginatedContent(_ref) {
 var Container$n = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaginatedContent__Container",
   componentId: "sc-lzp9hn-0"
-})(["display:flex;flex-direction:column;gap:1rem;min-height:400px;width:100%;"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;min-height:400px;width:100%;"]);
 var Content = /*#__PURE__*/styled__default.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) {
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:0.25rem;min-height:200px;max-height:", ";overflow-y:", ";box-sizing:border-box;@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:1rem;}&.grid{display:grid;grid-template-columns:1fr;gap:0.5rem;align-items:start;justify-content:center;width:100%;overflow-x:hidden;@media (min-width:320px){grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}@media (min-width:400px){grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:0.75rem;}@media (min-width:480px){grid-template-columns:repeat(2,minmax(135px,1fr));gap:1rem;}@media (min-width:768px){grid-template-columns:repeat(3,minmax(135px,1fr));}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(135px,1fr) );}@media (min-width:", "){grid-template-columns:repeat( ", ",minmax(135px,1fr) );}.PaginatedContent-item{display:flex;align-items:flex-start;justify-content:center;height:", ";width:100%;box-sizing:border-box;min-height:135px;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], function (props) {
   return props.$maxHeight;
 }, function (props) {
   return props.$maxHeight ? 'auto' : 'visible';
-}, function (props) {
+}, UI_BREAKPOINT_MOBILE, function (props) {
+  return Math.min(props.$gridColumns, 4);
+}, UI_BREAKPOINT_SMALL_LAPTOP, function (props) {
   return props.$gridColumns;
 }, function (props) {
   var _props$$itemHeight;
@@ -31100,7 +31150,7 @@ var Content = /*#__PURE__*/styled__default.div.withConfig({
 var PaginationContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaginatedContent__PaginationContainer",
   componentId: "sc-lzp9hn-2"
-})(["display:flex;justify-content:center;padding:1rem;"]);
+})(["display:flex;justify-content:center;padding:0.5rem;@media (min-width:480px){padding:1rem;}"]);
 var EmptyMessage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaginatedContent__EmptyMessage",
   componentId: "sc-lzp9hn-3"
@@ -31144,20 +31194,24 @@ var InformationCenterCell = function InformationCenterCell(_ref) {
     width: 32,
     height: 32,
     imgScale: 1
-  })), React__default.createElement(CellName, null, name));
+  })), React__default.createElement(CellNameContainer, null, React__default.createElement(CellName, null, name)));
 };
 var CellContainer = /*#__PURE__*/styled__default.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);}"]);
+})(["position:relative;background:rgba(0,0,0,0.2);padding:0.25rem;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;transition:background-color 0.2s ease;width:100%;height:100%;min-height:135px;box-sizing:border-box;gap:0.25rem;margin:0;@media (min-width:360px){padding:0.75rem;gap:0.75rem;margin:2px;width:calc(100% - 4px);}@media (min-width:", "){min-height:150px;}&:hover{background:rgba(0,0,0,0.3);}"], UI_BREAKPOINT_MOBILE);
 var SpriteContainer$1 = /*#__PURE__*/styled__default.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;}"]);
+})(["margin-bottom:0;display:flex;justify-content:center;align-items:center;width:40px;height:40px;position:relative;background:rgba(0,0,0,0.3);border-radius:4px;flex-shrink:0;@media (min-width:360px){width:48px;height:48px;}@media (min-width:480px){width:64px;height:64px;}@media (min-width:", "){width:72px;height:72px;}.sprite-from-atlas-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);image-rendering:pixelated;}"], UI_BREAKPOINT_MOBILE);
+var CellNameContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "InformationCenterCell__CellNameContainer",
+  componentId: "sc-w48fdf-2"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:1;width:100%;padding-top:0.25rem;"]);
 var CellName = /*#__PURE__*/styled__default.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%;"]);
+  componentId: "sc-w48fdf-3"
+})(["font-size:0.55rem;color:#fef08a;margin:0;text-align:center;font-family:'Press Start 2P',cursive;line-height:1.2;word-break:break-word;max-width:100%;overflow-wrap:break-word;hyphens:auto;width:100%;padding:0 0.125rem;box-sizing:border-box;@media (min-width:320px){padding:0 0.25rem;}@media (min-width:360px){font-size:0.6rem;}@media (min-width:480px){font-size:0.7rem;}@media (min-width:", "){font-size:0.8rem;}"], UI_BREAKPOINT_MOBILE);
 
 var BaseInformationDetails = function BaseInformationDetails(_ref) {
   var name = _ref.name,
@@ -31498,18 +31552,64 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       case 'dropdown':
         return React__default.createElement(FilterSection, {
           key: section.key
-        }, React__default.createElement(Label$1, null, section.label), React__default.createElement(Dropdown, {
+        }, React__default.createElement(Label$1, null, section.label), React__default.createElement(StyledDropdownWrapper, null, React__default.createElement(Dropdown, {
           options: section.options || [],
           onChange: section.onChange,
           width: "100%"
-        }));
+        })));
       default:
         return null;
     }
   };
+  // Calculate button position for the portal
+  var _React$useState = React__default.useState({
+      top: 0,
+      left: 0,
+      isMobile: false
+    }),
+    buttonPosition = _React$useState[0],
+    setButtonPosition = _React$useState[1];
+  var buttonRef = React.useRef(null);
+  var panelRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isOpen && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      var isMobileView = window.innerWidth < 480;
+      if (isMobileView) {
+        // Center in the screen for mobile
+        setButtonPosition({
+          top: Math.max(50, window.innerHeight / 2 - 150),
+          left: window.innerWidth / 2,
+          isMobile: true
+        });
+      } else {
+        // Position below the button for larger screens
+        setButtonPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + rect.width / 2 + window.scrollX,
+          isMobile: false
+        });
+      }
+    }
+  }, [isOpen]);
+  // Handle click outside to close the panel
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (isOpen && panelRef.current && !panelRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        onToggle();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onToggle]);
   return React__default.createElement(Container$q, null, React__default.createElement(FilterButton, {
     onClick: onToggle,
-    "$hasActiveFilters": hasActiveFilters
+    "$hasActiveFilters": hasActiveFilters,
+    ref: buttonRef
   }, hasActiveFilters ? React__default.createElement(ai.AiFillFilter, {
     size: 20
   }) : React__default.createElement(ai.AiOutlineFilter, {
@@ -31522,9 +31622,21 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       return rangeValue[0] !== undefined || rangeValue[1] !== undefined;
     }
     return section.value !== 'all';
-  }).length)), isOpen && React__default.createElement(FiltersPanel, null, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters")), sections.map(renderFilterSection), hasActiveFilters && React__default.createElement(ClearFiltersButton, {
+  }).length)), isOpen && React__default.createElement(Portal, null, React__default.createElement(FiltersPanel, {
+    ref: panelRef,
+    style: {
+      position: 'fixed',
+      top: buttonPosition.top + "px",
+      left: buttonPosition.left + "px",
+      transform: 'translateX(-50%)',
+      zIndex: 9999
+    },
+    "$isMobile": buttonPosition.isMobile
+  }, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters"), buttonPosition.isMobile && React__default.createElement(CloseButton$6, {
+    onClick: onToggle
+  }, "\xD7")), sections.map(renderFilterSection), hasActiveFilters && React__default.createElement(ClearFiltersButton, {
     onClick: onClearAll
-  }, "Clear All Filters")));
+  }, "Clear All Filters"))));
 };
 var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__Container",
@@ -31553,7 +31665,9 @@ var FilterCount = /*#__PURE__*/styled__default.div.withConfig({
 var FiltersPanel = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__FiltersPanel",
   componentId: "sc-1xj6ldr-3"
-})(["position:absolute;top:calc(100% + 0.75rem);right:-8px;background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:1rem;z-index:1000;min-width:280px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.3);&:before{content:'';position:absolute;top:-6px;right:16px;width:12px;height:12px;background:#1a1a1a;border-left:1px solid #333;border-top:1px solid #333;transform:rotate(45deg);}"]);
+})(["background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:1rem;width:280px;max-width:calc(100vw - 20px);display:flex;flex-direction:column;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.3);font-family:'Press Start 2P',cursive;@media (max-width:320px){width:250px;padding:0.75rem;gap:0.75rem;}&:before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#1a1a1a;border-left:1px solid #333;border-top:1px solid #333;display:", ";}"], function (props) {
+  return props.$isMobile ? 'none' : 'block';
+});
 var FilterHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__FilterHeader",
   componentId: "sc-1xj6ldr-4"
@@ -31561,7 +31675,7 @@ var FilterHeader = /*#__PURE__*/styled__default.div.withConfig({
 var FilterTitle = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__FilterTitle",
   componentId: "sc-1xj6ldr-5"
-})(["font-weight:600;color:#ffd700;font-size:0.875rem;"]);
+})(["font-weight:600;color:#ffd700;font-size:0.75rem;"]);
 var FilterSection = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__FilterSection",
   componentId: "sc-1xj6ldr-6"
@@ -31569,15 +31683,23 @@ var FilterSection = /*#__PURE__*/styled__default.div.withConfig({
 var Label$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__Label",
   componentId: "sc-1xj6ldr-7"
-})(["color:#999;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;"]);
+})(["color:#999;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;"]);
 var RangeInputs = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "AdvancedFilters__RangeInputs",
   componentId: "sc-1xj6ldr-8"
-})(["display:flex;align-items:center;gap:0.5rem;input{width:80px;background:#262626 !important;border:1px solid #333 !important;color:#fff !important;}svg{color:#666;font-size:0.875rem;}"]);
+})(["display:flex;align-items:center;gap:0.5rem;input{width:80px;background:#262626 !important;border:1px solid #444 !important;border-radius:4px !important;color:#ddd !important;font-size:0.65rem !important;padding:0.5rem !important;height:auto !important;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2) !important;&::placeholder{color:#666 !important;}&:focus{border-color:#f59e0b !important;outline:none !important;}}svg{color:#666;font-size:0.875rem;}"]);
 var ClearFiltersButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "AdvancedFilters__ClearFiltersButton",
   componentId: "sc-1xj6ldr-9"
-})(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.75rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;&:hover{color:#ffd700;}"]);
+})(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.65rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;font-family:'Press Start 2P',cursive;&:hover{color:#ffd700;}"]);
+var CloseButton$6 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "AdvancedFilters__CloseButton",
+  componentId: "sc-1xj6ldr-10"
+})(["background:transparent;border:none;color:#999;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;&:hover{color:#ffd700;}"]);
+var StyledDropdownWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AdvancedFilters__StyledDropdownWrapper",
+  componentId: "sc-1xj6ldr-11"
+})([".rpgui-dropdown-imp{font-size:0.8rem;min-height:unset;padding-top:0.3rem;}"]);
 
 var ItemsAdvancedFilters = function ItemsAdvancedFilters(_ref) {
   var isOpen = _ref.isOpen,
@@ -31751,7 +31873,7 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     dependencies: [selectedItemCategory, selectedTier],
     tabId: tabId,
     layout: "grid",
-    itemHeight: "180px"
+    itemHeight: isMobile ? '150px' : '180px'
   }), !isMobile && tooltipState && tooltipState.item && React__default.createElement(Portal, null, React__default.createElement(TooltipWrapper, {
     width: TOOLTIP_WIDTH,
     style: {
@@ -32351,7 +32473,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
       rightElement: SearchBarRightElement
     },
     dependencies: [selectedBestiaryCategory, levelRange, selectedSubtype, selectedAttackType],
-    itemHeight: "180px"
+    itemHeight: isMobile ? '150px' : '180px'
   }), !isMobile && tooltipState && tooltipState.item && React__default.createElement(Portal, null, React__default.createElement(TooltipWrapper$1, {
     width: TOOLTIP_WIDTH,
     style: {
@@ -32395,61 +32517,13 @@ var SearchBarActions$1 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-e3h0p2-1"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
 
-var InformationCenterFAQSection = function InformationCenterFAQSection(_ref) {
-  var faqItems = _ref.faqItems,
-    initialSearchQuery = _ref.initialSearchQuery,
-    tabId = _ref.tabId;
-  var _useState = React.useState(initialSearchQuery),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  React.useEffect(function () {
-    setSearchQuery(initialSearchQuery);
-  }, [initialSearchQuery]);
-  var filteredFaqs = React.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__default.createElement(StyledCollapsible$2, {
-      title: item.question
-    }, React__default.createElement(Answer$1, null, item.answer));
-  };
-  return React__default.createElement(Container$r, null, React__default.createElement(SearchHeader, {
-    searchOptions: {
-      value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search FAQs...'
-    }
-  }), React__default.createElement(PaginatedContent, {
-    items: filteredFaqs,
-    renderItem: renderItem,
-    emptyMessage: "No FAQ items found",
-    tabId: tabId,
-    layout: "list",
-    itemsPerPage: 10
-  }));
-};
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "InformationCenterFaqSection__Container",
-  componentId: "sc-ofmaa9-0"
-})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
-var StyledCollapsible$2 = /*#__PURE__*/styled__default(Collapsible).withConfig({
-  displayName: "InformationCenterFaqSection__StyledCollapsible",
-  componentId: "sc-ofmaa9-1"
-})(["margin-bottom:0.5rem;&:last-child{margin-bottom:0;}"]);
-var Answer$1 = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "InformationCenterFaqSection__Answer",
-  componentId: "sc-ofmaa9-2"
-})(["font-size:0.9rem;color:#ffffff;margin:0;line-height:1.5;"]);
-
 var ITEMS_PER_PAGE$2 = 3;
 var GRID_COLUMNS = 3;
 var InformationCenterTutorialsSection = function InformationCenterTutorialsSection(_ref) {
   var videoGuides = _ref.videoGuides,
     initialSearchQuery = _ref.initialSearchQuery,
     tabId = _ref.tabId;
+  var isMobile = shared.isMobileOrTablet();
   var _useState = React.useState(initialSearchQuery),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -32500,7 +32574,7 @@ var InformationCenterTutorialsSection = function InformationCenterTutorialsSecti
       maxLines: 2
     }, guide.title)), React__default.createElement(GuideDescription, null, React__default.createElement(Ellipsis, {
       maxWidth: "100%",
-      maxLines: 5
+      maxLines: isMobile ? 3 : 5
     }, guide.description)), React__default.createElement(GuideLabelsContainer, null, React__default.createElement(GuideCategory, null, guide.category), React__default.createElement(GuideLanguage, null, guide.language))));
   };
   var filteredGuides = React.useMemo(function () {
@@ -32538,9 +32612,9 @@ var InformationCenterTutorialsSection = function InformationCenterTutorialsSecti
     dependencies: [selectedCategory],
     tabId: tabId,
     layout: "grid",
-    gridColumns: GRID_COLUMNS,
+    gridColumns: isMobile ? 1 : GRID_COLUMNS,
     itemsPerPage: ITEMS_PER_PAGE$2,
-    itemHeight: "320px"
+    itemHeight: isMobile ? '280px' : '320px'
   });
 };
 var GuideItem = /*#__PURE__*/styled__default.div.withConfig({
@@ -32583,8 +32657,6 @@ var InformationCenter = function InformationCenter(_ref) {
     entitiesAtlasIMG = _ref.entitiesAtlasIMG,
     iconsAtlasIMG = _ref.iconsAtlasIMG,
     iconsAtlasJSON = _ref.iconsAtlasJSON,
-    _ref$faqItems = _ref.faqItems,
-    faqItems = _ref$faqItems === void 0 ? [] : _ref$faqItems,
     _ref$bestiaryItems = _ref.bestiaryItems,
     bestiaryItems = _ref$bestiaryItems === void 0 ? [] : _ref$bestiaryItems,
     _ref$videoGuides = _ref.videoGuides,
@@ -32599,6 +32671,7 @@ var InformationCenter = function InformationCenter(_ref) {
   var _useState = React.useState('bestiary'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
+  var isMobile = shared.isMobileOrTablet();
   if (loading) {
     return React__default.createElement(LoadingMessage, null, "Loading...");
   }
@@ -32630,14 +32703,6 @@ var InformationCenter = function InformationCenter(_ref) {
       initialSearchQuery: initialSearchQuery,
       tabId: "items"
     })
-  }, {
-    id: 'faq',
-    title: 'FAQ',
-    content: React__default.createElement(InformationCenterFAQSection, {
-      faqItems: faqItems,
-      initialSearchQuery: initialSearchQuery,
-      tabId: "faq"
-    })
   }, {
     id: 'tutorials',
     title: 'Tutorials',
@@ -32649,8 +32714,10 @@ var InformationCenter = function InformationCenter(_ref) {
   }];
   return React__default.createElement(DraggableContainer, {
     title: "Information Center",
-    type: exports.RPGUIContainerTypes.Framed
-  }, React__default.createElement(Container$s, null, React__default.createElement(InternalTabs, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: isMobile ? '95%' : '80%',
+    minWidth: "300px"
+  }, React__default.createElement(Container$r, null, React__default.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -32661,10 +32728,10 @@ var InformationCenter = function InformationCenter(_ref) {
     hoverColor: "#fef3c7"
   })));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
-})(["width:100%;max-width:800px;margin:0 auto;padding:1rem;"]);
+})(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow:hidden;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}@media (min-width:", "){max-width:900px;padding:1rem;}@media (min-width:", "){max-width:1200px;}"], UI_BREAKPOINT_MOBILE, UI_BREAKPOINT_SMALL_LAPTOP);
 var LoadingMessage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenter__LoadingMessage",
   componentId: "sc-1ttl62e-1"
@@ -32832,7 +32899,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$t, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$s, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -32850,7 +32917,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -32963,7 +33030,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$6, {
+  }, React__default.createElement(CloseButton$7, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, title), React__default.createElement(StyledForm, {
@@ -33008,7 +33075,7 @@ var StyledContainer = /*#__PURE__*/styled__default(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$6 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$7 = /*#__PURE__*/styled__default.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;"]);
@@ -33294,7 +33361,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     e.stopPropagation();
     onClose();
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$u, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$t, {
     onClick: handleClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -33317,7 +33384,7 @@ var Background = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -33372,7 +33439,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React__default.createElement(Container$v, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
+  }, React__default.createElement(Container$u, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -33388,7 +33455,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
@@ -33744,7 +33811,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$w, {
+  return React__default.createElement(Container$v, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -33761,7 +33828,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -33780,7 +33847,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$x, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$w, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -33794,7 +33861,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$x = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -34315,13 +34382,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React__default.createElement(Container$y, {
+  return React__default.createElement(Container$x, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -34973,7 +35040,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$z, {
+  return React__default.createElement(Container$y, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35003,7 +35070,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -35244,9 +35311,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$A, null, children);
+  return React__default.createElement(Container$z, null, children);
 };
-var Container$A = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -35402,7 +35469,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React__default.createElement(Container$B, {
+  return React__default.createElement(Container$A, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -35411,7 +35478,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$B = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35637,7 +35704,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$7, {
+  }, onCloseButton && React__default.createElement(CloseButton$8, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -35672,7 +35739,7 @@ var SkillSplitDiv = /*#__PURE__*/styled__default.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$7 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -35744,7 +35811,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React__default.createElement(Container$C, null, React__default.createElement(HeaderImage, {
+  }, React__default.createElement(Container$B, null, React__default.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React__default.createElement(ButtonsContainer$1, null, React__default.createElement(MainButtons, null, React__default.createElement(SocialButton$1, {
@@ -35762,7 +35829,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React__default.createElement(fa.FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$C = /*#__PURE__*/styled__default.div.withConfig({
+var Container$B = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -35808,7 +35875,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$D, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$C, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -35834,7 +35901,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$4, null, description));
 };
-var Container$D = /*#__PURE__*/styled__default.div.withConfig({
+var Container$C = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -35888,7 +35955,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$E, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$D, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -35913,7 +35980,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$E = /*#__PURE__*/styled__default.div.withConfig({
+var Container$D = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -35954,13 +36021,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$F, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$E, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$F = /*#__PURE__*/styled__default.div.withConfig({
+var Container$E = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -36033,7 +36100,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$G, {
+  }, React__default.createElement(Container$F, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -36052,7 +36119,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$G = /*#__PURE__*/styled__default.button.withConfig({
+var Container$F = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -36131,7 +36198,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$H, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$G, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36167,7 +36234,7 @@ var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$H = /*#__PURE__*/styled__default.div.withConfig({
+var Container$G = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -36353,7 +36420,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React__default.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$8, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$9, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React__default.createElement(DayNightContainer, {
@@ -36370,7 +36437,7 @@ var Time = /*#__PURE__*/styled__default.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$8 = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$9 = /*#__PURE__*/styled__default.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);
@@ -36649,7 +36716,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$I, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$H, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -36677,7 +36744,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$I = /*#__PURE__*/styled__default.div.withConfig({
+var Container$H = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -36711,11 +36778,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$J, {
+  return React__default.createElement(Container$I, {
     maxLines: maxLines
   }, children);
 };
-var Container$J = /*#__PURE__*/styled__default.div.withConfig({
+var Container$I = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -36823,7 +36890,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$K, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$J, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -36840,7 +36907,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$K = /*#__PURE__*/styled__default.div.withConfig({
+var Container$J = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);