@rpg-engine/long-bow 0.5.21 → 0.5.22

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

@@ -13391,6 +13391,101 @@ var Container$7 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
+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, {
+      itemId: itemId,
+      stackQty: stackQty,
+      qtyClassName: qtyClassName
+    });
+  }
+  return undefined;
+};
+var ItemSlotQty = function ItemSlotQty(_ref) {
+  var itemId = _ref.itemId,
+    stackQty = _ref.stackQty,
+    qtyClassName = _ref.qtyClassName;
+  return React__default.createElement(ItemQtyContainer, {
+    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 = /*#__PURE__*/styled.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.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 renderItem = function renderItem(itemToRender) {
+    var _itemToRender$stackQt;
+    if (!(itemToRender != null && itemToRender.texturePath)) {
+      return null;
+    }
+    return React__default.createElement(ErrorBoundary, {
+      key: itemToRender._id
+    }, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: shared.getItemTextureKeyPath({
+        key: itemToRender.texturePath,
+        texturePath: itemToRender.texturePath,
+        stackQty: itemToRender.stackQty || 1,
+        isStackable: itemToRender.isStackable
+      }, atlasJSON),
+      imgScale: 3,
+      imgClassname: "sprite-from-atlas-img--item"
+    }), onRenderStackInfo(itemToRender._id, (_itemToRender$stackQt = itemToRender.stackQty) != null ? _itemToRender$stackQt : 0));
+  };
+  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);
+      case shared.ItemContainerType.Inventory:
+        return renderItem(itemToRender);
+      default:
+        return null;
+    }
+  };
+  return React__default.createElement(React__default.Fragment, null, onRenderSlot(item));
+};
+
 var RelativeListMenu = function RelativeListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -13501,6 +13596,78 @@ var Option = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-ku4p1j-2"
 })(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
 
+var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
+  var isTooltipVisible = _ref.isTooltipVisible,
+    isFocused = _ref.isFocused,
+    isContextMenuVisible = _ref.isContextMenuVisible,
+    isContextMenuDisabled = _ref.isContextMenuDisabled,
+    item = _ref.item,
+    contextActions = _ref.contextActions,
+    contextMenuPosition = _ref.contextMenuPosition,
+    dragScale = _ref.dragScale,
+    setIsContextMenuVisible = _ref.setIsContextMenuVisible,
+    setIsTooltipMobileVisible = _ref.setIsTooltipMobileVisible,
+    isTooltipMobileVisible = _ref.isTooltipMobileVisible,
+    _onSelected = _ref.onSelected,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    equipmentSet = _ref.equipmentSet;
+  return React__default.createElement(React__default.Fragment, null, isTooltipVisible && item && !isFocused && React__default.createElement(ItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  }), isTooltipMobileVisible && item && React__default.createElement(MobileItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    closeTooltip: function closeTooltip() {
+      setIsTooltipMobileVisible(false);
+    },
+    scale: dragScale,
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      setIsContextMenuVisible(false);
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    }
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      setIsContextMenuVisible(false);
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    },
+    onOutsideClick: function onOutsideClick() {
+      setIsContextMenuVisible(false);
+    },
+    pos: contextMenuPosition
+  }));
+};
+
+var DraggingContext = /*#__PURE__*/React.createContext({
+  item: null,
+  setDraggingItem: function setDraggingItem() {}
+});
+var useDragging = function useDragging() {
+  return React.useContext(DraggingContext);
+};
+var DraggingProvider = function DraggingProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(null),
+    item = _useState[0],
+    setDraggingItem = _useState[1];
+  return React__default.createElement(DraggingContext.Provider, {
+    value: {
+      item: item,
+      setDraggingItem: setDraggingItem
+    }
+  }, children);
+};
+
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -13685,6 +13852,8 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     dropPosition = _useState8[0],
     setDropPosition = _useState8[1];
   var dragContainer = React.useRef(null);
+  var _useDragging = useDragging(),
+    setDraggingItem = _useDragging.setDraggingItem;
   var _useState9 = React.useState([]),
     contextActions = _useState9[0],
     setContextActions = _useState9[1];
@@ -13703,105 +13872,11 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       onDrop(item, dropPosition);
     }
   }, [dropPosition]);
