@rpg-engine/long-bow 0.2.28 → 0.2.33

package/dist/long-bow.esm.js

@@ -9,31 +9,27 @@ import 'rpgui/rpgui.min.css';
 import 'rpgui/rpgui.min.js';
 import { observer } from 'mobx-react-lite';
 import _ from 'lodash-es';
+import capitalize from 'lodash-es/capitalize';
 
 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 +37,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 +77,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 +27248,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,80 +27278,121 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         imgScale: 3
       });
     }
-
     return this.props.children;
   };
-
   return ErrorBoundary;
 }(Component);
 
+var img$2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASRJREFUWIXtl7EKwjAQhn8llg4dOig4uApu+gaib+Fj+CL6MO6Kk6N1ExRdHDJ06NChFEEnL6kmGkE5wf7TJVzbn+96uRb4d1VcE+tB62VO4HkUp3l+MeWEvk/P3Md7VF0NfEvsBsT9hg21C940zynuNZvG+0RS6tdW2AmwGxBAEXvo+xQnWUa4XPAOOmdtpeLF9qHSJHYC7AYEYMfuhtosHXskJcWB59FBFOMHCLAbEIAduwvqd6V3E/ADBNgN3LqA3kz9rJ6MQkqcre2HyTvSZ0rZBYDqAtrot2tUjuE0MY7d+Tg0bT+R6qxyHN9LAECcnmhjuSt8EVE5ui3VBbbS6LKVKZLFNTsBdgMf/S/Qy7Q5nY1lajfUOF4dD/wE2A2UYtcVzKJVOti5A44AAAAASUVORK5CYII=';
+
+var img$3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASZJREFUWIVjYBjpgJFYhSI8MgTVGBoJwNnnz334j02Nk5MY3M5Vm84xMBHrAFqBAXcARhTgCmpighcZHDvhhFXcymIfnP3myxPGAQ+BAXcAIwMDarA7OYnB2fv2vcIa1LiC98fKc1jFOcKN4OzRKEAHLAwMuIOd1KDGBZCD3dBIAJ7zdh96MvAhMOAOYGFgwB3spAY1MeD8uQ8o/AEPgQF3ACwXwFOmlcU+eHTsKxTApocioC/DAmfvvTEIQmDAHYBRF9irssLZB2//xloXFDqIEDTY1/APVnGnfkQuGK0LGBigueDNlydwgYO3UVpE8NwhI4CImv4Dbwi2iBgYCEcTA8MgCIEBdwBV+wXI0fTkA/YcpCrKBrfz+P17Ax8CA+6AUTDgAACD+FSXdO/L2QAAAABJRU5ErkJggg==';
+
+var img$4 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARlJREFUWIXtl78KwjAQxr9IFIcODh0cuigKburoJLr7bD6S+ga6CV07CHZw6FCqoFPzp1w0g3KK/abjeinH78s1DfDvEgAwCAcqccnzO1UYtFqijLOiePniNEu8Gmh4VX1Q7A1IwMY+6XbJwv3pRFpjyrQJQUTWVK1hJ8DegHz2cDG6GXGo4s2RXuayqdNua2ugrUmzhJ8AewMSsHevjVFPhG2Hjm29niDTjjT7AgLsDUjA79vuIx9rKpMi2AmwN1BOgUq8y47VVNux3qYqrqegKgEAYRCRx7G5q02kLi3XFzI/HzYV9l18Vfn6LACI49iF3YXX1DiSCvUh0Wur2E2xE2BvQADArNdXifhckH81Lrwu1feCWj+jBx1LX0kx8GexAAAAAElFTkSuQmCC';
+
+var img$5 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAS5JREFUWIXtl7Fqw0AMhv8LLmTI4KFk8pJAtkKJpzRDCoasHZvnyJP0OZqx3Y90KZ3OdM7qKfHgIUNpAu1U+TA654YGUXr/JGRx/vmEdDbw36UA4P4upYTW2y+ucJzG6ifOTXXy4HJfeBnoeFWdUeIGFABc9hLC/vqWsYXTiT55mE+bmq0RJyBuIGp7+PFoKNbLmOLuIuXKMZ1odoKyrE+t0VYny30hT0DcgAKA+eyKErmpCKON3UctraHYbsfqycgTEDcQAX673Uf21Niyl1tjUpQ4AXEDEQBcJ/U+ei+Ov/4S9xSERcRcx67l85y3XhsAgId1yeZvRxeE/WVzoHy4CwDmOnahduG1lcQ16qKqUTex2xInIG5AAcDNYEiJze6T/apx4XUp/BcE/Rl9A77uW6caXAGtAAAAAElFTkSuQmCC';
+
+var _excluded$1 = ["direction", "size", "onClick"];
+var SelectArrow = function SelectArrow(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'left' : _ref$direction,
+    size = _ref.size,
+    _onClick = _ref.onClick,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return React.createElement(React.Fragment, null, direction === 'left' ? React.createElement(LeftArrow, Object.assign({
+    size: size,
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, props)) : React.createElement(RightArrow, Object.assign({
+    size: size,
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, props)));
+};
+var LeftArrow = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SelectArrow__LeftArrow",
+  componentId: "sc-1h7cpoe-0"
+})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:", "px;height:", "px;:active{background-image:url(", ");}z-index:2;"], img$3, function (props) {
+  return props.size || 40;
+}, function (props) {
+  return props.size || 42;
+}, img$2);
+var RightArrow = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SelectArrow__RightArrow",
+  componentId: "sc-1h7cpoe-1"
+})(["background-image:url(", ");right:0;position:absolute;width:", "px;height:", "px;background-size:100% 100%;:active{background-image:url(", ");}z-index:2;"], img$5, function (props) {
+  return props.size || 40;
+}, function (props) {
+  return props.size || 42;
+}, img$4);
+
 var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
