@rpg-engine/long-bow 0.3.93 → 0.3.95

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

@@ -12,10 +12,10 @@ var dayjs = _interopDefault(require('dayjs'));
 var reactErrorBoundary = require('react-error-boundary');
 var rx = require('react-icons/rx');
 var Draggable = _interopDefault(require('react-draggable'));
-var uuid = require('uuid');
 var ReactDOM = _interopDefault(require('react-dom'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
+var uuid = require('uuid');
 require('rpgui/rpgui.min.css');
 require('rpgui/rpgui.min.js');
 var capitalize = _interopDefault(require('lodash/capitalize'));
@@ -12634,7 +12634,7 @@ var Button$1 = /*#__PURE__*/styled.button.withConfig({
 });
 
 var uiColors = {
-  lightGray: '#757161',
+  lightGray: '#888',
   gray: '#4E4A4E',
   darkGray: '#3e3e3e',
   darkYellow: '#FFC857',
@@ -12650,7 +12650,7 @@ var uiColors = {
   blue: '#597DCE',
   darkBlue: '#30346D',
   brown: '#854C30',
-  lightGreen: '#6DAA2C',
+  lightGreen: '#88ed1c',
   brownGreen: '#346524'
 };
 
@@ -13104,96 +13104,54 @@ var Icon = /*#__PURE__*/styled.img.withConfig({
   return props.width;
 });
 
-var Dropdown = function Dropdown(_ref) {
-  var options = _ref.options,
-    width = _ref.width,
-    onChange = _ref.onChange;
-  var dropdownId = uuid.v4();
-  var _useState = React.useState(''),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var _useState2 = React.useState(''),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var _useState3 = React.useState(false),
-    opened = _useState3[0],
-    setOpened = _useState3[1];
-  React.useEffect(function () {
-    var firstOption = options[0];
-    if (firstOption) {
-      var change = !selectedValue;
-      if (!change) {
-        change = options.filter(function (o) {
-          return o.value === selectedValue;
-        }).length < 1;
-      }
-      /**
-       * make a selection if there is no selected value already present
-       * or if there is a selected value but its not in new options
-       */
-      if (change) {
-        setSelectedValue(firstOption.value);
-        setSelectedOption(firstOption.option);
-      }
-    }
-  }, [options]);
-  React.useEffect(function () {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-  return React__default.createElement(Container$7, {
-    onMouseLeave: function onMouseLeave() {
-      return setOpened(false);
-    },
-    width: width
-  }, React__default.createElement(DropdownSelect, {
-    id: "dropdown-" + dropdownId,
-    className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
-    onPointerDown: function onPointerDown() {
-      return setOpened(function (prev) {
-        return !prev;
-      });
-    }
-  }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions, {
-    className: "rpgui-dropdown-imp",
-    opened: opened
-  }, options.map(function (option) {
-    return React__default.createElement("li", {
-      key: option.id,
-      onPointerDown: function onPointerDown() {
-        setSelectedValue(option.value);
-        setSelectedOption(option.option);
-        setOpened(false);
+var InputRadio = function InputRadio(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    value = _ref.value,
+    isChecked = _ref.isChecked,
+    onRadioSelect = _ref.onRadioSelect;
+  var onRadioClick = function onRadioClick() {
+    onRadioSelect(value);
+  };
+  return React__default.createElement("div", {
+    onPointerUp: onRadioClick
+  }, React__default.createElement("input", {
+    className: "rpgui-radio",
+    name: name,
+    value: value,
+    type: "radio",
+    "data-rpguitype": "radio",
+    checked: isChecked,
+    // rpgui breaks onChange on this input (doesn't work). That's why I had to wrap it with a div and a onClick listener.
+    readOnly: true
+  }), React__default.createElement("label", null, label));
+};
+
+var countItemFromInventory = function countItemFromInventory(itemKey, inventory) {
+  var itemsFromInventory = [];
+  if (inventory) {
+    Object.keys(inventory.slots).forEach(function (i) {
+      var _inventory$slots$inde;
+      var index = parseInt(i);
+      if (((_inventory$slots$inde = inventory.slots[index]) == null ? void 0 : _inventory$slots$inde.key) === itemKey) {
+        itemsFromInventory.push(inventory.slots[index]);
       }
-    }, option.option);
-  })));
+    });
+  }
+  var totalQty = itemsFromInventory.reduce(function (acc, item) {
+    return acc + ((item == null ? void 0 : item.stackQty) || 1);
+  }, 0);
+  return totalQty;
 };
-var Container$7 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Dropdown__Container",
-  componentId: "sc-8arn65-0"
-})(["position:relative;width:", ";"], function (props) {
-  return props.width || '100%';
-});
-var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Dropdown__DropdownSelect",
-  componentId: "sc-8arn65-1"
-})(["width:100%;box-sizing:border-box;"]);
-var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "Dropdown__DropdownOptions",
-  componentId: "sc-8arn65-2"
-})(["position:absolute;width:100%;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
-  return props.opened ? 'block' : 'none';
-});
 
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React__default.createElement(Container$8, {
+  return ReactDOM.createPortal(React__default.createElement(Container$7, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -13220,7 +13178,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$8, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -13237,7 +13195,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -13267,7 +13225,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -13295,7 +13253,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -13620,7 +13578,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       onDragEnd(quantity);
     }
   };
-  return React__default.createElement(Container$b, {
+  return React__default.createElement(Container$a, {
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -13788,7 +13746,7 @@ var rarityColor = function rarityColor(item) {
       return null;
   }
 };
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
@@ -13899,13 +13857,13 @@ var ItemInfo = function ItemInfo(_ref) {
       }));
     });
   };
-  return React__default.createElement(Container$c, {
+  return React__default.createElement(Container$b, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
   }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React__default.createElement(Statistic, null, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:15rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -14040,7 +13998,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$c, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
@@ -14049,7 +14007,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -14094,41 +14052,17 @@ var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   }));
 };
 
-var CraftBook = function CraftBook(_ref) {
+var CraftingRecipe = function CraftingRecipe(_ref) {
+  var _skills$level, _skills, _recipe$minCraftingRe, _recipe$minCraftingRe2, _recipe$levelIsOk, _recipe$minCraftingRe3, _recipe$minCraftingRe4, _recipe$minCraftingRe5, _recipe$minCraftingRe6;
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect,
-    onCraftItem = _ref.onCraftItem,
-    craftablesItems = _ref.craftablesItems,
     equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale;
-  var optionsId = 0;
-  var _useState = React.useState({
-      show: false,
-      index: 200
-    }),
-    isShown = _useState[0],
-    setIsShown = _useState[1];
-  var _useState2 = React.useState(),
-    craftItem = _useState2[0],
-    setCraftItem = _useState2[1];
-  var getDropdownOptions = function getDropdownOptions() {
-    var options = [];
-    Object.keys(shared.ItemSubType).forEach(function (key) {
-      if (key === 'DeadBody') {
-        return; // we can't craft crafting resouces...
-      }
-
-      options.push({
-        id: optionsId,
-        value: key,
-        option: key
-      });
-      optionsId += 1;
-    });
-    return options;
-  };
+    recipe = _ref.recipe,
+    scale = _ref.scale,
+    handleRecipeSelect = _ref.handleRecipeSelect,
+    selectedCraftItemKey = _ref.selectedCraftItemKey,
+    inventory = _ref.inventory,
+    skills = _ref.skills;
   var modifyString = function modifyString(str) {
     // Split the string by "/" and "."
     var parts = str.split('/');
@@ -14144,12 +14078,180 @@ var CraftBook = function CraftBook(_ref) {
     name = modifiedWords.join(' ');
     return name;
   };
-  var handleClick = function handleClick(value) {
-    setCraftItem(value);
+  var levelInSkill = (_skills$level = skills == null ? void 0 : (_skills = skills[(_recipe$minCraftingRe = recipe == null ? void 0 : (_recipe$minCraftingRe2 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe2[0]) != null ? _recipe$minCraftingRe : '']) == null ? void 0 : _skills.level) != null ? _skills$level : 1;
+  return React__default.createElement(RadioOptionsWrapper, null, React__default.createElement(SpriteAtlasWrapper, null, React__default.createElement(ItemInfoWrapper, {
+    item: recipe,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    scale: scale
+  }, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: recipe.texturePath,
+    imgScale: 3,
+    grayScale: !recipe.canCraft
+  }))), React__default.createElement("div", null, React__default.createElement("div", {
+    onPointerUp: recipe.canCraft ? handleRecipeSelect : undefined
+  }, React__default.createElement("input", {
+    className: "rpgui-radio",
+    type: "radio",
+    value: recipe.name,
+    name: "test",
+    disabled: !recipe.canCraft,
+    checked: selectedCraftItemKey === recipe.key,
+    onChange: handleRecipeSelect
+  }), React__default.createElement("label", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, modifyString(recipe.name))), React__default.createElement(MinCraftingRequirementsText, {
+    levelIsOk: (_recipe$levelIsOk = recipe == null ? void 0 : recipe.levelIsOk) != null ? _recipe$levelIsOk : false
+  }, modifyString("" + ((_recipe$minCraftingRe3 = recipe == null ? void 0 : (_recipe$minCraftingRe4 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe4[0]) != null ? _recipe$minCraftingRe3 : '')), " lvl", ' ', (_recipe$minCraftingRe5 = recipe == null ? void 0 : (_recipe$minCraftingRe6 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe6[1]) != null ? _recipe$minCraftingRe5 : 0, " (", levelInSkill, ")"), recipe.ingredients.map(function (ingredient, index) {
+    var itemQtyInInventory = !inventory ? 0 : countItemFromInventory(ingredient.key, inventory);
+    return React__default.createElement(Recipe, {
+      key: index
+    }, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: ingredient.texturePath,
+      imgScale: 1.2
+    }), React__default.createElement(Ingredient, {
+      isQuantityOk: ingredient.qty <= itemQtyInInventory
+    }, modifyString(ingredient.key), " x", ingredient.qty, " (", itemQtyInInventory, ")"));
+  })));
+};
+var Ingredient = /*#__PURE__*/styled.p.withConfig({
+  displayName: "CraftingRecipe__Ingredient",
+  componentId: "sc-1fe04wz-0"
+})(["margin:0;margin-left:14px;color:", " !important;"], function (_ref2) {
+  var isQuantityOk = _ref2.isQuantityOk;
+  return isQuantityOk ? uiColors.lightGreen : uiColors.lightGray;
+});
+var Recipe = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__Recipe",
+  componentId: "sc-1fe04wz-1"
+})(["font-size:0.6rem;margin-bottom:3px;display:flex;align-items:center;margin-left:4px;.sprite-from-atlas-img{top:0px;left:0px;}"]);
+var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__SpriteAtlasWrapper",
+  componentId: "sc-1fe04wz-2"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__RadioOptionsWrapper",
+  componentId: "sc-1fe04wz-3"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var MinCraftingRequirementsText = /*#__PURE__*/styled.p.withConfig({
+  displayName: "CraftingRecipe__MinCraftingRequirementsText",
+  componentId: "sc-1fe04wz-4"
+})(["font-size:0.6rem !important;margin:0 5px 0 35px;color:", " !important;"], function (_ref3) {
+  var levelIsOk = _ref3.levelIsOk;
+  return levelIsOk ? uiColors.lightGreen : uiColors.lightGray;
+});
+
+var desktop = {
+  width: 'min(900px, 80%)',
+  height: 'min(700px, 80%)'
+};
+var mobileLanscape = {
+  width: '800px',
+  height: '500px'
+};
+var mobilePortrait = {
+  width: '500px',
+  height: '700px'
+};
+var CraftBook = function CraftBook(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect,
+    onCraftItem = _ref.onCraftItem,
+    craftablesItems = _ref.craftablesItems,
+    equipmentSet = _ref.equipmentSet,
+    scale = _ref.scale,
+    inventory = _ref.inventory,
+    skills = _ref.skills,
+    savedSelectedType = _ref.savedSelectedType;
+  var _useState = React.useState(),
+    craftItemKey = _useState[0],
+    setCraftItemKey = _useState[1];
+  var _useState2 = React.useState(savedSelectedType != null ? savedSelectedType : Object.keys(shared.ItemSubType)[0]),
+    selectedType = _useState2[0],
+    setSelectedType = _useState2[1];
+  var _useState3 = React.useState(),
+    size = _useState3[0],
+    setSize = _useState3[1];
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      if (window.innerWidth < 500 && (size == null ? void 0 : size.width) !== mobilePortrait.width && (!scale || scale < 1)) {
+        setSize(mobilePortrait);
+      } else if ((!scale || scale < 1) && (size == null ? void 0 : size.width) !== mobileLanscape.width) {
+        setSize(mobileLanscape);
+      } else if ((size == null ? void 0 : size.width) !== desktop.width) {
+        setSize(desktop);
+      }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [scale]);
+  var renderItemTypes = function renderItemTypes() {
+    var itemTypes = ['Suggested'].concat(Object.keys(shared.ItemSubType)).filter(function (type) {
+      return type !== 'DeadBody';
+    }).sort(function (a, b) {
+      if (a === 'Suggested') return -1;
+      if (b === 'Suggested') return 1;
+      return a.localeCompare(b);
+    });
+    if (window.innerWidth > parseInt(mobilePortrait.width)) {
+      return itemTypes.map(function (type) {
+        return React__default.createElement(InputRadio, {
+          key: type,
+          value: type,
+          label: type,
+          name: type,
+          isChecked: selectedType === type,
+          onRadioSelect: function onRadioSelect(value) {
+            setSelectedType(value);
+            onSelect(value);
+          }
+        });
+      });
+    }
+    var rows = [[], []];
+    itemTypes.forEach(function (type, index) {
+      var row = 0;
+      if (index % 2 === 1) row = 1;
+      rows[row].push(React__default.createElement(InputRadio, {
+        key: type,
+        value: type,
+        label: type,
+        name: type,
+        isChecked: selectedType === type,
+        onRadioSelect: function onRadioSelect(value) {
+          setSelectedType(value);
+          onSelect(value);
+        }
+      }));
+    });
+    return rows.map(function (row, index) {
+      return React__default.createElement("div", {
+        key: index,
+        style: {
+          display: 'flex',
+          gap: '10px'
+        }
+      }, row);
+    });
   };