-  var getStackInfo = function getStackInfo(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(ItemQtyContainer, {
-        key: "qty-" + itemId
-      }, React__default.createElement(Ellipsis, {
-        maxLines: 1,
-        maxWidth: "48px"
-      }, React__default.createElement(ItemQty, {
-        className: qtyClassName
-      }, Math.round(stackQty * 100) / 100, ' ')));
-    }
-    return undefined;
-  };
-  var renderItem = function renderItem(itemToRender) {
-    var _itemToRender$_id, _itemToRender$stackQt;
-    var element = [];
-    if (itemToRender != null && itemToRender.texturePath) {
-      element.push(React__default.createElement(ErrorBoundary, {
-        key: itemToRender._id
-      }, React__default.createElement(SpriteFromAtlas, {
-        key: itemToRender._id,
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: shared.getItemTextureKeyPath({
-          key: itemToRender.texturePath,
-          texturePath: itemToRender.texturePath,
-          stackQty: itemToRender.stackQty || 1,
-          isStackable: itemToRender.isStackable
-        }, atlasJSON),
-        imgScale: 3,
-        imgClassname: "sprite-from-atlas-img--item"
-      })));
-    }
-    var stackInfo = getStackInfo((_itemToRender$_id = itemToRender == null ? void 0 : itemToRender._id) != null ? _itemToRender$_id : '', (_itemToRender$stackQt = itemToRender == null ? void 0 : itemToRender.stackQty) != null ? _itemToRender$stackQt : 0);
-    if (stackInfo) {
-      element.push(stackInfo);
-    }
-    return element;
-  };
-  var renderEquipment = function renderEquipment(itemToRender) {
-    var _itemToRender$allowed;
-    if (itemToRender != null && itemToRender.texturePath && (_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask)) {
-      var _itemToRender$_id2, _itemToRender$stackQt2;
-      var element = [];
-      element.push(React__default.createElement(ErrorBoundary, {
-        key: itemToRender._id
-      }, React__default.createElement(SpriteFromAtlas, {
-        key: itemToRender._id,
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: shared.getItemTextureKeyPath({
-          key: itemToRender.texturePath,
-          texturePath: itemToRender.texturePath,
-          stackQty: itemToRender.stackQty || 1,
-          isStackable: itemToRender.isStackable
-        }, atlasJSON),
-        imgScale: 3,
-        imgClassname: "sprite-from-atlas-img--item"
-      })));
-      var stackInfo = getStackInfo((_itemToRender$_id2 = itemToRender == null ? void 0 : itemToRender._id) != null ? _itemToRender$_id2 : '', (_itemToRender$stackQt2 = itemToRender == null ? void 0 : itemToRender.stackQty) != null ? _itemToRender$stackQt2 : 0);
-      if (stackInfo) {
-        element.push(stackInfo);
-      }
-      return element;
-    } else {
-      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"
-      }));
-    }
-  };
-  var onRenderSlot = function onRenderSlot(itemToRender) {
-    switch (containerType) {
-      case shared.ItemContainerType.Equipment:
-        return renderEquipment(itemToRender);
-      case shared.ItemContainerType.Inventory:
-        return renderItem(itemToRender);
-      default:
-        return renderItem(itemToRender);
-    }
-  };
   var resetItem = function resetItem() {
     setTooltipVisible(false);
     setWasDragged(false);
   };
