@rpg-engine/long-bow 0.8.9 → 0.8.11

package/dist/long-bow.esm.js

@@ -27812,6 +27812,12 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType,
       }
     }
   }
+  if (item.attachedGems && item.attachedGems.length > 0) {
+    contextActionMenu.push({
+      id: ItemSocketEvents.DetachGem,
+      text: "Detach Gems"
+    });
+  }
   return contextActionMenu;
 };
 
@@ -31177,7 +31183,7 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     onItemDragEnd = _ref.onItemDragEnd,
     onItemDragStart = _ref.onItemDragStart,
     onItemPlaceDrop = _ref.onItemPlaceDrop,
-    _onOutsideDrop = _ref.onOutsideDrop,
+    onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
@@ -31242,12 +31248,49 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     }
     onDragEndScrollingEvents();
   }, [onItemDragEnd, onDragEndScrollingEvents]);
-  // Memoize handleSetShortcut to prevent unnecessary re-renders
-  var memoizedHandleSetShortcut = useCallback(function (item, index) {
-    handleSetShortcut(item, index);
-  }, [handleSetShortcut]);
-  // Memoize onRenderSlots to prevent re-creating the slots array on every render
-  var onRenderSlots = useMemo(function () {
+  var handleItemClick = useCallback(function (itemType, containerType, item) {
+    if (settingShortcutIndex !== -1) {
+      setSettingShortcutIndex(-1);
+      handleSetShortcut(item, settingShortcutIndex);
+    } else if (onItemClick) {
+      onItemClick(item, itemType, containerType);
+    }
+  }, [settingShortcutIndex, handleSetShortcut, onItemClick]);
+  var handlePlaceDrop = useCallback(function (item, slotIndex, itemContainerType) {
+    if (onItemPlaceDrop) {
+      onItemPlaceDrop(item, slotIndex, itemContainerType);
+    }
+    onDragEndScrollingEvents();
+  }, [onItemPlaceDrop, onDragEndScrollingEvents]);
+  var handleOutsideDrop = useCallback(function (item, position) {
+    if (onOutsideDrop) {
+      onOutsideDrop(item, position);
+    }
+    onDragEndScrollingEvents();
+  }, [onOutsideDrop, onDragEndScrollingEvents]);
+  var handleQuantitySelect = useCallback(function (maxQuantity, callback) {
+    setQuantitySelect({
+      isOpen: true,
+      maxQuantity: maxQuantity,
+      callback: callback
+    });
+  }, []);
+  // Memoize slot rendering configuration
+  var slotConfig = useMemo(function () {
+    return {
+      type: type,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      scale: scale,
+      equipmentSet: equipmentSet,
+      isDepotSystem: isDepotSystem,
+      isSelectingShortcut: settingShortcutIndex !== -1,
+      checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+      checkIfItemShouldDragEnd: checkIfItemShouldDragEnd
+    };
+  }, [type, atlasIMG, atlasJSON, scale, equipmentSet, isDepotSystem, settingShortcutIndex, checkIfItemCanBeMoved, checkIfItemShouldDragEnd]);
+  // Memoize slots rendering
+  var renderSlots = useMemo(function () {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
@@ -31256,55 +31299,27 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
         key: i,
         slotIndex: i,
         item: currentItem,
-        itemContainerType: type,
-        onMouseOver: onMouseOver ? function (event, slotIndex, item) {
-          return onMouseOver(event, slotIndex, item);
-        } : undefined,
-        onMouseOut: undefined,
-        onPointerDown: function onPointerDown(itemType, containerType, item) {
-          if (settingShortcutIndex !== -1) {
-            setSettingShortcutIndex(-1);
-            memoizedHandleSetShortcut(item, settingShortcutIndex);
-          } else if (onItemClick) {
-            onItemClick(item, itemType, containerType);
-          }
-        },
+        itemContainerType: slotConfig.type,
+        onMouseOver: onMouseOver,
+        onPointerDown: handleItemClick,
         onDragStart: onDragStartHandler,
         onDragEnd: onDragEndHandler,
-        dragScale: scale,
-        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
-        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
-          setQuantitySelect({
-            isOpen: true,
-            maxQuantity: maxQuantity,
-            callback: callback
-          });
-        },
-        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
-          if (onItemPlaceDrop) {
-            onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }
-          console.log('PLACE DROP');
-          onDragEndScrollingEvents();
-        },
-        onOutsideDrop: function onOutsideDrop(item, position) {
-          if (_onOutsideDrop) {
-            _onOutsideDrop(item, position);
-          }
-          console.log('OUTSIDE DROP');
-          onDragEndScrollingEvents();
-        },
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        isSelectingShortcut: settingShortcutIndex !== -1,
-        equipmentSet: equipmentSet,
-        setItemShortcut: type === ItemContainerType.Inventory ? memoizedHandleSetShortcut : undefined,
-        isDepotSystem: isDepotSystem
+        dragScale: slotConfig.scale,
+        checkIfItemCanBeMoved: slotConfig.checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: slotConfig.checkIfItemShouldDragEnd,
+        openQuantitySelector: handleQuantitySelect,
+        onPlaceDrop: handlePlaceDrop,
+        onOutsideDrop: handleOutsideDrop,
+        atlasIMG: slotConfig.atlasIMG,
+        atlasJSON: slotConfig.atlasJSON,
+        isSelectingShortcut: slotConfig.isSelectingShortcut,
+        equipmentSet: slotConfig.equipmentSet,
+        setItemShortcut: type === ItemContainerType.Inventory ? handleSetShortcut : undefined,
+        isDepotSystem: slotConfig.isDepotSystem
       }));
     }
     return slots;
