@rpg-engine/long-bow 0.3.79 → 0.3.81

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

@@ -13,6 +13,7 @@ var reactErrorBoundary = require('react-error-boundary');
 var rx = require('react-icons/rx');
 var Draggable = _interopDefault(require('react-draggable'));
 var uuid = require('uuid');
+var ReactDOM = _interopDefault(require('react-dom'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
 require('rpgui/rpgui.min.css');
@@ -33223,7 +33224,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
     initialPosition = _ref$initialPosition === void 0 ? {
       x: 0,
       y: 0
-    } : _ref$initialPosition;
+    } : _ref$initialPosition,
+    scale = _ref.scale;
   var draggableRef = React.useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   React.useEffect(function () {
@@ -33249,7 +33251,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
         });
       }
     },
-    defaultPosition: initialPosition
+    defaultPosition: initialPosition,
+    scale: scale
   }, React__default.createElement(Container$6, {
     ref: draggableRef,
     width: width,
@@ -33363,6 +33366,18 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   return props.opened ? 'block' : 'none';
 });
 
+var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
+var ModalPortal = function ModalPortal(_ref) {
+  var children = _ref.children;
+  return ReactDOM.createPortal(React__default.createElement(Container$8, {
+    className: "rpgui-content"
+  }, children), modalRoot);
+};
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ModalPortal__Container",
+  componentId: "sc-dgmp04-0"
+})(["position:static !important;"]);
+
 var RelativeListMenu = function RelativeListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -33384,7 +33399,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(Container$8, {
+  return React__default.createElement(Container$9, {
     fontSize: fontSize,
     ref: ref
   }, React__default.createElement("ul", {
@@ -33401,7 +33416,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:1rem;left:4rem;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -33423,24 +33438,17 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     options = _ref.options,
     onSelected = _ref.onSelected;
   var ref = React.useRef(null);
-  React.useEffect(function () {
-    var current = ref.current;
-    if (current) {
-      // Adjust the position to be on whole window
-      var rect = current.getBoundingClientRect();
-      var x = -rect.x * 100 / (scale * 100);
-      var y = -rect.y * 100 / (scale * 100);
-      current.style.transform = "translate(" + x + "px, " + y + "px)";
-      current.style.opacity = '0.92';
-    }
-    return;
-  }, []);
-  return React__default.createElement(Container$9, {
+  var handleFadeOut = function handleFadeOut() {
+    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$a, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
       setTimeout(function () {
         closeTooltip();
-      }, 10);
+      }, 100);
     },
     scale: scale
   }, React__default.createElement(ItemInfoDisplay, {
@@ -33453,24 +33461,19 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     return React__default.createElement(Option, {
       key: option.id,
       onTouchEnd: function onTouchEnd() {
+        handleFadeOut();
         setTimeout(function () {
           onSelected == null ? void 0 : onSelected(option.id);
           closeTooltip();
-        }, 10);
+        }, 100);
       }
     }, option.text);
-  })));
+  }))));
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
-})(["position:fixed;z-index:50;left:0;top:0;opacity:0;width:", ";height:", ";background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;@media (max-width:580px){flex-direction:column;}"], function (_ref2) {
-  var scale = _ref2.scale;
-  return "calc(100vw * 100 / " + scale * 100 + ")";
-}, function (_ref3) {
-  var scale = _ref3.scale;
-  return "calc(100vh * 100 / " + scale * 100 + ")";
-});
+})(["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;}"]);
 var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__OptionsContainer",
   componentId: "sc-ku4p1j-1"
@@ -33478,7 +33481,7 @@ var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
 var Option = /*#__PURE__*/styled.button.withConfig({
   displayName: "MobileItemTooltip__Option",
   componentId: "sc-ku4p1j-2"
-})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.2s;&:hover{background-color:#555;}@media (max-width:580px){padding:1rem 0.5rem;}"]);
+})(["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:580px){padding:1rem 0.5rem;}"]);
 
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
@@ -33673,7 +33676,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
         maxWidth: "48px"
       }, React__default.createElement(ItemQty, {
         className: qtyClassName
-      }, " ", stackQty, " ")));
+      }, Math.round(stackQty * 100) / 100, ' ')));
     }
     return undefined;
   };
@@ -33767,7 +33770,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       onDragEnd(quantity);
     }
   };
-  return React__default.createElement(Container$a, {
+  return React__default.createElement(Container$b, {
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -33918,7 +33921,7 @@ var rarityColor = function rarityColor(item) {
       return null;
   }
 };
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.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) {
@@ -34029,13 +34032,13 @@ var ItemInfo = function ItemInfo(_ref) {
       }));
     });
   };
