@rpg-engine/long-bow 0.3.79 → 0.3.81

package/dist/long-bow.esm.js

@@ -6,6 +6,7 @@ import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
 import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
+import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import 'rpgui/rpgui.min.css';
@@ -33218,7 +33219,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
     initialPosition = _ref$initialPosition === void 0 ? {
       x: 0,
       y: 0
-    } : _ref$initialPosition;
+    } : _ref$initialPosition,
+    scale = _ref.scale;
   var draggableRef = useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
@@ -33244,7 +33246,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
         });
       }
     },
-    defaultPosition: initialPosition
+    defaultPosition: initialPosition,
+    scale: scale
   }, React.createElement(Container$6, {
     ref: draggableRef,
     width: width,
@@ -33358,6 +33361,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.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,
@@ -33379,7 +33394,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React.createElement(Container$8, {
+  return React.createElement(Container$9, {
     fontSize: fontSize,
     ref: ref
   }, React.createElement("ul", {
@@ -33396,7 +33411,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) {
@@ -33418,24 +33433,17 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     options = _ref.options,
     onSelected = _ref.onSelected;
   var ref = useRef(null);
-  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.createElement(Container$9, {
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React.createElement(ModalPortal, null, React.createElement(Container$a, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
       setTimeout(function () {
         closeTooltip();
-      }, 10);
+      }, 100);
     },
     scale: scale
   }, React.createElement(ItemInfoDisplay, {
@@ -33448,24 +33456,19 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     return React.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"
@@ -33473,7 +33476,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) {
@@ -33668,7 +33671,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         maxWidth: "48px"
       }, React.createElement(ItemQty, {
         className: qtyClassName
-      }, " ", stackQty, " ")));
+      }, Math.round(stackQty * 100) / 100, ' ')));
     }
     return undefined;
   };
@@ -33762,7 +33765,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       onDragEnd(quantity);
     }
   };
-  return React.createElement(Container$a, {
+  return React.createElement(Container$b, {
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -33913,7 +33916,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) {
@@ -34024,13 +34027,13 @@ var ItemInfo = function ItemInfo(_ref) {
       }));
     });
   };
-  return React.createElement(Container$b, {
+  return React.createElement(Container$c, {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
-  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React.createElement(Statistic, null, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", (_item$stackQty = item.stackQty) != null ? _item$stackQty : 1, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
+  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React.createElement(Statistic, null, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.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) {
@@ -34143,22 +34146,18 @@ var ItemTooltip = function ItemTooltip(_ref) {
   var ref = useRef(null);
   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';
       };
@@ -34169,19 +34168,19 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(Container$c, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
     ref: ref
   }, React.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,
@@ -34284,7 +34283,8 @@ var CraftBook = function CraftBook(_ref) {
       if (onClose) {
         onClose();
       }
-    }
+    },
+    scale: scale
   }, React.createElement("div", {
     style: {
       width: '100%'
@@ -34441,7 +34441,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,
@@ -34486,7 +34486,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) {
@@ -34507,7 +34507,8 @@ var EquipmentSet = function EquipmentSet(_ref) {
       if (onClose) onClose();
     },
     width: "330px",
-    cancelDrag: ".equipment-container-body"
+    cancelDrag: ".equipment-container-body",
+    scale: scale
   }, 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))));
@@ -34527,7 +34528,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.createElement(DraggableContainer, {
     title: title,
     type: RPGUIContainerTypes.Framed,
@@ -34549,7 +34551,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
       }
     },
     onOutsideClick: onOutsideClick,
-    initialPosition: initialPosition
+    initialPosition: initialPosition,
+    scale: scale
   }, children);
 };
 
@@ -34742,7 +34745,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
       return word[0];
     }));
   };
