@rpg-engine/long-bow 0.8.9 → 0.8.11

package/dist/components/Item/Inventory/ItemGem.d.ts

@@ -3,6 +3,9 @@ import { IItem } from '@rpg-engine/shared';
 interface IProps {
     item: IItem;
 }
+export declare const gemColors: {
+    [key: string]: string;
+};
 export declare const onRenderGems: (item: IItem) => JSX.Element | undefined;
 export declare const ItemSlotQty: ({ item }: IProps) => JSX.Element;
 export default ItemSlotQty;

package/dist/components/itemSelector/GemSelector.d.ts

@@ -0,0 +1,11 @@
+import { IGemSchema, IItem } from '@rpg-engine/shared';
+import React from 'react';
+export interface IGemSelectorProps {
+    atlasJSON: any;
+    atlasIMG: any;
+    item: IItem;
+    scale?: number;
+    onClose: () => void;
+    onSelect: (selectedGems: IGemSchema[]) => void;
+}
+export declare const GemSelector: React.FC<IGemSelectorProps>;

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemPropertySimpleHandler';
 export * from './components/Item/Inventory/ItemQuantitySelectorModal';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/GemSelector';
 export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';

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

@@ -27819,6 +27819,12 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType,
       }
     }
   }
+  if (item.attachedGems && item.attachedGems.length > 0) {
+    contextActionMenu.push({
+      id: shared.ItemSocketEvents.DetachGem,
+      text: "Detach Gems"
+    });
+  }
   return contextActionMenu;
 };
 
@@ -31181,7 +31187,7 @@ var ItemContainer$1 = /*#__PURE__*/React__default.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,
@@ -31246,12 +31252,49 @@ var ItemContainer$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     }
     onDragEndScrollingEvents();
   }, [onItemDragEnd, onDragEndScrollingEvents]);
-  // Memoize handleSetShortcut to prevent unnecessary re-renders
-  var memoizedHandleSetShortcut = React.useCallback(function (item, index) {
-    handleSetShortcut(item, index);
-  }, [handleSetShortcut]);
-  // Memoize onRenderSlots to prevent re-creating the slots array on every render
-  var onRenderSlots = React.useMemo(function () {
+  var handleItemClick = React.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 = React.useCallback(function (item, slotIndex, itemContainerType) {
+    if (onItemPlaceDrop) {
+      onItemPlaceDrop(item, slotIndex, itemContainerType);
+    }
+    onDragEndScrollingEvents();
+  }, [onItemPlaceDrop, onDragEndScrollingEvents]);
+  var handleOutsideDrop = React.useCallback(function (item, position) {
+    if (onOutsideDrop) {
+      onOutsideDrop(item, position);
+    }
+    onDragEndScrollingEvents();
+  }, [onOutsideDrop, onDragEndScrollingEvents]);
+  var handleQuantitySelect = React.useCallback(function (maxQuantity, callback) {
+    setQuantitySelect({
+      isOpen: true,
+      maxQuantity: maxQuantity,
+      callback: callback
+    });
+  }, []);
+  // Memoize slot rendering configuration
+  var slotConfig = React.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 = React.useMemo(function () {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
@@ -31260,55 +31303,27 @@ var ItemContainer$1 = /*#__PURE__*/React__default.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 === shared.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 === shared.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__default.createElement(ItemSlotDraggingProvider, null, React__default.createElement(ItemSlotDetailsProvider, null, React__default.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -31334,7 +31349,7 @@ var ItemContainer$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots)), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
+  }, renderSlots)), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
   }), React__default.createElement(ItemSlotToolTips, {
@@ -31427,6 +31442,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 = React.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__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: "450px",
+    height: size.height,
+    scale: scale,
+    cancelDrag: ".gem-selector-container",
+    onCloseButton: onClose
+  }, React__default.createElement(ContentWrapper$1, null, React__default.createElement(Header$2, null, React__default.createElement(Title$3, null, "GEM SELECTION"), React__default.createElement(Subtitle, null, "Select gems to detach")), React__default.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
+    return React__default.createElement(GemItem, {
+      key: gem.key + "-" + index
+    }, React__default.createElement(CheckItemWrapper, null, React__default.createElement(CheckItem, {
+      defaultValue: selectedGems.some(function (selected) {
+        return selected.key === gem.key;
+      }),
+      onChange: function onChange() {
+        handleGemToggle(gem);
+      }
+    })), React__default.createElement(SpriteWrapper, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: "gems/" + gem.key + ".png",
+      imgScale: 2,
+      imgClassname: "gem-sprite",
+      centered: true
+    })), React__default.createElement(GemName, null, gem.name.replace(/ of /gi, '\n').toUpperCase()));
+  })), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      onClose();
+    }
+  }, "Cancel"), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      handleConfirm();
+    },
+    disabled: selectedGems.length === 0
+  }, "Confirm"))));
+};
+var Title$3 = /*#__PURE__*/styled__default.h1.withConfig({
+  displayName: "GemSelector__Title",
+  componentId: "sc-gbt8g4-0"
+})(["font-size:0.8rem;color:", " !important;"], uiColors.yellow);
+var Subtitle = /*#__PURE__*/styled__default.h2.withConfig({
+  displayName: "GemSelector__Subtitle",
+  componentId: "sc-gbt8g4-1"
+})(["font-size:0.6rem;color:", ";margin:0;"], uiColors.white);
+var Header$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "GemSelector__Header",
+  componentId: "sc-gbt8g4-2"
+})(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
+var GemGrid = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default.div.withConfig({
+  displayName: "GemSelector__ButtonWrapper",
+  componentId: "sc-gbt8g4-7"
+})(["display:flex;justify-content:center;align-self:center;"]);
+var CheckItemWrapper = /*#__PURE__*/styled__default.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__default.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,
@@ -31459,7 +31579,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$3, null, 'Harvesting instruments'), React__default.createElement(Subtitle, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+  }, React__default.createElement(Title$4, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
     return React__default.createElement(RadioOptionsWrapper$1, {
@@ -31481,18 +31601,18 @@ var ItemSelector = function ItemSelector(_ref) {
         alignItems: 'center'
       }
     }, option.name, " ", React__default.createElement("br", null), option.description)));