-  return React__default.createElement(Container$b, {
+  return React__default.createElement(Container$c, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
-  }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React__default.createElement(Statistic, null, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", (_item$stackQty = item.stackQty) != null ? _item$stackQty : 1, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
+  }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React__default.createElement(Statistic, null, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:15rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -34148,22 +34151,18 @@ var ItemTooltip = function ItemTooltip(_ref) {
   var ref = React.useRef(null);
   React.useEffect(function () {
     var current = ref.current;
-    var initialOffset;
     if (current) {
       var handleMouseMove = function handleMouseMove(event) {
         var clientX = event.clientX,
           clientY = event.clientY;
         // Adjust the position of the tooltip based on the mouse position
         var rect = current.getBoundingClientRect();
-        if (!initialOffset) {
-          initialOffset = rect;
-        }
         var tooltipWidth = rect.width;
         var tooltipHeight = rect.height;
         var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
         var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
-        var x = (isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset) - initialOffset.x;
-        var y = (isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset) - initialOffset.y;
+        var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
+        var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
         current.style.transform = "translate(" + x + "px, " + y + "px)";
         current.style.opacity = '1';
       };
@@ -34174,19 +34173,19 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(Container$c, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }));
+  })));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
-})(["position:fixed;z-index:50;pointer-events:none;left:0;top:0;opacity:0;"]);
+})(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
 
 var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   var children = _ref.children,
@@ -34289,7 +34288,8 @@ var CraftBook = function CraftBook(_ref) {
       if (onClose) {
         onClose();
       }
-    }
+    },
+    scale: scale
   }, React__default.createElement("div", {
     style: {
       width: '100%'
@@ -34446,7 +34446,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onItemOutsideDrop = _ref.onItemOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    dragScale = _ref.dragScale;
+    scale = _ref.scale;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -34491,7 +34491,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onDragEnd: function onDragEnd(quantity) {
           if (onItemDragEnd) onItemDragEnd(quantity);
         },
-        dragScale: dragScale,
+        dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
         checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
@@ -34512,7 +34512,8 @@ var EquipmentSet = function EquipmentSet(_ref) {
       if (onClose) onClose();
     },
     width: "330px",
-    cancelDrag: ".equipment-container-body"
+    cancelDrag: ".equipment-container-body",
+    scale: scale
   }, 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))));
@@ -34532,7 +34533,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     onClose = _ref.onClose,
     _onPositionChange = _ref.onPositionChange,
     onOutsideClick = _ref.onOutsideClick,
-    initialPosition = _ref.initialPosition;
+    initialPosition = _ref.initialPosition,
+    scale = _ref.scale;
   return React__default.createElement(DraggableContainer, {
     title: title,
     type: exports.RPGUIContainerTypes.Framed,
@@ -34554,7 +34556,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
       }
     },
     onOutsideClick: onOutsideClick,
-    initialPosition: initialPosition
+    initialPosition: initialPosition,
+    scale: scale
   }, children);
 };
 
@@ -34746,7 +34749,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
       return word[0];
     }));
   };
-  return React__default.createElement(Container$d, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$e, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 6
@@ -34762,7 +34765,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;}"]);
@@ -34796,7 +34799,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
     checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    dragScale = _ref.dragScale,
+    scale = _ref.scale,
     shortcuts = _ref.shortcuts,
     setItemShortcut = _ref.setItemShortcut,
     removeShortcut = _ref.removeShortcut,
@@ -34841,7 +34844,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         onDragEnd: function onDragEnd(quantity) {
           if (onItemDragEnd) onItemDragEnd(quantity);
         },
-        dragScale: dragScale,
+        dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
         checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
@@ -34868,7 +34871,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
-    initialPosition: initialPosition
+    initialPosition: initialPosition,
+    scale: scale
   }, type === shared.ItemContainerType.Inventory && shortcuts && removeShortcut && React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
@@ -34878,7 +34882,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React__default.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
+  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -34896,7 +34900,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         callback: function callback() {}
       });
     }
-  })));
+  }))));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
@@ -34998,7 +35002,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$e, {
+  return React__default.createElement(Container$f, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -35015,7 +35019,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__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) {
@@ -35068,7 +35072,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$f, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -35110,7 +35114,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$7
   }))), ")"));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__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;"]);
