@rpg-engine/long-bow 0.6.70 → 0.6.71

package/dist/components/QuestList.d.ts

@@ -1,8 +1,7 @@
-import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
+import 'react-tippy/dist/tippy.css';
+import { IQuest } from '@rpg-engine/shared';
 export interface IQuestListProps {
     quests?: IQuest[];
-    onClose: () => void;
-    scale?: number;
 }
 export declare const QuestList: React.FC<IQuestListProps>;

package/dist/components/shared/Ellipsis.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface IProps {
     children: React.ReactNode;
-    maxLines: 1 | 2 | 3;
+    maxLines?: 1 | 2 | 3;
     maxWidth: string;
     fontSize?: string;
     center?: boolean;

package/dist/components/shared/SimpleTooltip.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+interface TooltipProps {
+    content: string | ReactNode;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    backgroundColor?: string;
+    textColor?: string;
+    children: ReactNode;
+    showDelay?: number;
+    hideDelay?: number;
+}
+export declare const SimpleTooltip: React.FC<TooltipProps>;
+export {};

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

@@ -19,6 +19,7 @@ var ReactDOM = _interopDefault(require('react-dom'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
 var ai = require('react-icons/ai');
+require('react-tippy/dist/tippy.css');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
 var capitalize = _interopDefault(require('lodash/capitalize'));
@@ -25947,7 +25948,8 @@ var RightArrow = /*#__PURE__*/styled__default.span.withConfig({
 
 var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
-    maxLines = _ref.maxLines,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     maxWidth = _ref.maxWidth,
     fontSize = _ref.fontSize,
     center = _ref.center;
@@ -28794,18 +28796,15 @@ var Table = /*#__PURE__*/styled__default.table.withConfig({
 var TableRow = /*#__PURE__*/styled__default.tr.withConfig({
   displayName: "Table__TableRow",
   componentId: "sc-1c24pcj-1"
-})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}"]);
+})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}&:hover{background-color:rgba(255,255,255,0.1) !important;}"]);
 var TableHeader = /*#__PURE__*/styled__default.th.withConfig({
   displayName: "Table__TableHeader",
   componentId: "sc-1c24pcj-2"
-})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";"], uiColors.yellow, uiColors.lightGray);
+})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";text-shadow:-2px 0 black,0 2px black,2px 0 black,0 -2px black;"], uiColors.yellow, uiColors.lightGray);
 var TableCell = /*#__PURE__*/styled__default.td.withConfig({
   displayName: "Table__TableCell",
   componentId: "sc-1c24pcj-3"
-})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";text-align:", ";"], uiColors.white, uiColors.lightGray, function (_ref) {
-  var align = _ref.align;
-  return align ? align : 'left';
-});
+})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";text-shadow:-2px 0 black,0 2px black,2px 0 black,0 -2px black;"], uiColors.white, uiColors.lightGray);
 var ActionButtons = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Table__ActionButtons",
   componentId: "sc-1c24pcj-4"
@@ -28813,8 +28812,8 @@ var ActionButtons = /*#__PURE__*/styled__default.div.withConfig({
 var UserActionLink = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Table__UserActionLink",
   componentId: "sc-1c24pcj-5"
-})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref2) {
-  var color = _ref2.color;
+})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref) {
+  var color = _ref.color;
   return color;
 });
 
@@ -31914,54 +31913,256 @@ var Thumbnail = /*#__PURE__*/styled__default.img.withConfig({
   componentId: "sc-15s2boc-8"
 })(["color:white;z-index:22;width:32px * 1.5;margin-right:0.5rem;position:relative;top:-4px;"]);
 
