@rpg-engine/long-bow 0.5.21 → 0.5.23

package/dist/long-bow.esm.js

@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
+import React, { Component, useState, useEffect, useRef, useContext, createContext, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
@@ -13386,6 +13386,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.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.createElement(ItemQtyContainer, {
+    key: "qty-" + itemId,
+    className: "item-slot-qty"
+  }, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "48px"
+  }, React.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.createElement(ErrorBoundary, {
+      key: itemToRender._id
+    }, React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: 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.createElement(ErrorBoundary, {
+        key: v4()
+      }, React.createElement(SpriteFromAtlas, {
+        key: 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 ItemContainerType.Equipment:
+        return renderEquipment(itemToRender);
+      case ItemContainerType.Inventory:
+        return renderItem(itemToRender);
+      default:
+        return null;
+    }
+  };
+  return React.createElement(React.Fragment, null, onRenderSlot(item));
+};
+
 var RelativeListMenu = function RelativeListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -13496,6 +13591,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.createElement(React.Fragment, null, isTooltipVisible && item && !isFocused && React.createElement(ItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  }), isTooltipMobileVisible && item && React.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.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__*/createContext({
+  item: null,
+  setDraggingItem: function setDraggingItem() {}
+});
+var useDragging = function useDragging() {
+  return useContext(DraggingContext);
+};
+var DraggingProvider = function DraggingProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(null),
+    item = _useState[0],
+    setDraggingItem = _useState[1];
+  return React.createElement(DraggingContext.Provider, {
+    value: {
+      item: item,
+      setDraggingItem: setDraggingItem
+    }
+  }, children);
+};
+
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
     return {
@@ -13680,6 +13847,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     dropPosition = _useState8[0],
     setDropPosition = _useState8[1];
   var dragContainer = useRef(null);
+  var _useDragging = useDragging(),
+    setDraggingItem = _useDragging.setDraggingItem;
   var _useState9 = useState([]),
     contextActions = _useState9[0],
     setContextActions = _useState9[1];
@@ -13698,105 +13867,11 @@ var ItemSlot = /*#__PURE__*/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.createElement(ItemQtyContainer, {
-        key: "qty-" + itemId
-      }, React.createElement(Ellipsis, {
-        maxLines: 1,
-        maxWidth: "48px"
-      }, React.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.createElement(ErrorBoundary, {
-        key: itemToRender._id
-      }, React.createElement(SpriteFromAtlas, {
-        key: itemToRender._id,
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: 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.createElement(ErrorBoundary, {
-        key: itemToRender._id
-      }, React.createElement(SpriteFromAtlas, {
-        key: itemToRender._id,
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: 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.createElement(ErrorBoundary, {
-        key: v4()
-      }, React.createElement(SpriteFromAtlas, {
-        key: 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 ItemContainerType.Equipment:
-        return renderEquipment(itemToRender);
-      case 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({
@@ -13837,6 +13912,7 @@ var ItemSlot = /*#__PURE__*/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]);
@@ -13871,7 +13947,7 @@ var ItemSlot = /*#__PURE__*/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);
@@ -13880,7 +13956,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
               y: 0
             });
           }
-        }, 100);
+        }, 50);
       } else if (item) {
         var isTouch = false;
         if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
@@ -13904,6 +13980,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       if (!item || isSelectingShortcut) {
         return;
       }
+      setDraggingItem(item);
       if (onDragStart && containerType) {
         onDragStart(item, slotIndex, containerType);
       }
@@ -13931,39 +14008,32 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onMouseLeave: function onMouseLeave() {
       setTooltipVisible(false);
     }
-  }, onRenderSlot(item))), isTooltipVisible && item && !isFocused && React.createElement(ItemTooltip, {
+  }, React.createElement(ItemSlotRenderer, {
     item: item,
+    slotSpriteMask: slotSpriteMask,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), isTooltipMobileVisible && item && React.createElement(MobileItemTooltip, {
+    containerType: containerType
+  }))), React.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.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) {
@@ -13983,7 +14053,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) {
@@ -13999,17 +14069,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'
@@ -14688,6 +14750,102 @@ var Details = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-kaa0h9-0"
 })(["font-size:", " !important;"], uiFonts.size.xsmall);
 