@@ -35314,7 +35318,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$g, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$h, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -35324,7 +35328,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__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;"]);
@@ -35370,7 +35374,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$h, {
+  return React__default.createElement(Container$i, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35399,7 +35403,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__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;", ""], function (props) {
@@ -35416,7 +35420,8 @@ var QuestInfo = function QuestInfo(_ref) {
   var quests = _ref.quests,
     onClose = _ref.onClose,
     buttons = _ref.buttons,
-    onChangeQuest = _ref.onChangeQuest;
+    onChangeQuest = _ref.onChangeQuest,
+    scale = _ref.scale;
   var _useState = React.useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
@@ -35442,7 +35447,8 @@ var QuestInfo = function QuestInfo(_ref) {
       if (onClose) onClose();
     },
     width: "730px",
-    cancelDrag: ".equipment-container-body .arrow-selector"
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    scale: scale
   }, quests.length >= 2 ? React__default.createElement(QuestsContainer, null, currentIndex !== 0 && React__default.createElement(SelectArrow, {
     direction: "left",
     onPointerDown: onLeftClick
@@ -35528,13 +35534,15 @@ var Thumbnail = /*#__PURE__*/styled.img.withConfig({
 
 var QuestList = function QuestList(_ref) {
   var quests = _ref.quests,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    scale = _ref.scale;
   return React__default.createElement(QuestDraggableContainer$1, {
     type: exports.RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
       if (onClose) onClose();
     },
-    width: "520px"
+    width: "520px",
+    scale: scale
   }, React__default.createElement("div", {
     style: {
       width: '100%'
@@ -35720,7 +35728,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$i, {
+  return React__default.createElement(Container$j, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -35729,7 +35737,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35878,7 +35886,8 @@ var SkillsContainer = function SkillsContainer(_ref) {
   var onCloseButton = _ref.onCloseButton,
     skill = _ref.skill,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    scale = _ref.scale;
   var onRenderSkillCategory = function onRenderSkillCategory(category) {
     var skillCategory = skillProps[category];
     var skillCategoryColor = skillCategory.color;
@@ -35905,7 +35914,8 @@ var SkillsContainer = function SkillsContainer(_ref) {
   };
   return React__default.createElement(SkillsDraggableContainer, {
     title: "Skills",
-    cancelDrag: "#skillsDiv"
+    cancelDrag: "#skillsDiv",
+    scale: scale
   }, onCloseButton && React__default.createElement(CloseButton$3, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
@@ -35958,7 +35968,7 @@ var Spell = function Spell(_ref) {
     isSettingShortcut = _ref.isSettingShortcut,
     minMagicLevelRequired = _ref.minMagicLevelRequired;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React__default.createElement(Container$j, {
+  return React__default.createElement(Container$k, {
     disabled: disabled,
     onPointerDown: onPointerDown == null ? void 0 : onPointerDown.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
@@ -35971,7 +35981,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost)));
 };
-var Container$j = /*#__PURE__*/styled.button.withConfig({
+var Container$k = /*#__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;height:5rem;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) {
@@ -36019,7 +36029,8 @@ var Spellbook = function Spellbook(_ref) {
     shortcuts = _ref.shortcuts,
     removeShortcut = _ref.removeShortcut,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    scale = _ref.scale;
   var _useState = React.useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -36055,8 +36066,9 @@ var Spellbook = function Spellbook(_ref) {
     onCloseButton: onClose,
     width: "inherit",
     height: "inherit",
-    cancelDrag: "#spellbook-search, #shortcuts_list, .spell"
-  }, React__default.createElement(Container$k, null, React__default.createElement(Title$7, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+    cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
+    scale: scale
+  }, React__default.createElement(Container$l, null, React__default.createElement(Title$7, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36088,7 +36100,7 @@ var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -36126,8 +36138,11 @@ var img$c = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAABHCAYAAAA0qHhdA
 var TimeWidget = function TimeWidget(_ref) {
   var onClose = _ref.onClose,
     TimeClock = _ref.TimeClock,
-    periodOfDay = _ref.periodOfDay;
-  return React__default.createElement(Draggable, null, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$4, {
+    periodOfDay = _ref.periodOfDay,
+    scale = _ref.scale;
+  return React__default.createElement(Draggable, {
+    scale: scale
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$4, {
     onPointerDown: onClose
   }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -36315,7 +36330,8 @@ var TradingMenu = function TradingMenu(_ref) {
       if (onClose) onClose();
     },
     width: "600px",
-    cancelDrag: "#TraderContainer"
+    cancelDrag: "#TraderContainer",
+    scale: scale
   }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     style: {
       width: '100%'
@@ -36384,11 +36400,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$l, {
+  return React__default.createElement(Container$m, {
     maxLines: maxLines
   }, children);
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__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) {
@@ -36451,7 +36467,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$m, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$n, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -36469,7 +36485,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -36510,7 +36526,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
     src: imagePath || img$6
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$n, null, React__default.createElement(TextContainer$2, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$o, null, React__default.createElement(TextContainer$2, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React__default.createElement(NPCDialogText, {
     type: type,
@@ -36524,7 +36540,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$6
   })))));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__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;"]);