-var QuestList = function QuestList(_ref) {
-  var quests = _ref.quests,
-    onClose = _ref.onClose,
-    scale = _ref.scale;
-  return React__default.createElement(QuestDraggableContainer$1, {
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "520px",
-    scale: scale
-  }, React__default.createElement("div", {
+var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(Container$r, null, children);
+};
+var Container$r = /*#__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;}"]);
+
+var RPGUIOverrides = function RPGUIOverrides(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(RPGUIScrollbar, null, children);
+};
+
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(RPGUIOverrides, null, React__default.createElement("div", {
+    className: "rpgui-content"
+  }, children));
+};
+
+var SimpleTooltip = function SimpleTooltip(_ref) {
+  var content = _ref.content,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top' : _ref$direction,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? uiColors.raisinBlack : _ref$backgroundColor,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? uiColors.white : _ref$textColor,
+    children = _ref.children,
+    _ref$showDelay = _ref.showDelay,
+    showDelay = _ref$showDelay === void 0 ? 200 : _ref$showDelay,
+    _ref$hideDelay = _ref.hideDelay,
+    hideDelay = _ref$hideDelay === void 0 ? 200 : _ref$hideDelay;
+  var _useState = React.useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = React.useState({
+      top: 0,
+      left: 0
+    }),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var tooltipRef = React.useRef(null);
+  var triggerRef = React.useRef(null);
+  var timeoutRef = React.useRef();
+  var calculatePosition = function calculatePosition() {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var tooltipRect = tooltipRef.current.getBoundingClientRect();
+    var top, left;
+    switch (direction) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - 8;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + 8;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+    }
+    // Ensure the tooltip stays within the viewport
+    if (left < 8) left = 8;
+    if (left + tooltipRect.width > window.innerWidth) left = window.innerWidth - tooltipRect.width - 8;
+    if (top < 8) top = 8;
+    if (top + tooltipRect.height > window.innerHeight) top = window.innerHeight - tooltipRect.height - 8;
+    setTooltipPosition({
+      top: Math.round(top),
+      left: Math.round(left)
+    });
+  };
+  var showTooltip = function showTooltip() {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(function () {
+      setVisible(true);
+      calculatePosition();
+    }, showDelay);
+  };
+  var hideTooltip = function hideTooltip() {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(function () {
+      setVisible(false);
+    }, hideDelay);
+  };
+  React.useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
+      if (visible && tooltipRef.current && triggerRef.current) {
+        var tooltipRect = tooltipRef.current.getBoundingClientRect();
+        var triggerRect = triggerRef.current.getBoundingClientRect();
+        var isOutsideTooltip = event.clientX < tooltipRect.left || event.clientX > tooltipRect.right || event.clientY < tooltipRect.top || event.clientY > tooltipRect.bottom;
+        var isOutsideTrigger = event.clientX < triggerRect.left || event.clientX > triggerRect.right || event.clientY < triggerRect.top || event.clientY > triggerRect.bottom;
+        if (isOutsideTooltip && isOutsideTrigger) {
+          hideTooltip();
+        }
+      }
+    };
+    var handleScroll = function handleScroll() {
+      if (visible) {
+        hideTooltip();
+      }
+    };
+    var handleResize = function handleResize() {
+      if (visible) {
+        calculatePosition();
+      }
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutRef.current);
+    };
+  }, [visible]);
+  return React__default.createElement(TooltipContainer, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip
+  }, children, visible && ReactDOM.createPortal(React__default.createElement(RPGUIRoot, null, React__default.createElement(TooltipBox, {
+    ref: tooltipRef,
+    direction: direction,
+    backgroundColor: backgroundColor,
+    textColor: textColor,
     style: {
-      width: '100%'
+      top: tooltipPosition.top,
+      left: tooltipPosition.left
     }
-  }, React__default.createElement(Title$8, null, "Quests"), React__default.createElement("hr", {
-    className: "golden"
-  }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
-    return React__default.createElement("div", {
-      className: "quest-item",
+  }, content)), document.body));
+};
+var TooltipContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SimpleTooltip__TooltipContainer",
+  componentId: "sc-l46vpo-0"
+})(["display:inline-block;cursor:inherit;"]);
+var fadeIn$1 = /*#__PURE__*/styled.keyframes(["from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}"]);
+var TooltipBox = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SimpleTooltip__TooltipBox",
+  componentId: "sc-l46vpo-1"
+})(["position:fixed;z-index:1000;background-color:", ";color:", ";padding:8px;border-radius:4px;font-size:0.65rem;max-width:250px;box-shadow:0px 4px 8px rgba(0,0,0,0.1);animation:", " 0.2s ease-out;line-height:1.3;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var textColor = _ref3.textColor;
+  return textColor;
+}, fadeIn$1);
+
+var QuestList = function QuestList(_ref) {
+  var quests = _ref.quests;
+  return React__default.createElement(QuestListContainer, null, quests && quests.length > 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Table, null, React__default.createElement("thead", null, React__default.createElement(TableRow, null, React__default.createElement(TableHeader, null, "Status"), React__default.createElement(TableHeader, null, "Title"), React__default.createElement(TableHeader, null, "Description"), React__default.createElement(TableHeader, null, "Objectives"), React__default.createElement(TableHeader, null, "Rewards"))), React__default.createElement("tbody", null, quests.map(function (quest, i) {
+    var _quest$status;
+    return React__default.createElement(TableRow, {
       key: i
-    }, React__default.createElement("span", {
-      className: "quest-number"
-    }, i + 1), React__default.createElement("div", {
-      className: "quest-detail"
-    }, React__default.createElement("p", {
-      className: "quest-detail__title"
-    }, quest.title), React__default.createElement("p", {
-      className: "quest-detail__description"
-    }, quest.description)));
-  }) : React__default.createElement(NoQuestContainer, null, React__default.createElement("p", null, "There are no ongoing quests")))));
+    }, React__default.createElement(TableCell, {
+      style: {
+        color: getStatusColor(quest.status)
+      }
+    }, (_quest$status = quest.status) != null ? _quest$status : 'Unknown'), React__default.createElement(TableCell, null, React__default.createElement(SimpleTooltip, {
+      content: formatText(quest.title),
+      direction: "bottom"
+    }, React__default.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, formatText(quest.title)))), React__default.createElement(TableCell, null, React__default.createElement(SimpleTooltip, {
+      content: quest.description,
+      direction: "bottom"
+    }, React__default.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, quest.description))), React__default.createElement(TableCell, null, React__default.createElement(SimpleTooltip, {
+      content: formatObjectives(quest.objectives),
+      direction: "bottom"
+    }, React__default.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, formatObjectives(quest.objectives)))), React__default.createElement(TableCell, null, React__default.createElement(SimpleTooltip, {
+      content: formatRewards(quest.rewards),
+      direction: "bottom"
+    }, React__default.createElement(Ellipsis, {
+      maxWidth: "200px"
+    }, formatRewards(quest.rewards)))));
+  })))) : React__default.createElement(NoQuestContainer, null, React__default.createElement("p", null, "There are no ongoing quests")));
 };