+  if (!size) return null;
   return React__default.createElement(DraggableContainer, {
     type: exports.RPGUIContainerTypes.Framed,
-    width: "500px",
+    width: size.width,
+    height: size.height,
     cancelDrag: ".inputRadioCraftBook",
     onCloseButton: function onCloseButton() {
       if (onClose) {
@@ -14157,168 +14259,182 @@ var CraftBook = function CraftBook(_ref) {
       }
     },
     scale: scale
-  }, React__default.createElement("div", {
+  }, React__default.createElement(Wrapper, null, React__default.createElement("div", {
     style: {
       width: '100%'
     }
   }, React__default.createElement(Title$2, null, "Craftbook"), React__default.createElement(Subtitle, null, "Select an item to craft"), React__default.createElement("hr", {
     className: "golden"
-  })), React__default.createElement(Dropdown, {
-    options: getDropdownOptions(),
-    onChange: function onChange(value) {
-      return onSelect(value);
-    }
-  }), React__default.createElement(RadioInputScroller, {
+  })), React__default.createElement(ContentContainer, null, React__default.createElement(ItemTypes, {
     className: "inputRadioCraftBook"
-  }, craftablesItems == null ? void 0 : craftablesItems.map(function (option, index) {
-    var _option$levelIsOk, _option$minCraftingRe, _option$minCraftingRe2, _option$minCraftingRe3, _option$minCraftingRe4;
-    return React__default.createElement(RadioOptionsWrapper, {
-      key: index
-    }, React__default.createElement(SpriteAtlasWrapper, null, React__default.createElement(ItemInfoWrapper, {
-      item: option,
+  }, renderItemTypes()), React__default.createElement(RadioInputScroller, {
+    className: "inputRadioCraftBook"
+  }, craftablesItems == null ? void 0 : craftablesItems.map(function (item) {
+    return React__default.createElement(CraftingRecipe, {
+      key: item.key,
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       equipmentSet: equipmentSet,
-      scale: scale
-    }, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.texturePath,
-      imgScale: 3,
-      grayScale: !option.canCraft
-    }))), React__default.createElement("div", null, React__default.createElement("div", {
-      onPointerDown: function onPointerDown() {
-        return handleClick(option.key);
-      }
-    }, React__default.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test",
-      disabled: !option.canCraft,
-      checked: craftItem === option.key,
-      onChange: function onChange() {
-        return handleClick(option.key);
-      }
-    }), React__default.createElement("label", {
-      onPointerDown: function onPointerDown() {
-        handleClick(option.key);
-      },
-      onTouchEnd: function onTouchEnd() {
-        setIsShown({
-          show: true,
-          index: index
-        });
-      },
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      },
-      onMouseEnter: function onMouseEnter() {
-        return setIsShown({
-          show: true,
-          index: index
-        });
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsShown({
-          show: false,
-          index: index
-        });
-      }
-    }, modifyString(option.name))), isShown && isShown.index === index && option.ingredients.map(function (option, index) {
-      return React__default.createElement(Recipes, {
-        key: index
-      }, React__default.createElement(SpriteFromAtlas, {
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: option.texturePath,
-        imgScale: 1
-      }), React__default.createElement(StyledItem, null, modifyString(option.key), " (", option.qty, "x)"));
-    }), isShown && isShown.index === index && React__default.createElement(MinCraftingRequirementsText, {
-      levelIsOk: (_option$levelIsOk = option == null ? void 0 : option.levelIsOk) != null ? _option$levelIsOk : false
-    }, modifyString(((_option$minCraftingRe = option == null ? void 0 : (_option$minCraftingRe2 = option.minCraftingRequirements) == null ? void 0 : _option$minCraftingRe2[0]) != null ? _option$minCraftingRe : '') + " " + ((_option$minCraftingRe3 = option == null ? void 0 : (_option$minCraftingRe4 = option.minCraftingRequirements) == null ? void 0 : _option$minCraftingRe4[1]) != null ? _option$minCraftingRe3 : '')))));
-  })), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
+      recipe: item,
+      scale: scale,
+      handleRecipeSelect: setCraftItemKey.bind(null, item.key),
+      selectedCraftItemKey: craftItemKey,
+      inventory: inventory,
+      skills: skills
+    });
+  }))), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: onClose
   }, "Cancel"), React__default.createElement(Button, {
+    disabled: !craftItemKey,
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
-      return onCraftItem(craftItem);
+      return onCraftItem(craftItemKey);
     }
-  }, "Craft")));
+  }, "Craft"))));
 };
-var StyledItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__StyledItem",
+var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__Wrapper",
   componentId: "sc-19q95ue-0"
-})(["margin-left:10px;"]);
-var Recipes = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__Recipes",
-  componentId: "sc-19q95ue-1"
-})(["font-size:0.6rem;color:yellow !important;margin-bottom:3px;display:flex;align-items:center;.sprite-from-atlas-img{top:0px;left:0px;}"]);
+})(["display:flex;flex-direction:column;width:100%;height:100%;"]);
 var Title$2 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "CraftBook__Title",
-  componentId: "sc-19q95ue-2"
-})(["font-size:0.6rem;color:yellow !important;"]);
+  componentId: "sc-19q95ue-1"
+})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
 var Subtitle = /*#__PURE__*/styled.h1.withConfig({
   displayName: "CraftBook__Subtitle",
-  componentId: "sc-19q95ue-3"
-})(["font-size:0.4rem;color:yellow !important;"]);
+  componentId: "sc-19q95ue-2"
+})(["font-size:0.4rem;color:", " !important;"], uiColors.yellow);
 var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__RadioInputScroller",
+  componentId: "sc-19q95ue-3"
+})(["padding-left:15px;padding-top:10px;margin-top:1rem;align-items:center;align-items:flex-start;overflow-y:scroll;min-height:0;flex:1;margin-left:10px;-webkit-overflow-scrolling:touch;@media (max-width:", "){margin-left:0;}"], mobilePortrait.width);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__ButtonWrapper",
   componentId: "sc-19q95ue-4"
-})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;-webkit-overflow-scrolling:touch;"]);
-var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__SpriteAtlasWrapper",
+})(["display:flex;justify-content:flex-end;margin-top:10px;width:100%;button{padding:0px 50px;margin:5px;}@media (max-width:", "){justify-content:center;}"], mobilePortrait.width);
+var ContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__ContentContainer",
   componentId: "sc-19q95ue-5"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__RadioOptionsWrapper",
+})(["display:flex;width:100%;min-height:0;flex:1;@media (max-width:", "){flex-direction:column;}"], mobilePortrait.width);
+var ItemTypes = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__ItemTypes",
   componentId: "sc-19q95ue-6"
-})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__ButtonWrapper",
-  componentId: "sc-19q95ue-7"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;button{padding:0px 50px;}"]);
-var MinCraftingRequirementsText = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__MinCraftingRequirementsText",
-  componentId: "sc-19q95ue-8"
-})(["font-size:0.6rem;font-weight:bold;color:", ";"], function (_ref2) {
-  var levelIsOk = _ref2.levelIsOk;
-  return levelIsOk ? '#72f100' : 'gray';
-});
-
-var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
-  var title = _ref.title,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    details = _ref.details;
-  return React__default.createElement("div", null, React__default.createElement("p", null, title), React__default.createElement(Dropdown, {
-    options: options.map(function (option, index) {
-      return {
-        option: option.name,
-        value: option.id,
-        id: index
-      };
-    }),
-    onChange: onChange
-  }), React__default.createElement(Details, null, details));
-};
-var Details = /*#__PURE__*/styled.p.withConfig({
-  displayName: "DropdownSelectorContainer__Details",
-  componentId: "sc-kaa0h9-0"
-})(["font-size:", " !important;"], uiFonts.size.xsmall);
+})(["display:flex;overflow-y:scroll;overflow-x:hidden;width:max-content;flex-direction:column;padding-right:5px;@media (max-width:", "){overflow-x:scroll;overflow-y:hidden;padding-right:0;width:100%;}"], mobilePortrait.width);
 
-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,
-    onItemDragEnd = _ref.onItemDragEnd,
-    onItemDragStart = _ref.onItemDragStart,
+var Dropdown = function Dropdown(_ref) {
+  var options = _ref.options,
+    width = _ref.width,
+    onChange = _ref.onChange;
+  var dropdownId = uuid.v4();
+  var _useState = React.useState(''),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var _useState2 = React.useState(''),
+    selectedOption = _useState2[0],
+    setSelectedOption = _useState2[1];
+  var _useState3 = React.useState(false),
+    opened = _useState3[0],
+    setOpened = _useState3[1];
+  React.useEffect(function () {
+    var firstOption = options[0];
+    if (firstOption) {
+      var change = !selectedValue;
+      if (!change) {
+        change = options.filter(function (o) {
+          return o.value === selectedValue;
+        }).length < 1;
+      }
+      /**
+       * make a selection if there is no selected value already present
+       * or if there is a selected value but its not in new options
+       */
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
+    }
+  }, [options]);
+  React.useEffect(function () {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+  return React__default.createElement(Container$d, {
+    onMouseLeave: function onMouseLeave() {
+      return setOpened(false);
+    },
+    width: width
+  }, React__default.createElement(DropdownSelect, {
+    id: "dropdown-" + dropdownId,
+    className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
+    onPointerDown: function onPointerDown() {
+      return setOpened(function (prev) {
+        return !prev;
+      });
+    }
+  }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions, {
+    className: "rpgui-dropdown-imp",
+    opened: opened
+  }, options.map(function (option) {
+    return React__default.createElement("li", {
+      key: option.id,
+      onPointerDown: function onPointerDown() {
+        setSelectedValue(option.value);
+        setSelectedOption(option.option);
+        setOpened(false);
+      }
+    }, option.option);
+  })));
+};
+var Container$d = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Dropdown__Container",
+  componentId: "sc-8arn65-0"
+})(["position:relative;width:", ";"], function (props) {
+  return props.width || '100%';
+});
+var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Dropdown__DropdownSelect",
+  componentId: "sc-8arn65-1"
+})(["width:100%;box-sizing:border-box;"]);
+var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "Dropdown__DropdownOptions",
+  componentId: "sc-8arn65-2"
+})(["position:absolute;width:100%;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
+  return props.opened ? 'block' : 'none';
+});
+
+var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
+  var title = _ref.title,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    details = _ref.details;
+  return React__default.createElement("div", null, React__default.createElement("p", null, title), React__default.createElement(Dropdown, {
+    options: options.map(function (option, index) {
+      return {
+        option: option.name,
+        value: option.id,
+        id: index
+      };
+    }),
+    onChange: onChange
+  }), React__default.createElement(Details, null, details));
+};
+var Details = /*#__PURE__*/styled.p.withConfig({
+  displayName: "DropdownSelectorContainer__Details",
+  componentId: "sc-kaa0h9-0"
+})(["font-size:", " !important;"], uiFonts.size.xsmall);
+
+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,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
     onItemPlaceDrop = _ref.onItemPlaceDrop,
     onItemOutsideDrop = _ref.onItemOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
