@rpg-engine/long-bow 0.2.27 → 0.2.29

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSlotType, getSPForLevel } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, getItemTextureKeyPath, ItemSlotType, getSPForLevel } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import Draggable from 'react-draggable';
@@ -14,26 +14,21 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -41,37 +36,34 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
 var _excluded = ["disabled", "children", "buttonType"];
 var ButtonTypes;
-
 (function (ButtonTypes) {
   ButtonTypes["RPGUIButton"] = "rpgui-button";
   ButtonTypes["RPGUIGoldButton"] = "rpgui-button golden";
 })(ButtonTypes || (ButtonTypes = {}));
-
 var Button = function Button(_ref) {
   var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      buttonType = _ref.buttonType,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    children = _ref.children,
+    buttonType = _ref.buttonType,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return React.createElement(ButtonContainer, Object.assign({
     className: "" + buttonType,
     disabled: disabled
@@ -84,21 +76,21 @@ var ButtonContainer = /*#__PURE__*/styled.button.withConfig({
 
 var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
   var atlasJSON = _ref.atlasJSON,
-      atlasIMG = _ref.atlasIMG,
-      spriteKey = _ref.spriteKey,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? GRID_WIDTH : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? GRID_HEIGHT : _ref$height,
-      _ref$imgScale = _ref.imgScale,
-      imgScale = _ref$imgScale === void 0 ? 2 : _ref$imgScale,
-      imgStyle = _ref.imgStyle,
-      onClick = _ref.onClick,
-      containerStyle = _ref.containerStyle,
-      _ref$grayScale = _ref.grayScale,
-      grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
-      _ref$opacity = _ref.opacity,
-      opacity = _ref$opacity === void 0 ? 1 : _ref$opacity;
+    atlasIMG = _ref.atlasIMG,
+    spriteKey = _ref.spriteKey,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? GRID_WIDTH : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? GRID_HEIGHT : _ref$height,
+    _ref$imgScale = _ref.imgScale,
+    imgScale = _ref$imgScale === void 0 ? 2 : _ref$imgScale,
+    imgStyle = _ref.imgStyle,
+    onClick = _ref.onClick,
+    containerStyle = _ref.containerStyle,
+    _ref$grayScale = _ref.grayScale,
+    grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity;
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
   var spriteData = atlasJSON.frames[spriteKey];
@@ -27255,34 +27247,27 @@ var img$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAMAAAD6TlWYA
 
 var ErrorBoundary = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ErrorBoundary, _Component);
-
   function ErrorBoundary() {
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     _this.state = {
       hasError: false
     };
     return _this;
   }
-
   ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(_) {
     // Update state so the next render will show the fallback UI.
     return {
       hasError: true
     };
   };
-
   var _proto = ErrorBoundary.prototype;
-
   _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
     console.error('Uncaught error:', error, errorInfo);
   };
-
   _proto.render = function render() {
     if (this.state.hasError) {
       return React.createElement(SpriteFromAtlas, {
@@ -27292,16 +27277,14 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         imgScale: 3
       });
     }
-
     return this.props.children;
   };
-
   return ErrorBoundary;
 }(Component);
 
 var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
-      maxLines = _ref.maxLines;
+    maxLines = _ref.maxLines;
   return React.createElement(Container$1, null, React.createElement("div", {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
@@ -27321,43 +27304,34 @@ var img$5 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0A
 
 var PropertySelect = function PropertySelect(_ref) {
   var availableProperties = _ref.availableProperties,
-      onChange = _ref.onChange;
-
+    onChange = _ref.onChange;
   var _useState = useState(0),
-      currentIndex = _useState[0],
-      setCurrentIndex = _useState[1];
-
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
   var propertiesLength = availableProperties.length - 1;
-
   var onLeftClick = function onLeftClick() {
     if (currentIndex === 0) setCurrentIndex(propertiesLength);else setCurrentIndex(function (index) {
       return index - 1;
     });
   };
-
   var onRightClick = function onRightClick() {
     if (currentIndex === propertiesLength) setCurrentIndex(0);else setCurrentIndex(function (index) {
       return index + 1;
     });
   };
-
   useEffect(function () {
     onChange(availableProperties[currentIndex]);
   }, [currentIndex]);
   useEffect(function () {
     setCurrentIndex(0);
   }, [JSON.stringify(availableProperties)]);
-
   var getCurrentSelectionName = function getCurrentSelectionName() {
     var item = availableProperties[currentIndex];
-
     if (item) {
       return item.name;
     }
-
     return '';
   };
-
   return React.createElement(Container$2, null, React.createElement(TextOverlay, null, React.createElement(Item, null, React.createElement(Ellipsis, {
     maxLines: 1
   }, getCurrentSelectionName()))), React.createElement("div", {
@@ -27393,34 +27367,28 @@ var RightArrow = /*#__PURE__*/styled.div.withConfig({
 
 var CharacterSelection = function CharacterSelection(_ref) {
   var availableCharacters = _ref.availableCharacters,
-      onChange = _ref.onChange;
+    onChange = _ref.onChange;
   var propertySelectValues = availableCharacters.map(function (item) {
     return {
       id: item.textureKey,
       name: item.name
     };
   });
-
   var _useState = useState(),
-      selectedValue = _useState[0],
-      setSelectedValue = _useState[1];
-
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
   var _useState2 = useState(''),
-      selectedSpriteKey = _useState2[0],
-      setSelectedSpriteKey = _useState2[1];
-
+    selectedSpriteKey = _useState2[0],
+    setSelectedSpriteKey = _useState2[1];
   var onSelectedValueChange = function onSelectedValueChange() {
     var textureKey = selectedValue ? selectedValue.id : '';
     var spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-
-    if (spriteKey == selectedSpriteKey) {
+    if (spriteKey === selectedSpriteKey) {
       return;
     }
-
     setSelectedSpriteKey(spriteKey);
     onChange(textureKey);
   };
-
   useEffect(function () {
     onSelectedValueChange();
   }, [selectedValue]);
@@ -27466,27 +27434,24 @@ var colors = {
 };
 
 var Input = function Input(_ref) {
-  var props = _extends({}, _ref);
-
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React.createElement("input", Object.assign({}, props));
 };
 
 var RPGUIContainerTypes;
-
 (function (RPGUIContainerTypes) {
   RPGUIContainerTypes["Framed"] = "framed";
   RPGUIContainerTypes["FramedGold"] = "framed-golden";
   RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
   RPGUIContainerTypes["FramedGrey"] = "framed-grey";
 })(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
-
 var RPGUIContainer = function RPGUIContainer(_ref) {
   var children = _ref.children,
-      type = _ref.type,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '50%' : _ref$width,
-      height = _ref.height,
-      className = _ref.className;
+    type = _ref.type,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '50%' : _ref$width,
+    height = _ref.height,
+    className = _ref.className;
   return React.createElement(Container$4, {
     width: width,
     height: height || 'auto',
@@ -27518,60 +27483,51 @@ var Column = /*#__PURE__*/styled.div.withConfig({
 
 var Chat = function Chat(_ref) {
   var chatMessages = _ref.chatMessages,
-      onSendChatMessage = _ref.onSendChatMessage,
-      _ref$opacity = _ref.opacity,
-      opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '100%' : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '250px' : _ref$height,
-      onCloseButton = _ref.onCloseButton;
-
+    onSendChatMessage = _ref.onSendChatMessage,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '250px' : _ref$height,
+    onCloseButton = _ref.onCloseButton;
   var _useState = useState(''),
-      message = _useState[0],
-      setMessage = _useState[1];
-
+    message = _useState[0],
+    setMessage = _useState[1];
   useEffect(function () {
     scrollChatToBottom();
   }, []);
   useEffect(function () {
     scrollChatToBottom();
   }, [chatMessages]);
-
   var scrollChatToBottom = function scrollChatToBottom() {
     var scrollingElement = document.querySelector('.chat-body');
-
     if (scrollingElement) {
       scrollingElement.scrollTop = scrollingElement.scrollHeight;
     }
   };
-
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
     onSendChatMessage(message);
     setMessage('');
   };
-
   var getInputValue = function getInputValue(value) {
     setMessage(value);
   };
-
   var onRenderMessageLines = function onRenderMessageLines(emitter, createdAt, message) {
     return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
   };
-
   var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
     return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (_ref2, index) {
       var _id = _ref2._id,
-          createdAt = _ref2.createdAt,
-          emitter = _ref2.emitter,
-          message = _ref2.message;
+        createdAt = _ref2.createdAt,
+        emitter = _ref2.emitter,
+        message = _ref2.message;
       return React.createElement(MessageText, {
         key: _id + "_" + index
       }, onRenderMessageLines(emitter, createdAt, message));
     }) : React.createElement(MessageText, null, "No messages available.");
   };
-
   return React.createElement(Container$5, null, React.createElement(CustomContainer, {
     type: RPGUIContainerTypes.FramedGrey,
     width: width,
@@ -27638,8 +27594,7 @@ var MessageText = /*#__PURE__*/styled.p.withConfig({
 
 var CheckButton = function CheckButton(_ref) {
   var items = _ref.items,
-      onChange = _ref.onChange;
-
+    onChange = _ref.onChange;
   var generateSelectedValuesList = function generateSelectedValuesList() {
     var selectedValues = {};
     items.forEach(function (item) {
@@ -27647,17 +27602,13 @@ var CheckButton = function CheckButton(_ref) {
     });
     return selectedValues;
   };
-
   var _useState = useState(generateSelectedValuesList()),
-      selectedValues = _useState[0],
-      setSelectedValues = _useState[1];
-
+    selectedValues = _useState[0],
+    setSelectedValues = _useState[1];
   var handleClick = function handleClick(label) {
     var _extends2;
-
     setSelectedValues(_extends({}, selectedValues, (_extends2 = {}, _extends2[label] = !selectedValues[label], _extends2)));
   };
-
   useEffect(function () {
     if (selectedValues) {
       onChange(selectedValues);
@@ -27693,12 +27644,10 @@ function useOutsideClick(ref, id) {
             id: id
           }
         });
-
         document.dispatchEvent(_event);
       }
-    } // Bind the event listener
-
-
+    }
+    // Bind the event listener
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
       // Unbind the event listener on clean up
@@ -27709,26 +27658,25 @@ function useOutsideClick(ref, id) {
 
 var DraggableContainer = function DraggableContainer(_ref) {
   var children = _ref.children,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '50%' : _ref$width,
-      height = _ref.height,
-      className = _ref.className,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? RPGUIContainerTypes.FramedGold : _ref$type,
-      onCloseButton = _ref.onCloseButton,
-      title = _ref.title,
-      imgSrc = _ref.imgSrc,
-      _ref$imgWidth = _ref.imgWidth,
-      imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
-      cancelDrag = _ref.cancelDrag,
-      onPositionChange = _ref.onPositionChange,
-      onOutsideClick = _ref.onOutsideClick;
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '50%' : _ref$width,
+    height = _ref.height,
+    className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? RPGUIContainerTypes.FramedGold : _ref$type,
+    onCloseButton = _ref.onCloseButton,
+    title = _ref.title,
+    imgSrc = _ref.imgSrc,
+    _ref$imgWidth = _ref.imgWidth,
+    imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
+    cancelDrag = _ref.cancelDrag,
+    onPositionChange = _ref.onPositionChange,
+    onOutsideClick = _ref.onOutsideClick;
   var draggableRef = useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
     document.addEventListener('clickOutside', function (event) {
       var e = event;
-
       if (e.detail.id === 'item-container') {
         if (onOutsideClick) {
           onOutsideClick();
@@ -27793,6 +27741,7 @@ var Icon = /*#__PURE__*/styled.img.withConfig({
   return props.width;
 });
 
+//@ts-ignore
 var _RPGUI = RPGUI;
 var RPGUIRoot = function RPGUIRoot(_ref) {
   var children = _ref.children;
@@ -27803,19 +27752,15 @@ var RPGUIRoot = function RPGUIRoot(_ref) {
 
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,
-      width = _ref.width,
-      onChange = _ref.onChange;
+    width = _ref.width,
+    onChange = _ref.onChange;
   var dropdownId = v4();
-
   var _useState = useState(''),
-      selectedValue = _useState[0],
-      setSelectedValue = _useState[1];
-
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
   useEffect(function () {
     var element = document.getElementById("rpgui-dropdown-" + dropdownId);
-
     var dropdownValue = _RPGUI.get_value(element);
-
     setSelectedValue(dropdownValue);
     element == null ? void 0 : element.addEventListener('change', function (event) {
       setSelectedValue(event == null ? void 0 : event.target.value);
@@ -27840,41 +27785,17 @@ var Dropdown = function Dropdown(_ref) {
   }));
 };
 
-var getItemTextureKeyPath = function getItemTextureKeyPath(itemToRender, atlasJSON) {
-  var _itemToRender$stackQt;
-
-  var stackQty = (_itemToRender$stackQt = itemToRender == null ? void 0 : itemToRender.stackQty) != null ? _itemToRender$stackQt : 0;
-  var itemTexturePath = itemToRender.texturePath;
-
-  if (itemToRender && stackQty >= 1) {
-    var idx = stackQty >= 5 ? '5' : stackQty;
-    var textureBreakPath = itemTexturePath.split('.');
-    var txtPrefix = textureBreakPath[0];
-    var txtExtension = textureBreakPath[1];
-    console.log(txtPrefix + "-qty-" + idx + "." + txtExtension);
-    var newTexturePath = txtPrefix + "-qty-" + idx + "." + txtExtension;
-    var spriteData = atlasJSON.frames[newTexturePath];
-
-    if (spriteData !== undefined) {
-      return newTexturePath;
-    }
-  }
-
-  return itemTexturePath;
-};
-
 var RelativeListMenu = function RelativeListMenu(_ref) {
   var options = _ref.options,
-      onSelected = _ref.onSelected,
-      onOutsideClick = _ref.onOutsideClick,
-      _ref$fontSize = _ref.fontSize,
-      fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
+    onSelected = _ref.onSelected,
+    onOutsideClick = _ref.onOutsideClick,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
   var ref = useRef(null);
   useOutsideClick(ref, 'relative-context-menu');
   useEffect(function () {
     document.addEventListener('clickOutside', function (event) {
       var e = event;
-
       if (e.detail.id === 'relative-context-menu') {
         if (onOutsideClick) {
           onOutsideClick();
@@ -27931,10 +27852,8 @@ var generateContextMenuListOptions = function generateContextMenuListOptions(act
   });
   return contextMenu;
 };
-
 var generateContextMenu = function generateContextMenu(itemType, itemContainerType) {
   var contextActionMenu = [];
-
   if (itemContainerType === ItemContainerType.Inventory) {
     switch (itemType) {
       case ItemType.Weapon:
@@ -27943,40 +27862,32 @@ var generateContextMenu = function generateContextMenu(itemType, itemContainerTy
       case ItemType.Jewelry:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Equipment);
         break;
-
       case ItemType.Container:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Container);
         break;
-
       case ItemType.Consumable:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Consumable);
         break;
-
       case ItemType.CraftMaterial:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.CraftMaterial);
         break;
-
       case ItemType.Tool:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Tool);
         break;
-
       default:
         contextActionMenu = generateContextMenuListOptions(ActionsForInventory.Other);
         break;
     }
   }
-
   if (itemContainerType === ItemContainerType.Equipment) {
     switch (itemType) {
       case ItemType.Container:
         contextActionMenu = generateContextMenuListOptions(ActionsForEquipmentSet.Container);
         break;
-
       default:
         contextActionMenu = generateContextMenuListOptions(ActionsForEquipmentSet.Equipment);
     }
   }
-
   if (itemContainerType === ItemContainerType.Loot) {
     switch (itemType) {
       case ItemType.Weapon:
@@ -27985,25 +27896,20 @@ var generateContextMenu = function generateContextMenu(itemType, itemContainerTy
       case ItemType.Jewelry:
         contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Equipment);
         break;
-
       case ItemType.Consumable:
         contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Consumable);
         break;
-
       case ItemType.CraftMaterial:
         contextActionMenu = generateContextMenuListOptions(ActionsForLoot.CraftMaterial);
         break;
-
       case ItemType.Tool:
         contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
         break;
-
       default:
         contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Other);
         break;
     }
   }
-
   if (itemContainerType === ItemContainerType.MapContainer) {
     switch (itemType) {
       case ItemType.Weapon:
@@ -28012,25 +27918,20 @@ var generateContextMenu = function generateContextMenu(itemType, itemContainerTy
       case ItemType.Jewelry:
         contextActionMenu = generateContextMenuListOptions(ActionsForMapContainer.Equipment);
         break;
-
       case ItemType.Consumable:
         contextActionMenu = generateContextMenuListOptions(ActionsForMapContainer.Consumable);
         break;
-
       case ItemType.CraftMaterial:
         contextActionMenu = generateContextMenuListOptions(ActionsForMapContainer.CraftMaterial);
         break;
-
       case ItemType.Tool:
         contextActionMenu = generateContextMenuListOptions(ActionsForMapContainer.Tool);
         break;
-
       default:
         contextActionMenu = generateContextMenuListOptions(ActionsForMapContainer.Other);
         break;
     }
   }
-
   return contextActionMenu;
 };
 
@@ -28048,39 +27949,33 @@ var EquipmentSlotSpriteByType = {
 };
 var ItemSlot = /*#__PURE__*/observer(function (_ref) {
   var slotIndex = _ref.slotIndex,
-      item = _ref.item,
-      containerType = _ref.itemContainerType,
-      slotSpriteMask = _ref.slotSpriteMask,
-      _onMouseOver = _ref.onMouseOver,
-      _onMouseOut = _ref.onMouseOut,
-      _onClick = _ref.onClick,
-      _onSelected = _ref.onSelected,
-      atlasJSON = _ref.atlasJSON,
-      atlasIMG = _ref.atlasIMG;
-
+    item = _ref.item,
+    containerType = _ref.itemContainerType,
+    slotSpriteMask = _ref.slotSpriteMask,
+    _onMouseOver = _ref.onMouseOver,
+    _onMouseOut = _ref.onMouseOut,
+    _onClick = _ref.onClick,
+    _onSelected = _ref.onSelected,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
   var _useState = useState(false),
-      isTooltipVisible = _useState[0],
-      setTooltipVisible = _useState[1];
-
+    isTooltipVisible = _useState[0],
+    setTooltipVisible = _useState[1];
   var _useState2 = useState(false),
-      isContextMenuVisible = _useState2[0],
-      setIsContextMenuVisible = _useState2[1];
-
+    isContextMenuVisible = _useState2[0],
+    setIsContextMenuVisible = _useState2[1];
   var _useState3 = useState([]),
-      contextActions = _useState3[0],
-      setContextActions = _useState3[1];
-
+    contextActions = _useState3[0],
+    setContextActions = _useState3[1];
   useEffect(function () {
     if (item) {
       setContextActions(generateContextMenu(item.type, containerType));
     }
   }, [item]);
-
   var getLeftPositionValue = function getLeftPositionValue(quantity) {
     if (quantity > 0 && quantity < 10) return '2.5rem';else if (quantity > 9 && quantity < 100) return '2.0rem';else if (quantity > 99) return '1rem';
     return '2.5rem';
   };
-
   var getStackInfo = function getStackInfo(itemId, stackQty) {
     // if (itemToRender?.isStackable && itemToRender?.stackQty) {
     if (stackQty > 1) {
@@ -28089,17 +27984,15 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         key: "qty-" + itemId
       }, ' ', stackQty, ' ');
     }
-
     return undefined;
   };
-
   var renderItem = function renderItem(itemToRender) {
     var _itemToRender$_id, _itemToRender$stackQt;
-
     var element = [];
-
     if (itemToRender != null && itemToRender.texturePath) {
-      element.push(React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+      element.push(React.createElement(ErrorBoundary, {
+        key: itemToRender._id
+      }, React.createElement(SpriteFromAtlas, {
         key: itemToRender._id,
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
@@ -28107,24 +28000,20 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         imgScale: 3
       })));
     }
-
     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, null, React.createElement(SpriteFromAtlas, {
+      element.push(React.createElement(ErrorBoundary, {
+        key: itemToRender._id
+      }, React.createElement(SpriteFromAtlas, {
         key: itemToRender._id,
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
@@ -28132,14 +28021,15 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         imgScale: 3
       })));
       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, null, React.createElement(SpriteFromAtlas, {
+      return React.createElement(ErrorBoundary, {
+        key: v4()
+      }, React.createElement(SpriteFromAtlas, {
+        key: v4(),
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
@@ -28149,20 +28039,16 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       }));
     }
   };
-
   var onRenderSlot = function onRenderSlot(itemToRender) {
     switch (containerType) {
       case ItemContainerType.Equipment:
         return renderEquipment(itemToRender);
-
       case ItemContainerType.Inventory:
         return renderItem(itemToRender);
-
       default:
         return renderItem(itemToRender);
     }
   };
-
   return React.createElement(Container$9, {
     className: "rpgui-icon empty-slot",
     onMouseOver: function onMouseOver(event) {
@@ -28179,10 +28065,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     },
     onClick: function onClick() {
       setTooltipVisible(false);
-
       if (item) {
         setIsContextMenuVisible(!isContextMenuVisible);
-
         _onClick(item.type, containerType, item);
       }
     }
@@ -28190,7 +28074,6 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
-
       if (item) {
         _onSelected(optionId, item);
       }
@@ -28215,31 +28098,29 @@ var ItemQty = /*#__PURE__*/styled.span.withConfig({
 
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
-      onClose = _ref.onClose,
-      _onMouseOver = _ref.onMouseOver,
-      _onSelected = _ref.onSelected,
-      onItemClick = _ref.onItemClick,
-      atlasIMG = _ref.atlasIMG,
-      atlasJSON = _ref.atlasJSON;
+    onClose = _ref.onClose,
+    _onMouseOver = _ref.onMouseOver,
+    _onSelected = _ref.onSelected,
+    onItemClick = _ref.onItemClick,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON;
   var neck = equipmentSet.neck,
-      leftHand = equipmentSet.leftHand,
-      ring = equipmentSet.ring,
-      head = equipmentSet.head,
-      armor = equipmentSet.armor,
-      legs = equipmentSet.legs,
-      boot = equipmentSet.boot,
-      inventory = equipmentSet.inventory,
-      rightHand = equipmentSet.rightHand,
-      accessory = equipmentSet.accessory;
+    leftHand = equipmentSet.leftHand,
+    ring = equipmentSet.ring,
+    head = equipmentSet.head,
+    armor = equipmentSet.armor,
+    legs = equipmentSet.legs,
+    boot = equipmentSet.boot,
+    inventory = equipmentSet.inventory,
+    rightHand = equipmentSet.rightHand,
+    accessory = equipmentSet.accessory;
   var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
   var equipmentMaskSlots = [ItemSlotType.Neck, ItemSlotType.LeftHand, ItemSlotType.Ring, ItemSlotType.Head, ItemSlotType.Torso, ItemSlotType.Legs, ItemSlotType.Feet, ItemSlotType.Inventory, ItemSlotType.RightHand, ItemSlotType.Accessory];
-
   var onRenderEquipmentSlotRange = function onRenderEquipmentSlotRange(start, end) {
     var equipmentRange = equipmentData.slice(start, end);
     var slotMaksRange = equipmentMaskSlots.slice(start, end);
     return equipmentRange.map(function (data, i) {
       var _ref2;
-
       var item = data;
       var itemContainer = (_ref2 = item && item.itemContainer) != null ? _ref2 : null;
       return React.createElement(ItemSlot, {
@@ -28263,7 +28144,6 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-
   return React.createElement(DraggableContainer, {
     title: 'Equipments',
     type: RPGUIContainerTypes.Framed,
@@ -28287,10 +28167,10 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
 
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      _onPositionChange = _ref.onPositionChange,
-      onOutsideClick = _ref.onOutsideClick;
+    title = _ref.title,
+    onClose = _ref.onClose,
+    _onPositionChange = _ref.onPositionChange,
+    onOutsideClick = _ref.onOutsideClick;
   return React.createElement(DraggableContainer, {
     title: title,
     type: RPGUIContainerTypes.Framed,
@@ -28303,8 +28183,7 @@ var SlotsContainer = function SlotsContainer(_ref) {
     cancelDrag: ".item-container-body",
     onPositionChange: function onPositionChange(_ref2) {
       var x = _ref2.x,
-          y = _ref2.y;
-
+        y = _ref2.y;
       if (_onPositionChange) {
         _onPositionChange({
           x: x,
@@ -28318,20 +28197,17 @@ var SlotsContainer = function SlotsContainer(_ref) {
 
 var ItemContainer = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
-      onClose = _ref.onClose,
-      _onMouseOver = _ref.onMouseOver,
-      _onSelected = _ref.onSelected,
-      onItemClick = _ref.onItemClick,
-      type = _ref.type,
-      atlasJSON = _ref.atlasJSON,
-      atlasIMG = _ref.atlasIMG;
-
+    onClose = _ref.onClose,
+    _onMouseOver = _ref.onMouseOver,
+    _onSelected = _ref.onSelected,
+    onItemClick = _ref.onItemClick,
+    type = _ref.type,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
-
     for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
-
       slots.push(React.createElement(ItemSlot, {
         key: i,
         slotIndex: i,
@@ -28350,10 +28226,8 @@ var ItemContainer = function ItemContainer(_ref) {
         atlasJSON: atlasJSON
       }));
     }
-
     return slots;
   };
-
   return React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose
@@ -28368,11 +28242,11 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
 
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
-      onSelected = _ref.onSelected,
-      x = _ref.x,
-      y = _ref.y,
-      _ref$fontSize = _ref.fontSize,
-      fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
+    onSelected = _ref.onSelected,
+    x = _ref.x,
+    y = _ref.y,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
   return React.createElement(Container$a, {
     x: x,
     y: y,
@@ -28416,13 +28290,11 @@ var chunkString = function chunkString(str, length) {
 
 var DynamicText = function DynamicText(_ref) {
   var text = _ref.text,
-      onFinish = _ref.onFinish,
-      onStart = _ref.onStart;
-
+    onFinish = _ref.onFinish,
+    onStart = _ref.onStart;
   var _useState = useState(''),
-      textState = _useState[0],
-      setTextState = _useState[1];
-
+    textState = _useState[0],
+    setTextState = _useState[1];
   useEffect(function () {
     var i = 0;
     var interval = setInterval(function () {
@@ -28432,13 +28304,11 @@ var DynamicText = function DynamicText(_ref) {
           onStart();
         }
       }
-
       if (i < text.length) {
         setTextState(text.substring(0, i + 1));
         i++;
       } else {
         clearInterval(interval);
-
         if (onFinish) {
           onFinish();
         }
@@ -28457,19 +28327,16 @@ var TextContainer = /*#__PURE__*/styled.p.withConfig({
 
 var NPCDialogText = function NPCDialogText(_ref) {
   var text = _ref.text,
-      onClose = _ref.onClose,
-      onEndStep = _ref.onEndStep,
-      onStartStep = _ref.onStartStep;
+    onClose = _ref.onClose,
+    onEndStep = _ref.onEndStep,
+    onStartStep = _ref.onStartStep;
   var textChunks = chunkString(text, 85);
-
   var _useState = useState(0),
-      chunkIndex = _useState[0],
-      setChunkIndex = _useState[1];
-
+    chunkIndex = _useState[0],
+    setChunkIndex = _useState[1];
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       var hasNextChunk = (textChunks == null ? void 0 : textChunks[chunkIndex + 1]) || false;
-
       if (hasNextChunk) {
         setChunkIndex(function (prev) {
           return prev + 1;
@@ -28480,7 +28347,6 @@ var NPCDialogText = function NPCDialogText(_ref) {
       }
     }
   };
-
   useEffect(function () {
     document.addEventListener('keydown', onHandleSpacePress);
     return function () {
@@ -28498,11 +28364,11 @@ var Container$b = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1cxkdh9-0"
 })([""]);
 
+//@ts-ignore
 var useEventListener = function useEventListener(type, handler, el) {
   if (el === void 0) {
     el = window;
   }
-
   var savedHandler = React.useRef();
   React.useEffect(function () {
     savedHandler.current = handler;
@@ -28512,7 +28378,6 @@ var useEventListener = function useEventListener(type, handler, el) {
     var listener = function listener(e) {
       return savedHandler.current(e);
     };
-
     el.addEventListener(type, listener);
     return function () {
       el.removeEventListener(type, listener);
@@ -28522,36 +28387,29 @@ var useEventListener = function useEventListener(type, handler, el) {
 
 var QuestionDialog = function QuestionDialog(_ref) {
   var questions = _ref.questions,
-      answers = _ref.answers,
-      onClose = _ref.onClose;
-
+    answers = _ref.answers,
+    onClose = _ref.onClose;
   var _useState = useState(questions[0]),
-      currentQuestion = _useState[0],
-      setCurrentQuestion = _useState[1];
-
+    currentQuestion = _useState[0],
+    setCurrentQuestion = _useState[1];
   var _useState2 = useState(false),
-      canShowAnswers = _useState2[0],
-      setCanShowAnswers = _useState2[1];
-
+    canShowAnswers = _useState2[0],
+    setCanShowAnswers = _useState2[1];
   var onGetFirstAnswer = function onGetFirstAnswer() {
     if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {
       return null;
     }
-
     var firstAnswerId = currentQuestion.answerIds[0];
     return answers.find(function (answer) {
       return answer.id === firstAnswerId;
     });
   };
-
   var _useState3 = useState(onGetFirstAnswer()),
-      currentAnswer = _useState3[0],
-      setCurrentAnswer = _useState3[1];
-
+    currentAnswer = _useState3[0],
+    setCurrentAnswer = _useState3[1];
   useEffect(function () {
     setCurrentAnswer(onGetFirstAnswer());
   }, [currentQuestion]);
-
   var onGetAnswers = function onGetAnswers(answerIds) {
     return answerIds.map(function (answerId) {
       return answers.find(function (answer) {
@@ -28559,7 +28417,6 @@ var QuestionDialog = function QuestionDialog(_ref) {
       });
     });
   };
-
   var onKeyPress = function onKeyPress(e) {
     switch (e.key) {
       case 'ArrowDown':
@@ -28577,7 +28434,6 @@ var QuestionDialog = function QuestionDialog(_ref) {
         });
         setCurrentAnswer(nextAnswer || onGetFirstAnswer());
         break;
-
       case 'ArrowUp':
         // select previous answer, if any.
         // if no previous answer, select last answer
@@ -28588,18 +28444,14 @@ var QuestionDialog = function QuestionDialog(_ref) {
         var previousAnswer = onGetAnswers(currentQuestion.answerIds).find(function (answer) {
           return (answer == null ? void 0 : answer.id) === previousAnswerID;
         });
-
         if (previousAnswer) {
           setCurrentAnswer(previousAnswer);
         } else {
           setCurrentAnswer(onGetAnswers(currentQuestion.answerIds).pop());
         }
-
         break;
-
       case 'Enter':
         setCanShowAnswers(false);
-
         if (!(currentAnswer != null && currentAnswer.nextQuestionId)) {
           onClose();
           return;
@@ -28608,16 +28460,12 @@ var QuestionDialog = function QuestionDialog(_ref) {
             return question.id === currentAnswer.nextQuestionId;
           }));
         }
-
         break;
     }
   };
-
   useEventListener('keydown', onKeyPress);
-
   var onAnswerClick = function onAnswerClick(answer) {
     setCanShowAnswers(false);
-
     if (answer.nextQuestionId) {
       // if there is a next question, go to it
       setCurrentQuestion(questions.find(function (question) {
@@ -28628,24 +28476,18 @@ var QuestionDialog = function QuestionDialog(_ref) {
       onClose();
     }
   };
-
   var onRenderCurrentAnswers = function onRenderCurrentAnswers() {
     var answerIds = currentQuestion.answerIds;
-
     if (!answerIds) {
       return null;
     }
-
     var answers = onGetAnswers(answerIds);
-
     if (!answers) {
       return null;
     }
-
     return answers.map(function (answer) {
       var isSelected = (currentAnswer == null ? void 0 : currentAnswer.id) === (answer == null ? void 0 : answer.id);
       var selectedColor = isSelected ? 'yellow' : 'white';
-
       if (answer) {
         return React.createElement(AnswerRow, {
           key: "answer_" + answer.id
@@ -28659,11 +28501,9 @@ var QuestionDialog = function QuestionDialog(_ref) {
           color: selectedColor
         }, answer.text));
       }
-
       return null;
     });
   };
-
   return React.createElement(Container$c, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
@@ -28704,26 +28544,22 @@ var AnswerRow = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:0.5rem;height:22px;p{line-height:unset;margin-top:0;margin-bottom:0rem;}"]);
 
 var NPCDialogType;
-
 (function (NPCDialogType) {
   NPCDialogType["TextOnly"] = "TextOnly";
   NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
 })(NPCDialogType || (NPCDialogType = {}));
-
 var NPCDialog = function NPCDialog(_ref) {
   var text = _ref.text,
-      type = _ref.type,
-      _onClose = _ref.onClose,
-      imagePath = _ref.imagePath,
-      _ref$isQuestionDialog = _ref.isQuestionDialog,
-      isQuestionDialog = _ref$isQuestionDialog === void 0 ? false : _ref$isQuestionDialog,
-      questions = _ref.questions,
-      answers = _ref.answers;
-
+    type = _ref.type,
+    _onClose = _ref.onClose,
+    imagePath = _ref.imagePath,
+    _ref$isQuestionDialog = _ref.isQuestionDialog,
+    isQuestionDialog = _ref$isQuestionDialog === void 0 ? false : _ref$isQuestionDialog,
+    questions = _ref.questions,
+    answers = _ref.answers;
   var _useState = useState(false),
-      showGoNextIndicator = _useState[0],
-      setShowGoNextIndicator = _useState[1];
-
+    showGoNextIndicator = _useState[0],
+    setShowGoNextIndicator = _useState[1];
   return React.createElement(RPGUIContainer, {
     type: RPGUIContainerTypes.FramedGold,
     width: isQuestionDialog ? '600px' : '50%',
@@ -28791,24 +28627,21 @@ var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
 
 var ProgressBar = function ProgressBar(_ref) {
   var max = _ref.max,
-      value = _ref.value,
-      color = _ref.color,
-      _ref$displayText = _ref.displayText,
-      displayText = _ref$displayText === void 0 ? true : _ref$displayText,
-      _ref$percentageWidth = _ref.percentageWidth,
-      percentageWidth = _ref$percentageWidth === void 0 ? 40 : _ref$percentageWidth,
-      _ref$minWidth = _ref.minWidth,
-      minWidth = _ref$minWidth === void 0 ? 100 : _ref$minWidth,
-      style = _ref.style;
-
+    value = _ref.value,
+    color = _ref.color,
+    _ref$displayText = _ref.displayText,
+    displayText = _ref$displayText === void 0 ? true : _ref$displayText,
+    _ref$percentageWidth = _ref.percentageWidth,
+    percentageWidth = _ref$percentageWidth === void 0 ? 40 : _ref$percentageWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 100 : _ref$minWidth,
+    style = _ref.style;
   var calculatePercentageValue = function calculatePercentageValue(max, value) {
     if (value > max) {
       value = max;
     }
-
     return value * 100 / max;
   };
-
   return React.createElement(Container$e, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
@@ -28853,33 +28686,28 @@ var img$8 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCA
 
 var QuestInfo = function QuestInfo(_ref) {
   var quests = _ref.quests,
-      onClose = _ref.onClose,
-      buttons = _ref.buttons,
-      onChangeQuest = _ref.onChangeQuest;
-
+    onClose = _ref.onClose,
+    buttons = _ref.buttons,
+    onChangeQuest = _ref.onChangeQuest;
   var _useState = useState(0),
-      currentIndex = _useState[0],
-      setCurrentIndex = _useState[1];
-
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
   var questsLength = quests.length - 1;
   useEffect(function () {
     if (onChangeQuest) {
       onChangeQuest(currentIndex, quests[currentIndex]._id);
     }
   }, [currentIndex]);
-
   var onLeftClick = function onLeftClick() {
     if (currentIndex === 0) setCurrentIndex(questsLength);else setCurrentIndex(function (index) {
       return index - 1;
     });
   };
-
   var onRightClick = function onRightClick() {
     if (currentIndex === questsLength) setCurrentIndex(0);else setCurrentIndex(function (index) {
       return index + 1;
     });
   };
-
   return React.createElement(QuestDraggableContainer, {
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -28982,7 +28810,7 @@ var RightArrow$1 = /*#__PURE__*/styled.div.withConfig({
 
 var QuestList = function QuestList(_ref) {
   var quests = _ref.quests,
-      onClose = _ref.onClose;
+    onClose = _ref.onClose;
   return React.createElement(QuestDraggableContainer$1, {
     type: RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -29029,19 +28857,16 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
 
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
-      items = _ref.items,
-      onChange = _ref.onChange;
-
+    items = _ref.items,
+    onChange = _ref.onChange;
   var _useState = useState(),
-      selectedValue = _useState[0],
-      setSelectedValue = _useState[1];
-
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
   var handleClick = function handleClick() {
     var element = document.querySelector("input[name=" + name + "]:checked");
     var elementValue = element.value;
     setSelectedValue(elementValue);
   };
-
   useEffect(function () {
     if (selectedValue) {
       onChange(selectedValue);
@@ -29063,28 +28888,22 @@ var InputRadio = function InputRadio(_ref) {
 };
 
 var RangeSliderType;
-
 (function (RangeSliderType) {
   RangeSliderType["Slider"] = "rpgui-slider";
   RangeSliderType["GoldSlider"] = "rpgui-slider golden";
 })(RangeSliderType || (RangeSliderType = {}));
-
 var RangeSlider = function RangeSlider(_ref) {
   var type = _ref.type,
-      valueMin = _ref.valueMin,
-      valueMax = _ref.valueMax,
-      width = _ref.width,
-      onChange = _ref.onChange;
+    valueMin = _ref.valueMin,
+    valueMax = _ref.valueMax,
+    width = _ref.width,
+    onChange = _ref.onChange;
   var sliderId = v4();
-
   var onHandleMouseUp = function onHandleMouseUp() {
     var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
-
     var value = _RPGUI.get_value(rpguiSlider);
-
     onChange(Number(value));
   };
-
   return React.createElement("div", {
     onMouseUp: onHandleMouseUp
   }, React.createElement(Input$1, {
@@ -29105,10 +28924,10 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
 
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
-      _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? 20 : _ref$margin;
+    _ref$bgColor = _ref.bgColor,
+    bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 20 : _ref$margin;
   return React.createElement(Container$f, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
@@ -29143,16 +28962,18 @@ var ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
 
 var SkillProgressBar = function SkillProgressBar(_ref) {
   var bgColor = _ref.bgColor,
-      skillName = _ref.skillName,
-      level = _ref.level,
-      skillPoints = _ref.skillPoints,
-      texturePath = _ref.texturePath,
-      _ref$showSkillPoints = _ref.showSkillPoints,
-      showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints;
+    skillName = _ref.skillName,
+    level = _ref.level,
+    skillPoints = _ref.skillPoints,
+    texturePath = _ref.texturePath,
+    _ref$showSkillPoints = _ref.showSkillPoints,
+    showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON;
   var spForNextLevel = getSPForLevel(level + 1);
   var ratio = skillPoints / spForNextLevel * 100;
-  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level)), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null,  atlasJSON ? React.createElement(SpriteContainer, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
-    atlasIMG: img$1,
+  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, 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, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
     imgScale: 1,
@@ -29237,17 +29058,17 @@ var skillProps = {
 };
 var SkillsContainer = function SkillsContainer(_ref) {
   var onCloseButton = _ref.onCloseButton,
-      skill = _ref.skill;
-
+    skill = _ref.skill,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON;
   var onRenderSkillCategory = function onRenderSkillCategory(category) {
     var skillCategory = skillProps[category];
     var skillCategoryColor = skillCategory.color;
     var output = [];
-
     for (var _i = 0, _Object$entries = Object.entries(skillCategory.values); _i < _Object$entries.length; _i++) {
       var _Object$entries$_i = _Object$entries[_i],
-          key = _Object$entries$_i[0],
-          value = _Object$entries$_i[1];
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
       //@ts-ignore
       var skillDetails = skill[key];
       output.push(React.createElement(SkillProgressBar, {
@@ -29257,13 +29078,13 @@ var SkillsContainer = function SkillsContainer(_ref) {
         level: skillDetails.level || 0,
         skillPoints: Math.round(skillDetails.skillPoints) || 0,
         skillPointsToNextLevel: Math.round(skillDetails.skillPointsToNextLevel) || 0,
-        texturePath: value
+        texturePath: value,
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON
       }));
     }
-
     return output;
   };
-
   return React.createElement(SkillsDraggableContainer, {
     title: "Skills"
   }, onCloseButton && React.createElement(CloseButton$2, {
@@ -29277,7 +29098,9 @@ var SkillsContainer = function SkillsContainer(_ref) {
     level: Math.round(skill.level) || 0,
     skillPoints: Math.round(skill.experience) || 0,
     skillPointsToNextLevel: Math.round(skill.xpToNextLevel) || 0,
-    texturePath: 'swords/broad-sword.png'
+    texturePath: 'swords/broad-sword.png',
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
   }), React.createElement("p", null, "Combat Skills"), React.createElement("hr", {
     className: "golden"
   })), onRenderSkillCategory('combat'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Crafting Skills"), React.createElement("hr", {
@@ -29300,16 +29123,15 @@ var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:0.7rem;"]);
 
 var TextArea = function TextArea(_ref) {
-  var props = _extends({}, _ref);
-
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React.createElement("textarea", Object.assign({}, props));
 };
 
 /* eslint-disable react/require-default-props */
 var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
-      maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
-      children = _ref.children;
+    maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
+    children = _ref.children;
   return React.createElement(Container$g, {
     maxLines: maxLines
   }, children);
@@ -29322,26 +29144,20 @@ var Container$g = /*#__PURE__*/styled.div.withConfig({
 });
 
 var ImgSide;
-
 (function (ImgSide) {
   ImgSide["right"] = "right";
   ImgSide["left"] = "left";
 })(ImgSide || (ImgSide = {}));
-
 var NPCMultiDialog = function NPCMultiDialog(_ref) {
   var _textAndTypeArray$sli;
-
   var _onClose = _ref.onClose,
-      textAndTypeArray = _ref.textAndTypeArray;
-
+    textAndTypeArray = _ref.textAndTypeArray;
   var _useState = useState(false),
-      showGoNextIndicator = _useState[0],
-      setShowGoNextIndicator = _useState[1];
-
+    showGoNextIndicator = _useState[0],
+    setShowGoNextIndicator = _useState[1];
   var _useState2 = useState(0),
-      slide = _useState2[0],
-      setSlide = _useState2[1];
-
+    slide = _useState2[0],
+    setSlide = _useState2[1];
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
@@ -29354,7 +29170,6 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
       }
     }
   };
-
   useEffect(function () {
     document.addEventListener('keydown', onHandleSpacePress);
     return function () {
@@ -29436,18 +29251,16 @@ var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
 
 var HistoryDialog = function HistoryDialog(_ref) {
   var backgroundImgPath = _ref.backgroundImgPath,
-      fullCoverBackground = _ref.fullCoverBackground,
-      questions = _ref.questions,
-      answers = _ref.answers,
-      text = _ref.text,
-      imagePath = _ref.imagePath,
-      textAndTypeArray = _ref.textAndTypeArray,
-      onClose = _ref.onClose;
-
+    fullCoverBackground = _ref.fullCoverBackground,
+    questions = _ref.questions,
+    answers = _ref.answers,
+    text = _ref.text,
+    imagePath = _ref.imagePath,
+    textAndTypeArray = _ref.textAndTypeArray,
+    onClose = _ref.onClose;
   var _useState = useState(0),
-      img = _useState[0],
-      setImage = _useState[1];
-
+    img = _useState[0],
+    setImage = _useState[1];
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       if (img < (backgroundImgPath == null ? void 0 : backgroundImgPath.length) - 1) {
@@ -29460,7 +29273,6 @@ var HistoryDialog = function HistoryDialog(_ref) {
       }
     }
   };
-
   useEffect(function () {
     document.addEventListener('keydown', onHandleSpacePress);
     return function () {
@@ -29501,5 +29313,182 @@ var DialogContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-u6oe75-1"
 })(["display:flex;justify-content:center;padding-top:200px;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, Truncate, _RPGUI, useEventListener };
+var ItemTradingComponent = function ItemTradingComponent(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    updateChartTotals = _ref.updateChartTotals,
+    traderItem = _ref.traderItem;
+  var _useState = useState(0),
+    itemQuantity = _useState[0],
+    setItemQuantity = _useState[1];
+  var onLeftClick = function onLeftClick() {
+    if (itemQuantity > 0) {
+      var newQuantity = itemQuantity - 1;
+      setItemQuantity(newQuantity);
+      updateChartTotals({
+        key: traderItem.key,
+        itemId: traderItem.itemId,
+        qty: newQuantity,
+        price: traderItem.price,
+        texturePath: traderItem.texturePath,
+        name: traderItem.name
+      });
+    }
+  };
+  var onRightClick = function onRightClick() {
+    var newQuantity = itemQuantity + 1;
+    setItemQuantity(newQuantity);
+    updateChartTotals({
+      key: traderItem.key,
+      itemId: traderItem.itemId,
+      qty: newQuantity,
+      price: traderItem.price,
+      texturePath: traderItem.texturePath,
+      name: traderItem.name
+    });
+  };
+  return React.createElement(ItemWrapper, null, React.createElement(IconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: traderItem.texturePath,
+    imgScale: 2.5
+  }))), React.createElement(NameValue, null, React.createElement("p", null, traderItem.name), React.createElement("p", null, "$", traderItem.price)), React.createElement(Container$i, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, itemQuantity)), React.createElement(LeftArrow$2, {
+    onClick: onLeftClick,
+    onTouchStart: onLeftClick
+  }), React.createElement(RightArrow$2, {
+    onClick: onRightClick,
+    onTouchStart: onRightClick
+  })));
+};
+var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__ItemWrapper",
+  componentId: "sc-nc2o41-0"
+})(["width:80%;margin:auto;display:flex;justify-content:space-between;"]);
+var IconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__IconContainer",
+  componentId: "sc-nc2o41-1"
+})(["display:flex;justify-content:center;align-items:center;"]);
+var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__SpriteContainer",
+  componentId: "sc-nc2o41-2"
+})(["position:relative;top:-3px;left:0;"]);
+var NameValue = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__NameValue",
+  componentId: "sc-nc2o41-3"
+})([""]);
+var Item$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "itemComponent__Item",
+  componentId: "sc-nc2o41-4"
+})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;top:-12px;width:100%;"]);
+var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__TextOverlay",
+  componentId: "sc-nc2o41-5"
+})(["width:100%;position:relative;"]);
+var Container$i = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__Container",
+  componentId: "sc-nc2o41-6"
+})(["position:relative;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;min-width:100px;width:40%;"]);
+var LeftArrow$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__LeftArrow",
+  componentId: "sc-nc2o41-7"
+})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:40px;height:42px;:active{background-image:url(", ");}z-index:2;"], img$3, img$2);
+var RightArrow$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "itemComponent__RightArrow",
+  componentId: "sc-nc2o41-8"
+})(["background-image:url(", ");right:0;position:absolute;width:40px;background-size:100% 100%;height:42px;:active{background-image:url(", ");}z-index:2;"], img$5, img$4);
+
+var TrandingMenu = function TrandingMenu(_ref) {
+  var traderItems = _ref.traderItems,
+    onClose = _ref.onClose,
+    type = _ref.type,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    characterAvailableGold = _ref.characterAvailableGold,
+    onChangeTraderItems = _ref.onChangeTraderItems;
+  var _useState = useState(0),
+    sum = _useState[0],
+    setSum = _useState[1];
+  var newSumArray = 0;
+  var updateChartTotals = function updateChartTotals(item) {
+    var itemIndex = traderItems.findIndex(function (itemArray) {
+      return itemArray.itemId === item.itemId;
+    });
+    traderItems[itemIndex] = item;
+    traderItems.forEach(function (item) {
+      if (item.qty) newSumArray += item.qty * item.price;
+      setSum(newSumArray);
+    });
+  };
+  useEffect(function () {
+    if (onChangeTraderItems) {
+      onChangeTraderItems(traderItems);
+    }
+  }, [traderItems]);
+  var Capitalize = function Capitalize(word) {
+    return word[0].toUpperCase() + word.substring(1);
+  };
+  return React.createElement(TradingMenuDraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector"
+  }, React.createElement(React.Fragment, null, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$3, null, Capitalize(type)), React.createElement("hr", {
+    className: "golden"
+  })), React.createElement(TrandingComponentScrollWrapper, null, traderItems.map(function (tradeItem) {
+    return React.createElement(ItemWrapper$1, {
+      key: v4()
+    }, React.createElement(ItemTradingComponent, {
+      key: v4(),
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      updateChartTotals: updateChartTotals,
+      traderItem: tradeItem
+    }));
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), sum > characterAvailableGold ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", characterAvailableGold - sum)), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    disabled: sum > characterAvailableGold
+  }, "Confirm"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Cancel"))));
+};
+var TradingMenuDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
+  displayName: "TrandingMenu__TradingMenuDraggableContainer",
+  componentId: "sc-1lbop40-0"
+})([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "TrandingMenu__Title",
+  componentId: "sc-1lbop40-1"
+})(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
+var TrandingComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__TrandingComponentScrollWrapper",
+  componentId: "sc-1lbop40-2"
+})(["overflow-y:scroll;height:500px;width:100%;"]);
+var ItemWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__ItemWrapper",
+  componentId: "sc-1lbop40-3"
+})(["width:80%;margin:auto;display:flex;justify-content:space-between;"]);
+var TotalWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__TotalWrapper",
+  componentId: "sc-1lbop40-4"
+})(["width:80%;display:flex;margin:auto;justify-content:space-between;height:20px;"]);
+var GoldWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__GoldWrapper",
+  componentId: "sc-1lbop40-5"
+})(["width:80%;display:flex;margin:auto;justify-content:space-between;height:20px;p{color:yellow !important;}"]);
+var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__AlertWrapper",
+  componentId: "sc-1lbop40-6"
+})(["width:80%;display:flex;margin:auto;justify-content:center;height:20px;p{color:red !important;}"]);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TrandingMenu__ButtonWrapper",
+  componentId: "sc-1lbop40-7"
+})(["width:80%;margin:auto;display:flex;justify-content:space-around;padding-top:20px;"]);
+
+export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TrandingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map