-var QuestDraggableContainer$1 = /*#__PURE__*/styled__default(DraggableContainer).withConfig({
-  displayName: "QuestList__QuestDraggableContainer",
-  componentId: "sc-1a2vx6q-0"
-})([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
-  displayName: "QuestList__Title",
-  componentId: "sc-1a2vx6q-1"
-})(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
+// Updated helper function to format objectives
+var formatObjectives = function formatObjectives(objectives) {
+  return objectives.map(function (objective) {
+    if ('killCountTarget' in objective) {
+      // This is an IQuestObjectiveKill
+      var killObjective = objective;
+      return "Kill " + formatText(killObjective.creatureKeys.join(', ')) + ": " + killObjective.killCount + "/" + killObjective.killCountTarget;
+    } else if ('targetNPCkey' in objective) {
+      var _interactionObjective;
+      // This is an IQuestObjectiveInteraction
+      var interactionObjective = objective;
+      return "Interact with NPC: " + formatText((_interactionObjective = interactionObjective.targetNPCkey) != null ? _interactionObjective : 'Unknown');
+    } else {
+      return 'Unknown objective';
+    }
+  }).join('; ');
+};
+// Other helper functions remain the same
+var formatRewards = function formatRewards(rewards) {
+  return rewards.map(function (reward) {
+    return "" + formatText(reward.itemKeys.map(function (itemKey) {
+      return itemKey + ' x' + reward.qty;
+    }).join(', ')) + (reward.spellKeys ? ", Spells: " + formatText(reward.spellKeys.join(', ')) : '');
+  }).join('; ');
+};
+var formatText = function formatText(text) {
+  return text.split('-').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+var getStatusColor = function getStatusColor(status) {
+  switch (status) {
+    case shared.QuestStatus.Pending:
+      return uiColors.orange;
+    // Orange
+    case shared.QuestStatus.InProgress:
+      return uiColors.blue;
+    // Deep Sky Blue
+    case shared.QuestStatus.Completed:
+      return uiColors.lightGreen;
+    // Lime Green
+    default:
+      return uiColors.white;
+    // Default to white
+  }
+};
+// Styled components
 var QuestListContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestList__QuestListContainer",
-  componentId: "sc-1a2vx6q-2"
-})(["margin-top:20px;margin-bottom:40px;overflow-y:auto;max-height:400px;.quest-item{display:flex;align-items:flex-start;margin-bottom:12px;}.quest-number{border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:16px;background-color:brown;flex-shrink:0;}.quest-number.completed{background-color:yellow;}p{margin:0;}.quest-detail__title{color:yellow;}.quest-detail__description{margin-top:5px;}.Noquest-detail__description{margin-top:5px;margin:auto;}"]);
+  componentId: "sc-1a2vx6q-0"
+})(["margin-top:20px;margin-bottom:40px;overflow-y:auto;max-height:400px;background-color:", ";padding:20px;border-radius:10px;border:1px solid ", ";font-size:0.7rem;"], uiColors.darkGray, uiColors.gray);
 var NoQuestContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestList__NoQuestContainer",
-  componentId: "sc-1a2vx6q-3"
-})(["text-align:center;p{margin-top:5px;}"]);
+  componentId: "sc-1a2vx6q-1"
+})(["text-align:center;p{margin-top:5px;color:", ";}"], uiColors.lightGray);
 
 var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
@@ -31995,29 +32196,6 @@ var InputRadio$1 = function InputRadio(_ref) {
   }));
 };
 
-var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(Container$r, null, children);
-};
-var Container$r = /*#__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;}"]);
-
-var RPGUIOverrides = function RPGUIOverrides(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(RPGUIScrollbar, null, children);
-};
-
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(RPGUIOverrides, null, React__default.createElement("div", {
-    className: "rpgui-content"
-  }, children));
-};
-
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -32444,7 +32622,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$t, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$t, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$8, 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"
@@ -32474,7 +32652,7 @@ var Container$t = /*#__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);
-var Title$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Title$8 = /*#__PURE__*/styled__default.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);
@@ -32669,7 +32847,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$a, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$9, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$3, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -32690,7 +32868,7 @@ var Info = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$a = /*#__PURE__*/styled__default.p.withConfig({
+var Title$9 = /*#__PURE__*/styled__default.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);
@@ -32754,7 +32932,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$x, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$x, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32786,7 +32964,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -33276,7 +33454,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$c, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$b, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -33307,7 +33485,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);