@@ -14410,1237 +14526,1024 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
-var IS_MOBILE_OR_TABLET = /*#__PURE__*/shared.isMobileOrTablet();
-
-var chunkString = function chunkString(str, length) {
-  return str.match(new RegExp('.{1,' + length + '}', 'g'));
-};
-
-var DynamicText = function DynamicText(_ref) {
-  var text = _ref.text,
-    onFinish = _ref.onFinish,
-    onStart = _ref.onStart;
-  var _useState = React.useState(''),
-    textState = _useState[0],
-    setTextState = _useState[1];
-  React.useEffect(function () {
-    var i = 0;
-    var interval = setInterval(function () {
-      // on every interval, show one more character
-      if (i === 0) {
-        if (onStart) {
-          onStart();
-        }
+var SlotsContainer = function SlotsContainer(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    onClose = _ref.onClose,
+    _onPositionChange = _ref.onPositionChange,
+    _onPositionChangeEnd = _ref.onPositionChangeEnd,
+    _onPositionChangeStart = _ref.onPositionChangeStart,
+    onOutsideClick = _ref.onOutsideClick,
+    initialPosition = _ref.initialPosition,
+    scale = _ref.scale;
+  return React__default.createElement(DraggableContainer, {
+    title: title,
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
       }
-      if (i < text.length) {
-        setTextState(text.substring(0, i + 1));
-        i++;
-      } else {
-        clearInterval(interval);
-        if (onFinish) {
-          onFinish();
-        }
+    },
+    width: "400px",
+    cancelDrag: ".item-container-body, #shortcuts_list",
+    onPositionChange: function onPositionChange(_ref2) {
+      var x = _ref2.x,
+        y = _ref2.y;
+      if (_onPositionChange) {
+        _onPositionChange({
+          x: x,
+          y: y
+        });
       }
-    }, 50);
-    return function () {
-      clearInterval(interval);
-    };
-  }, [text]);
-  return React__default.createElement(TextContainer, null, textState);
+    },
+    onPositionChangeEnd: function onPositionChangeEnd(_ref3) {
+      var x = _ref3.x,
+        y = _ref3.y;
+      if (_onPositionChangeEnd) {
+        _onPositionChangeEnd({
+          x: x,
+          y: y
+        });
+      }
+    },
+    onPositionChangeStart: function onPositionChangeStart(_ref4) {
+      var x = _ref4.x,
+        y = _ref4.y;
+      if (_onPositionChangeStart) {
+        _onPositionChangeStart({
+          x: x,
+          y: y
+        });
+      }
+    },
+    onOutsideClick: onOutsideClick,
+    initialPosition: initialPosition,
+    scale: scale
+  }, children);
 };
-var TextContainer = /*#__PURE__*/styled.p.withConfig({
-  displayName: "DynamicText__TextContainer",
-  componentId: "sc-1ggl9nd-0"
-})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
-
-var img$5 = 'data:image/gif;base64,R0lGODlhEAAQAPIAAAAAABQYLiw1TUBJc2hvmQAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAM9CLrc/lCFGSKYJJP5AhlguDnBMIVgxXgmJapSSp3mKs/pKrT0IMCXUk+2Cgh2oSOnaDz+lswZpSOFUq2KBAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAIzhI+py90Bg4OjDrjCELxfFQhQx0mIJkaeaYRp5LJADMdnqXbyOJLYTdKBejjZoRaZJBMFACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIfkEARQAAAAsAAAAABAAEAAAAjKEj6nL7Y+CDE6OO+QKQ/ifKYEgfR4VddPohQe7lmR0xidNTib65uacYP2AQWGuMlEUAAA7';
-
-var img$6 = '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';
 
-var NPCDialogText = function NPCDialogText(_ref) {
-  var text = _ref.text,
-    onClose = _ref.onClose,
-    onEndStep = _ref.onEndStep,
-    onStartStep = _ref.onStartStep,
-    type = _ref.type;
-  var windowSize = React.useRef([window.innerWidth, window.innerHeight]);
-  function maxCharacters(width) {
-    // Set the font size to 16 pixels
-    var fontSize = 11.2;
-    // Calculate the number of characters that can fit in one line
-    var charactersPerLine = Math.floor(width / 2 / fontSize);
-    // Calculate the number of lines that can fit in the div
-    var linesPerDiv = Math.floor(180 / fontSize);
-    // Calculate the maximum number of characters that can fit in the div
-    var maxCharacters = charactersPerLine * linesPerDiv;
-    // Return the maximum number of characters
-    return Math.round(maxCharacters / 5);
-  }
-  var textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
+(function (RangeSliderType) {
+  RangeSliderType["Slider"] = "rpgui-slider";
+  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
+})(exports.RangeSliderType || (exports.RangeSliderType = {}));
+var RangeSlider = function RangeSlider(_ref) {
+  var type = _ref.type,
+    valueMin = _ref.valueMin,
+    valueMax = _ref.valueMax,
+    width = _ref.width,
+    _onChange = _ref.onChange,
+    value = _ref.value;
+  var sliderId = uuid.v4();
+  var containerRef = React.useRef(null);
   var _useState = React.useState(0),
-    chunkIndex = _useState[0],
-    setChunkIndex = _useState[1];
-  var onHandleSpacePress = function onHandleSpacePress(event) {
-    if (event.code === 'Space') {
-      goToNextStep();
-    }
-  };
-  var goToNextStep = function goToNextStep() {
-    var hasNextChunk = (textChunks == null ? void 0 : textChunks[chunkIndex + 1]) || false;
-    if (hasNextChunk) {
-      setChunkIndex(function (prev) {
-        return prev + 1;
-      });
-    } else {
-      // if there's no more text chunks, close the dialog
-      onClose();
-    }
-  };
-  React.useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [chunkIndex]);
-  var _useState2 = React.useState(false),
-    showGoNextIndicator = _useState2[0],
-    setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$e, null, React__default.createElement(DynamicText, {
-    text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
-    onFinish: function onFinish() {
-      setShowGoNextIndicator(true);
-      onEndStep && onEndStep();
+    left = _useState[0],
+    setLeft = _useState[1];
+  React.useEffect(function () {
+    var _containerRef$current;
+    var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
+    setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
+  }, [value, valueMin, valueMax]);
+  var typeClass = type === exports.RangeSliderType.GoldSlider ? 'golden' : '';
+  return React__default.createElement("div", {
+    style: {
+      width: width,
+      position: 'relative'
     },
-    onStart: function onStart() {
-      setShowGoNextIndicator(false);
-      onStartStep && onStartStep();
+    className: "rpgui-slider-container " + typeClass,
+    id: "rpgui-slider-" + sliderId,
+    ref: containerRef
+  }, React__default.createElement("div", {
+    style: {
+      pointerEvents: 'none'
     }
-  }), showGoNextIndicator && React__default.createElement(PressSpaceIndicator, {
-    right: type === exports.NPCDialogType.TextOnly ? '1rem' : '10.5rem',
-    src: IS_MOBILE_OR_TABLET ? img$5 : img$6,
-    onPointerDown: function onPointerDown() {
-      goToNextStep();
+  }, React__default.createElement("div", {
+    className: "rpgui-slider-track " + typeClass
+  }), React__default.createElement("div", {
+    className: "rpgui-slider-left-edge " + typeClass
+  }), React__default.createElement("div", {
+    className: "rpgui-slider-right-edge " + typeClass
+  }), React__default.createElement("div", {
+    className: "rpgui-slider-thumb " + typeClass,
+    style: {
+      left: left
     }
+  })), React__default.createElement(Input$1, {
+    type: "range",
+    style: {
+      width: width
+    },
+    min: valueMin,
+    max: valueMax,
+    onChange: function onChange(e) {
+      return _onChange(Number(e.target.value));
+    },
+    value: value,
+    className: "rpgui-cursor-point"
   }));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NPCDialogText__Container",
-  componentId: "sc-1cxkdh9-0"
-})([""]);
-var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
-  displayName: "NPCDialogText__PressSpaceIndicator",
-  componentId: "sc-1cxkdh9-1"
-})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref2) {
-  var right = _ref2.right;
-  return right;
-});
-
-//@ts-ignore
-var useEventListener = function useEventListener(type, handler, el) {
-  if (el === void 0) {
-    el = window;
-  }
-  var savedHandler = React__default.useRef();
-  React__default.useEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  React__default.useEffect(function () {
-    //@ts-ignore
-    var listener = function listener(e) {
-      return savedHandler.current(e);
-    };
-    el.addEventListener(type, listener);
-    return function () {
-      el.removeEventListener(type, listener);
-    };
-  }, [type, el]);
-};
+var Input$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "RangeSlider__Input",
+  componentId: "sc-v8mte9-0"
+})(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
 
-var QuestionDialog = function QuestionDialog(_ref) {
-  var questions = _ref.questions,
-    answers = _ref.answers,
+var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
     onClose = _ref.onClose;
-  var _useState = React.useState(questions[0]),
-    currentQuestion = _useState[0],
-    setCurrentQuestion = _useState[1];
-  var _useState2 = React.useState(false),
-    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 = React.useState(onGetFirstAnswer()),
-    currentAnswer = _useState3[0],
-    setCurrentAnswer = _useState3[1];
+  var _useState = React.useState(quantity),
+    value = _useState[0],
+    setValue = _useState[1];
+  var inputRef = React.useRef(null);
   React.useEffect(function () {
-    setCurrentAnswer(onGetFirstAnswer());
-  }, [currentQuestion]);
-  var onGetAnswers = function onGetAnswers(answerIds) {
-    return answerIds.map(function (answerId) {
-      return answers.find(function (answer) {
-        return answer.id === answerId;
-      });
-    });
-  };
-  var onKeyPress = function onKeyPress(e) {
-    switch (e.key) {
-      case 'ArrowDown':
-        // select next answer, if any.
-        // if no next answer, select first answer
-        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
-        //   (answer) => answer?.id === currentAnswer!.id + 1
-        // );
-        var nextAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
-          return (answer == null ? void 0 : answer.id) === currentAnswer.id + 1;
-        });
-        var nextAnswerID = currentQuestion.answerIds[nextAnswerIndex];
-        var nextAnswer = onGetAnswers(currentQuestion.answerIds).find(function (answer) {
-          return (answer == null ? void 0 : answer.id) === nextAnswerID;
-        });
-        setCurrentAnswer(nextAnswer || onGetFirstAnswer());
-        break;
-      case 'ArrowUp':
-        // select previous answer, if any.
-        // if no previous answer, select last answer
-        var previousAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
-          return (answer == null ? void 0 : answer.id) === currentAnswer.id - 1;
-        });
-        var previousAnswerID = currentQuestion.answerIds && currentQuestion.answerIds[previousAnswerIndex];
-        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)) {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      var closeSelector = function closeSelector(e) {
+        if (e.key === 'Escape') {
           onClose();
-          return;
-        } else {
-          setCurrentQuestion(questions.find(function (question) {
-            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) {
-        return question.id === answer.nextQuestionId;
-      }));
-    } else {
-      // else, finish dialog!
-      onClose();
-    }
-  };
-  var onRenderCurrentAnswers = function onRenderCurrentAnswers() {
-    var answerIds = currentQuestion.answerIds;
-    if (!answerIds) {
-      return null;
-    }
-    var answers = onGetAnswers(answerIds);
-    if (!answers) {
-      return null;
+      };
+      document.addEventListener('keydown', closeSelector);
+      return function () {
+        document.removeEventListener('keydown', closeSelector);
+      };
     }
-    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__default.createElement(AnswerRow, {
-          key: "answer_" + answer.id
-        }, React__default.createElement(AnswerSelectedIcon, {
-          color: selectedColor
-        }, isSelected ? 'X' : null), React__default.createElement(Answer, {
-          key: answer.id,
-          onPointerDown: function onPointerDown() {
-            return onAnswerClick(answer);
-          },
-          color: selectedColor
-        }, answer.text));
+    return function () {};
+  }, []);
+  return React__default.createElement(StyledContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: "25rem"
+  }, React__default.createElement(CloseButton$2, {
+    className: "container-close",
+    onPointerDown: onClose
+  }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
+    style: {
+      width: '100%'
+    },
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      var numberValue = Number(value);
+      if (Number.isNaN(numberValue)) {
+        return;
       }
-      return null;
-    });
-  };
-  return React__default.createElement(Container$f, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
-    text: currentQuestion.text,
-    onStart: function onStart() {
-      return setCanShowAnswers(false);
+      onConfirm(Math.max(1, Math.min(quantity, numberValue)));
     },
-    onFinish: function onFinish() {
-      return setCanShowAnswers(true);
-    }
-  })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
-};
-var Container$f = /*#__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;"]);
-var QuestionContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestionDialog__QuestionContainer",
-  componentId: "sc-bxc5u0-1"
-})(["flex:100%;width:100%;"]);
-var AnswersContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestionDialog__AnswersContainer",
-  componentId: "sc-bxc5u0-2"
-})(["flex:100%;"]);
-var Answer = /*#__PURE__*/styled.p.withConfig({
-  displayName: "QuestionDialog__Answer",
-  componentId: "sc-bxc5u0-3"
-})(["flex:auto;color:", " !important;font-size:0.65rem !important;background:inherit;border:none;"], function (props) {
-  return props.color;
-});
-var AnswerSelectedIcon = /*#__PURE__*/styled.span.withConfig({
-  displayName: "QuestionDialog__AnswerSelectedIcon",
-  componentId: "sc-bxc5u0-4"
-})(["flex:5% 0 0;color:", " !important;"], function (props) {
-  return props.color;
-});
-var AnswerRow = /*#__PURE__*/styled.div.withConfig({
-  displayName: "QuestionDialog__AnswerRow",
-  componentId: "sc-bxc5u0-5"
-})(["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 img$7 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAP1BMVEUAAAA7FyVxQTsUEBPj5v////+5v/tCJDOOUlIiHBr1oJfptaO6dWr61rhzFy1bMTjoanMUNGQoXMQkn97+88DQ3IhAAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAAHdElNRQfmAw4VOBC7c5LYAAABM0lEQVQ4y3XRi5KDIAwFUAUkbrBgpP//rZsHVHQ009qZ3tPboNN0zmwzvcw8O5sX4y0NOg/Et3jRCXF+ziULorjkOQ9gE24dvuUAzq08DiCO4pe3WN7zCP56vmpubBReQYC11YPS86ySxxCsAABTSgjb5m4g8nfbxvFHBkH2OEEvAItVuCuIsgGgl+Gcr7kDXxhEAx55A2SQEEeQeZwUaIP8Tbo05B0RFPhItAjgj1w6cDnhLluDj+Egkh3pCCP4pKQAw1IPO0W9Nti5gW9RP2dKA3BZd2Dw+baYX+Nt4GM00O4S3kEpF6Alb2Bv4LeC3kkGfAW0/p0RPoJVKr63ghHsKuRh5DIUKOAlGOwrtt9fQekAEfmhZslHUDoglB0zjfkJigN7UnTQQ4GBWomoVhEN/AOPSBh38gy+fwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xNFQyMTo1NTo1MSswMDowMJcc0eEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTRUMjE6NTU6NTErMDA6MDDmQWldAAAAAElFTkSuQmCC';
-
-(function (NPCDialogType) {
-  NPCDialogType["TextOnly"] = "TextOnly";
-  NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
-})(exports.NPCDialogType || (exports.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;
-  return React__default.createElement(RPGUIContainer, {
-    type: exports.RPGUIContainerTypes.FramedGold,
-    width: isQuestionDialog ? '600px' : '80%',
-    height: '180px'
-  }, isQuestionDialog && questions && answers ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$1, {
-    flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React__default.createElement(QuestionDialog, {
-    questions: questions,
-    answers: answers,
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
-    }
-  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
-    src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$g, null, React__default.createElement(TextContainer$1, {
-    flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React__default.createElement(NPCDialogText, {
-    type: type,
-    text: text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
+    noValidate: true
+  }, React__default.createElement(StyledInput, {
+    innerRef: inputRef,
+    placeholder: "Enter quantity",
+    type: "number",
+    min: 1,
+    max: quantity,
+    value: value,
+    onChange: function onChange(e) {
+      if (Number(e.target.value) >= quantity) {
+        setValue(quantity);
+        return;
       }
+      setValue(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
+      setValue(newValue);
     }
-  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
-    src: imagePath || img$7
-  })))));
+  }), React__default.createElement(RangeSlider, {
+    type: exports.RangeSliderType.Slider,
+    valueMin: 1,
+    valueMax: quantity,
+    width: "100%",
+    onChange: setValue,
+    value: value
+  }), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    type: "submit"
+  }, "Confirm")));
 };