-  return React.createElement(Container$d, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$e, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 6
@@ -34758,7 +34761,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;}"]);
@@ -34792,7 +34795,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,
@@ -34837,7 +34840,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) {
@@ -34864,7 +34867,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
-    initialPosition: initialPosition
+    initialPosition: initialPosition,
+    scale: scale
   }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
@@ -34874,7 +34878,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -34892,7 +34896,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         callback: function callback() {}
       });
     }
-  })));
+  }))));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
@@ -34994,7 +34998,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$e, {
+  return React.createElement(Container$f, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -35011,7 +35015,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) {
@@ -35065,7 +35069,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$f, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -35107,7 +35111,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;"]);
@@ -35311,7 +35315,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$g, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$h, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -35321,7 +35325,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.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;"]);
@@ -35367,7 +35371,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$h, {
+  return React.createElement(Container$i, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35396,7 +35400,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) {
@@ -35413,7 +35417,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 = useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
@@ -35439,7 +35444,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.createElement(QuestsContainer, null, currentIndex !== 0 && React.createElement(SelectArrow, {
     direction: "left",
     onPointerDown: onLeftClick
@@ -35525,13 +35531,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.createElement(QuestDraggableContainer$1, {
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
       if (onClose) onClose();
     },
-    width: "520px"
+    width: "520px",
+    scale: scale
   }, React.createElement("div", {
     style: {
       width: '100%'
@@ -35717,7 +35725,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$i, {
+  return React.createElement(Container$j, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -35726,7 +35734,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%;"]);
@@ -35875,7 +35883,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;
@@ -35902,7 +35911,8 @@ var SkillsContainer = function SkillsContainer(_ref) {
   };
   return React.createElement(SkillsDraggableContainer, {
     title: "Skills",
-    cancelDrag: "#skillsDiv"
+    cancelDrag: "#skillsDiv",
+    scale: scale
   }, onCloseButton && React.createElement(CloseButton$3, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
@@ -35955,7 +35965,7 @@ var Spell = function Spell(_ref) {
     isSettingShortcut = _ref.isSettingShortcut,
     minMagicLevelRequired = _ref.minMagicLevelRequired;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$k, {
     disabled: disabled,
     onPointerDown: onPointerDown == null ? void 0 : onPointerDown.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
@@ -35968,7 +35978,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) {
@@ -36016,7 +36026,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 = useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -36052,8 +36063,9 @@ var Spellbook = function Spellbook(_ref) {
     onCloseButton: onClose,
     width: "inherit",
     height: "inherit",
-    cancelDrag: "#spellbook-search, #shortcuts_list, .spell"
-  }, React.createElement(Container$k, null, React.createElement(Title$7, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+    cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
+    scale: scale
+  }, React.createElement(Container$l, null, React.createElement(Title$7, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36085,7 +36097,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;"]);
@@ -36123,8 +36135,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.createElement(Draggable, null, React.createElement(WidgetContainer, null, React.createElement(CloseButton$4, {
+    periodOfDay = _ref.periodOfDay,
+    scale = _ref.scale;
+  return React.createElement(Draggable, {
+    scale: scale
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$4, {
     onPointerDown: onClose
   }, "X"), React.createElement(DayNightContainer, null, React.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -36312,7 +36327,8 @@ var TradingMenu = function TradingMenu(_ref) {
       if (onClose) onClose();
     },
     width: "600px",
-    cancelDrag: "#TraderContainer"
+    cancelDrag: "#TraderContainer",
+    scale: scale
   }, React.createElement(React.Fragment, null, React.createElement("div", {
     style: {
       width: '100%'
@@ -36381,11 +36397,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$l, {
+  return React.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) {
@@ -36448,7 +36464,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$m, null, React.createElement(DynamicText, {
+  return React.createElement(Container$n, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -36466,7 +36482,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"
 })([""]);
@@ -36508,7 +36524,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
     src: imagePath || img$6
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$n, null, React.createElement(TextContainer$2, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$o, null, React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
@@ -36522,7 +36538,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;"]);