-  }, [itemContainer.slotQty, itemContainer.slots, type, onMouseOver, settingShortcutIndex, memoizedHandleSetShortcut, onItemClick, onDragStartHandler, onDragEndHandler, scale, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, onItemPlaceDrop, _onOutsideDrop, atlasIMG, atlasJSON, equipmentSet, isDepotSystem, onDragEndScrollingEvents]);
+  }, [itemContainer.slotQty, itemContainer.slots, slotConfig, onMouseOver, handleItemClick, onDragStartHandler, onDragEndHandler, handleQuantitySelect, handlePlaceDrop, handleOutsideDrop, handleSetShortcut, type]);
   return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotDetailsProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -31330,7 +31345,7 @@ var ItemContainer$1 = /*#__PURE__*/React.memo(function (_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots)), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+  }, renderSlots)), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
   }), React.createElement(ItemSlotToolTips, {
@@ -31423,6 +31438,111 @@ var ItemPropertySimpleHandler = function ItemPropertySimpleHandler(_ref) {
   });
 };
 
+var GemSelector = function GemSelector(_ref) {
+  var _item$attachedGems;
+  var atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    item = _ref.item,
+    scale = _ref.scale,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useState = useState([]),
+    selectedGems = _useState[0],
+    setSelectedGems = _useState[1];
+  var size = useResponsiveSize(scale);
+  var handleGemToggle = function handleGemToggle(gem) {
+    setSelectedGems(function (prev) {
+      return prev.some(function (selected) {
+        return selected.key === gem.key;
+      }) ? prev.filter(function (selected) {
+        return selected.key !== gem.key;
+      }) : [].concat(prev, [gem]);
+    });
+  };
+  var handleConfirm = function handleConfirm() {
+    onSelect(selectedGems);
+    onClose();
+  };
+  if (!size) return null;
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "450px",
+    height: size.height,
+    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) {
+    return React.createElement(GemItem, {
+      key: gem.key + "-" + index
+    }, React.createElement(CheckItemWrapper, null, React.createElement(CheckItem, {
+      defaultValue: selectedGems.some(function (selected) {
+        return selected.key === gem.key;
+      }),
+      onChange: function onChange() {
+        handleGemToggle(gem);
+      }
+    })), React.createElement(SpriteWrapper, null, React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: "gems/" + gem.key + ".png",
+      imgScale: 2,
+      imgClassname: "gem-sprite",
+      centered: true
+    })), React.createElement(GemName, null, gem.name.replace(/ of /gi, '\n').toUpperCase()));
+  })), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      onClose();
+    }
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      handleConfirm();
+    },
+    disabled: selectedGems.length === 0
+  }, "Confirm"))));
+};
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "GemSelector__Title",
+  componentId: "sc-gbt8g4-0"
+})(["font-size:0.8rem;color:", " !important;"], uiColors.yellow);
+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({
+  displayName: "GemSelector__Header",
+  componentId: "sc-gbt8g4-2"
+})(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
+var GemGrid = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__GemGrid",
+  componentId: "sc-gbt8g4-3"
+})(["display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px;margin-top:10px;min-height:150px;overflow-y:auto;"]);
+var ContentWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__ContentWrapper",
+  componentId: "sc-gbt8g4-4"
+})(["display:flex;flex-direction:column;align-items:center;margin-left:20px;justify-content:space-between;height:100%;"]);
+var GemItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__GemItem",
+  componentId: "sc-gbt8g4-5"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:", " !important;height:100px;width:90px;padding:5px;"], uiColors.darkGray);
+var GemName = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__GemName",
+  componentId: "sc-gbt8g4-6"
+})(["font-size:0.5rem;color:", " !important;text-align:center;text-transform:uppercase;line-height:1.2;width:100%;min-height:30px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;"], uiColors.yellow);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__ButtonWrapper",
+  componentId: "sc-gbt8g4-7"
+})(["display:flex;justify-content:center;align-self:center;"]);
+var CheckItemWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__CheckItemWrapper",
+  componentId: "sc-gbt8g4-8"
+})(["display:flex;justify-content:center;width:100%;height:20px;input.rpgui-checkbox + label{margin:0 !important;padding-left:23px !important;}"]);
+var SpriteWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GemSelector__SpriteWrapper",
+  componentId: "sc-gbt8g4-9"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:50px;"]);
+
 var ItemSelector = function ItemSelector(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -31455,7 +31575,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, 'Harvesting instruments'), React.createElement(Subtitle, null, 'Use the tool, you need it'), React.createElement("hr", {
+  }, React.createElement(Title$4, 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, {
@@ -31477,18 +31597,18 @@ var ItemSelector = function ItemSelector(_ref) {
         alignItems: 'center'
       }
     }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+  })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: onClose
   }, "Cancel"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Select")));
 };
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle = /*#__PURE__*/styled.h1.withConfig({
+var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Subtitle",
   componentId: "sc-gptoxp-1"
 })(["font-size:0.4rem;color:yellow !important;"]);