+var useCursorPosition = function useCursorPosition() {
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    cursorPosition = _useState[0],
+    setCursorPosition = _useState[1];
+  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.createElement(Container$e, null, React.createElement(SpriteContainer, {
+    x: centeredX,
+    y: centeredY
+  }, React.createElement(SpriteFromAtlas, {
+    key: item._id,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: 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,
@@ -14764,7 +14922,10 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-  return React.createElement(DraggableContainer, {
+  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React.createElement(DraggableContainer, {
     title: 'Equipments',
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -14778,7 +14939,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onPositionChangeStart: onPositionChangeStart
   }, React.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
-  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))));
+  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))));
 };
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
@@ -14884,7 +15045,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$e, null, React.createElement(DynamicText, {
+  return React.createElement(Container$f, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -14902,7 +15063,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"
 })([""]);
@@ -15054,7 +15215,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$f, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$g, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -15064,7 +15225,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.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;"]);
@@ -15125,7 +15286,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$g, null, React.createElement(TextContainer$1, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$h, null, React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
@@ -15139,7 +15300,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;"]);
@@ -15196,7 +15357,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$h, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$i, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -15238,7 +15399,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;"]);
@@ -15432,7 +15593,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.createElement(DraggableContainer, {
     title: title,
     type: RPGUIContainerTypes.Framed,
@@ -15441,7 +15603,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,
@@ -15479,6 +15641,89 @@ var SlotsContainer = function SlotsContainer(_ref) {
   }, children);
 };
 
+var ShortcutsSetter = function ShortcutsSetter(_ref) {
+  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
+    settingShortcutIndex = _ref.settingShortcutIndex,
+    shortcuts = _ref.shortcuts,
+    removeShortcut = _ref.removeShortcut,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
+  var getContent = function getContent(index) {
+    var _shortcuts$index;
+    if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === ShortcutType.Item) {
+      var _shortcuts$index2;
+      var payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
+      if (!payload) return null;
+      return React.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: getItemTextureKeyPath({
+          key: payload.texturePath,
+          texturePath: payload.texturePath,
+          stackQty: payload.stackQty || 1,
+          isStackable: payload.isStackable
+        }, atlasJSON),
+        width: 32,
+        height: 32,
+        imgScale: 1.2,
+        imgStyle: {
+          left: '3px'
+        }
+      });
+    }
+    var IMAGE_SIZE = 32;
+    var IMAGE_SCALE = 1;
+    var shortcut = shortcuts[index];
+    if ((shortcut == null ? void 0 : shortcut.type) === ShortcutType.Spell && shortcut.payload) {
+      var _payload$texturePath;
+      var _payload = shortcut.payload; // TypeScript type assertion
+      return React.createElement(SpriteFromAtlas, {
+        atlasIMG: _payload.atlasIMG,
+        atlasJSON: _payload.atlasJSON,
+        spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
+        width: IMAGE_SIZE,
+        height: IMAGE_SIZE,
+        imgScale: IMAGE_SCALE,
+        centered: true,
+        borderRadius: "50%"
+      });
+    }
+    return null;
+  };
+  return React.createElement(Container$j, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+    id: "shortcuts_list"
+  }, Array.from({
+    length: 12
+  }).map(function (_, i) {
+    return React.createElement(Shortcut, {
+      key: i,
+      onPointerDown: function onPointerDown() {
+        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+        removeShortcut(i);
+        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i,
+      id: "shortcutSetter_" + i
+    }, getContent(i));
+  })));
+};
+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%;"]);
+var Shortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ShortcutsSetter__Shortcut",
+  componentId: "sc-xuouuf-1"
+})(["width:2.4rem;height:2.4rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
+  var isBeingSet = _ref2.isBeingSet;
+  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
+}, uiColors.darkGray, uiColors.gray);
+var List = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__List",
+  componentId: "sc-xuouuf-2"
+})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
+
 var RangeSliderType;
 (function (RangeSliderType) {
   RangeSliderType["Slider"] = "rpgui-slider";
@@ -15634,88 +15879,33 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
 
-var ShortcutsSetter = function ShortcutsSetter(_ref) {
-  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
-    settingShortcutIndex = _ref.settingShortcutIndex,
-    shortcuts = _ref.shortcuts,
-    removeShortcut = _ref.removeShortcut,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG;
-  var getContent = function getContent(index) {
-    var _shortcuts$index;
-    if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === ShortcutType.Item) {
-      var _shortcuts$index2;
-      var payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
-      if (!payload) return null;
-      return React.createElement(SpriteFromAtlas, {
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: getItemTextureKeyPath({
-          key: payload.texturePath,
-          texturePath: payload.texturePath,
-          stackQty: payload.stackQty || 1,
-          isStackable: payload.isStackable
-        }, atlasJSON),
-        width: 32,
-        height: 32,
-        imgScale: 1.2,
-        imgStyle: {
-          left: '3px'
-        }
+var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
+  var quantitySelect = _ref.quantitySelect,
+    setQuantitySelect = _ref.setQuantitySelect;
+  return React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+    quantity: quantitySelect.maxQuantity,
+    onConfirm: function onConfirm(quantity) {
+      quantitySelect.callback(quantity);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
       });
-    }
-    var IMAGE_SIZE = 32;
-    var IMAGE_SCALE = 1;
-    var shortcut = shortcuts[index];
-    if ((shortcut == null ? void 0 : shortcut.type) === ShortcutType.Spell && shortcut.payload) {
-      var _payload$texturePath;
-      var _payload = shortcut.payload; // TypeScript type assertion
-      return React.createElement(SpriteFromAtlas, {
-        atlasIMG: _payload.atlasIMG,
-        atlasJSON: _payload.atlasJSON,
-        spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
-        width: IMAGE_SIZE,
-        height: IMAGE_SIZE,
-        imgScale: IMAGE_SCALE,
-        centered: true,
-        borderRadius: "50%"
+    },
+    onClose: function onClose() {
+      quantitySelect.callback(-1);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
       });
     }
-    return null;
-  };
-  return React.createElement(Container$i, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
-    id: "shortcuts_list"
-  }, Array.from({
-    length: 12
-  }).map(function (_, i) {
-    return React.createElement(Shortcut, {
-      key: i,
-      onPointerDown: function onPointerDown() {
-        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
-        removeShortcut(i);
-        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
-      },
-      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
-      isBeingSet: settingShortcutIndex === i,
-      id: "shortcutSetter_" + i
-    }, getContent(i));
   })));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__Container",
-  componentId: "sc-xuouuf-0"
-})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
-var Shortcut = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ShortcutsSetter__Shortcut",
-  componentId: "sc-xuouuf-1"
-})(["width:2.4rem;height:2.4rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
-  var isBeingSet = _ref2.isBeingSet;
-  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
-}, uiColors.darkGray, uiColors.gray);
-var List = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__List",
-  componentId: "sc-xuouuf-2"
-})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
+var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemQuantitySelectorModal__QuantitySelectorContainer",
+  componentId: "sc-1b8cosc-0"
+})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
 var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