-      maxLines = _ref.maxLines;
-  return React.createElement(Container$1, null, React.createElement("div", {
+    maxLines = _ref.maxLines,
+    maxWidth = _ref.maxWidth,
+    fontSize = _ref.fontSize;
+  return React.createElement(Container$1, {
+    maxWidth: maxWidth,
+    fontSize: fontSize
+  }, React.createElement("p", {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
 };
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.ellipsis-2-lines{display:-webkit-box;max-width:100%;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.ellipsis-3-lines{display:-webkit-box;max-width:100%;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}"]);
-
-var img$2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASRJREFUWIXtl7EKwjAQhn8llg4dOig4uApu+gaib+Fj+CL6MO6Kk6N1ExRdHDJ06NChFEEnL6kmGkE5wf7TJVzbn+96uRb4d1VcE+tB62VO4HkUp3l+MeWEvk/P3Md7VF0NfEvsBsT9hg21C940zynuNZvG+0RS6tdW2AmwGxBAEXvo+xQnWUa4XPAOOmdtpeLF9qHSJHYC7AYEYMfuhtosHXskJcWB59FBFOMHCLAbEIAduwvqd6V3E/ADBNgN3LqA3kz9rJ6MQkqcre2HyTvSZ0rZBYDqAtrot2tUjuE0MY7d+Tg0bT+R6qxyHN9LAECcnmhjuSt8EVE5ui3VBbbS6LKVKZLFNTsBdgMf/S/Qy7Q5nY1lajfUOF4dD/wE2A2UYtcVzKJVOti5A44AAAAASUVORK5CYII=';
-
-var img$3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASZJREFUWIVjYBjpgJFYhSI8MgTVGBoJwNnnz334j02Nk5MY3M5Vm84xMBHrAFqBAXcARhTgCmpighcZHDvhhFXcymIfnP3myxPGAQ+BAXcAIwMDarA7OYnB2fv2vcIa1LiC98fKc1jFOcKN4OzRKEAHLAwMuIOd1KDGBZCD3dBIAJ7zdh96MvAhMOAOYGFgwB3spAY1MeD8uQ8o/AEPgQF3ACwXwFOmlcU+eHTsKxTApocioC/DAmfvvTEIQmDAHYBRF9irssLZB2//xloXFDqIEDTY1/APVnGnfkQuGK0LGBigueDNlydwgYO3UVpE8NwhI4CImv4Dbwi2iBgYCEcTA8MgCIEBdwBV+wXI0fTkA/YcpCrKBrfz+P17Ax8CA+6AUTDgAACD+FSXdO/L2QAAAABJRU5ErkJggg==';
-
-var img$4 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARlJREFUWIXtl78KwjAQxr9IFIcODh0cuigKburoJLr7bD6S+ga6CV07CHZw6FCqoFPzp1w0g3KK/abjeinH78s1DfDvEgAwCAcqccnzO1UYtFqijLOiePniNEu8Gmh4VX1Q7A1IwMY+6XbJwv3pRFpjyrQJQUTWVK1hJ8DegHz2cDG6GXGo4s2RXuayqdNua2ugrUmzhJ8AewMSsHevjVFPhG2Hjm29niDTjjT7AgLsDUjA79vuIx9rKpMi2AmwN1BOgUq8y47VVNux3qYqrqegKgEAYRCRx7G5q02kLi3XFzI/HzYV9l18Vfn6LACI49iF3YXX1DiSCvUh0Wur2E2xE2BvQADArNdXifhckH81Lrwu1feCWj+jBx1LX0kx8GexAAAAAElFTkSuQmCC';
-
-var img$5 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAS5JREFUWIXtl7Fqw0AMhv8LLmTI4KFk8pJAtkKJpzRDCoasHZvnyJP0OZqx3Y90KZ3OdM7qKfHgIUNpAu1U+TA654YGUXr/JGRx/vmEdDbw36UA4P4upYTW2y+ucJzG6ifOTXXy4HJfeBnoeFWdUeIGFABc9hLC/vqWsYXTiT55mE+bmq0RJyBuIGp7+PFoKNbLmOLuIuXKMZ1odoKyrE+t0VYny30hT0DcgAKA+eyKErmpCKON3UctraHYbsfqycgTEDcQAX673Uf21Niyl1tjUpQ4AXEDEQBcJ/U+ei+Ov/4S9xSERcRcx67l85y3XhsAgId1yeZvRxeE/WVzoHy4CwDmOnahduG1lcQ16qKqUTex2xInIG5AAcDNYEiJze6T/apx4XUp/BcE/Rl9A77uW6caXAGtAAAAAElFTkSuQmCC';
+})(["p{font-size:", ";}.ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", "px;}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}"], function (props) {
+  return props.fontSize || '1rem';
+}, function (props) {
+  return props.maxWidth;
+}, function (props) {
+  return props.maxWidth;
+}, function (props) {
+  return props.maxWidth;
+});
 
 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
+    maxLines: 1,
+    maxWidth: 200
   }, getCurrentSelectionName()))), React.createElement("div", {
     className: "rpgui-progress-track"
-  }), React.createElement(LeftArrow, {
+  }), React.createElement(SelectArrow, {
+    direction: "left",
     onClick: onLeftClick,
     onTouchStart: onLeftClick
-  }), React.createElement(RightArrow, {
+  }), React.createElement(SelectArrow, {
+    direction: "right",
     onClick: onRightClick,
     onTouchStart: onRightClick
   }));