-var Container$g = /*#__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;"]);
-var TextContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NPCDialog__TextContainer",
-  componentId: "sc-1b4aw74-1"
-})(["flex:", " 0 0;width:355px;"], function (_ref2) {
-  var flex = _ref2.flex;
-  return flex;
-});
-var ThumbnailContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NPCDialog__ThumbnailContainer",
-  componentId: "sc-1b4aw74-2"
-})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
-var NPCThumbnail = /*#__PURE__*/styled.img.withConfig({
-  displayName: "NPCDialog__NPCThumbnail",
-  componentId: "sc-1b4aw74-3"
-})(["image-rendering:pixelated;height:128px;width:128px;"]);
+var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
+  displayName: "ItemQuantitySelector__StyledContainer",
+  componentId: "sc-yfdtpn-0"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+var StyledForm = /*#__PURE__*/styled.form.withConfig({
+  displayName: "ItemQuantitySelector__StyledForm",
+  componentId: "sc-yfdtpn-1"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
+var StyledInput = /*#__PURE__*/styled(Input).withConfig({
+  displayName: "ItemQuantitySelector__StyledInput",
+  componentId: "sc-yfdtpn-2"
+})(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
+var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemQuantitySelector__CloseButton",
+  componentId: "sc-yfdtpn-3"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
 
-(function (ImgSide) {
-  ImgSide["right"] = "right";
-  ImgSide["left"] = "left";
-})(exports.ImgSide || (exports.ImgSide = {}));
-var NPCMultiDialog = function NPCMultiDialog(_ref) {
-  var _textAndTypeArray$sli;
-  var _onClose = _ref.onClose,
-    textAndTypeArray = _ref.textAndTypeArray;
-  var _useState = React.useState(false),
-    showGoNextIndicator = _useState[0],
-    setShowGoNextIndicator = _useState[1];
-  var _useState2 = React.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 ShortcutsSetter = function ShortcutsSetter(_ref) {
+  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
+    settingShortcutIndex = _ref.settingShortcutIndex,
+    shortcuts = _ref.shortcuts,
+    removeShortcut = _ref.removeShortcut,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
+  var getContent = function getContent(index) {
+    var _shortcuts$index, _shortcuts$index3;
+    if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === shared.ShortcutType.Item) {
+      var _shortcuts$index2;
+      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
+      if (!_payload) return null;
+      return React__default.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: shared.getItemTextureKeyPath({
+          key: _payload.texturePath,
+          texturePath: _payload.texturePath,
+          stackQty: _payload.stackQty || 1,
+          isStackable: _payload.isStackable
+        }, atlasJSON),
+        width: 32,
+        height: 32,
+        imgScale: 1.6,
+        imgStyle: {
+          left: '5px'
+        }
+      });
     }
+    var payload = (_shortcuts$index3 = shortcuts[index]) == null ? void 0 : _shortcuts$index3.payload;
+    return React__default.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
+      return word[0];
+    }));
   };
-  React.useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [slide]);
-  return React__default.createElement(RPGUIContainer, {
-    type: exports.RPGUIContainerTypes.FramedGold,
-    width: '50%',
-    height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$h, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
-    flex: '70%'
-  }, React__default.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__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
-    src: textAndTypeArray[slide].imagePath || img$7
-  })), showGoNextIndicator && React__default.createElement(PressSpaceIndicator$1, {
-    right: '10.5rem',
-    src: img$6
-  })), textAndTypeArray[slide].imageSide === 'left' && React__default.createElement(React__default.Fragment, null, React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
-    src: textAndTypeArray[slide].imagePath || img$7
-  })), React__default.createElement(TextContainer$2, {
-    flex: '70%'
-  }, React__default.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__default.createElement(PressSpaceIndicator$1, {
-    right: '1rem',
-    src: img$6
-  }))), ")"));
+  return React__default.createElement(Container$e, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+    id: "shortcuts_list"
+  }, Array.from({
+    length: 6
+  }).map(function (_, i) {
+    return React__default.createElement(Shortcut, {
+      key: i,
+      onPointerDown: function onPointerDown() {
+        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+        removeShortcut(i);
+        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === shared.ShortcutType.None)) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i,
+      id: "shortcutSetter_" + i
+    }, getContent(i));
+  })));
 };
-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 Container$e = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__Container",
+  componentId: "sc-xuouuf-0"
+})(["p{margin:0;margin-left:0.5rem;}"]);
+var Shortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ShortcutsSetter__Shortcut",
+  componentId: "sc-xuouuf-1"
+})(["width:2.6rem;height:2.6rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
+  var isBeingSet = _ref2.isBeingSet;
+  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
+}, uiColors.darkGray, uiColors.gray);
+var List = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ShortcutsSetter__List",
+  componentId: "sc-xuouuf-2"
+})(["width:100%;display:flex;align-items:center;gap:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;box-sizing:border-box;margin:0 !important;"]);
 
-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 = React.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();
-      }
+var ItemContainer$1 = 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,
+    _ref$disableContextMe = _ref.disableContextMenu,
+    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
+    onItemPlaceDrop = _ref.onItemPlaceDrop,
+    _onOutsideDrop = _ref.onOutsideDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    initialPosition = _ref.initialPosition,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
+    scale = _ref.scale,
+    shortcuts = _ref.shortcuts,
+    setItemShortcut = _ref.setItemShortcut,
+    removeShortcut = _ref.removeShortcut,
+    equipmentSet = _ref.equipmentSet,
+    isDepotSystem = _ref.isDepotSystem,
+    onPositionChangeEnd = _ref.onPositionChangeEnd,
+    onPositionChangeStart = _ref.onPositionChangeStart;
+  var _useState = React.useState({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: function callback(_quantity) {}
+    }),
+    quantitySelect = _useState[0],
+    setQuantitySelect = _useState[1];
+  var _useState2 = React.useState(-1),
+    settingShortcutIndex = _useState2[0],
+    setSettingShortcutIndex = _useState2[1];
+  var handleSetShortcut = function handleSetShortcut(item, index) {
+    if (item.type === shared.ItemType.Consumable || item.type === shared.ItemType.Tool) {
+      setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
     }
   };
-  React.useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [backgroundImgPath]);
-  return React__default.createElement(BackgroundContainer, {
-    imgPath: backgroundImgPath[img],
-    fullImg: fullCoverBackground
-  }, React__default.createElement(DialogContainer, null, textAndTypeArray ? React__default.createElement(NPCMultiDialog, {
-    textAndTypeArray: textAndTypeArray,
-    onClose: onClose
-  }) : questions && answers ? React__default.createElement(QuestionDialog, {
-    questions: questions,
-    answers: answers,
-    onClose: onClose
-  }) : text && imagePath ? React__default.createElement(NPCDialog, {
-    text: text,
-    imagePath: imagePath,
-    onClose: onClose,
-    type: exports.NPCDialogType.TextAndThumbnail
-  }) : React__default.createElement(NPCDialog, {
-    text: text,
+  var onRenderSlots = function onRenderSlots() {
+    var slots = [];
+    for (var i = 0; i < itemContainer.slotQty; i++) {
+      var _itemContainer$slots;
+      slots.push(React__default.createElement(ItemSlot, {
+        isContextMenuDisabled: disableContextMenu,
+        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);
+        },
+        onPointerDown: function onPointerDown(itemType, containerType, item) {
+          if (settingShortcutIndex !== -1) {
+            setSettingShortcutIndex(-1);
+            handleSetShortcut(item, settingShortcutIndex);
+          } else if (onItemClick) onItemClick(item, itemType, containerType);
+        },
+        onSelected: function onSelected(optionId, item) {
+          if (_onSelected) _onSelected(optionId, item);
+        },
+        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
+          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
+        },
+        onDragEnd: function onDragEnd(quantity) {
+          if (onItemDragEnd) onItemDragEnd(quantity);
+        },
+        dragScale: scale,
+        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
+        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
+          setQuantitySelect({
+            isOpen: true,
+            maxQuantity: maxQuantity,
+            callback: callback
+          });
+        },
+        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
+          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+        },
+        onOutsideDrop: function onOutsideDrop(item, position) {
+          if (_onOutsideDrop) _onOutsideDrop(item, position);
+        },
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        isSelectingShortcut: settingShortcutIndex !== -1,
+        equipmentSet: equipmentSet,
+        setItemShortcut: type === shared.ItemContainerType.Inventory ? handleSetShortcut : undefined,
+        isDepotSystem: isDepotSystem
+      }));
+    }
+    return slots;
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
+    title: itemContainer.name || 'Container',
     onClose: onClose,
-    type: exports.NPCDialogType.TextOnly
-  })));
+    initialPosition: initialPosition,
+    scale: scale,
+    onPositionChangeEnd: onPositionChangeEnd,
+    onPositionChangeStart: onPositionChangeStart
+  }, type === shared.ItemContainerType.Inventory && shortcuts && removeShortcut && React__default.createElement(ShortcutsSetter, {
+    setSettingShortcutIndex: setSettingShortcutIndex,
+    settingShortcutIndex: settingShortcutIndex,
+    shortcuts: shortcuts,
+    removeShortcut: removeShortcut,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React__default.createElement(ItemsContainer, {
+    className: "item-container-body"
+  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
+    quantity: quantitySelect.maxQuantity,
+    onConfirm: function onConfirm(quantity) {
+      quantitySelect.callback(quantity);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    },
+    onClose: function onClose() {
+      quantitySelect.callback(-1);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    }
+  }))));
 };
-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 ItemsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__ItemsContainer",
+  componentId: "sc-15y5p9l-0"
+})(["display:flex;justify-content:center;flex-wrap:wrap;"]);
+var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__QuantitySelectorContainer",
+  componentId: "sc-15y5p9l-1"
+})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
-var SlotsContainer = function SlotsContainer(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
+var ItemSelector = function ItemSelector(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    options = _ref.options,
     onClose = _ref.onClose,
-    _onPositionChange = _ref.onPositionChange,
-    _onPositionChangeEnd = _ref.onPositionChangeEnd,
-    _onPositionChangeStart = _ref.onPositionChangeStart,
-    onOutsideClick = _ref.onOutsideClick,
-    initialPosition = _ref.initialPosition,
-    scale = _ref.scale;
+    onSelect = _ref.onSelect;
+  var _useState = React.useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+  React.useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
   return React__default.createElement(DraggableContainer, {
-    title: title,
     type: exports.RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
     onCloseButton: function onCloseButton() {
       if (onClose) {
         onClose();
       }
-    },
-    width: "400px",
-    cancelDrag: ".item-container-body, #shortcuts_list",
-    onPositionChange: function onPositionChange(_ref2) {
-      var x = _ref2.x,
-        y = _ref2.y;
-      if (_onPositionChange) {
-        _onPositionChange({
-          x: x,
-          y: y
-        });
-      }
-    },
-    onPositionChangeEnd: function onPositionChangeEnd(_ref3) {
-      var x = _ref3.x,
-        y = _ref3.y;
-      if (_onPositionChangeEnd) {
-        _onPositionChangeEnd({
-          x: x,
-          y: y
-        });
-      }
-    },
-    onPositionChangeStart: function onPositionChangeStart(_ref4) {
-      var x = _ref4.x,
-        y = _ref4.y;
-      if (_onPositionChangeStart) {
-        _onPositionChangeStart({
-          x: x,
-          y: y
-        });
-      }
-    },
-    onOutsideClick: onOutsideClick,
-    initialPosition: initialPosition,
-    scale: scale
-  }, children);
-};
-
-(function (RangeSliderType) {
-  RangeSliderType["Slider"] = "rpgui-slider";
-  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
-})(exports.RangeSliderType || (exports.RangeSliderType = {}));
-var RangeSlider = function RangeSlider(_ref) {
-  var type = _ref.type,
-    valueMin = _ref.valueMin,
-    valueMax = _ref.valueMax,
-    width = _ref.width,
-    _onChange = _ref.onChange,
-    value = _ref.value;
-  var sliderId = uuid.v4();
-  var containerRef = React.useRef(null);
-  var _useState = React.useState(0),
-    left = _useState[0],
-    setLeft = _useState[1];
-  React.useEffect(function () {
-    var _containerRef$current;
-    var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
-    setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
-  }, [value, valueMin, valueMax]);
-  var typeClass = type === exports.RangeSliderType.GoldSlider ? 'golden' : '';
-  return React__default.createElement("div", {
-    style: {
-      width: width,
-      position: 'relative'
-    },
-    className: "rpgui-slider-container " + typeClass,
-    id: "rpgui-slider-" + sliderId,
-    ref: containerRef
-  }, React__default.createElement("div", {
-    style: {
-      pointerEvents: 'none'
     }
   }, React__default.createElement("div", {
-    className: "rpgui-slider-track " + typeClass
-  }), React__default.createElement("div", {
-    className: "rpgui-slider-left-edge " + typeClass
-  }), React__default.createElement("div", {
-    className: "rpgui-slider-right-edge " + typeClass
-  }), React__default.createElement("div", {
-    className: "rpgui-slider-thumb " + typeClass,
     style: {
-      left: left
+      width: '100%'
     }
-  })), React__default.createElement(Input$1, {
-    type: "range",
-    style: {
-      width: width
-    },
-    min: valueMin,
-    max: valueMax,
-    onChange: function onChange(e) {
-      return _onChange(Number(e.target.value));
-    },
-    value: value,
-    className: "rpgui-cursor-point"
-  }));
+  }, React__default.createElement(Title$3, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+    className: "golden"
+  })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
+    return React__default.createElement(RadioOptionsWrapper$1, {
+      key: index
+    }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React__default.createElement("div", null, React__default.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React__default.createElement("label", {
+      onPointerDown: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, option.name, " ", React__default.createElement("br", null), option.description)));
+  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: onClose
+  }, "Cancel"), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton
+  }, "Select")));
 };