@@ -15812,7 +16002,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
-  return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
+  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
     initialPosition: initialPosition,
@@ -15828,34 +16021,15 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
-    quantity: quantitySelect.maxQuantity,
-    onConfirm: function onConfirm(quantity) {
-      quantitySelect.callback(quantity);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    },
-    onClose: function onClose() {
-      quantitySelect.callback(-1);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    }
-  }))));
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+    quantitySelect: quantitySelect,
+    setQuantitySelect: setQuantitySelect
+  }));
 };
 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;"]);
-var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__QuantitySelectorContainer",
-  componentId: "sc-15y5p9l-1"
-})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -15980,7 +16154,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$k, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -15997,7 +16171,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) {
@@ -16016,7 +16190,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$k, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$l, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -16030,7 +16204,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);
@@ -16043,7 +16217,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$l, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$m, {
     onPointerDown: onClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -16066,7 +16240,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;"]);
@@ -16089,7 +16263,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
     onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
     disabled = _ref.disabled;
-  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -16150,7 +16324,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;"]);
@@ -17031,7 +17205,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$m, {
+  return React.createElement(Container$n, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -17061,7 +17235,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) {
@@ -17409,7 +17583,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.createElement(Container$n, {
+  return React.createElement(Container$o, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -17418,7 +17592,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%;"]);
@@ -17465,7 +17639,7 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
       return "" + result.toFixed(2);
     }
   };
-  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React.createElement(React.Fragment, null, buffAndDebuff > 0 ? React.createElement(BuffAndDebuffContainer, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameBuff, null, skillName), React.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement(TitleNameBuffContainer, null, React.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React.createElement(React.Fragment, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameDebuff, null, skillName), React.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement("div", null, React.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React.createElement(TitleName, null, skillName)), !buffAndDebuff && React.createElement(TitleNameContainer, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level))), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$1, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React.createElement(React.Fragment, null, buffAndDebuff > 0 ? React.createElement(BuffAndDebuffContainer, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameBuff, null, skillName), React.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement(TitleNameBuffContainer, null, React.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React.createElement(React.Fragment, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameDebuff, null, skillName), React.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React.createElement("div", null, React.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React.createElement(TitleName, null, skillName)), !buffAndDebuff && React.createElement(TitleNameContainer, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level))), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$2, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -17481,7 +17655,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;"]);
@@ -17707,7 +17881,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$o, null, React.createElement(Header$1, 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", {
+  return React.createElement(Container$p, null, React.createElement(Header$1, 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"
@@ -17733,7 +17907,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.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);
@@ -17787,7 +17961,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$p, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$q, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -17812,7 +17986,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;}"]);
@@ -17853,13 +18027,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$q, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$r, {
     ref: ref
   }, React.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;"]);
@@ -17919,7 +18093,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$r, {
+  }, React.createElement(Container$s, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -17938,7 +18112,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) {
@@ -18017,7 +18191,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$s, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$t, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -18053,7 +18227,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;"]);
@@ -18174,7 +18348,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$2, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$3, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -18241,7 +18415,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;"]);
@@ -18399,11 +18573,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$t, {
+  return React.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) {