@@ -27382,45 +27409,31 @@ var Container$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PropertySelect__Container",
   componentId: "sc-12uqx6s-2"
 })(["position:relative;display:flex;flex-direction:column;justify-content:start;align-items:flex-start;min-width:100px;width:40%;"]);
-var LeftArrow = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PropertySelect__LeftArrow",
-  componentId: "sc-12uqx6s-3"
-})(["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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PropertySelect__RightArrow",
-  componentId: "sc-12uqx6s-4"
-})(["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 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) {
       return;
     }
-
     setSelectedSpriteKey(spriteKey);
     onChange(textureKey);
   };
-
   useEffect(function () {
     onSelectedValueChange();
   }, [selectedValue]);
@@ -27466,27 +27479,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 +27528,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 +27639,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 +27647,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 +27689,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 +27703,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 +27786,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 +27797,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);
@@ -27842,16 +27832,15 @@ var Dropdown = function Dropdown(_ref) {
 
 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();
@@ -27908,10 +27897,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:
@@ -27920,40 +27907,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:
@@ -27962,25 +27941,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:
@@ -27989,25 +27963,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;
 };
 
@@ -28025,39 +27994,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) {
@@ -28066,17 +28029,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,
@@ -28084,24 +28045,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,
@@ -28109,14 +28066,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],
@@ -28126,20 +28084,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) {
@@ -28156,10 +28110,8 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     },
     onClick: function onClick() {
       setTooltipVisible(false);
-
       if (item) {
         setIsContextMenuVisible(!isContextMenuVisible);
-
         _onClick(item.type, containerType, item);
       }
     }
@@ -28167,7 +28119,6 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
-
       if (item) {
         _onSelected(optionId, item);
       }