-var Input$1 = /*#__PURE__*/styled.input.withConfig({
-  displayName: "RangeSlider__Input",
-  componentId: "sc-v8mte9-0"
-})(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Title",
+  componentId: "sc-gptoxp-0"
+})(["font-size:0.6rem;color:yellow !important;"]);
+var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "ItemSelector__Subtitle",
+  componentId: "sc-gptoxp-1"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioInputScroller",
+  componentId: "sc-gptoxp-2"
+})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
+var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__SpriteAtlasWrapper",
+  componentId: "sc-gptoxp-3"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioOptionsWrapper",
+  componentId: "sc-gptoxp-4"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__ButtonWrapper",
+  componentId: "sc-gptoxp-5"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
-  var quantity = _ref.quantity,
-    onConfirm = _ref.onConfirm,
-    onClose = _ref.onClose;
-  var _useState = React.useState(quantity),
-    value = _useState[0],
-    setValue = _useState[1];
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-      var closeSelector = function closeSelector(e) {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-      document.addEventListener('keydown', closeSelector);
-      return function () {
-        document.removeEventListener('keydown', closeSelector);
-      };
-    }
-    return function () {};
-  }, []);
-  return React__default.createElement(StyledContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    width: "25rem"
-  }, React__default.createElement(CloseButton$2, {
-    className: "container-close",
-    onPointerDown: onClose
-  }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
+var ListMenu = function ListMenu(_ref) {
+  var options = _ref.options,
+    onSelected = _ref.onSelected,
+    x = _ref.x,
+    y = _ref.y;
+  return React__default.createElement(Container$f, {
+    x: x,
+    y: y
+  }, React__default.createElement("ul", {
+    className: "rpgui-list-imp",
     style: {
-      width: '100%'
-    },
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      var numberValue = Number(value);
-      if (Number.isNaN(numberValue)) {
-        return;
-      }
-      onConfirm(Math.max(1, Math.min(quantity, numberValue)));
-    },
-    noValidate: true
-  }, React__default.createElement(StyledInput, {
-    innerRef: inputRef,
-    placeholder: "Enter quantity",
-    type: "number",
-    min: 1,
-    max: quantity,
-    value: value,
-    onChange: function onChange(e) {
-      if (Number(e.target.value) >= quantity) {
-        setValue(quantity);
-        return;
-      }
-      setValue(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
-      setValue(newValue);
+      overflow: 'hidden'
     }
-  }), React__default.createElement(RangeSlider, {
-    type: exports.RangeSliderType.Slider,
-    valueMin: 1,
-    valueMax: quantity,
-    width: "100%",
-    onChange: setValue,
-    value: value
-  }), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    type: "submit"
-  }, "Confirm")));
+  }, options.map(function (params, index) {
+    return React__default.createElement(ListElement$1, {
+      key: (params == null ? void 0 : params.id) || index,
+      onPointerDown: function onPointerDown() {
+        onSelected(params == null ? void 0 : params.id);
+      }
+    }, (params == null ? void 0 : params.text) || 'No text');
+  })));
 };
-var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
-  displayName: "ItemQuantitySelector__StyledContainer",
-  componentId: "sc-yfdtpn-0"
-})(["display:flex;flex-direction:column;align-items:center;"]);
-var StyledForm = /*#__PURE__*/styled.form.withConfig({
-  displayName: "ItemQuantitySelector__StyledForm",
-  componentId: "sc-yfdtpn-1"
-})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
-var StyledInput = /*#__PURE__*/styled(Input).withConfig({
-  displayName: "ItemQuantitySelector__StyledInput",
-  componentId: "sc-yfdtpn-2"
-})(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemQuantitySelector__CloseButton",
-  componentId: "sc-yfdtpn-3"
-})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
+var Container$f = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListMenu__Container",
+  componentId: "sc-i9097t-0"
+})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
+  return props.y || 0;
+}, function (props) {
+  return props.x || 0;
+}, uiFonts.size.xsmall);
+var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ListMenu__ListElement",
+  componentId: "sc-i9097t-1"
+})(["margin-right:0.5rem;"]);
 
-var ShortcutsSetter = function ShortcutsSetter(_ref) {
-  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
-    settingShortcutIndex = _ref.settingShortcutIndex,
-    shortcuts = _ref.shortcuts,
-    removeShortcut = _ref.removeShortcut,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG;
-  var getContent = function getContent(index) {
-    var _shortcuts$index, _shortcuts$index3;
-    if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === shared.ShortcutType.Item) {
-      var _shortcuts$index2;
-      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
-      if (!_payload) return null;
-      return React__default.createElement(SpriteFromAtlas, {
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: shared.getItemTextureKeyPath({
-          key: _payload.texturePath,
-          texturePath: _payload.texturePath,
-          stackQty: _payload.stackQty || 1,
-          isStackable: _payload.isStackable
-        }, atlasJSON),
-        width: 32,
-        height: 32,
-        imgScale: 1.6,
-        imgStyle: {
-          left: '5px'
-        }
-      });
+var MarketplaceRows = function MarketplaceRows(_ref) {
+  var atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    item = _ref.item,
+    itemPrice = _ref.itemPrice,
+    equipmentSet = _ref.equipmentSet,
+    scale = _ref.scale,
+    onHandleClick = _ref.onHandleClick;
+  return React__default.createElement(MarketPlaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(ItemInfoWrapper, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    scale: scale
+  }, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: shared.getItemTextureKeyPath({
+      key: item.key,
+      stackQty: item.stackQty || 1,
+      texturePath: item.texturePath,
+      isStackable: item.isStackable
+    }, atlasJSON),
+    imgScale: 2
+  }))), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.name)))), React__default.createElement(QuantityContainer, null, React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$1, null, React__default.createElement(Item$1, null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.rarity))))), React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: 'others/gold-coin-qty-4.png',
+    imgScale: 2
+  })), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: function onClick() {
+      return onHandleClick(item.name);
     }
-    var payload = (_shortcuts$index3 = shortcuts[index]) == null ? void 0 : _shortcuts$index3.payload;
-    return React__default.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
-      return word[0];
-    }));
-  };
-  return React__default.createElement(Container$i, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
-    id: "shortcuts_list"
-  }, Array.from({
-    length: 6
-  }).map(function (_, i) {
-    return React__default.createElement(Shortcut, {
-      key: i,
-      onPointerDown: function onPointerDown() {
-        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
-        removeShortcut(i);
-        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === shared.ShortcutType.None)) setSettingShortcutIndex(i);
-      },
-      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
-      isBeingSet: settingShortcutIndex === i,
-      id: "shortcutSetter_" + i
-    }, getContent(i));
-  })));
+  }, "Buy")));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__Container",
-  componentId: "sc-xuouuf-0"
-})(["p{margin:0;margin-left:0.5rem;}"]);
-var Shortcut = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ShortcutsSetter__Shortcut",
-  componentId: "sc-xuouuf-1"
-})(["width:2.6rem;height:2.6rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
-  var isBeingSet = _ref2.isBeingSet;
-  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
-}, uiColors.darkGray, uiColors.gray);
-var List = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShortcutsSetter__List",
-  componentId: "sc-xuouuf-2"
-})(["width:100%;display:flex;align-items:center;gap:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;box-sizing:border-box;margin:0 !important;"]);
+var MarketPlaceWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__MarketPlaceWrapper",
+  componentId: "sc-wmpr1o-0"
+})(["margin:auto;display:grid;grid-template-columns:35% 20% 20% 25%;&:hover{background-color:", ";}padding:0.5rem;p{font-size:0.8rem;}"], uiColors.darkGray);
+var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__ItemIconContainer",
+  componentId: "sc-wmpr1o-1"
+})(["display:flex;justify-content:flex-start;align-items:center;"]);
+var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__SpriteContainer",
+  componentId: "sc-wmpr1o-2"
+})(["position:relative;top:-0.5rem;left:0.5rem;"]);
+var Item$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MarketplaceRows__Item",
+  componentId: "sc-wmpr1o-3"
+})(["color:white;text-align:center;z-index:1;width:100%;"]);
+var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__TextOverlay",
+  componentId: "sc-wmpr1o-4"
+})(["width:100%;position:relative;"]);
+var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__QuantityContainer",
+  componentId: "sc-wmpr1o-5"
+})(["position:relative;display:flex;min-width:100px;justify-content:center;align-items:center;"]);
+var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__QuantityDisplay",
+  componentId: "sc-wmpr1o-6"
+})(["font-size:", ";"], uiFonts.size.small);
+var PriceValue = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__PriceValue",
+  componentId: "sc-wmpr1o-7"
+})(["margin-left:40px;"]);
+var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__ButtonContainer",
+  componentId: "sc-wmpr1o-8"
+})(["margin:auto;"]);
 
-var ItemContainer$1 = 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,
+var Marketplace = function Marketplace(_ref) {
+  var items = _ref.items,
     atlasIMG = _ref.atlasIMG,
-    _ref$disableContextMe = _ref.disableContextMenu,
-    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
-    onItemDragEnd = _ref.onItemDragEnd,
-    onItemDragStart = _ref.onItemDragStart,
-    onItemPlaceDrop = _ref.onItemPlaceDrop,
-    _onOutsideDrop = _ref.onOutsideDrop,
-    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
-    initialPosition = _ref.initialPosition,
-    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
+    atlasJSON = _ref.atlasJSON,
+    onClose = _ref.onClose,
+    optionsType = _ref.optionsType,
+    optionsRarity = _ref.optionsRarity,
+    optionsPrice = _ref.optionsPrice,
+    onChangeType = _ref.onChangeType,
+    onChangeRarity = _ref.onChangeRarity,
+    onChangeOrder = _ref.onChangeOrder,
+    onChangeNameInput = _ref.onChangeNameInput,
     scale = _ref.scale,
-    shortcuts = _ref.shortcuts,
-    setItemShortcut = _ref.setItemShortcut,
-    removeShortcut = _ref.removeShortcut,
     equipmentSet = _ref.equipmentSet,
-    isDepotSystem = _ref.isDepotSystem,
-    onPositionChangeEnd = _ref.onPositionChangeEnd,
-    onPositionChangeStart = _ref.onPositionChangeStart;
-  var _useState = React.useState({
-      isOpen: false,
-      maxQuantity: 1,
-      callback: function callback(_quantity) {}
-    }),
-    quantitySelect = _useState[0],
-    setQuantitySelect = _useState[1];
-  var _useState2 = React.useState(-1),
-    settingShortcutIndex = _useState2[0],
-    setSettingShortcutIndex = _useState2[1];
-  var handleSetShortcut = function handleSetShortcut(item, index) {
-    if (item.type === shared.ItemType.Consumable || item.type === shared.ItemType.Tool) {
-      setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
-    }
-  };
-  var onRenderSlots = function onRenderSlots() {
-    var slots = [];
-    for (var i = 0; i < itemContainer.slotQty; i++) {
-      var _itemContainer$slots;
-      slots.push(React__default.createElement(ItemSlot, {
-        isContextMenuDisabled: disableContextMenu,
-        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);
-        },
-        onPointerDown: function onPointerDown(itemType, containerType, item) {
-          if (settingShortcutIndex !== -1) {
-            setSettingShortcutIndex(-1);
-            handleSetShortcut(item, settingShortcutIndex);
-          } else if (onItemClick) onItemClick(item, itemType, containerType);
-        },
-        onSelected: function onSelected(optionId, item) {
-          if (_onSelected) _onSelected(optionId, item);
-        },
-        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
-          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
-        },
-        onDragEnd: function onDragEnd(quantity) {
-          if (onItemDragEnd) onItemDragEnd(quantity);
-        },
-        dragScale: scale,
-        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
-        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
-          setQuantitySelect({
-            isOpen: true,
-            maxQuantity: maxQuantity,
-            callback: callback
-          });
-        },
-        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
-          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
-        },
-        onOutsideDrop: function onOutsideDrop(item, position) {
-          if (_onOutsideDrop) _onOutsideDrop(item, position);
-        },
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        isSelectingShortcut: settingShortcutIndex !== -1,
-        equipmentSet: equipmentSet,
-        setItemShortcut: type === shared.ItemContainerType.Inventory ? handleSetShortcut : undefined,
-        isDepotSystem: isDepotSystem
-      }));
-    }
-    return slots;
-  };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
-    title: itemContainer.name || 'Container',
-    onClose: onClose,
-    initialPosition: initialPosition,
-    scale: scale,
-    onPositionChangeEnd: onPositionChangeEnd,
-    onPositionChangeStart: onPositionChangeStart
-  }, type === shared.ItemContainerType.Inventory && shortcuts && removeShortcut && React__default.createElement(ShortcutsSetter, {
-    setSettingShortcutIndex: setSettingShortcutIndex,
-    settingShortcutIndex: settingShortcutIndex,
-    shortcuts: shortcuts,
-    removeShortcut: removeShortcut,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
-  }), React__default.createElement(ItemsContainer, {
-    className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
-    quantity: quantitySelect.maxQuantity,
-    onConfirm: function onConfirm(quantity) {
-      quantitySelect.callback(quantity);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
+    onHandleClick = _ref.onHandleClick;
+  return React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
     },
-    onClose: function onClose() {
-      quantitySelect.callback(-1);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    }
+    width: "800px",
+    cancelDrag: "#MarketContainer",
+    scale: scale
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(InputWrapper, null, React__default.createElement("p", null, " Search By Name"), React__default.createElement(Input, {
+    onChange: onChangeNameInput,
+    placeholder: 'Search...'
+  })), React__default.createElement(WrapperContainer, null, React__default.createElement(StyledDropdown, {
+    options: optionsType,
+    onChange: onChangeType,
+    width: '220px'
+  }), React__default.createElement(StyledDropdown, {
+    options: optionsRarity,
+    onChange: onChangeRarity,
+    width: '220px'
+  }), React__default.createElement(StyledDropdown, {
+    options: optionsPrice,
+    onChange: onChangeOrder,
+    width: '220px'
+  })), React__default.createElement(ItemComponentScrollWrapper, {
+    id: "MarketContainer"
+  }, items == null ? void 0 : items.map(function (item, index) {
+    return React__default.createElement(MarketplaceRows, {
+      key: item.key + "_" + index,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      item: item,
+      itemPrice: 10,
+      equipmentSet: equipmentSet,
+      onHandleClick: onHandleClick
+    });
   }))));
 };