@@ -31504,7 +31624,7 @@ var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSelector__RadioOptionsWrapper",
   componentId: "sc-gptoxp-4"
 })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSelector__ButtonWrapper",
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
@@ -32395,12 +32515,12 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$4, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$5, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
     type: "text"
-  }), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
+  }), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
       onCreate();
@@ -32418,11 +32538,11 @@ var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__ButtonWrapper",
   componentId: "sc-13brop0-2"
 })(["margin-top:10px;width:100%;display:flex;justify-content:space-around;align-items:center;.cancel-button{filter:grayscale(0.7);}"]);
@@ -32467,7 +32587,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$6, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -32494,7 +32614,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$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32531,7 +32651,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$6, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$7, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -32550,7 +32670,7 @@ var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32988,7 +33108,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -33007,7 +33127,7 @@ 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$7, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -33054,7 +33174,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$7 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__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);
@@ -33737,7 +33857,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$v, null, React.createElement(Header$2, null, React.createElement("div", null, React.createElement(Title$8, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  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", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -33767,7 +33887,7 @@ var Container$v = /*#__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$8 = /*#__PURE__*/styled.div.withConfig({
+var Title$9 = /*#__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);
@@ -33779,7 +33899,7 @@ var Description$2 = /*#__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$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -33975,7 +34095,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$9, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$a, 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", {
     className: "mana"
@@ -33996,7 +34116,7 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$9 = /*#__PURE__*/styled.p.withConfig({
+var Title$a = /*#__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);
@@ -34060,7 +34180,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$z, null, React.createElement(Title$a, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$z, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -34092,7 +34212,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$a = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -34578,7 +34698,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$A, null, React.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$A, null, React.createElement(Title$c, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -34595,7 +34715,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$2, null, React.createElement(Button, {
+  })), 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, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -34610,7 +34730,7 @@ var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$b = /*#__PURE__*/styled.h1.withConfig({
+var Title$c = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -34630,7 +34750,7 @@ var AlertText = /*#__PURE__*/styled.p.withConfig({
   displayName: "TradingMenu__AlertText",
   componentId: "sc-1wjsz1l-5"
 })(["color:red !important;text-align:center;margin:0.3rem 0;font-size:0.5rem;"]);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;width:100%;margin-top:1rem;"]);
@@ -34790,5 +34910,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, 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, 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