@@ -28192,31 +28143,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, {
@@ -28240,7 +28189,6 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-
   return React.createElement(DraggableContainer, {
     title: 'Equipments',
     type: RPGUIContainerTypes.Framed,
@@ -28262,127 +28210,6 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
 
-var SlotsContainer = function SlotsContainer(_ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      _onPositionChange = _ref.onPositionChange,
-      onOutsideClick = _ref.onOutsideClick;
-  return React.createElement(DraggableContainer, {
-    title: title,
-    type: RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    },
-    width: "330px",
-    cancelDrag: ".item-container-body",
-    onPositionChange: function onPositionChange(_ref2) {
-      var x = _ref2.x,
-          y = _ref2.y;
-
-      if (_onPositionChange) {
-        _onPositionChange({
-          x: x,
-          y: y
-        });
-      }
-    },
-    onOutsideClick: onOutsideClick
-  }, children);
-};
-
-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;
-
-  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,
-        item: ((_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[i]) || null,
-        itemContainerType: type,
-        onMouseOver: function onMouseOver(event, slotIndex, item) {
-          if (_onMouseOver) _onMouseOver(event, slotIndex, item);
-        },
-        onClick: function onClick(ItemType, ContainerType, item) {
-          if (onItemClick) onItemClick(item, ItemType, ContainerType);
-        },
-        onSelected: function onSelected(optionId, item) {
-          if (_onSelected) _onSelected(optionId, item);
-        },
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON
-      }));
-    }
-
-    return slots;
-  };
-
-  return React.createElement(SlotsContainer, {
-    title: itemContainer.name || 'Container',
-    onClose: onClose
-  }, React.createElement(ItemsContainer, {
-    className: "item-container-body"
-  }, onRenderSlots()));
-};
-var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__ItemsContainer",
-  componentId: "sc-15y5p9l-0"
-})(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
-
-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;
-  return React.createElement(Container$a, {
-    x: x,
-    y: y,
-    fontSize: fontSize
-  }, React.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
-    }
-  }, options.map(function (params, index) {
-    return React.createElement(ListElement$1, {
-      key: (params == null ? void 0 : params.id) || index,
-      onClick: function onClick() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
-  })));
-};
-var Container$a = /*#__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:", "em;}"], function (props) {
-  return props.y || 0;
-}, function (props) {
-  return props.x || 0;
-}, function (props) {
-  return props.fontSize;
-});
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ListMenu__ListElement",
-  componentId: "sc-i9097t-1"
-})(["margin-right:0.5rem;"]);
-
 var img$6 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAP1BMVEUAAAA7FyVxQTsUEBPj5v////+5v/tCJDOOUlIiHBr1oJfptaO6dWr61rhzFy1bMTjoanMUNGQoXMQkn97+88DQ3IhAAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAAHdElNRQfmAw4VOBC7c5LYAAABM0lEQVQ4y3XRi5KDIAwFUAUkbrBgpP//rZsHVHQ009qZ3tPboNN0zmwzvcw8O5sX4y0NOg/Et3jRCXF+ziULorjkOQ9gE24dvuUAzq08DiCO4pe3WN7zCP56vmpubBReQYC11YPS86ySxxCsAABTSgjb5m4g8nfbxvFHBkH2OEEvAItVuCuIsgGgl+Gcr7kDXxhEAx55A2SQEEeQeZwUaIP8Tbo05B0RFPhItAjgj1w6cDnhLluDj+Egkh3pCCP4pKQAw1IPO0W9Nti5gW9RP2dKA3BZd2Dw+baYX+Nt4GM00O4S3kEpF6Alb2Bv4LeC3kkGfAW0/p0RPoJVKr63ghHsKuRh5DIUKOAlGOwrtt9fQekAEfmhZslHUDoglB0zjfkJigN7UnTQQ4GBWomoVhEN/AOPSBh38gy+fwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xNFQyMTo1NTo1MSswMDowMJcc0eEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTRUMjE6NTU6NTErMDA6MDDmQWldAAAAAElFTkSuQmCC';
 
 var img$7 = 'data:image/gif;base64,R0lGODlhQAAgAPIAAAAAAA0NDRERESIiIigoKFlZWf///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQBFAAAACwAAAAAQAAgAAAD/wi63P4wykmrvTjrzbv/YAgIZGmeaKquakQWcCzPdG3fNukIeO//PQGDBywafcIF8chswpKKZcxApTqvNOiIZi0YsODncFaFlcNOrdTbJVff0/c3Lp/Xs2N37cy2ndt6ZnhKXHdsc4d7VnwyfIxqPWWOXXWLgHSGYoSNbZKVZp2WiJyjg1GFcaClqaqJhasyUAFrh3Cur3KqubWXBQIBAAEDtDeMaEEDAcLEx2gCycvN0jHPysPT09XR2M3a19zH3gTM4EYCBNDD4yzs7e4r48nB6gT19vf4+fr7/P3P8sKGvRtIkMUAeQoCHlzIsKHDhxAjSoTWQJnFixgzatzIsQWjRQYJAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQBFAAAACwAAAAAQAAgAAAD8Ai63P4wykmrvTjrzbv/YCiOlGCeaKqubMtGZiHPdG3feI6bjqD/wOBPwPAJj0ggcWFMOp+ypaI5M1it0KxNCqDKsAWDdhwt1q5fMPnJ9aJt17g4HafJ3/et+Tzn99V+aThqfTNtcHlhhIBVWG+BdDSHOmiPeHdij3aYhZONf46YkZGanzpSAV6KjaOIpqWtNwIBAAEDqqKKhZuJnHSwAgMBtqo5sGs5wcO3yM01ysTO0gXQzNPN1cXXUNnbyNna3kcmwrW3Lujp6ugD5bbn6/HyLe20Cu/t+fr7/P3+/wCF2VswrKDBgwgTKlzIsCCDBAA7';
@@ -28393,13 +28220,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 () {
@@ -28409,13 +28234,11 @@ var DynamicText = function DynamicText(_ref) {
           onStart();
         }
       }
-
       if (i < text.length) {
         setTextState(text.substring(0, i + 1));
         i++;
       } else {
         clearInterval(interval);
-
         if (onFinish) {
           onFinish();
         }
@@ -28434,19 +28257,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;
@@ -28457,29 +28277,28 @@ var NPCDialogText = function NPCDialogText(_ref) {
       }
     }
   };
-
   useEffect(function () {
     document.addEventListener('keydown', onHandleSpacePress);
     return function () {
       return document.removeEventListener('keydown', onHandleSpacePress);
     };
   }, [chunkIndex]);
-  return React.createElement(Container$b, null, React.createElement(DynamicText, {
+  return React.createElement(Container$a, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
 };
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   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;
@@ -28489,7 +28308,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);
@@ -28499,36 +28317,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) {
@@ -28536,7 +28347,6 @@ var QuestionDialog = function QuestionDialog(_ref) {
       });
     });
   };
-
   var onKeyPress = function onKeyPress(e) {
     switch (e.key) {
       case 'ArrowDown':
@@ -28554,7 +28364,6 @@ var QuestionDialog = function QuestionDialog(_ref) {
         });
         setCurrentAnswer(nextAnswer || onGetFirstAnswer());
         break;
-
       case 'ArrowUp':
         // select previous answer, if any.
         // if no previous answer, select last answer
@@ -28565,18 +28374,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;
@@ -28585,16 +28390,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) {
@@ -28605,24 +28406,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
@@ -28636,12 +28431,10 @@ var QuestionDialog = function QuestionDialog(_ref) {
           color: selectedColor
         }, answer.text));
       }
-
       return null;
     });
   };
-
-  return React.createElement(Container$c, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$b, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -28651,7 +28444,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__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;"]);
@@ -28681,26 +28474,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%',
@@ -28717,7 +28506,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$6
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$d, null, React.createElement(TextContainer$1, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$c, null, React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -28739,7 +28528,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: img$7
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__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;"]);
@@ -28766,27 +28555,309 @@ var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
   return right;
 });
 
+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;
+  var _useState = useState(false),
+    showGoNextIndicator = _useState[0],
+    setShowGoNextIndicator = _useState[1];
+  var _useState2 = useState(0),
+    slide = _useState2[0],
+    setSlide = _useState2[1];
+  var onHandleSpacePress = function onHandleSpacePress(event) {
+    if (event.code === 'Space') {
+      if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
+        setSlide(function (prev) {
+          return prev + 1;
+        });
+      } else {
+        // if there's no more text chunks, close the dialog
+        _onClose();
+      }
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [slide]);
+  return React.createElement(RPGUIContainer, {
+    type: RPGUIContainerTypes.FramedGold,
+    width: '50%',
+    height: '180px'
+  }, React.createElement(React.Fragment, null, React.createElement(Container$d, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+    flex: '70%'
+  }, React.createElement(NPCDialogText, {
+    onStartStep: function onStartStep() {
+      return setShowGoNextIndicator(false);
+    },
+    onEndStep: function onEndStep() {
+      return setShowGoNextIndicator(true);
+    },
+    text: textAndTypeArray[slide].text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
+    src: textAndTypeArray[slide].imagePath || img$6
+  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
+    right: '10.5rem',
+    src: img$7
+  })), textAndTypeArray[slide].imageSide === 'left' && React.createElement(React.Fragment, null, React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
+    src: textAndTypeArray[slide].imagePath || img$6
+  })), React.createElement(TextContainer$2, {
+    flex: '70%'
+  }, React.createElement(NPCDialogText, {
+    onStartStep: function onStartStep() {
+      return setShowGoNextIndicator(false);
+    },
+    onEndStep: function onEndStep() {
+      return setShowGoNextIndicator(true);
+    },
+    text: textAndTypeArray[slide].text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
+    right: '1rem',
+    src: img$7
+  }))), ")"));
+};
+var Container$d = /*#__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;"]);
+var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__TextContainer",
+  componentId: "sc-rvu5wg-1"
+})(["flex:", " 0 0;width:355px;"], function (_ref2) {
+  var flex = _ref2.flex;
+  return flex;
+});
+var ThumbnailContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__ThumbnailContainer",
+  componentId: "sc-rvu5wg-2"
+})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
+var NPCThumbnail$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCMultiDialog__NPCThumbnail",
+  componentId: "sc-rvu5wg-3"
+})(["image-rendering:pixelated;height:128px;width:128px;"]);
+var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCMultiDialog__PressSpaceIndicator",
+  componentId: "sc-rvu5wg-4"
+})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
+  var right = _ref3.right;
+  return right;
+});
+
+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;
+  var _useState = useState(0),
+    img = _useState[0],
+    setImage = _useState[1];
+  var onHandleSpacePress = function onHandleSpacePress(event) {
+    if (event.code === 'Space') {
+      if (img < (backgroundImgPath == null ? void 0 : backgroundImgPath.length) - 1) {
+        setImage(function (prev) {
+          return prev + 1;
+        });
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [backgroundImgPath]);
+  return React.createElement(BackgroundContainer, {
+    imgPath: backgroundImgPath[img],
+    fullImg: fullCoverBackground
+  }, React.createElement(DialogContainer, null, textAndTypeArray ? React.createElement(NPCMultiDialog, {
+    textAndTypeArray: textAndTypeArray,
+    onClose: onClose
+  }) : questions && answers ? React.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: onClose
+  }) : text && imagePath ? React.createElement(NPCDialog, {
+    text: text,
+    imagePath: imagePath,
+    onClose: onClose,
+    type: NPCDialogType.TextAndThumbnail
+  }) : React.createElement(NPCDialog, {
+    text: text,
+    onClose: onClose,
+    type: NPCDialogType.TextOnly
+  })));
+};
+var BackgroundContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "HistoryDialog__BackgroundContainer",
+  componentId: "sc-u6oe75-0"
+})(["width:100%;height:100%;background-image:url(", ");background-size:", ";display:flex;justify-content:space-evenly;align-items:center;"], function (props) {
+  return props.imgPath;
+}, function (props) {
+  return props.imgPath ? 'cover' : 'auto';
+});
+var DialogContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "HistoryDialog__DialogContainer",
+  componentId: "sc-u6oe75-1"
+})(["display:flex;justify-content:center;padding-top:200px;"]);
+
+var SlotsContainer = function SlotsContainer(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    onClose = _ref.onClose,
+    _onPositionChange = _ref.onPositionChange,
+    onOutsideClick = _ref.onOutsideClick;
+  return React.createElement(DraggableContainer, {
+    title: title,
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    },
+    width: "330px",
+    cancelDrag: ".item-container-body",
+    onPositionChange: function onPositionChange(_ref2) {
+      var x = _ref2.x,
+        y = _ref2.y;
+      if (_onPositionChange) {
+        _onPositionChange({
+          x: x,
+          y: y
+        });
+      }
+    },
+    onOutsideClick: onOutsideClick
+  }, children);
+};
+
+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;
+  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,
+        item: ((_itemContainer$slots = itemContainer.slots) == null ? void 0 : _itemContainer$slots[i]) || null,
+        itemContainerType: type,
+        onMouseOver: function onMouseOver(event, slotIndex, item) {
+          if (_onMouseOver) _onMouseOver(event, slotIndex, item);
+        },
+        onClick: function onClick(ItemType, ContainerType, item) {
+          if (onItemClick) onItemClick(item, ItemType, ContainerType);
+        },
+        onSelected: function onSelected(optionId, item) {
+          if (_onSelected) _onSelected(optionId, item);
+        },
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON
+      }));
+    }
+    return slots;
+  };
+  return React.createElement(SlotsContainer, {
+    title: itemContainer.name || 'Container',
+    onClose: onClose
+  }, React.createElement(ItemsContainer, {
+    className: "item-container-body"
+  }, onRenderSlots()));
+};
+var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__ItemsContainer",
+  componentId: "sc-15y5p9l-0"
+})(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
+
+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;
+  return React.createElement(Container$e, {
+    x: x,
+    y: y,
+    fontSize: fontSize
+  }, React.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params, index) {
+    return React.createElement(ListElement$1, {
+      key: (params == null ? void 0 : params.id) || index,
+      onClick: function onClick() {
+        onSelected(params == null ? void 0 : params.id);
+      }
+    }, (params == null ? void 0 : params.text) || 'No text');
+  })));
+};
+var Container$e = /*#__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:", "em;}"], function (props) {
+  return props.y || 0;
+}, function (props) {
+  return props.x || 0;
+}, function (props) {
+  return props.fontSize;
+});
+var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ListMenu__ListElement",
+  componentId: "sc-i9097t-1"
+})(["margin-right:0.5rem;"]);
+
 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, {
+  return React.createElement(Container$f, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -28815,7 +28886,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__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) {
@@ -28830,33 +28901,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() {
@@ -28864,12 +28930,12 @@ var QuestInfo = function QuestInfo(_ref) {
     },
     width: "730px",
     cancelDrag: ".equipment-container-body .arrow-selector"
-  }, quests.length >= 2 ? React.createElement(QuestsContainer, null, currentIndex !== 0 && React.createElement(LeftArrow$1, {
-    className: "arrow-selector",
+  }, quests.length >= 2 ? React.createElement(QuestsContainer, null, currentIndex !== 0 && React.createElement(SelectArrow, {
+    direction: "left",
     onClick: onLeftClick,
     onTouchStart: onLeftClick
-  }), currentIndex !== quests.length - 1 && React.createElement(RightArrow$1, {
-    className: "arrow-selector",
+  }), currentIndex !== quests.length - 1 && React.createElement(SelectArrow, {
+    direction: "right",
     onClick: onRightClick,
     onTouchStart: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
@@ -28948,18 +29014,10 @@ var Thumbnail = /*#__PURE__*/styled.img.withConfig({
   displayName: "QuestInfo__Thumbnail",
   componentId: "sc-15s2boc-8"
 })(["color:white;z-index:22;font-size:10px;width:64px;margin-right:0.5rem;"]);