-var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__ItemsContainer",
-  componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;"]);
-var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__QuantitySelectorContainer",
-  componentId: "sc-15y5p9l-1"
-})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
+var InputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__InputWrapper",
+  componentId: "sc-h904b1-0"
+})(["width:95%;display:flex;justify-content:flex-start;align-items:center;margin:auto;margin-bottom:10px;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
+var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__WrapperContainer",
+  componentId: "sc-h904b1-1"
+})(["display:grid;grid-template-columns:30% 30% 30%;justify-content:space-between;width:90%;margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
+var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__ItemComponentScrollWrapper",
+  componentId: "sc-h904b1-2"
+})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;"]);
+var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+  displayName: "Marketplace__StyledDropdown",
+  componentId: "sc-h904b1-3"
+})(["margin:3px !important;width:170px !important;"]);
 
-var ItemSelector = function ItemSelector(_ref) {
-  var atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    options = _ref.options,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect;
-  var _useState = React.useState(),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleClick = function handleClick() {
-    var element = document.querySelector("input[name='test']:checked");
-    var elementValue = element.value;
-    setSelectedValue(elementValue);
+var img$5 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAP1BMVEUAAAA7FyVxQTsUEBPj5v////+5v/tCJDOOUlIiHBr1oJfptaO6dWr61rhzFy1bMTjoanMUNGQoXMQkn97+88DQ3IhAAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAAHdElNRQfmAw4VOBC7c5LYAAABM0lEQVQ4y3XRi5KDIAwFUAUkbrBgpP//rZsHVHQ009qZ3tPboNN0zmwzvcw8O5sX4y0NOg/Et3jRCXF+ziULorjkOQ9gE24dvuUAzq08DiCO4pe3WN7zCP56vmpubBReQYC11YPS86ySxxCsAABTSgjb5m4g8nfbxvFHBkH2OEEvAItVuCuIsgGgl+Gcr7kDXxhEAx55A2SQEEeQeZwUaIP8Tbo05B0RFPhItAjgj1w6cDnhLluDj+Egkh3pCCP4pKQAw1IPO0W9Nti5gW9RP2dKA3BZd2Dw+baYX+Nt4GM00O4S3kEpF6Alb2Bv4LeC3kkGfAW0/p0RPoJVKr63ghHsKuRh5DIUKOAlGOwrtt9fQekAEfmhZslHUDoglB0zjfkJigN7UnTQQ4GBWomoVhEN/AOPSBh38gy+fwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xNFQyMTo1NTo1MSswMDowMJcc0eEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTRUMjE6NTU6NTErMDA6MDDmQWldAAAAAElFTkSuQmCC';
+
+var img$6 = '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';
+
+(function (ImgSide) {
+  ImgSide["right"] = "right";
+  ImgSide["left"] = "left";
+})(exports.ImgSide || (exports.ImgSide = {}));
+var NPCMultiDialog = function NPCMultiDialog(_ref) {
+  var _textAndTypeArray$sli;
+  var _onClose = _ref.onClose,
+    textAndTypeArray = _ref.textAndTypeArray;
+  var _useState = React.useState(false),
+    showGoNextIndicator = _useState[0],
+    setShowGoNextIndicator = _useState[1];
+  var _useState2 = React.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();
+      }
+    }
   };
   React.useEffect(function () {
-    if (selectedValue) {
-      onSelect(selectedValue);
-    }
-  }, [selectedValue]);
-  return React__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    width: "500px",
-    cancelDrag: ".equipment-container-body .arrow-selector",
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [slide]);
+  return React__default.createElement(RPGUIContainer, {
+    type: exports.RPGUIContainerTypes.FramedGold,
+    width: '50%',
+    height: '180px'
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer, {
+    flex: '70%'
+  }, React__default.createElement(NPCDialogText, {
+    onStartStep: function onStartStep() {
+      return setShowGoNextIndicator(false);
+    },
+    onEndStep: function onEndStep() {
+      return setShowGoNextIndicator(true);
+    },
+    text: textAndTypeArray[slide].text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
       }
     }
-  }, React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React__default.createElement(Title$3, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
-    className: "golden"
-  })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
-    return React__default.createElement(RadioOptionsWrapper$1, {
-      key: index
-    }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.imageKey,
-      imgScale: 3
-    })), React__default.createElement("div", null, React__default.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test"
-    }), React__default.createElement("label", {
-      onPointerDown: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
+  })), React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
+    src: textAndTypeArray[slide].imagePath || img$5
+  })), showGoNextIndicator && React__default.createElement(PressSpaceIndicator, {
+    right: '10.5rem',
+    src: img$6
+  })), textAndTypeArray[slide].imageSide === 'left' && React__default.createElement(React__default.Fragment, null, React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
+    src: textAndTypeArray[slide].imagePath || img$5
+  })), React__default.createElement(TextContainer, {
+    flex: '70%'
+  }, React__default.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();
       }