-  })), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
+  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: onClose
   }, "Cancel"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Select")));
 };
-var Title$3 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle = /*#__PURE__*/styled__default.h1.withConfig({
+var Subtitle$1 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "ItemSelector__Subtitle",
   componentId: "sc-gptoxp-1"
 })(["font-size:0.4rem;color:yellow !important;"]);
@@ -31508,7 +31628,7 @@ var RadioOptionsWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSelector__RadioOptionsWrapper",
   componentId: "sc-gptoxp-4"
 })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSelector__ButtonWrapper",
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
@@ -32398,12 +32518,12 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$4, null, "Create Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$5, null, "Create Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement("h1", null, "Type your party name"), React__default.createElement(Input, {
     placeholder: "Type party name",
     type: "text"
-  }), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
+  }), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
       onCreate();
@@ -32421,11 +32541,11 @@ var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$4 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var ButtonWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);}"]);
@@ -32470,7 +32590,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$5, null, "Party Dashboard"), React__default.createElement(Button, {
+  }, React__default.createElement(Title$6, null, "Party Dashboard"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Create"), React__default.createElement("hr", {
     className: "golden"
@@ -32497,7 +32617,7 @@ var RowsWrapper = /*#__PURE__*/styled__default.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__default.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32534,7 +32654,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$6, null, "Invite for Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$7, null, "Invite for Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -32553,7 +32673,7 @@ var Wrapper$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -32991,7 +33111,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -33010,7 +33130,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -33057,7 +33177,7 @@ var TitleContainer$1 = /*#__PURE__*/styled__default.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__default.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -33740,7 +33860,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$v, null, React__default.createElement(Header$2, 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", {
+  return React__default.createElement(Container$v, null, React__default.createElement(Header$3, 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", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -33770,7 +33890,7 @@ var Container$v = /*#__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$8 = /*#__PURE__*/styled__default.div.withConfig({
+var Title$9 = /*#__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);
@@ -33782,7 +33902,7 @@ var Description$2 = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Header$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -33978,7 +34098,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$9, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$a, 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$1, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -33999,7 +34119,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$9 = /*#__PURE__*/styled__default.p.withConfig({
+var Title$a = /*#__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);
@@ -34063,7 +34183,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$z, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$z, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -34095,7 +34215,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -34581,7 +34701,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$A, null, React__default.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$A, null, React__default.createElement(Title$c, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -34598,7 +34718,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     });
-  })), React__default.createElement(InfoSection, null, React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertText, null, "Sorry, not enough money.") : React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2)))), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
+  })), React__default.createElement(InfoSection, null, React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertText, null, "Sorry, not enough money.") : React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2)))), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -34613,7 +34733,7 @@ var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -34633,7 +34753,7 @@ var AlertText = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;width:100%;margin-top:1rem;"]);
@@ -34812,6 +34932,7 @@ exports.EquipmentSet = EquipmentSet;
 exports.EquipmentSlotSpriteByType = EquipmentSlotSpriteByType;
 exports.ErrorBoundary = ErrorBoundary;
 exports.FriendList = FriendList;
+exports.GemSelector = GemSelector;
 exports.HistoryDialog = HistoryDialog;
 exports.ImageCarousel = ImageCarousel;
 exports.Input = Input;