-var LeftArrow$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestInfo__LeftArrow",
-  componentId: "sc-15s2boc-9"
-})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:40px;height:42px;:active{background-image:url(", ");}"], img$3, img$2);
-var RightArrow$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestInfo__RightArrow",
-  componentId: "sc-15s2boc-10"
-})(["background-image:url(", ");right:0;position:absolute;width:40px;background-size:100% 100%;height:42px;:active{background-image:url(", ");}"], img$5, img$4);
 
 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() {
@@ -29006,19 +29064,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);
@@ -29040,28 +29095,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, {
@@ -29082,11 +29131,11 @@ 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;
-  return React.createElement(Container$f, {
+    _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$g, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -29095,7 +29144,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -29120,16 +29169,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,
@@ -29214,17 +29265,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, {
@@ -29234,13 +29285,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, {
@@ -29254,7 +29305,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", {
@@ -29277,206 +29330,210 @@ 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;
-  return React.createElement(Container$g, {
-    maxLines: maxLines
-  }, children);
-};
-var Container$g = /*#__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) {
-  return props.maxLines;
-});
-
-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;
-
-  var _useState = useState(false),
-      showGoNextIndicator = _useState[0],
-      setShowGoNextIndicator = _useState[1];
-
-  var _useState2 = useState(0),
-      slide = _useState2[0],
-      setSlide = _useState2[1];
-
-  var onHandleSpacePress = function onHandleSpacePress(event) {
-    if (event.code === 'Space') {
-      if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
-        setSlide(function (prev) {
-          return prev + 1;
-        });
-      } else {
-        // if there's no more text chunks, close the dialog
-        _onClose();
-      }
+var TradingItemRow = function TradingItemRow(_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
+      });
     }
   };
-
-  useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [slide]);
-  return React.createElement(RPGUIContainer, {
-    type: RPGUIContainerTypes.FramedGold,
-    width: '50%',
-    height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$h, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
-    flex: '70%'
-  }, React.createElement(NPCDialogText, {
-    onStartStep: function onStartStep() {
-      return setShowGoNextIndicator(false);
-    },
-    onEndStep: function onEndStep() {
-      return setShowGoNextIndicator(true);
-    },
-    text: textAndTypeArray[slide].text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
-    }
-  })), React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
-    src: textAndTypeArray[slide].imagePath || img$6
-  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
-    right: '10.5rem',
-    src: img$7
-  })), textAndTypeArray[slide].imageSide === 'left' && React.createElement(React.Fragment, null, React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
-    src: textAndTypeArray[slide].imagePath || img$6
-  })), React.createElement(TextContainer$2, {
-    flex: '70%'
-  }, React.createElement(NPCDialogText, {
-    onStartStep: function onStartStep() {
-      return setShowGoNextIndicator(false);
-    },
-    onEndStep: function onEndStep() {
-      return setShowGoNextIndicator(true);
-    },
-    text: textAndTypeArray[slide].text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
+  var onRightClick = function onRightClick() {
+    if (itemQuantity < 999) {
+      var newQuantity = itemQuantity + 1;
+      setItemQuantity(newQuantity);
+      updateChartTotals({
+        key: traderItem.key,
+        itemId: traderItem.itemId,
+        qty: newQuantity,
+        price: traderItem.price,
+        texturePath: traderItem.texturePath,
+        name: traderItem.name
+      });
     }
-  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
-    right: '1rem',
-    src: img$7
-  }))), ")"));
+  };
+  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: traderItem.texturePath,
+    imgScale: 2.5
+  }))), React.createElement(ItemNameContainer, null, React.createElement(NameValue, null, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: 250
+  }, capitalize(traderItem.name)), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer, null, React.createElement(SelectArrow, {
+    size: 32,
+    className: "arrow-selector",
+    direction: "left",
+    onClick: onLeftClick,
+    onTouchStart: onLeftClick
+  }), React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, itemQuantity))), React.createElement(SelectArrow, {
+    size: 32,
+    className: "arrow-selector",
+    direction: "right",
+    onClick: onRightClick,
+    onTouchStart: onRightClick
+  })));
 };
-var Container$h = /*#__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;"]);
-var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NPCMultiDialog__TextContainer",
-  componentId: "sc-rvu5wg-1"
-})(["flex:", " 0 0;width:355px;"], function (_ref2) {
-  var flex = _ref2.flex;
-  return flex;
-});
-var ThumbnailContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NPCMultiDialog__ThumbnailContainer",
-  componentId: "sc-rvu5wg-2"
-})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
-var NPCThumbnail$1 = /*#__PURE__*/styled.img.withConfig({
-  displayName: "NPCMultiDialog__NPCThumbnail",
-  componentId: "sc-rvu5wg-3"
-})(["image-rendering:pixelated;height:128px;width:128px;"]);
-var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
-  displayName: "NPCMultiDialog__PressSpaceIndicator",
-  componentId: "sc-rvu5wg-4"
-})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
-  var right = _ref3.right;
-  return right;
-});
-
-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;
+var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__ItemWrapper",
+  componentId: "sc-mja0b5-0"
+})(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], colors.darkGrey);
+var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__ItemNameContainer",
+  componentId: "sc-mja0b5-1"
+})(["flex:60%;"]);
+var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__ItemIconContainer",
+  componentId: "sc-mja0b5-2"
+})(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
+var SpriteContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__SpriteContainer",
+  componentId: "sc-mja0b5-3"
+})(["position:relative;top:-0.5rem;left:0.5rem;"]);
+var NameValue = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__NameValue",
+  componentId: "sc-mja0b5-4"
+})(["p{font-size:0.75rem;margin:0;}"]);
+var Item$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TradingItemRow__Item",
+  componentId: "sc-mja0b5-5"
+})(["font-size:1rem;color:white;text-align:center;z-index:1;width:100%;"]);
+var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__TextOverlay",
+  componentId: "sc-mja0b5-6"
+})(["width:100%;position:relative;"]);
+var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__QuantityContainer",
+  componentId: "sc-mja0b5-7"
+})(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:20%;"]);
+var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingItemRow__QuantityDisplay",
+  componentId: "sc-mja0b5-8"
+})(["font-size:0.8rem;"]);
 