-    }, option.name, " ", React__default.createElement("br", null), option.description)));
-  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "Cancel"), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton
-  }, "Select")));
-};
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Title",
-  componentId: "sc-gptoxp-0"
-})(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Subtitle",
-  componentId: "sc-gptoxp-1"
-})(["font-size:0.4rem;color:yellow !important;"]);
-var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__RadioInputScroller",
-  componentId: "sc-gptoxp-2"
-})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
-var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__SpriteAtlasWrapper",
-  componentId: "sc-gptoxp-3"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__RadioOptionsWrapper",
-  componentId: "sc-gptoxp-4"
-})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__ButtonWrapper",
-  componentId: "sc-gptoxp-5"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
-
-var ListMenu = function ListMenu(_ref) {
-  var options = _ref.options,
-    onSelected = _ref.onSelected,
-    x = _ref.x,
-    y = _ref.y;
-  return React__default.createElement(Container$j, {
-    x: x,
-    y: y
-  }, React__default.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
     }
-  }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$1, {
-      key: (params == null ? void 0 : params.id) || index,
-      onPointerDown: function onPointerDown() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
-  })));
+  })), showGoNextIndicator && React__default.createElement(PressSpaceIndicator, {
+    right: '1rem',
+    src: img$6
+  }))), ")"));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListMenu__Container",
-  componentId: "sc-i9097t-0"
-})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
-  return props.y || 0;
-}, function (props) {
-  return props.x || 0;
-}, uiFonts.size.xsmall);
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ListMenu__ListElement",
-  componentId: "sc-i9097t-1"
-})(["margin-right:0.5rem;"]);
+var Container$g = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__Container",
+  componentId: "sc-rvu5wg-0"
+})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
+var TextContainer = /*#__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 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__ThumbnailContainer",
+  componentId: "sc-rvu5wg-2"
+})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
+var NPCThumbnail = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCMultiDialog__NPCThumbnail",
+  componentId: "sc-rvu5wg-3"
+})(["image-rendering:pixelated;height:128px;width:128px;"]);
+var PressSpaceIndicator = /*#__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 MarketplaceRows = function MarketplaceRows(_ref) {
-  var atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    item = _ref.item,
-    itemPrice = _ref.itemPrice,
-    equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale,
-    onHandleClick = _ref.onHandleClick;
-  return React__default.createElement(MarketPlaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(ItemInfoWrapper, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    scale: scale
-  }, React__default.createElement(SpriteFromAtlas, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    spriteKey: shared.getItemTextureKeyPath({
-      key: item.key,
-      stackQty: item.stackQty || 1,
-      texturePath: item.texturePath,
-      isStackable: item.isStackable
-    }, atlasJSON),
-    imgScale: 2
-  }))), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, item.name)))), React__default.createElement(QuantityContainer, null, React__default.createElement(QuantityDisplay, null, React__default.createElement(TextOverlay$1, null, React__default.createElement(Item$1, null, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, item.rarity))))), React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer, null, React__default.createElement(SpriteFromAtlas, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    spriteKey: 'others/gold-coin-qty-4.png',
-    imgScale: 2
-  })), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onClick: function onClick() {
-      return onHandleClick(item.name);
-    }
-  }, "Buy")));
+//@ts-ignore
+var useEventListener = function useEventListener(type, handler, el) {
+  if (el === void 0) {
+    el = window;
+  }
+  var savedHandler = React__default.useRef();
+  React__default.useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  React__default.useEffect(function () {
+    //@ts-ignore
+    var listener = function listener(e) {
+      return savedHandler.current(e);
+    };
+    el.addEventListener(type, listener);
+    return function () {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
 };
-var MarketPlaceWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__MarketPlaceWrapper",
-  componentId: "sc-wmpr1o-0"
-})(["margin:auto;display:grid;grid-template-columns:35% 20% 20% 25%;&:hover{background-color:", ";}padding:0.5rem;p{font-size:0.8rem;}"], uiColors.darkGray);
-var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__ItemIconContainer",
-  componentId: "sc-wmpr1o-1"
-})(["display:flex;justify-content:flex-start;align-items:center;"]);
-var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__SpriteContainer",
-  componentId: "sc-wmpr1o-2"
-})(["position:relative;top:-0.5rem;left:0.5rem;"]);
-var Item$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MarketplaceRows__Item",
-  componentId: "sc-wmpr1o-3"
-})(["color:white;text-align:center;z-index:1;width:100%;"]);
-var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__TextOverlay",
-  componentId: "sc-wmpr1o-4"
-})(["width:100%;position:relative;"]);
-var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__QuantityContainer",
-  componentId: "sc-wmpr1o-5"
-})(["position:relative;display:flex;min-width:100px;justify-content:center;align-items:center;"]);
-var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__QuantityDisplay",
-  componentId: "sc-wmpr1o-6"
-})(["font-size:", ";"], uiFonts.size.small);
-var PriceValue = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-7"
-})(["margin-left:40px;"]);
-var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-8"
-})(["margin:auto;"]);
 
-var Marketplace = function Marketplace(_ref) {
-  var items = _ref.items,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    onClose = _ref.onClose,
-    optionsType = _ref.optionsType,
-    optionsRarity = _ref.optionsRarity,
-    optionsPrice = _ref.optionsPrice,
-    onChangeType = _ref.onChangeType,
-    onChangeRarity = _ref.onChangeRarity,
-    onChangeOrder = _ref.onChangeOrder,
-    onChangeNameInput = _ref.onChangeNameInput,
-    scale = _ref.scale,
-    equipmentSet = _ref.equipmentSet,
-    onHandleClick = _ref.onHandleClick;
-  return React__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#MarketContainer",
-    scale: scale
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(InputWrapper, null, React__default.createElement("p", null, " Search By Name"), React__default.createElement(Input, {
-    onChange: onChangeNameInput,
-    placeholder: 'Search...'
-  })), React__default.createElement(WrapperContainer, null, React__default.createElement(StyledDropdown, {
-    options: optionsType,
-    onChange: onChangeType,
-    width: '220px'
-  }), React__default.createElement(StyledDropdown, {
-    options: optionsRarity,
-    onChange: onChangeRarity,
-    width: '220px'
-  }), React__default.createElement(StyledDropdown, {
-    options: optionsPrice,
-    onChange: onChangeOrder,
-    width: '220px'
-  })), React__default.createElement(ItemComponentScrollWrapper, {
-    id: "MarketContainer"
-  }, items == null ? void 0 : items.map(function (item, index) {
-    return React__default.createElement(MarketplaceRows, {
-      key: item.key + "_" + index,
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      item: item,
-      itemPrice: 10,
-      equipmentSet: equipmentSet,
-      onHandleClick: onHandleClick
-    });
-  }))));
+var DynamicText = function DynamicText(_ref) {
+  var text = _ref.text,
+    onFinish = _ref.onFinish,
+    onStart = _ref.onStart;
+  var _useState = React.useState(''),
+    textState = _useState[0],
+    setTextState = _useState[1];
+  React.useEffect(function () {
+    var i = 0;
+    var interval = setInterval(function () {
+      // on every interval, show one more character
+      if (i === 0) {
+        if (onStart) {
+          onStart();
+        }
+      }
+      if (i < text.length) {
+        setTextState(text.substring(0, i + 1));
+        i++;
+      } else {
+        clearInterval(interval);
+        if (onFinish) {
+          onFinish();
+        }
+      }
+    }, 50);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [text]);
+  return React__default.createElement(TextContainer$1, null, textState);
 };
-var InputWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__InputWrapper",
-  componentId: "sc-h904b1-0"
-})(["width:95%;display:flex;justify-content:flex-start;align-items:center;margin:auto;margin-bottom:10px;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
-var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__WrapperContainer",
-  componentId: "sc-h904b1-1"
-})(["display:grid;grid-template-columns:30% 30% 30%;justify-content:space-between;width:90%;margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
-var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__ItemComponentScrollWrapper",
-  componentId: "sc-h904b1-2"
-})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;"]);
-var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
-  displayName: "Marketplace__StyledDropdown",
-  componentId: "sc-h904b1-3"
-})(["margin:3px !important;width:170px !important;"]);
+var TextContainer$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "DynamicText__TextContainer",
+  componentId: "sc-1ggl9nd-0"
+})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
+
+var QuestionDialog = function QuestionDialog(_ref) {
+  var questions = _ref.questions,
+    answers = _ref.answers,
+    onClose = _ref.onClose;
+  var _useState = React.useState(questions[0]),
+    currentQuestion = _useState[0],
+    setCurrentQuestion = _useState[1];
+  var _useState2 = React.useState(false),
+    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 = React.useState(onGetFirstAnswer()),
+    currentAnswer = _useState3[0],
+    setCurrentAnswer = _useState3[1];
+  React.useEffect(function () {
+    setCurrentAnswer(onGetFirstAnswer());
+  }, [currentQuestion]);
+  var onGetAnswers = function onGetAnswers(answerIds) {
+    return answerIds.map(function (answerId) {
+      return answers.find(function (answer) {
+        return answer.id === answerId;
+      });
+    });
+  };
+  var onKeyPress = function onKeyPress(e) {
+    switch (e.key) {
+      case 'ArrowDown':
+        // select next answer, if any.
+        // if no next answer, select first answer
+        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
+        //   (answer) => answer?.id === currentAnswer!.id + 1
+        // );
+        var nextAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
+          return (answer == null ? void 0 : answer.id) === currentAnswer.id + 1;
+        });
+        var nextAnswerID = currentQuestion.answerIds[nextAnswerIndex];
+        var nextAnswer = onGetAnswers(currentQuestion.answerIds).find(function (answer) {
+          return (answer == null ? void 0 : answer.id) === nextAnswerID;
+        });
+        setCurrentAnswer(nextAnswer || onGetFirstAnswer());
+        break;
+      case 'ArrowUp':
+        // select previous answer, if any.
+        // if no previous answer, select last answer
+        var previousAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
+          return (answer == null ? void 0 : answer.id) === currentAnswer.id - 1;
+        });
+        var previousAnswerID = currentQuestion.answerIds && currentQuestion.answerIds[previousAnswerIndex];
+        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;
+        } else {
+          setCurrentQuestion(questions.find(function (question) {
+            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) {
+        return question.id === answer.nextQuestionId;
+      }));
+    } else {
+      // else, finish dialog!
+      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__default.createElement(AnswerRow, {
+          key: "answer_" + answer.id
+        }, React__default.createElement(AnswerSelectedIcon, {
+          color: selectedColor
+        }, isSelected ? 'X' : null), React__default.createElement(Answer, {
+          key: answer.id,
+          onPointerDown: function onPointerDown() {
+            return onAnswerClick(answer);
+          },
+          color: selectedColor
+        }, answer.text));
+      }
+      return null;
+    });
+  };
+  return React__default.createElement(Container$h, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+    text: currentQuestion.text,
+    onStart: function onStart() {
+      return setCanShowAnswers(false);
+    },
+    onFinish: function onFinish() {
+      return setCanShowAnswers(true);
+    }
+  })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
+};
+var Container$h = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__Container",
+  componentId: "sc-bxc5u0-0"
+})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
+var QuestionContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__QuestionContainer",
+  componentId: "sc-bxc5u0-1"
+})(["flex:100%;width:100%;"]);
+var AnswersContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__AnswersContainer",
+  componentId: "sc-bxc5u0-2"
+})(["flex:100%;"]);
+var Answer = /*#__PURE__*/styled.p.withConfig({
+  displayName: "QuestionDialog__Answer",
+  componentId: "sc-bxc5u0-3"
+})(["flex:auto;color:", " !important;font-size:0.65rem !important;background:inherit;border:none;"], function (props) {
+  return props.color;
+});
+var AnswerSelectedIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestionDialog__AnswerSelectedIcon",
+  componentId: "sc-bxc5u0-4"
+})(["flex:5% 0 0;color:", " !important;"], function (props) {
+  return props.color;
+});
+var AnswerRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__AnswerRow",
+  componentId: "sc-bxc5u0-5"
+})(["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 ProgressBar = function ProgressBar(_ref) {
   var max = _ref.max,
@@ -15659,7 +15562,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$k, {
+  return React__default.createElement(Container$i, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -15688,7 +15591,7 @@ var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -15699,7 +15602,7 @@ var Container$k = /*#__PURE__*/styled.div.withConfig({
   return props.style;
 });
 
-var img$8 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAEZ0FNQQAAsY58+1GTAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAHcSURBVHja7Ji/agJBEId/K/cCdoKFFjZCbGxCekmVOunzCil8hhS+gr3WVmIvKbQxIILFKQjXhCPkASZN5tjd27ud9SRYOKV3u/ftN7P/VESEa4gariRuIHZEkpeUUkYhEZEKbeNrG0mJJ/MlOq0m9odTKRg/W+2OaDfqRh9xkmbPbaBIMrLJfInB/R0AoN2o4+v7B3GSAkAOzAXAwW0XH59QSpEOIzLCEHanuq31Zot+r1sIYcdwNDZgahIblww2GTxrXDb02B9OAIB+r4tOqymCYXtspRQkxMZ6s82lK8SG14jPBnccYmM6W6Df62ZWSkGkNjgt59p4eXyAt1h9NvSoasMJcs5MqWqj0IjEBncuNVdmIwcSYmN/OIlSUjZTnCD2Ui7pXLqK+tKSgTCEtOikBcrAvrQAQE2HkIwwTlJj2l7CBgBERKSUUrTaHQ3lcZI6t3G2IZ0pEhvZ7ssww9E4Wym5YUi6qoQioqDZwmB6emxDtg3ej97fXv0nNN64OHQrutbpbGG8o//2/DRwpsyXFsOI9DDjCv0j+oCkNowakR6iXSks+rjURtDhWS9q+1DtMiL5eC41lar9D8w2pQMVrR1nGym7p9hA/25EcrESXchu/wbcQDzxOwDLF0pIXBCe1wAAAABJRU5ErkJggg==';
+var img$7 = 'data:image/png;base64,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';
 
 var QuestInfo = function QuestInfo(_ref) {
   var quests = _ref.quests,
@@ -15743,7 +15646,7 @@ var QuestInfo = function QuestInfo(_ref) {
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React__default.createElement(Title$4, null, React__default.createElement(Thumbnail, {
-    src: quests[currentIndex].thumbnail || img$8
+    src: quests[currentIndex].thumbnail || img$7
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(Content, null, React__default.createElement("p", null, quests[currentIndex].description)), React__default.createElement(QuestColumn, {
@@ -15762,7 +15665,7 @@ var QuestInfo = function QuestInfo(_ref) {
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React__default.createElement(Title$4, null, React__default.createElement(Thumbnail, {
-    src: quests[0].thumbnail || img$8
+    src: quests[0].thumbnail || img$7
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(Content, null, React__default.createElement("p", null, quests[0].description)), React__default.createElement(QuestColumn, {
@@ -15866,7 +15769,7 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
-var InputRadio = function InputRadio(_ref) {
+var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
     onChange = _ref.onChange;
@@ -15953,9 +15856,7 @@ var Shortcuts = function Shortcuts(_ref) {
           }
         });
       }
-      var totalQty = itemsFromEquipment.reduce(function (acc, item) {
-        return acc + ((item == null ? void 0 : item.stackQty) || 1);
-      }, 0);
+      var totalQty = _payload && inventory ? countItemFromInventory(_payload.key, inventory) : 0;
       return React__default.createElement(StyledShortcut$1, {
         key: i,
         onPointerDown: onShortcutCast.bind(null, i),
@@ -16014,7 +15915,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React__default.createElement(Container$l, {
+  return React__default.createElement(Container$j, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -16023,7 +15924,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -16250,13 +16151,13 @@ var Spell = function Spell(_ref) {
     manaCost = _ref.manaCost,
     charMana = _ref.charMana,
     charMagicLevel = _ref.charMagicLevel,
-    onPointerDown = _ref.onPointerDown,
+    onPointerUp = _ref.onPointerUp,
     isSettingShortcut = _ref.isSettingShortcut,
     minMagicLevelRequired = _ref.minMagicLevelRequired;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React__default.createElement(Container$m, {
+  return React__default.createElement(Container$k, {
     disabled: disabled,
-    onPointerDown: onPointerDown == null ? void 0 : onPointerDown.bind(null, spellKey),
+    onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
   }, disabled && React__default.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, magicWords.split(' ').map(function (word) {
@@ -16267,7 +16168,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost)));
 };
-var Container$m = /*#__PURE__*/styled.button.withConfig({
+var Container$k = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;height:5rem;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -16354,7 +16255,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$n, null, React__default.createElement(Title$7, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$l, null, React__default.createElement(Title$7, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -16376,7 +16277,7 @@ var Spellbook = function Spellbook(_ref) {
     }, React__default.createElement(Spell, Object.assign({
       charMana: mana,
       charMagicLevel: magicLevel,
-      onPointerDown: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
+      onPointerUp: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
       spellKey: spell.key,
       isSettingShortcut: settingShortcutIndex !== -1
     }, spell)));
@@ -16386,7 +16287,7 @@ var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -16400,16 +16301,16 @@ var TextArea = function TextArea(_ref) {
   return React__default.createElement("textarea", Object.assign({}, props));
 };
 
-var img$9 = 'data:image/gif;base64,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';
+var img$8 = 'data:image/gif;base64,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';
 
-var img$a = 'data:image/gif;base64,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';
+var img$9 = 'data:image/gif;base64,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';
 
-var img$b = 'data:image/gif;base64,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';
+var img$a = 'data:image/gif;base64,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';
 
 var DayNightPeriod = function DayNightPeriod(_ref) {
   var _periodOfDaySrcFiles;
   var periodOfDay = _ref.periodOfDay;
-  var periodOfDaySrcFiles = (_periodOfDaySrcFiles = {}, _periodOfDaySrcFiles[shared.PeriodOfDay.Morning] = img$a, _periodOfDaySrcFiles[shared.PeriodOfDay.Afternoon] = img$9, _periodOfDaySrcFiles[shared.PeriodOfDay.Night] = img$b, _periodOfDaySrcFiles);
+  var periodOfDaySrcFiles = (_periodOfDaySrcFiles = {}, _periodOfDaySrcFiles[shared.PeriodOfDay.Morning] = img$9, _periodOfDaySrcFiles[shared.PeriodOfDay.Afternoon] = img$8, _periodOfDaySrcFiles[shared.PeriodOfDay.Night] = img$a, _periodOfDaySrcFiles);
   return React__default.createElement(GifContainer, null, React__default.createElement("img", {
     src: periodOfDaySrcFiles[periodOfDay]
   }));
@@ -16419,7 +16320,7 @@ var GifContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10t97fw-0"
 })(["width:100%;img{width:67%;}"]);
 
-var img$c = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAABHCAYAAAA0qHhdAAAAAXNSR0IArs4c6QAABGRJREFUeJztnb9PGzEUx7+JMjC0Uge6tVsVdTghQP0D2qgjzGz8D8woE2LO/5CNOcwlU9WJRCgDYmWJRAYkFgak6wDv5HPsO9/P8J79WUhicr7nzz3bOV8uHbRPXOXN2x++1LUfYnh4uu8AQK+FulLy7hbHxn96vrh22tjW0b7xPVtH+87bkMbnj1/jh6f7TqfBOmKgurwy6MJ10VRuKqNylwMl7wBy3U5WuetBOhg9om6ZSRaqEtvImJ2zRfL4/GA3eXy494LJzNwBmcpc//9w7wUAMJn1ktdt5bbnaj228qw6VeqWGbctUEXNxn40Fj+2/jn5lHpel8xUd+oqcedsUajum2HkNHEiqf1oDAD4/e1HkWrYMF8uE6GTWQ+j6aryBCh2lVhUXt77bXJpP2i/+tE41e1y5uo2W1cVmfHd4rhxiXnbdZEqReiv76/jpE1q2YbOFNmUwDxsYreO9lkLvbrtJSLp+Xy5xN9/g8TBYPSIboltv0uRWXU/X1zjbnGM08t527tUC7aM1B0UbXiryE1KNGHKUu4ZqjKarpLMpAlQkcxkIxIw7xP3DLVBnzldZbISSUgXqvtwkclSJCFNqDpu0mdqOkOUJ5O1SEKSUHVWWyQzRYgkJAml7KTMzBszRYkkJAhVu1ny49rNpuAskuAaw9VtL/d0nikwY1ZybQQb+udQ+gzKZbXFtGqiq3Y63yoR6m770Rg3wyi1gK1iel1dQNbLqazsX9M2dKib1bPNi6wkbNl5M4w2tUulGIwe8fB031nrhH0RCbzGpgrVJxSEaYXfdoWCrdxE1lUNtnJ9+6PpKrmgSxUVm45IyTIB8zncnbPF2th58nMbo+kq9zUX8t5XpC4SCQSZVpkovzy4MWiHvRRJSBFaZj0z8E6xyvQlKwE5sYbMFEQXlvHSd97apNL3YtomZKYgjDKljCFFkBBzyExBBJmCCDIFEWQKIsgURJApiCBTEEGmILqA26q4b3Bsk5CZgjDKdL1/gCQkxJzI5NitNAXXtugC6HC5NL9N3tqE1cn3MGYKIiVT7V4kjCGuqLFy7WIBw61jOAdTFikxp66bPT/YXbsnm4RF2yz0Hmgy67EcLwHDmCnlKC0D99hVmcmslntQZaCYuWYlYPgWmOkeOaeXc5bB5XF+sLs2yeMs05iC+rh5uBfF0sbO17EyHSf3HkkfMzunl3P2QZWB88SHsO246JmtpBmsSuYZoMmsJ+5Egn6CQFIvlHUkrk2GKFO5ZiiJ1AVKyEogPwDj7BbgN8M1zVwBOSIBtyDYC/VBJOAeCFuhvogEigXDTqhPIoESd4LmItQ3kUC5oKxCgc1LtUkEZIsEKvx6wnsU6rNIoFpwmUKJpsVmCVT2ARAuEqgeoJNQoH6pLhLf6gU8EAnUE2QMoPDPSxSV6ypP2T499EIkUG+gzlnaND5lo0pjv5/Ztljt2l/vRALNBl2q+y2Kj92pjTYaIDXWVZVruPree4nEJhqi6ppokGfhP6xr60VVr5O+AAAAAElFTkSuQmCC';
+var img$b = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAABHCAYAAAA0qHhdAAAAAXNSR0IArs4c6QAABGRJREFUeJztnb9PGzEUx7+JMjC0Uge6tVsVdTghQP0D2qgjzGz8D8woE2LO/5CNOcwlU9WJRCgDYmWJRAYkFgak6wDv5HPsO9/P8J79WUhicr7nzz3bOV8uHbRPXOXN2x++1LUfYnh4uu8AQK+FulLy7hbHxn96vrh22tjW0b7xPVtH+87bkMbnj1/jh6f7TqfBOmKgurwy6MJ10VRuKqNylwMl7wBy3U5WuetBOhg9om6ZSRaqEtvImJ2zRfL4/GA3eXy494LJzNwBmcpc//9w7wUAMJn1ktdt5bbnaj228qw6VeqWGbctUEXNxn40Fj+2/jn5lHpel8xUd+oqcedsUajum2HkNHEiqf1oDAD4/e1HkWrYMF8uE6GTWQ+j6aryBCh2lVhUXt77bXJpP2i/+tE41e1y5uo2W1cVmfHd4rhxiXnbdZEqReiv76/jpE1q2YbOFNmUwDxsYreO9lkLvbrtJSLp+Xy5xN9/g8TBYPSIboltv0uRWXU/X1zjbnGM08t527tUC7aM1B0UbXiryE1KNGHKUu4ZqjKarpLMpAlQkcxkIxIw7xP3DLVBnzldZbISSUgXqvtwkclSJCFNqDpu0mdqOkOUJ5O1SEKSUHVWWyQzRYgkJAml7KTMzBszRYkkJAhVu1ny49rNpuAskuAaw9VtL/d0nikwY1ZybQQb+udQ+gzKZbXFtGqiq3Y63yoR6m770Rg3wyi1gK1iel1dQNbLqazsX9M2dKib1bPNi6wkbNl5M4w2tUulGIwe8fB031nrhH0RCbzGpgrVJxSEaYXfdoWCrdxE1lUNtnJ9+6PpKrmgSxUVm45IyTIB8zncnbPF2th58nMbo+kq9zUX8t5XpC4SCQSZVpkovzy4MWiHvRRJSBFaZj0z8E6xyvQlKwE5sYbMFEQXlvHSd97apNL3YtomZKYgjDKljCFFkBBzyExBBJmCCDIFEWQKIsgURJApiCBTEEGmILqA26q4b3Bsk5CZgjDKdL1/gCQkxJzI5NitNAXXtugC6HC5NL9N3tqE1cn3MGYKIiVT7V4kjCGuqLFy7WIBw61jOAdTFikxp66bPT/YXbsnm4RF2yz0Hmgy67EcLwHDmCnlKC0D99hVmcmslntQZaCYuWYlYPgWmOkeOaeXc5bB5XF+sLs2yeMs05iC+rh5uBfF0sbO17EyHSf3HkkfMzunl3P2QZWB88SHsO246JmtpBmsSuYZoMmsJ+5Egn6CQFIvlHUkrk2GKFO5ZiiJ1AVKyEogPwDj7BbgN8M1zVwBOSIBtyDYC/VBJOAeCFuhvogEigXDTqhPIoESd4LmItQ3kUC5oKxCgc1LtUkEZIsEKvx6wnsU6rNIoFpwmUKJpsVmCVT2ARAuEqgeoJNQoH6pLhLf6gU8EAnUE2QMoPDPSxSV6ypP2T499EIkUG+gzlnaND5lo0pjv5/Ztljt2l/vRALNBl2q+y2Kj92pjTYaIDXWVZVruPree4nEJhqi6ppokGfhP6xr60VVr5O+AAAAAElFTkSuQmCC';
 
 var TimeWidget = function TimeWidget(_ref) {
   var onClose = _ref.onClose,
@@ -16437,7 +16338,7 @@ var TimeWidget = function TimeWidget(_ref) {
 var WidgetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__WidgetContainer",
   componentId: "sc-1ja236h-0"
-})(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;height:100px;"], img$c);
+})(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;height:100px;"], img$b);
 var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
@@ -16687,17 +16588,230 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$o, {
+  return React__default.createElement(Container$m, {
     maxLines: maxLines
   }, children);
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
   return props.maxLines;
 });
 
+var IS_MOBILE_OR_TABLET = /*#__PURE__*/shared.isMobileOrTablet();
+
+var chunkString = function chunkString(str, length) {
+  return str.match(new RegExp('.{1,' + length + '}', 'g'));
+};
+
+var img$c = 'data:image/gif;base64,R0lGODlhEAAQAPIAAAAAABQYLiw1TUBJc2hvmQAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAM9CLrc/lCFGSKYJJP5AhlguDnBMIVgxXgmJapSSp3mKs/pKrT0IMCXUk+2Cgh2oSOnaDz+lswZpSOFUq2KBAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAIzhI+py90Bg4OjDrjCELxfFQhQx0mIJkaeaYRp5LJADMdnqXbyOJLYTdKBejjZoRaZJBMFACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIfkEARQAAAAsAAAAABAAEAAAAjKEj6nL7Y+CDE6OO+QKQ/ifKYEgfR4VddPohQe7lmR0xidNTib65uacYP2AQWGuMlEUAAA7';
+
+var NPCDialogText = function NPCDialogText(_ref) {
+  var text = _ref.text,
+    onClose = _ref.onClose,
+    onEndStep = _ref.onEndStep,
+    onStartStep = _ref.onStartStep,
+    type = _ref.type;
+  var windowSize = React.useRef([window.innerWidth, window.innerHeight]);
+  function maxCharacters(width) {
+    // Set the font size to 16 pixels
+    var fontSize = 11.2;
+    // Calculate the number of characters that can fit in one line
+    var charactersPerLine = Math.floor(width / 2 / fontSize);
+    // Calculate the number of lines that can fit in the div
+    var linesPerDiv = Math.floor(180 / fontSize);
+    // Calculate the maximum number of characters that can fit in the div
+    var maxCharacters = charactersPerLine * linesPerDiv;
+    // Return the maximum number of characters
+    return Math.round(maxCharacters / 5);
+  }
+  var textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
+  var _useState = React.useState(0),
+    chunkIndex = _useState[0],
+    setChunkIndex = _useState[1];
+  var onHandleSpacePress = function onHandleSpacePress(event) {
+    if (event.code === 'Space') {
+      goToNextStep();
+    }
+  };
+  var goToNextStep = function goToNextStep() {
+    var hasNextChunk = (textChunks == null ? void 0 : textChunks[chunkIndex + 1]) || false;
+    if (hasNextChunk) {
+      setChunkIndex(function (prev) {
+        return prev + 1;
+      });
+    } else {
+      // if there's no more text chunks, close the dialog
+      onClose();
+    }
+  };
+  React.useEffect(function () {
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [chunkIndex]);
+  var _useState2 = React.useState(false),
+    showGoNextIndicator = _useState2[0],
+    setShowGoNextIndicator = _useState2[1];
+  return React__default.createElement(Container$n, null, React__default.createElement(DynamicText, {
+    text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
+    onFinish: function onFinish() {
+      setShowGoNextIndicator(true);
+      onEndStep && onEndStep();
+    },
+    onStart: function onStart() {
+      setShowGoNextIndicator(false);
+      onStartStep && onStartStep();
+    }
+  }), showGoNextIndicator && React__default.createElement(PressSpaceIndicator$1, {
+    right: type === exports.NPCDialogType.TextOnly ? '1rem' : '10.5rem',
+    src: IS_MOBILE_OR_TABLET ? img$c : img$6,
+    onPointerDown: function onPointerDown() {
+      goToNextStep();
+    }
+  }));
+};
+var Container$n = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCDialogText__Container",
+  componentId: "sc-1cxkdh9-0"
+})([""]);
+var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCDialogText__PressSpaceIndicator",
+  componentId: "sc-1cxkdh9-1"
+})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref2) {
+  var right = _ref2.right;
+  return right;
+});
+
+(function (NPCDialogType) {
+  NPCDialogType["TextOnly"] = "TextOnly";
+  NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
+})(exports.NPCDialogType || (exports.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;
+  return React__default.createElement(RPGUIContainer, {
+    type: exports.RPGUIContainerTypes.FramedGold,
+    width: isQuestionDialog ? '600px' : '80%',
+    height: '180px'
+  }, isQuestionDialog && questions && answers ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+    flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }, React__default.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
+    src: imagePath || img$5
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$o, null, React__default.createElement(TextContainer$2, {
+    flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }, React__default.createElement(NPCDialogText, {
+    type: type,
+    text: text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer$1, null, React__default.createElement(NPCThumbnail$1, {
+    src: imagePath || img$5
+  })))));
+};
+var Container$o = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCDialog__Container",
+  componentId: "sc-1b4aw74-0"
+})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
+var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCDialog__TextContainer",
+  componentId: "sc-1b4aw74-1"
+})(["flex:", " 0 0;width:355px;"], function (_ref2) {
+  var flex = _ref2.flex;
+  return flex;
+});
+var ThumbnailContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCDialog__ThumbnailContainer",
+  componentId: "sc-1b4aw74-2"
+})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
+var NPCThumbnail$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCDialog__NPCThumbnail",
+  componentId: "sc-1b4aw74-3"
+})(["image-rendering:pixelated;height:128px;width:128px;"]);
+
+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 = React.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();
+      }
+    }
+  };
+  React.useEffect(function () {
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [backgroundImgPath]);
+  return React__default.createElement(BackgroundContainer, {
+    imgPath: backgroundImgPath[img],
+    fullImg: fullCoverBackground
+  }, React__default.createElement(DialogContainer, null, textAndTypeArray ? React__default.createElement(NPCMultiDialog, {
+    textAndTypeArray: textAndTypeArray,
+    onClose: onClose
+  }) : questions && answers ? React__default.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: onClose
+  }) : text && imagePath ? React__default.createElement(NPCDialog, {
+    text: text,
+    imagePath: imagePath,
+    onClose: onClose,
+    type: exports.NPCDialogType.TextAndThumbnail
+  }) : React__default.createElement(NPCDialog, {
+    text: text,
+    onClose: onClose,
+    type: exports.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;"]);
+
 exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
 exports.Chat = Chat;
@@ -16714,7 +16828,7 @@ exports.EquipmentSlotSpriteByType = EquipmentSlotSpriteByType;
 exports.ErrorBoundary = ErrorBoundary;
 exports.HistoryDialog = HistoryDialog;
 exports.Input = Input;
-exports.InputRadio = InputRadio;
+exports.InputRadio = InputRadio$1;
 exports.ItemContainer = ItemContainer$1;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;