-  var onSuccesfulDrag = function onSuccesfulDrag(quantity) {
+  var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
     resetItem();
     if (quantity === -1) {
       setDragPosition({
@@ -13842,6 +13917,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     scale: dragScale,
     disabled: onDragStart === undefined || onDragEnd === undefined,
     onStop: function onStop(e, data) {
+      setDraggingItem(null);
       var target = e.target;
       if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
         var index = parseInt(target.id.split('_')[1]);
@@ -13876,7 +13952,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         setTimeout(function () {
           if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
             if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
-            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
+            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
           } else {
             resetItem();
             setIsFocused(false);
@@ -13885,7 +13961,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
               y: 0
             });
           }
-        }, 100);
+        }, 50);
       } else if (item) {
         var isTouch = false;
         if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
@@ -13909,6 +13985,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       if (!item || isSelectingShortcut) {
         return;
       }
+      setDraggingItem(item);
       if (onDragStart && containerType) {
         onDragStart(item, slotIndex, containerType);
       }
@@ -13936,39 +14013,32 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     onMouseLeave: function onMouseLeave() {
       setTooltipVisible(false);
     }
-  }, onRenderSlot(item))), isTooltipVisible && item && !isFocused && React__default.createElement(ItemTooltip, {
+  }, React__default.createElement(ItemSlotRenderer, {
     item: item,
+    slotSpriteMask: slotSpriteMask,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), isTooltipMobileVisible && item && React__default.createElement(MobileItemTooltip, {
+    containerType: containerType
+  }))), React__default.createElement(ItemSlotToolTips, {
+    isTooltipVisible: isTooltipVisible,
+    isTooltipMobileVisible: isTooltipMobileVisible,
+    setIsTooltipMobileVisible: setIsTooltipMobileVisible,
+    isFocused: isFocused,
+    isContextMenuVisible: isContextMenuVisible,
+    isContextMenuDisabled: isContextMenuDisabled,
     item: item,
+    contextActions: contextActions,
+    contextMenuPosition: contextMenuPosition,
+    dragScale: dragScale,
+    setIsContextMenuVisible: setIsContextMenuVisible,
+    onSelected: function onSelected(optionId, item) {
+      setIsContextMenuVisible(false);
+      if (_onSelected) _onSelected(optionId, item);
+    },
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
-    closeTooltip: function closeTooltip() {
-      setIsTooltipMobileVisible(false);
-    },
-    scale: dragScale,
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    }
-  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setIsContextMenuVisible(false);
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    },
-    onOutsideClick: function onOutsideClick() {
-      setIsContextMenuVisible(false);
-    },
-    pos: contextMenuPosition
+    setIsTooltipVisible: setTooltipVisible
   }));
 });
 var rarityColor = function rarityColor(item) {
@@ -13988,7 +14058,7 @@ var rarityColor = function rarityColor(item) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:0.5;}.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::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{display:none;}.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::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 item = _ref2.item;
   return rarityColor(item);
 }, function (_ref3) {
@@ -14004,17 +14074,9 @@ var Container$a = /*#__PURE__*/styled.div.withConfig({
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"
-})(["width:100%;height:100%;position:relative;", ""], function (props) {
+})(["width:64px;height:64px;position:relative;", ";"], function (props) {
   return props.isFocused && 'z-index: 100; pointer-events: none;';
 });
-var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSlot__ItemQtyContainer",
-  componentId: "sc-l2j5ef-2"
-})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
-var ItemQty = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ItemSlot__ItemQty",
-  componentId: "sc-l2j5ef-3"
-})(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
 
 var statisticsToDisplay = [{
   key: 'attack'
@@ -14693,6 +14755,102 @@ var Details = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-kaa0h9-0"
 })(["font-size:", " !important;"], uiFonts.size.xsmall);
 
+var useCursorPosition = function useCursorPosition() {
+  var _useState = React.useState({
+      x: 0,
+      y: 0
+    }),
+    cursorPosition = _useState[0],
+    setCursorPosition = _useState[1];
+  React.useEffect(function () {
+    var animationFrameId;
+    var updateCursorPosition = function updateCursorPosition(x, y) {
+      // Cancel the previous frame request
+      cancelAnimationFrame(animationFrameId);
+      // Request a new frame
+      animationFrameId = requestAnimationFrame(function () {
+        setCursorPosition({
+          x: x,
+          y: y
+        });
+      });
+    };
+    var handleMouseMove = function handleMouseMove(event) {
+      updateCursorPosition(event.clientX, event.clientY);
+    };
+    var handleTouchMove = function handleTouchMove(event) {
+      // Prevent default touch behavior (like scrolling)
+      event.preventDefault();
+      if (event.touches.length > 0) {
+        var touch = event.touches[0];
+        updateCursorPosition(touch.clientX, touch.clientY);
+      }
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    // Cleanup function
+    return function () {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleTouchMove);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+  return cursorPosition;
+};
+
+var CONTAINER_SIZE = 32;
+var OFFSET = CONTAINER_SIZE / 2;
+var DraggedItem = function DraggedItem(_ref) {
+  var _item$_id, _item$stackQty;
+  var atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
+  var _useDragging = useDragging(),
+    item = _useDragging.item;
+  var _useCursorPosition = useCursorPosition(),
+    x = _useCursorPosition.x,
+    y = _useCursorPosition.y;
+  if (!item) {
+    return null;
+  }
+  var centeredX = x - OFFSET;
+  var centeredY = y - OFFSET;
+  var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
+  return React__default.createElement(Container$e, null, React__default.createElement(SpriteContainer, {
+    x: centeredX,
+    y: centeredY
+  }, React__default.createElement(SpriteFromAtlas, {
+    key: item._id,
+    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"
+  }), stackInfo));
+};
+var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
+var Container$e = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggedItem__Container",
+  componentId: "sc-mlzzcp-0"
+})(["position:relative;"]);
+var SpriteContainer = /*#__PURE__*/styled.div.attrs(function (props) {
+  return {
+    style: {
+      left: props.x + "px",
+      top: props.y + "px"
+    }
+  };
+}).withConfig({
+  displayName: "DraggedItem__SpriteContainer",
+  componentId: "sc-mlzzcp-1"
+})(["", " position:absolute;z-index:100;pointer-events:none;width:", "px;height:", "px;transform:rotate(-3deg);filter:grayscale(100%);opacity:0.35;animation:pulse 2s infinite;.item-slot-qty{position:absolute;bottom:0;margin-left:0.8rem;}"], pulse, CONTAINER_SIZE, CONTAINER_SIZE);
+
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
     onClose = _ref.onClose,
@@ -14769,7 +14927,10 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-  return React__default.createElement(DraggableContainer, {
+  return React__default.createElement(DraggingProvider, null, React__default.createElement(DraggedItem, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React__default.createElement(DraggableContainer, {
     title: 'Equipments',
     type: exports.RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -14783,7 +14944,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onPositionChangeStart: onPositionChangeStart
   }, React__default.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
-  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))));
+  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))));
 };
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
@@ -14889,7 +15050,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$e, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$f, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -14907,7 +15068,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -15059,7 +15220,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$f, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$g, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -15069,7 +15230,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -15129,7 +15290,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$g, null, React__default.createElement(TextContainer$1, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$h, null, React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React__default.createElement(NPCDialogText, {
     type: type,
@@ -15143,7 +15304,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -15199,7 +15360,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$h, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$i, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -15241,7 +15402,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -15435,7 +15596,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     _onPositionChangeStart = _ref.onPositionChangeStart,
     onOutsideClick = _ref.onOutsideClick,
     initialPosition = _ref.initialPosition,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    width = _ref.width;
   return React__default.createElement(DraggableContainer, {
     title: title,
     type: exports.RPGUIContainerTypes.Framed,
@@ -15444,7 +15606,7 @@ var SlotsContainer = function SlotsContainer(_ref) {
         onClose();
       }
     },
-    width: "450px",
+    width: width != null ? width : '415px',
     cancelDrag: ".item-container-body, #shortcuts_list",
     onPositionChange: function onPositionChange(_ref2) {
       var x = _ref2.x,
@@ -15685,7 +15847,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$i, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$j, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -15703,7 +15865,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -15814,7 +15976,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
+  return React__default.createElement(DraggingProvider, null, React__default.createElement(DraggedItem, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React__default.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
     initialPosition: initialPosition,
@@ -15853,7 +16018,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:450px;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
@@ -15982,7 +16147,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$j, {
+  return React__default.createElement(Container$k, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -15999,7 +16164,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -16018,7 +16183,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$k, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$l, 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));
@@ -16032,7 +16197,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -16045,7 +16210,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$l, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$m, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -16068,7 +16233,7 @@ var Background = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -16091,7 +16256,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
     onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
     disabled = _ref.disabled;
-  return React__default.createElement(MarketplaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(ItemInfoWrapper, {
+  return React__default.createElement(MarketplaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer$1, null, React__default.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -16152,7 +16317,7 @@ var GoldContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__GoldContainer",
   componentId: "sc-wmpr1o-4"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
-var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
   componentId: "sc-wmpr1o-5"
 })(["position:relative;left:0.5rem;"]);
@@ -17033,7 +17198,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$m, {
+  return React__default.createElement(Container$n, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -17063,7 +17228,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -17411,7 +17576,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React__default.createElement(Container$n, {
+  return React__default.createElement(Container$o, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -17420,7 +17585,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -17467,7 +17632,7 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
       return "" + result.toFixed(2);
     }
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React__default.createElement(React__default.Fragment, null, buffAndDebuff > 0 ? React__default.createElement(BuffAndDebuffContainer, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameBuff, null, skillName), React__default.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement(TitleNameBuffContainer, null, React__default.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameDebuff, null, skillName), React__default.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement("div", null, React__default.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React__default.createElement(TitleName, null, skillName)), !buffAndDebuff && React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", level))), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$1, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React__default.createElement(React__default.Fragment, null, buffAndDebuff > 0 ? React__default.createElement(BuffAndDebuffContainer, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameBuff, null, skillName), React__default.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement(TitleNameBuffContainer, null, React__default.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameDebuff, null, skillName), React__default.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement("div", null, React__default.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React__default.createElement(TitleName, null, skillName)), !buffAndDebuff && React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", level))), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$2, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -17483,7 +17648,7 @@ var ProgressBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressBarContainer",
   componentId: "sc-5vuroc-0"
 })(["position:relative;top:8px;width:100%;height:auto;"]);
-var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__SpriteContainer",
   componentId: "sc-5vuroc-1"
 })(["position:relative;top:-3px;left:0;"]);
@@ -17709,7 +17874,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$o, 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$p, 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", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -17735,7 +17900,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__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);
@@ -17789,7 +17954,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$p, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$q, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -17814,7 +17979,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -17855,13 +18020,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$q, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$r, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -17921,7 +18086,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$r, {
+  }, React__default.createElement(Container$s, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -17940,7 +18105,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$r = /*#__PURE__*/styled.button.withConfig({
+var Container$s = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -18019,7 +18184,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$s, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$t, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -18055,7 +18220,7 @@ var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -18176,7 +18341,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$1, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(ItemInfoWrapper, {
+  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$1, null, React__default.createElement(SpriteContainer$3, null, React__default.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -18243,7 +18408,7 @@ var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
   componentId: "sc-mja0b5-4"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
-var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var SpriteContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
   componentId: "sc-mja0b5-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
@@ -18401,11 +18566,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$t, {
+  return React__default.createElement(Container$u, {
     maxLines: maxLines
   }, children);
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {