@rpg-engine/long-bow 0.2.29 → 0.2.33

package/dist/long-bow.esm.js

@@ -9,6 +9,7 @@ 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) {
@@ -27282,25 +27283,74 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
   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,
@@ -27333,13 +27383,16 @@ var PropertySelect = function PropertySelect(_ref) {
     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
   }));
@@ -27356,14 +27409,6 @@ 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,
@@ -28165,121 +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';
@@ -28353,13 +28283,13 @@ var NPCDialogText = function NPCDialogText(_ref) {
       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"
 })([""]);
@@ -28504,7 +28434,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       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);
@@ -28514,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;"]);
@@ -28576,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() {
@@ -28598,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;"]);
@@ -28625,102 +28555,387 @@ var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
   return right;
 });
 
-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;
-  var calculatePercentageValue = function calculatePercentageValue(max, value) {
-    if (value > max) {
-      value = max;
+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();
+      }
     }
-    return value * 100 / max;
   };
-  return React.createElement(Container$e, {
-    className: "rpgui-progress",
-    "data-value": calculatePercentageValue(max, value) / 100,
-    "data-rpguitype": "progress",
-    percentageWidth: percentageWidth,
-    minWidth: minWidth,
-    style: style
-  }, displayText && React.createElement(TextOverlay$1, null, React.createElement(ProgressBarText, null, value, "/", max)), React.createElement("div", {
-    className: " rpgui-progress-track"
-  }, React.createElement("div", {
-    className: "rpgui-progress-fill " + color + " ",
-    style: {
-      left: '0px',
-      width: calculatePercentageValue(max, value) + '%'
-    }
-  })), React.createElement("div", {
-    className: " rpgui-progress-left-edge"
-  }), React.createElement("div", {
-    className: " rpgui-progress-right-edge"
-  }));
-};
-var ProgressBarText = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ProgressBar__ProgressBarText",
-  componentId: "sc-qa6fzh-0"
-})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"]);
-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({
-  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) {
-  return props.minWidth;
-}, function (props) {
-  return props.percentageWidth;
-}, function (props) {
-  return props.style;
-});
-
-var img$8 = 'data:image/png;base64,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';
-
-var QuestInfo = function QuestInfo(_ref) {
-  var quests = _ref.quests,
-    onClose = _ref.onClose,
-    buttons = _ref.buttons,
-    onChangeQuest = _ref.onChangeQuest;
-  var _useState = useState(0),
-    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, {
+    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;
+  var calculatePercentageValue = function calculatePercentageValue(max, value) {
+    if (value > max) {
+      value = max;
+    }
+    return value * 100 / max;
+  };
+  return React.createElement(Container$f, {
+    className: "rpgui-progress",
+    "data-value": calculatePercentageValue(max, value) / 100,
+    "data-rpguitype": "progress",
+    percentageWidth: percentageWidth,
+    minWidth: minWidth,
+    style: style
+  }, displayText && React.createElement(TextOverlay$1, null, React.createElement(ProgressBarText, null, value, "/", max)), React.createElement("div", {
+    className: " rpgui-progress-track"
+  }, React.createElement("div", {
+    className: "rpgui-progress-fill " + color + " ",
+    style: {
+      left: '0px',
+      width: calculatePercentageValue(max, value) + '%'
+    }
+  })), React.createElement("div", {
+    className: " rpgui-progress-left-edge"
+  }), React.createElement("div", {
+    className: " rpgui-progress-right-edge"
+  }));
+};
+var ProgressBarText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ProgressBar__ProgressBarText",
+  componentId: "sc-qa6fzh-0"
+})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"]);
+var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ProgressBar__TextOverlay",
+  componentId: "sc-qa6fzh-1"
+})(["width:100%;position:relative;"]);
+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) {
+  return props.minWidth;
+}, function (props) {
+  return props.percentageWidth;
+}, function (props) {
+  return props.style;
+});
+
+var img$8 = 'data:image/png;base64,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';
+
+var QuestInfo = function QuestInfo(_ref) {
+  var quests = _ref.quests,
+    onClose = _ref.onClose,
+    buttons = _ref.buttons,
+    onChangeQuest = _ref.onChangeQuest;
+  var _useState = useState(0),
+    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() {
       if (onClose) onClose();
     },
     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, {
@@ -28799,14 +29014,6 @@ 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,
@@ -28928,7 +29135,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$f, {
+  return React.createElement(Container$g, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -28937,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%;"]);
@@ -29127,193 +29334,7 @@ var TextArea = function TextArea(_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();
-      }
-    }
-  };
-  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();
-      }
-    }
-  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
-    right: '1rem',
-    src: img$7
-  }))), ")"));
-};
-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 _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 ItemTradingComponent = function ItemTradingComponent(_ref) {
+var TradingItemRow = function TradingItemRow(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
     updateChartTotals = _ref.updateChartTotals,
@@ -29336,68 +29357,79 @@ var ItemTradingComponent = function ItemTradingComponent(_ref) {
     }
   };
   var onRightClick = function onRightClick() {
-    var newQuantity = itemQuantity + 1;
-    setItemQuantity(newQuantity);
-    updateChartTotals({
-      key: traderItem.key,
-      itemId: traderItem.itemId,
-      qty: newQuantity,
-      price: traderItem.price,
-      texturePath: traderItem.texturePath,
-      name: traderItem.name
-    });
+    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
+      });
+    }
   };
-  return React.createElement(ItemWrapper, null, React.createElement(IconContainer, null, React.createElement(SpriteContainer$1, null, React.createElement(SpriteFromAtlas, {
+  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(NameValue, null, React.createElement("p", null, traderItem.name), React.createElement("p", null, "$", traderItem.price)), React.createElement(Container$i, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, itemQuantity)), React.createElement(LeftArrow$2, {
+  }))), 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(RightArrow$2, {
+  }), 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 ItemWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__ItemWrapper",
-  componentId: "sc-nc2o41-0"
-})(["width:80%;margin:auto;display:flex;justify-content:space-between;"]);
-var IconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__IconContainer",
-  componentId: "sc-nc2o41-1"
-})(["display:flex;justify-content:center;align-items:center;"]);
+  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: "itemComponent__SpriteContainer",
-  componentId: "sc-nc2o41-2"
-})(["position:relative;top:-3px;left:0;"]);
+  displayName: "TradingItemRow__SpriteContainer",
+  componentId: "sc-mja0b5-3"
+})(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var NameValue = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__NameValue",
-  componentId: "sc-nc2o41-3"
-})([""]);
+  displayName: "TradingItemRow__NameValue",
+  componentId: "sc-mja0b5-4"
+})(["p{font-size:0.75rem;margin:0;}"]);
 var Item$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "itemComponent__Item",
-  componentId: "sc-nc2o41-4"
-})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;top:-12px;width:100%;"]);
+  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: "itemComponent__TextOverlay",
-  componentId: "sc-nc2o41-5"
+  displayName: "TradingItemRow__TextOverlay",
+  componentId: "sc-mja0b5-6"
 })(["width:100%;position:relative;"]);
-var Container$i = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__Container",
-  componentId: "sc-nc2o41-6"
-})(["position:relative;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;min-width:100px;width:40%;"]);
-var LeftArrow$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__LeftArrow",
-  componentId: "sc-nc2o41-7"
-})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:40px;height:42px;:active{background-image:url(", ");}z-index:2;"], img$3, img$2);
-var RightArrow$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "itemComponent__RightArrow",
-  componentId: "sc-nc2o41-8"
-})(["background-image:url(", ");right:0;position:absolute;width:40px;background-size:100% 100%;height:42px;:active{background-image:url(", ");}z-index:2;"], img$5, img$4);
+var 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 TrandingMenu = function TrandingMenu(_ref) {
+var TradingMenu = function TradingMenu(_ref) {
   var traderItems = _ref.traderItems,
     onClose = _ref.onClose,
     type = _ref.type,
@@ -29438,13 +29470,10 @@ var TrandingMenu = function TrandingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, Capitalize(type)), React.createElement("hr", {
+  }, React.createElement(Title$3, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
-  })), React.createElement(TrandingComponentScrollWrapper, null, traderItems.map(function (tradeItem) {
-    return React.createElement(ItemWrapper$1, {
-      key: v4()
-    }, React.createElement(ItemTradingComponent, {
-      key: v4(),
+  })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem) {
+    return React.createElement(ItemWrapper$1, null, React.createElement(TradingItemRow, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       updateChartTotals: updateChartTotals,
@@ -29458,37 +29487,53 @@ var TrandingMenu = function TrandingMenu(_ref) {
   }, "Cancel"))));
 };
 var TradingMenuDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
-  displayName: "TrandingMenu__TradingMenuDraggableContainer",
-  componentId: "sc-1lbop40-0"
+  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: "TrandingMenu__Title",
-  componentId: "sc-1lbop40-1"
+  displayName: "TradingMenu__Title",
+  componentId: "sc-1wjsz1l-1"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
-var TrandingComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TrandingMenu__TrandingComponentScrollWrapper",
-  componentId: "sc-1lbop40-2"
-})(["overflow-y:scroll;height:500px;width:100%;"]);
+var 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: "TrandingMenu__ItemWrapper",
-  componentId: "sc-1lbop40-3"
-})(["width:80%;margin:auto;display:flex;justify-content:space-between;"]);
+  displayName: "TradingMenu__ItemWrapper",
+  componentId: "sc-1wjsz1l-3"
+})(["margin:auto;display:flex;justify-content:space-between;"]);
 var TotalWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TrandingMenu__TotalWrapper",
-  componentId: "sc-1lbop40-4"
-})(["width:80%;display:flex;margin:auto;justify-content:space-between;height:20px;"]);
+  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: "TrandingMenu__GoldWrapper",
-  componentId: "sc-1lbop40-5"
-})(["width:80%;display:flex;margin:auto;justify-content:space-between;height:20px;p{color:yellow !important;}"]);
+  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: "TrandingMenu__AlertWrapper",
-  componentId: "sc-1lbop40-6"
-})(["width:80%;display:flex;margin:auto;justify-content:center;height:20px;p{color:red !important;}"]);
+  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: "TrandingMenu__ButtonWrapper",
-  componentId: "sc-1lbop40-7"
-})(["width:80%;margin:auto;display:flex;justify-content:space-around;padding-top:20px;"]);
+  displayName: "TradingMenu__ButtonWrapper",
+  componentId: "sc-1wjsz1l-7"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
+
+/* 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 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;
+});
 
-export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TrandingMenu, Truncate, _RPGUI, useEventListener };
+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