+var TradingMenu = function TradingMenu(_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),
-      img = _useState[0],
-      setImage = _useState[1];
-
-  var onHandleSpacePress = function onHandleSpacePress(event) {
-    if (event.code === 'Space') {
-      if (img < (backgroundImgPath == null ? void 0 : backgroundImgPath.length) - 1) {
-        setImage(function (prev) {
-          return prev + 1;
-        });
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
+    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), " Menu"), React.createElement("hr", {
+    className: "golden"
+  })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem) {
+    return React.createElement(ItemWrapper$1, null, React.createElement(TradingItemRow, {
+      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: "TradingMenu__TradingMenuDraggableContainer",
+  componentId: "sc-1wjsz1l-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: "TradingMenu__Title",
+  componentId: "sc-1wjsz1l-1"
+})(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
+var TradingComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__TradingComponentScrollWrapper",
+  componentId: "sc-1wjsz1l-2"
+})(["overflow-y:scroll;height:500px;width:100%;margin-top:1rem;"]);
+var ItemWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__ItemWrapper",
+  componentId: "sc-1wjsz1l-3"
+})(["margin:auto;display:flex;justify-content:space-between;"]);
+var TotalWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__TotalWrapper",
+  componentId: "sc-1wjsz1l-4"
+})(["display:flex;margin:auto;justify-content:space-between;height:20px;margin-left:0.8rem;"]);
+var GoldWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__GoldWrapper",
+  componentId: "sc-1wjsz1l-5"
+})(["margin-top:1rem;display:flex;justify-content:space-between;height:20px;p{color:yellow !important;}width:100%;margin-left:0.8rem;"]);
+var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__AlertWrapper",
+  componentId: "sc-1wjsz1l-6"
+})(["display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TradingMenu__ButtonWrapper",
+  componentId: "sc-1wjsz1l-7"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
 
-  useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [backgroundImgPath]);
-  return React.createElement(BackgroundContainer, {
-    imgPath: backgroundImgPath[img],
-    fullImg: fullCoverBackground
-  }, React.createElement(DialogContainer, null, textAndTypeArray ? React.createElement(NPCMultiDialog, {
-    textAndTypeArray: textAndTypeArray,
-    onClose: onClose
-  }) : questions && answers ? React.createElement(QuestionDialog, {
-    questions: questions,
-    answers: answers,
-    onClose: onClose
-  }) : text && imagePath ? React.createElement(NPCDialog, {
-    text: text,
-    imagePath: imagePath,
-    onClose: onClose,
-    type: NPCDialogType.TextAndThumbnail
-  }) : React.createElement(NPCDialog, {
-    text: text,
-    onClose: onClose,
-    type: NPCDialogType.TextOnly
-  })));
+/* 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;
+  return React.createElement(Container$h, {
+    maxLines: maxLines
+  }, children);
 };
-var BackgroundContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "HistoryDialog__BackgroundContainer",
-  componentId: "sc-u6oe75-0"
-})(["width:100%;height:100%;background-image:url(", ");background-size:", ";display:flex;justify-content:space-evenly;align-items:center;"], function (props) {
-  return props.imgPath;
-}, function (props) {
-  return props.imgPath ? 'cover' : 'auto';
+var Container$h = /*#__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) {
+  return props.maxLines;
 });
-var DialogContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "HistoryDialog__DialogContainer",
-  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 };
+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, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map