@rpg-engine/long-bow 0.3.96 → 0.3.98

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, getSPForLevel, PeriodOfDay, isMobileOrTablet } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -12844,7 +12844,31 @@ var CheckButton = function CheckButton(_ref) {
 var SingleShortcut = /*#__PURE__*/styled.button.withConfig({
   displayName: "SingleShortcut",
   componentId: "sc-vz5ev8-0"
-})(["width:3rem;height:3rem;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;position:relative;span{pointer-events:none;}.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.qty{position:absolute;top:-5px;right:0;font-size:0.65rem;}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";border-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray, uiColors.yellow);
+})(["width:3rem;height:3rem;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;position:relative;span{pointer-events:none;}.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.qty{position:absolute;top:-5px;right:0;font-size:0.65rem;}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}.onCooldown{color:", ";}.cooldown{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:inherit;background-color:rgba(0 0 0 / 60%);font-size:0.7rem;display:flex;align-items:center;justify-content:center;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";border-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.gray, uiColors.darkYellow, uiColors.darkGray, uiColors.gray, uiColors.yellow);
+
+var useShortcutCooldown = function useShortcutCooldown(onShortcutCast) {
+  var _useState = useState(0),
+    shortcutCooldown = _useState[0],
+    setShortcutCooldown = _useState[1];
+  var cooldownTimeout = useRef(null);
+  var handleShortcutCast = function handleShortcutCast(index) {
+    console.log(shortcutCooldown);
+    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
+    onShortcutCast(index);
+  };
+  useEffect(function () {
+    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
+    if (shortcutCooldown > 0) {
+      cooldownTimeout.current = setTimeout(function () {
+        setShortcutCooldown(shortcutCooldown - 0.1);
+      }, 100);
+    }
+  }, [shortcutCooldown]);
+  return {
+    shortcutCooldown: shortcutCooldown,
+    handleShortcutCast: handleShortcutCast
+  };
+};
 
 var CircularController = function CircularController(_ref) {
   var onActionClick = _ref.onActionClick,
@@ -12854,7 +12878,11 @@ var CircularController = function CircularController(_ref) {
     shortcuts = _ref.shortcuts,
     inventory = _ref.inventory,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    spellCooldowns = _ref.spellCooldowns;
+  var _useShortcutCooldown = useShortcutCooldown(onShortcutClick),
+    handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
+    shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
   var onTouchStart = function onTouchStart(e) {
     var target = e.target;
     target == null ? void 0 : target.classList.add('active');
@@ -12867,10 +12895,14 @@ var CircularController = function CircularController(_ref) {
     action();
   };
   var renderShortcut = function renderShortcut(i) {
-    var _shortcuts$i, _shortcuts$i2, _shortcuts$i4, _payload$manaCost;
+    var _shortcuts$i, _shortcuts$i2, _shortcuts$i4, _spellCooldowns$paylo, _payload$manaCost;
+    var buildClassName = function buildClassName(classBase, isOnCooldown) {
+      return classBase + " " + (isOnCooldown ? 'onCooldown' : '');
+    };
     var variant = '';
     if (i === 0) variant = 'top';else if (i >= 3) variant = "bottom-" + (i - 3);
-    var onShortcutClickBinded = ((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) !== ShortcutType.None ? onShortcutClick.bind(null, i) : function () {};
+    var onShortcutClickBinded = ((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) !== ShortcutType.None ? handleShortcutCast.bind(null, i) : function () {};
+    var isOnShortcutCooldown = shortcutCooldown > 0;
     if (((_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.type) === ShortcutType.Item) {
       var _shortcuts$i3;
       var _payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
@@ -12893,7 +12925,9 @@ var CircularController = function CircularController(_ref) {
         onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
         disabled: false,
         className: variant
-      }, _payload && React.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: getItemTextureKeyPath({
@@ -12912,18 +12946,23 @@ var CircularController = function CircularController(_ref) {
           pointerEvents: 'none'
         }
       }), React.createElement("span", {
-        className: "qty"
+        className: buildClassName('qty', isOnShortcutCooldown)
       }, totalQty));
     }
     var payload = (_shortcuts$i4 = shortcuts[i]) == null ? void 0 : _shortcuts$i4.payload;
+    var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
+    var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+    var isOnCooldown = cooldown > 0 && !!payload;
     return React.createElement(StyledShortcut, {
       key: i,
       onTouchStart: onTouchStart,
       onTouchEnd: onTouchEnd.bind(null, onShortcutClickBinded),
       disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0),
       className: variant
-    }, React.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
@@ -13865,7 +13904,9 @@ var ItemInfo = function ItemInfo(_ref) {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
-  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React.createElement(LevelRequirement, null, React.createElement("div", null, "Level: ", item.minRequirements.level), React.createElement("div", null, item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React.createElement(Statistic, {
+  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React.createElement(LevelRequirement, null, React.createElement("div", {
+    className: "title"
+  }, "Requirements:"), React.createElement("div", null, "- Level: ", item.minRequirements.level), React.createElement("div", null, "-", ' ', item.minRequirements.skill.name[0].toUpperCase() + item.minRequirements.skill.name.slice(1), ": ", item.minRequirements.skill.level)), renderStatistics(), renderEntityEffects(), item.usableEffectDescription && React.createElement(Statistic, {
     "$isSpecial": true
   }, item.usableEffectDescription), item.equippedBuffDescription && React.createElement(Statistic, {
     "$isSpecial": true
@@ -13899,7 +13940,7 @@ var Type = /*#__PURE__*/styled.div.withConfig({
 var LevelRequirement = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__LevelRequirement",
   componentId: "sc-1xm4q8k-4"
-})(["font-size:", ";margin-top:0.2rem;margin-bottom:1rem;color:", ";"], uiFonts.size.small, uiColors.orange);
+})(["font-size:", ";margin-top:0.2rem;margin-bottom:1rem;color:", ";.title{margin-bottom:4px;}div{margin-bottom:2px;}"], uiFonts.size.small, uiColors.orange);
 var Statistic = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemInfo__Statistic",
   componentId: "sc-1xm4q8k-5"
@@ -14547,1026 +14588,1240 @@ 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 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.createElement(DraggableContainer, {
-    title: title,
-    type: RPGUIContainerTypes.Framed,
-    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
-        });
+var IS_MOBILE_OR_TABLET = /*#__PURE__*/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 = useState(''),
+    textState = _useState[0],
+    setTextState = _useState[1];
+  useEffect(function () {
+    var i = 0;
+    var interval = setInterval(function () {
+      // on every interval, show one more character
+      if (i === 0) {
+        if (onStart) {
+          onStart();
+        }
       }
-    },
-    onPositionChangeStart: function onPositionChangeStart(_ref4) {
-      var x = _ref4.x,
-        y = _ref4.y;
-      if (_onPositionChangeStart) {
-        _onPositionChangeStart({
-          x: x,
-          y: y
-        });
+      if (i < text.length) {
+        setTextState(text.substring(0, i + 1));
+        i++;
+      } else {
+        clearInterval(interval);
+        if (onFinish) {
+          onFinish();
+        }
       }
-    },
-    onOutsideClick: onOutsideClick,
-    initialPosition: initialPosition,
-    scale: scale
-  }, children);
+    }, 50);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [text]);
+  return React.createElement(TextContainer, null, textState);
 };
+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 RangeSliderType;
-(function (RangeSliderType) {
-  RangeSliderType["Slider"] = "rpgui-slider";
-  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
-})(RangeSliderType || (RangeSliderType = {}));
-var RangeSlider = function RangeSlider(_ref) {
-  var type = _ref.type,
-    valueMin = _ref.valueMin,
-    valueMax = _ref.valueMax,
-    width = _ref.width,
-    _onChange = _ref.onChange,
-    value = _ref.value;
-  var sliderId = v4();
-  var containerRef = useRef(null);
+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 = 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 = useState(0),
-    left = _useState[0],
-    setLeft = _useState[1];
+    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();
+    }
+  };
   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 === RangeSliderType.GoldSlider ? 'golden' : '';
-  return React.createElement("div", {
-    style: {
-      width: width,
-      position: 'relative'
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [chunkIndex]);
+  var _useState2 = useState(false),
+    showGoNextIndicator = _useState2[0],
+    setShowGoNextIndicator = _useState2[1];
+  return React.createElement(Container$e, null, React.createElement(DynamicText, {
+    text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
+    onFinish: function onFinish() {
+      setShowGoNextIndicator(true);
+      onEndStep && onEndStep();
     },
-    className: "rpgui-slider-container " + typeClass,
-    id: "rpgui-slider-" + sliderId,
-    ref: containerRef
-  }, React.createElement("div", {
-    style: {
-      pointerEvents: 'none'
+    onStart: function onStart() {
+      setShowGoNextIndicator(false);
+      onStartStep && onStartStep();
     }
-  }, React.createElement("div", {
-    className: "rpgui-slider-track " + typeClass
-  }), React.createElement("div", {
-    className: "rpgui-slider-left-edge " + typeClass
-  }), React.createElement("div", {
-    className: "rpgui-slider-right-edge " + typeClass
-  }), React.createElement("div", {
-    className: "rpgui-slider-thumb " + typeClass,
-    style: {
-      left: left
+  }), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
+    right: type === NPCDialogType.TextOnly ? '1rem' : '10.5rem',
+    src: IS_MOBILE_OR_TABLET ? img$5 : img$6,
+    onPointerDown: function onPointerDown() {
+      goToNextStep();
     }
-  })), React.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 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 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;
+});
 
-var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
-  var quantity = _ref.quantity,
-    onConfirm = _ref.onConfirm,
+//@ts-ignore
+var useEventListener = function useEventListener(type, handler, el) {
+  if (el === void 0) {
+    el = window;
+  }
+  var savedHandler = React.useRef();
+  React.useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  React.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 QuestionDialog = function QuestionDialog(_ref) {
+  var questions = _ref.questions,
+    answers = _ref.answers,
     onClose = _ref.onClose;
-  var _useState = useState(quantity),
-    value = _useState[0],
-    setValue = _useState[1];
-  var inputRef = useRef(null);
+  var _useState = useState(questions[0]),
+    currentQuestion = _useState[0],
+    setCurrentQuestion = _useState[1];
+  var _useState2 = 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 = useState(onGetFirstAnswer()),
+    currentAnswer = _useState3[0],
+    setCurrentAnswer = _useState3[1];
   useEffect(function () {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-      var closeSelector = function closeSelector(e) {
-        if (e.key === 'Escape') {
+    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;
+          }));
         }
-      };
-      document.addEventListener('keydown', closeSelector);
-      return function () {
-        document.removeEventListener('keydown', closeSelector);
-      };
+        break;
     }
-    return function () {};
-  }, []);
-  return React.createElement(StyledContainer, {
-    type: RPGUIContainerTypes.Framed,
-    width: "25rem"
-  }, React.createElement(CloseButton$2, {
-    className: "container-close",
-    onPointerDown: onClose
-  }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
-    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.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;
+  };
+  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.createElement(AnswerRow, {
+          key: "answer_" + answer.id
+        }, React.createElement(AnswerSelectedIcon, {
+          color: selectedColor
+        }, isSelected ? 'X' : null), React.createElement(Answer, {
+          key: answer.id,
+          onPointerDown: function onPointerDown() {
+            return onAnswerClick(answer);
+          },
+          color: selectedColor
+        }, answer.text));
       }
-      setValue(e.target.value);
+      return null;
+    });
+  };
+  return React.createElement(Container$f, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+    text: currentQuestion.text,
+    onStart: function onStart() {
+      return setCanShowAnswers(false);
     },
-    onBlur: function onBlur(e) {
-      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
-      setValue(newValue);
+    onFinish: function onFinish() {
+      return setCanShowAnswers(true);
     }
-  }), React.createElement(RangeSlider, {
-    type: RangeSliderType.Slider,
-    valueMin: 1,
-    valueMax: quantity,
-    width: "100%",
-    onChange: setValue,
-    value: value
-  }), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    type: "submit"
-  }, "Confirm")));
+  })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-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: "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 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) === ShortcutType.Item) {
-      var _shortcuts$index2;
-      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
-      if (!_payload) return null;
-      return React.createElement(SpriteFromAtlas, {
-        atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON,
-        spriteKey: 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.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
-      return word[0];
-    }));
-  };
-  return React.createElement(Container$e, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
-    id: "shortcuts_list"
-  }, Array.from({
-    length: 6
-  }).map(function (_, i) {
-    return React.createElement(Shortcut, {
-      key: i,
-      onPointerDown: function onPointerDown() {
-        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
-        removeShortcut(i);
-        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
-      },
-      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
-      isBeingSet: settingShortcutIndex === i,
-      id: "shortcutSetter_" + i
-    }, getContent(i));
-  })));
-};
-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 img$7 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAP1BMVEUAAAA7FyVxQTsUEBPj5v////+5v/tCJDOOUlIiHBr1oJfptaO6dWr61rhzFy1bMTjoanMUNGQoXMQkn97+88DQ3IhAAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAAHdElNRQfmAw4VOBC7c5LYAAABM0lEQVQ4y3XRi5KDIAwFUAUkbrBgpP//rZsHVHQ009qZ3tPboNN0zmwzvcw8O5sX4y0NOg/Et3jRCXF+ziULorjkOQ9gE24dvuUAzq08DiCO4pe3WN7zCP56vmpubBReQYC11YPS86ySxxCsAABTSgjb5m4g8nfbxvFHBkH2OEEvAItVuCuIsgGgl+Gcr7kDXxhEAx55A2SQEEeQeZwUaIP8Tbo05B0RFPhItAjgj1w6cDnhLluDj+Egkh3pCCP4pKQAw1IPO0W9Nti5gW9RP2dKA3BZd2Dw+baYX+Nt4GM00O4S3kEpF6Alb2Bv4LeC3kkGfAW0/p0RPoJVKr63ghHsKuRh5DIUKOAlGOwrtt9fQekAEfmhZslHUDoglB0zjfkJigN7UnTQQ4GBWomoVhEN/AOPSBh38gy+fwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xNFQyMTo1NTo1MSswMDowMJcc0eEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTRUMjE6NTU6NTErMDA6MDDmQWldAAAAAElFTkSuQmCC';
 
-var ItemContainer$1 = function ItemContainer(_ref) {
-  var itemContainer = _ref.itemContainer,
-    onClose = _ref.onClose,
-    _onMouseOver = _ref.onMouseOver,
-    _onSelected = _ref.onSelected,
-    onItemClick = _ref.onItemClick,
+var NPCDialogType;
+(function (NPCDialogType) {
+  NPCDialogType["TextOnly"] = "TextOnly";
+  NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
+})(NPCDialogType || (NPCDialogType = {}));
+var NPCDialog = function NPCDialog(_ref) {
+  var text = _ref.text,
     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 = useState({
-      isOpen: false,
-      maxQuantity: 1,
-      callback: function callback(_quantity) {}
-    }),
-    quantitySelect = _useState[0],
-    setQuantitySelect = _useState[1];
-  var _useState2 = useState(-1),
-    settingShortcutIndex = _useState2[0],
-    setSettingShortcutIndex = _useState2[1];
-  var handleSetShortcut = function handleSetShortcut(item, index) {
-    if (item.type === ItemType.Consumable || item.type === 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.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 === ItemContainerType.Inventory ? handleSetShortcut : undefined,
-        isDepotSystem: isDepotSystem
-      }));
+    _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.createElement(RPGUIContainer, {
+    type: RPGUIContainerTypes.FramedGold,
+    width: isQuestionDialog ? '600px' : '80%',
+    height: '180px'
+  }, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$1, {
+    flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }, React.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
     }
-    return slots;
-  };
-  return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
-    title: itemContainer.name || 'Container',
-    onClose: onClose,
-    initialPosition: initialPosition,
-    scale: scale,
-    onPositionChangeEnd: onPositionChangeEnd,
-    onPositionChangeStart: onPositionChangeStart
-  }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
-    setSettingShortcutIndex: setSettingShortcutIndex,
-    settingShortcutIndex: settingShortcutIndex,
-    shortcuts: shortcuts,
-    removeShortcut: removeShortcut,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
-  }), React.createElement(ItemsContainer, {
-    className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
-    quantity: quantitySelect.maxQuantity,
-    onConfirm: function onConfirm(quantity) {
-      quantitySelect.callback(quantity);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
-    },
+  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
+    src: imagePath || img$7
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$g, null, React.createElement(TextContainer$1, {
+    flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }, React.createElement(NPCDialogText, {
+    type: type,
+    text: text || 'No text provided.',
     onClose: function onClose() {
-      quantitySelect.callback(-1);
-      setQuantitySelect({
-        isOpen: false,
-        maxQuantity: 1,
-        callback: function callback() {}
-      });
+      if (_onClose) {
+        _onClose();
+      }
     }
-  }))));
+  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
+    src: imagePath || img$7
+  })))));
 };
-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 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 ItemSelector = function ItemSelector(_ref) {
-  var atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    options = _ref.options,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect;
-  var _useState = 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 ImgSide;
+(function (ImgSide) {
+  ImgSide["right"] = "right";
+  ImgSide["left"] = "left";
+})(ImgSide || (ImgSide = {}));
+var NPCMultiDialog = function NPCMultiDialog(_ref) {
+  var _textAndTypeArray$sli;
+  var _onClose = _ref.onClose,
+    textAndTypeArray = _ref.textAndTypeArray;
+  var _useState = useState(false),
+    showGoNextIndicator = _useState[0],
+    setShowGoNextIndicator = _useState[1];
+  var _useState2 = useState(0),
+    slide = _useState2[0],
+    setSlide = _useState2[1];
+  var onHandleSpacePress = function onHandleSpacePress(event) {
+    if (event.code === 'Space') {
+      if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
+        setSlide(function (prev) {
+          return prev + 1;
+        });
+      } else {
+        // if there's no more text chunks, close the dialog
+        _onClose();
+      }
+    }
   };
   useEffect(function () {
-    if (selectedValue) {
-      onSelect(selectedValue);
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [slide]);
+  return React.createElement(RPGUIContainer, {
+    type: RPGUIContainerTypes.FramedGold,
+    width: '50%',
+    height: '180px'
+  }, React.createElement(React.Fragment, null, React.createElement(Container$h, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+    flex: '70%'
+  }, React.createElement(NPCDialogText, {
+    onStartStep: function onStartStep() {
+      return setShowGoNextIndicator(false);
+    },
+    onEndStep: function onEndStep() {
+      return setShowGoNextIndicator(true);
+    },
+    text: textAndTypeArray[slide].text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
     }
-  }, [selectedValue]);
+  })), React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
+    src: textAndTypeArray[slide].imagePath || img$7
+  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
+    right: '10.5rem',
+    src: img$6
+  })), textAndTypeArray[slide].imageSide === 'left' && React.createElement(React.Fragment, null, React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
+    src: textAndTypeArray[slide].imagePath || img$7
+  })), React.createElement(TextContainer$2, {
+    flex: '70%'
+  }, React.createElement(NPCDialogText, {
+    onStartStep: function onStartStep() {
+      return setShowGoNextIndicator(false);
+    },
+    onEndStep: function onEndStep() {
+      return setShowGoNextIndicator(true);
+    },
+    text: textAndTypeArray[slide].text || 'No text provided.',
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), showGoNextIndicator && React.createElement(PressSpaceIndicator$1, {
+    right: '1rem',
+    src: img$6
+  }))), ")"));
+};
+var Container$h = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__Container",
+  componentId: "sc-rvu5wg-0"
+})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
+var TextContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__TextContainer",
+  componentId: "sc-rvu5wg-1"
+})(["flex:", " 0 0;width:355px;"], function (_ref2) {
+  var flex = _ref2.flex;
+  return flex;
+});
+var ThumbnailContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NPCMultiDialog__ThumbnailContainer",
+  componentId: "sc-rvu5wg-2"
+})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
+var NPCThumbnail$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCMultiDialog__NPCThumbnail",
+  componentId: "sc-rvu5wg-3"
+})(["image-rendering:pixelated;height:128px;width:128px;"]);
+var PressSpaceIndicator$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "NPCMultiDialog__PressSpaceIndicator",
+  componentId: "sc-rvu5wg-4"
+})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
+  var right = _ref3.right;
+  return right;
+});
+
+var HistoryDialog = function HistoryDialog(_ref) {
+  var backgroundImgPath = _ref.backgroundImgPath,
+    fullCoverBackground = _ref.fullCoverBackground,
+    questions = _ref.questions,
+    answers = _ref.answers,
+    text = _ref.text,
+    imagePath = _ref.imagePath,
+    textAndTypeArray = _ref.textAndTypeArray,
+    onClose = _ref.onClose;
+  var _useState = useState(0),
+    img = _useState[0],
+    setImage = _useState[1];
+  var onHandleSpacePress = function onHandleSpacePress(event) {
+    if (event.code === 'Space') {
+      if (img < (backgroundImgPath == null ? void 0 : backgroundImgPath.length) - 1) {
+        setImage(function (prev) {
+          return prev + 1;
+        });
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('keydown', onHandleSpacePress);
+    return function () {
+      return document.removeEventListener('keydown', onHandleSpacePress);
+    };
+  }, [backgroundImgPath]);
+  return React.createElement(BackgroundContainer, {
+    imgPath: backgroundImgPath[img],
+    fullImg: fullCoverBackground
+  }, React.createElement(DialogContainer, null, textAndTypeArray ? React.createElement(NPCMultiDialog, {
+    textAndTypeArray: textAndTypeArray,
+    onClose: onClose
+  }) : questions && answers ? React.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: onClose
+  }) : text && imagePath ? React.createElement(NPCDialog, {
+    text: text,
+    imagePath: imagePath,
+    onClose: onClose,
+    type: NPCDialogType.TextAndThumbnail
+  }) : React.createElement(NPCDialog, {
+    text: text,
+    onClose: onClose,
+    type: NPCDialogType.TextOnly
+  })));
+};
+var BackgroundContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "HistoryDialog__BackgroundContainer",
+  componentId: "sc-u6oe75-0"
+})(["width:100%;height:100%;background-image:url(", ");background-size:", ";display:flex;justify-content:space-evenly;align-items:center;"], function (props) {
+  return props.imgPath;
+}, function (props) {
+  return props.imgPath ? 'cover' : 'auto';
+});
+var DialogContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "HistoryDialog__DialogContainer",
+  componentId: "sc-u6oe75-1"
+})(["display:flex;justify-content:center;padding-top:200px;"]);
+
+var 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.createElement(DraggableContainer, {
+    title: title,
     type: 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);
+};
+
+var RangeSliderType;
+(function (RangeSliderType) {
+  RangeSliderType["Slider"] = "rpgui-slider";
+  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
+})(RangeSliderType || (RangeSliderType = {}));
+var RangeSlider = function RangeSlider(_ref) {
+  var type = _ref.type,
+    valueMin = _ref.valueMin,
+    valueMax = _ref.valueMax,
+    width = _ref.width,
+    _onChange = _ref.onChange,
+    value = _ref.value;
+  var sliderId = v4();
+  var containerRef = useRef(null);
+  var _useState = useState(0),
+    left = _useState[0],
+    setLeft = _useState[1];
+  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 === RangeSliderType.GoldSlider ? 'golden' : '';
+  return React.createElement("div", {
+    style: {
+      width: width,
+      position: 'relative'
+    },
+    className: "rpgui-slider-container " + typeClass,
+    id: "rpgui-slider-" + sliderId,
+    ref: containerRef
+  }, React.createElement("div", {
+    style: {
+      pointerEvents: 'none'
     }
   }, React.createElement("div", {
+    className: "rpgui-slider-track " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-left-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-right-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-thumb " + typeClass,
     style: {
-      width: '100%'
+      left: left
     }
-  }, React.createElement(Title$3, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
-    className: "golden"
-  })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
-    return React.createElement(RadioOptionsWrapper$1, {
-      key: index
-    }, React.createElement(SpriteAtlasWrapper$1, null, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.imageKey,
-      imgScale: 3
-    })), React.createElement("div", null, React.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test"
-    }), React.createElement("label", {
-      onPointerDown: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "Cancel"), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton
-  }, "Select")));
+  })), React.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 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 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 ListMenu = function ListMenu(_ref) {
-  var options = _ref.options,
-    onSelected = _ref.onSelected,
-    x = _ref.x,
-    y = _ref.y;
-  return React.createElement(Container$f, {
-    x: x,
-    y: y
-  }, React.createElement("ul", {
-    className: "rpgui-list-imp",
+var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  var _useState = useState(quantity),
+    value = _useState[0],
+    setValue = _useState[1];
+  var inputRef = useRef(null);
+  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.createElement(StyledContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "25rem"
+  }, React.createElement(CloseButton$2, {
+    className: "container-close",
+    onPointerDown: onClose
+  }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
     style: {
-      overflow: 'hidden'
+      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.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);
     }
-  }, options.map(function (params, index) {
-    return React.createElement(ListElement$1, {
-      key: (params == null ? void 0 : params.id) || index,
+  }), React.createElement(RangeSlider, {
+    type: RangeSliderType.Slider,
+    valueMin: 1,
+    valueMax: quantity,
+    width: "100%",
+    onChange: setValue,
+    value: value
+  }), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    type: "submit"
+  }, "Confirm")));
+};
+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 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) === ShortcutType.Item) {
+      var _shortcuts$index2;
+      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
+      if (!_payload) return null;
+      return React.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: 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.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
+      return word[0];
+    }));
+  };
+  return React.createElement(Container$i, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+    id: "shortcuts_list"
+  }, Array.from({
+    length: 6
+  }).map(function (_, i) {
+    return React.createElement(Shortcut, {
+      key: i,
       onPointerDown: function onPointerDown() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
+        if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+        removeShortcut(i);
+        if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i,
+      id: "shortcutSetter_" + i
+    }, getContent(i));
   })));
 };
-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 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 MarketplaceRows = function MarketplaceRows(_ref) {
-  var atlasJSON = _ref.atlasJSON,
+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,
-    item = _ref.item,
-    itemPrice = _ref.itemPrice,
-    equipmentSet = _ref.equipmentSet,
+    _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,
-    onHandleClick = _ref.onHandleClick;
-  return React.createElement(MarketPlaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(ItemInfoWrapper, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    scale: scale
-  }, React.createElement(SpriteFromAtlas, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    spriteKey: getItemTextureKeyPath({
-      key: item.key,
-      stackQty: item.stackQty || 1,
-      texturePath: item.texturePath,
-      isStackable: item.isStackable
-    }, atlasJSON),
-    imgScale: 2
-  }))), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, item.name)))), React.createElement(QuantityContainer, null, React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$1, null, React.createElement(Item$1, null, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, item.rarity))))), React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(SpriteFromAtlas, {
+    shortcuts = _ref.shortcuts,
+    setItemShortcut = _ref.setItemShortcut,
+    removeShortcut = _ref.removeShortcut,
+    equipmentSet = _ref.equipmentSet,
+    isDepotSystem = _ref.isDepotSystem,
+    onPositionChangeEnd = _ref.onPositionChangeEnd,
+    onPositionChangeStart = _ref.onPositionChangeStart;
+  var _useState = useState({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: function callback(_quantity) {}
+    }),
+    quantitySelect = _useState[0],
+    setQuantitySelect = _useState[1];
+  var _useState2 = useState(-1),
+    settingShortcutIndex = _useState2[0],
+    setSettingShortcutIndex = _useState2[1];
+  var handleSetShortcut = function handleSetShortcut(item, index) {
+    if (item.type === ItemType.Consumable || item.type === 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.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 === ItemContainerType.Inventory ? handleSetShortcut : undefined,
+        isDepotSystem: isDepotSystem
+      }));
+    }
+    return slots;
+  };
+  return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
+    title: itemContainer.name || 'Container',
+    onClose: onClose,
+    initialPosition: initialPosition,
+    scale: scale,
+    onPositionChangeEnd: onPositionChangeEnd,
+    onPositionChangeStart: onPositionChangeStart
+  }, type === ItemContainerType.Inventory && shortcuts && removeShortcut && React.createElement(ShortcutsSetter, {
+    setSettingShortcutIndex: setSettingShortcutIndex,
+    settingShortcutIndex: settingShortcutIndex,
+    shortcuts: shortcuts,
+    removeShortcut: removeShortcut,
     atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    spriteKey: 'others/gold-coin-qty-4.png',
-    imgScale: 2
-  })), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, "$", itemPrice)))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onClick: function onClick() {
-      return onHandleClick(item.name);
+    atlasJSON: atlasJSON
+  }), React.createElement(ItemsContainer, {
+    className: "item-container-body"
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.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() {}
+      });
     }
-  }, "Buy")));
+  }))));
 };
-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 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 Marketplace = function Marketplace(_ref) {
-  var items = _ref.items,
-    atlasIMG = _ref.atlasIMG,
+var ItemSelector = function ItemSelector(_ref) {
+  var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
+    options = _ref.options,
     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;
+    onSelect = _ref.onSelect;
+  var _useState = 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);
+  };
+  useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
   return React.createElement(DraggableContainer, {
     type: RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
     onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#MarketContainer",
-    scale: scale
-  }, React.createElement(React.Fragment, null, React.createElement(InputWrapper, null, React.createElement("p", null, " Search By Name"), React.createElement(Input, {
-    onChange: onChangeNameInput,
-    placeholder: 'Search...'
-  })), React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
-    options: optionsType,
-    onChange: onChangeType,
-    width: '220px'
-  }), React.createElement(StyledDropdown, {
-    options: optionsRarity,
-    onChange: onChangeRarity,
-    width: '220px'
-  }), React.createElement(StyledDropdown, {
-    options: optionsPrice,
-    onChange: onChangeOrder,
-    width: '220px'
-  })), React.createElement(ItemComponentScrollWrapper, {
-    id: "MarketContainer"
-  }, items == null ? void 0 : items.map(function (item, index) {
-    return React.createElement(MarketplaceRows, {
-      key: item.key + "_" + index,
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$3, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
+    className: "golden"
+  })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
+    return React.createElement(RadioOptionsWrapper$1, {
+      key: index
+    }, React.createElement(SpriteAtlasWrapper$1, null, React.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
-      item: item,
-      itemPrice: 10,
-      equipmentSet: equipmentSet,
-      onHandleClick: onHandleClick
-    });
-  }))));
-};
-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 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';
-
-var ImgSide;
-(function (ImgSide) {
-  ImgSide["right"] = "right";
-  ImgSide["left"] = "left";
-})(ImgSide || (ImgSide = {}));
-var NPCMultiDialog = function NPCMultiDialog(_ref) {
-  var _textAndTypeArray$sli;
-  var _onClose = _ref.onClose,
-    textAndTypeArray = _ref.textAndTypeArray;
-  var _useState = useState(false),
-    showGoNextIndicator = _useState[0],
-    setShowGoNextIndicator = _useState[1];
-  var _useState2 = useState(0),
-    slide = _useState2[0],
-    setSlide = _useState2[1];
-  var onHandleSpacePress = function onHandleSpacePress(event) {
-    if (event.code === 'Space') {
-      if (slide < (textAndTypeArray == null ? void 0 : textAndTypeArray.length) - 1) {
-        setSlide(function (prev) {
-          return prev + 1;
-        });
-      } else {
-        // if there's no more text chunks, close the dialog
-        _onClose();
-      }
-    }
-  };
-  useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [slide]);
-  return React.createElement(RPGUIContainer, {
-    type: RPGUIContainerTypes.FramedGold,
-    width: '50%',
-    height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
-    flex: '70%'
-  }, React.createElement(NPCDialogText, {
-    onStartStep: function onStartStep() {
-      return setShowGoNextIndicator(false);
-    },
-    onEndStep: function onEndStep() {
-      return setShowGoNextIndicator(true);
-    },
-    text: textAndTypeArray[slide].text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
-    }
-  })), React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
-    src: textAndTypeArray[slide].imagePath || img$5
-  })), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
-    right: '10.5rem',
-    src: img$6
-  })), textAndTypeArray[slide].imageSide === 'left' && React.createElement(React.Fragment, null, React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
-    src: textAndTypeArray[slide].imagePath || img$5
-  })), React.createElement(TextContainer, {
-    flex: '70%'
-  }, React.createElement(NPCDialogText, {
-    onStartStep: function onStartStep() {
-      return setShowGoNextIndicator(false);
-    },
-    onEndStep: function onEndStep() {
-      return setShowGoNextIndicator(true);
-    },
-    text: textAndTypeArray[slide].text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React.createElement("div", null, React.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React.createElement("label", {
+      onPointerDown: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
       }
-    }
-  })), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
-    right: '1rem',
-    src: img$6
-  }))), ")"));
-};
-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;
-});
-
-//@ts-ignore
-var useEventListener = function useEventListener(type, handler, el) {
-  if (el === void 0) {
-    el = window;
-  }
-  var savedHandler = React.useRef();
-  React.useEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  React.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]);
+    }, option.name, " ", React.createElement("br", null), option.description)));
+  })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: onClose
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: 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 DynamicText = function DynamicText(_ref) {
-  var text = _ref.text,
-    onFinish = _ref.onFinish,
-    onStart = _ref.onStart;
-  var _useState = useState(''),
-    textState = _useState[0],
-    setTextState = _useState[1];
-  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();
-        }
+var ListMenu = function ListMenu(_ref) {
+  var options = _ref.options,
+    onSelected = _ref.onSelected,
+    x = _ref.x,
+    y = _ref.y;
+  return React.createElement(Container$j, {
+    x: x,
+    y: y
+  }, React.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params, index) {
+    return React.createElement(ListElement$1, {
+      key: (params == null ? void 0 : params.id) || index,
+      onPointerDown: function onPointerDown() {
+        onSelected(params == null ? void 0 : params.id);
       }
-    }, 50);
-    return function () {
-      clearInterval(interval);
-    };
-  }, [text]);
-  return React.createElement(TextContainer$1, null, textState);
+    }, (params == null ? void 0 : params.text) || 'No text');
+  })));
 };
-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 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 QuestionDialog = function QuestionDialog(_ref) {
-  var questions = _ref.questions,
-    answers = _ref.answers,
-    onClose = _ref.onClose;
-  var _useState = useState(questions[0]),
-    currentQuestion = _useState[0],
-    setCurrentQuestion = _useState[1];
-  var _useState2 = 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 = useState(onGetFirstAnswer()),
-    currentAnswer = _useState3[0],
-    setCurrentAnswer = _useState3[1];
-  useEffect(function () {
-    setCurrentAnswer(onGetFirstAnswer());
-  }, [currentQuestion]);
-  var onGetAnswers = function onGetAnswers(answerIds) {
-    return answerIds.map(function (answerId) {
-      return answers.find(function (answer) {
-        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;
+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.createElement(MarketPlaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(ItemInfoWrapper, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    scale: scale
+  }, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: getItemTextureKeyPath({
+      key: item.key,
+      stackQty: item.stackQty || 1,
+      texturePath: item.texturePath,
+      isStackable: item.isStackable
+    }, atlasJSON),
+    imgScale: 2
+  }))), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.name)))), React.createElement(QuantityContainer, null, React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$1, null, React.createElement(Item$1, null, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, item.rarity))))), React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: 'others/gold-coin-qty-4.png',
+    imgScale: 2
+  })), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "150px",
+    fontSize: "10px"
+  }, "$", itemPrice)))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: function onClick() {
+      return onHandleClick(item.name);
     }
-    return answers.map(function (answer) {
-      var isSelected = (currentAnswer == null ? void 0 : currentAnswer.id) === (answer == null ? void 0 : answer.id);
-      var selectedColor = isSelected ? 'yellow' : 'white';
-      if (answer) {
-        return React.createElement(AnswerRow, {
-          key: "answer_" + answer.id
-        }, React.createElement(AnswerSelectedIcon, {
-          color: selectedColor
-        }, isSelected ? 'X' : null), React.createElement(Answer, {
-          key: answer.id,
-          onPointerDown: function onPointerDown() {
-            return onAnswerClick(answer);
-          },
-          color: selectedColor
-        }, answer.text));
-      }
-      return null;
-    });
-  };
-  return React.createElement(Container$h, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
-    text: currentQuestion.text,
-    onStart: function onStart() {
-      return setCanShowAnswers(false);
+  }, "Buy")));
+};
+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.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
     },
-    onFinish: function onFinish() {
-      return setCanShowAnswers(true);
-    }
-  })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
+    width: "800px",
+    cancelDrag: "#MarketContainer",
+    scale: scale
+  }, React.createElement(React.Fragment, null, React.createElement(InputWrapper, null, React.createElement("p", null, " Search By Name"), React.createElement(Input, {
+    onChange: onChangeNameInput,
+    placeholder: 'Search...'
+  })), React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
+    options: optionsType,
+    onChange: onChangeType,
+    width: '220px'
+  }), React.createElement(StyledDropdown, {
+    options: optionsRarity,
+    onChange: onChangeRarity,
+    width: '220px'
+  }), React.createElement(StyledDropdown, {
+    options: optionsPrice,
+    onChange: onChangeOrder,
+    width: '220px'
+  })), React.createElement(ItemComponentScrollWrapper, {
+    id: "MarketContainer"
+  }, items == null ? void 0 : items.map(function (item, index) {
+    return React.createElement(MarketplaceRows, {
+      key: item.key + "_" + index,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      item: item,
+      itemPrice: 10,
+      equipmentSet: equipmentSet,
+      onHandleClick: onHandleClick
+    });
+  }))));
 };
-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 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 ProgressBar = function ProgressBar(_ref) {
   var max = _ref.max,
@@ -15585,7 +15840,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$i, {
+  return React.createElement(Container$k, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -15614,7 +15869,7 @@ var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__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) {
@@ -15625,7 +15880,7 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
   return props.style;
 });
 
-var img$7 = '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$8 = 'data:image/png;base64,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';
 
 var QuestInfo = function QuestInfo(_ref) {
   var quests = _ref.quests,
@@ -15669,7 +15924,7 @@ var QuestInfo = function QuestInfo(_ref) {
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React.createElement(Title$4, null, React.createElement(Thumbnail, {
-    src: quests[currentIndex].thumbnail || img$7
+    src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
   }))), React.createElement(Content, null, React.createElement("p", null, quests[currentIndex].description)), React.createElement(QuestColumn, {
@@ -15688,7 +15943,7 @@ var QuestInfo = function QuestInfo(_ref) {
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React.createElement(Title$4, null, React.createElement(Thumbnail, {
-    src: quests[0].thumbnail || img$7
+    src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
   }))), React.createElement(Content, null, React.createElement("p", null, quests[0].description)), React.createElement(QuestColumn, {
@@ -15841,15 +16096,19 @@ var Shortcuts = function Shortcuts(_ref) {
     isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    inventory = _ref.inventory;
+    inventory = _ref.inventory,
+    spellCooldowns = _ref.spellCooldowns;
   var shortcutsRefs = useRef([]);
+  var _useShortcutCooldown = useShortcutCooldown(onShortcutCast),
+    handleShortcutCast = _useShortcutCooldown.handleShortcutCast,
+    shortcutCooldown = _useShortcutCooldown.shortcutCooldown;
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (isBlockedCastingByKeyboard) return;
       var shortcutIndex = Number(e.key) - 1;
       if (shortcutIndex >= 0 && shortcutIndex <= 5) {
         var _shortcutsRefs$curren;
-        onShortcutCast(shortcutIndex);
+        handleShortcutCast(shortcutIndex);
         (_shortcutsRefs$curren = shortcutsRefs.current[shortcutIndex]) == null ? void 0 : _shortcutsRefs$curren.classList.add('active');
         setTimeout(function () {
           var _shortcutsRefs$curren2;
@@ -15861,11 +16120,15 @@ var Shortcuts = function Shortcuts(_ref) {
     return function () {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
+  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
   return React.createElement(List$1, null, Array.from({
     length: 6
   }).map(function (_, i) {
-    var _shortcuts$i, _shortcuts$i3, _payload$manaCost;
+    var _shortcuts$i, _shortcuts$i3, _spellCooldowns$paylo, _payload$manaCost;
+    var buildClassName = function buildClassName(classBase, isOnCooldown) {
+      return classBase + " " + (isOnCooldown ? 'onCooldown' : '');
+    };
+    var isOnShortcutCooldown = shortcutCooldown > 0;
     if (((_shortcuts$i = shortcuts[i]) == null ? void 0 : _shortcuts$i.type) === ShortcutType.Item) {
       var _shortcuts$i2;
       var _payload = (_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.payload;
@@ -15882,12 +16145,14 @@ var Shortcuts = function Shortcuts(_ref) {
       var totalQty = _payload && inventory ? countItemFromInventory(_payload.key, inventory) : 0;
       return React.createElement(StyledShortcut$1, {
         key: i,
-        onPointerDown: onShortcutCast.bind(null, i),
+        onPointerDown: handleShortcutCast.bind(null, i),
         disabled: false,
         ref: function ref(el) {
           if (el) shortcutsRefs.current[i] = el;
         }
-      }, _payload && React.createElement(SpriteFromAtlas, {
+      }, isOnShortcutCooldown && React.createElement("span", {
+        className: "cooldown"
+      }, shortcutCooldown.toFixed(1)), _payload && React.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: getItemTextureKeyPath({
@@ -15899,27 +16164,32 @@ var Shortcuts = function Shortcuts(_ref) {
         width: 32,
         height: 32
       }), React.createElement("span", {
-        className: "qty"
+        className: buildClassName('qty', isOnShortcutCooldown)
       }, totalQty), React.createElement("span", {
-        className: "keyboard"
+        className: buildClassName('keyboard', isOnShortcutCooldown)
       }, i + 1));
     }
     var payload = (_shortcuts$i3 = shortcuts[i]) == null ? void 0 : _shortcuts$i3.payload;
+    var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
+    var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+    var isOnCooldown = cooldown > 0 && !!payload;
     return React.createElement(StyledShortcut$1, {
       key: i,
-      onPointerDown: onShortcutCast.bind(null, i),
+      onPointerDown: handleShortcutCast.bind(null, i),
       disabled: mana < ((_payload$manaCost = payload == null ? void 0 : payload.manaCost) != null ? _payload$manaCost : 0),
       ref: function ref(el) {
         if (el) shortcutsRefs.current[i] = el;
       }
-    }, React.createElement("span", {
-      className: "mana"
+    }, isOnCooldown && React.createElement("span", {
+      className: "cooldown"
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", {
+      className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
     }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })), React.createElement("span", {
-      className: "keyboard"
+      className: buildClassName('keyboard', isOnCooldown)
     }, i + 1));
   }));
 };
@@ -15938,7 +16208,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$l, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -15947,7 +16217,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -16126,72 +16396,283 @@ var SkillsContainer = function SkillsContainer(_ref) {
     title: "Skills",
     cancelDrag: "#skillsDiv",
     scale: scale
-  }, onCloseButton && React.createElement(CloseButton$3, {
-    onPointerDown: onCloseButton
-  }, "X"), React.createElement(SkillsContainerDiv, {
-    id: "skillsDiv"
-  }, React.createElement(SkillSplitDiv, null, React.createElement("p", null, "General"), React.createElement("hr", {
-    className: "golden"
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Level',
-    bgColor: uiColors.navyBlue,
-    level: Math.round(skill.level) || 0,
-    skillPoints: Math.round(skill.experience) || 0,
-    skillPointsToNextLevel: Math.round(skill.xpToNextLevel) || 0,
-    texturePath: 'swords/broad-sword.png',
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
-  }), React.createElement("p", null, "Combat Skills"), React.createElement("hr", {
-    className: "golden"
-  })), onRenderSkillCategory('combat'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Crafting Skills"), React.createElement("hr", {
-    className: "golden"
-  })), onRenderSkillCategory('crafting'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Basic Attributes"), React.createElement("hr", {
-    className: "golden"
-  })), onRenderSkillCategory('attributes')));
+  }, onCloseButton && React.createElement(CloseButton$3, {
+    onPointerDown: onCloseButton
+  }, "X"), React.createElement(SkillsContainerDiv, {
+    id: "skillsDiv"
+  }, React.createElement(SkillSplitDiv, null, React.createElement("p", null, "General"), React.createElement("hr", {
+    className: "golden"
+  }), React.createElement(SkillProgressBar, {
+    skillName: 'Level',
+    bgColor: uiColors.navyBlue,
+    level: Math.round(skill.level) || 0,
+    skillPoints: Math.round(skill.experience) || 0,
+    skillPointsToNextLevel: Math.round(skill.xpToNextLevel) || 0,
+    texturePath: 'swords/broad-sword.png',
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), React.createElement("p", null, "Combat Skills"), React.createElement("hr", {
+    className: "golden"
+  })), onRenderSkillCategory('combat'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Crafting Skills"), React.createElement("hr", {
+    className: "golden"
+  })), onRenderSkillCategory('crafting'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Basic Attributes"), React.createElement("hr", {
+    className: "golden"
+  })), onRenderSkillCategory('attributes')));
+};
+var SkillsDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
+  displayName: "SkillsContainer__SkillsDraggableContainer",
+  componentId: "sc-1g0c67q-0"
+})(["border:1px solid black;width:400px;height:90%;.DraggableContainer__TitleContainer-sc-184mpyl-2{width:auto;height:auto;}"]);
+var SkillsContainerDiv = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillsContainer__SkillsContainerDiv",
+  componentId: "sc-1g0c67q-1"
+})(["width:100%;-webkit-overflow-y:scroll;overflow-y:scroll;height:90%;padding-right:10px;"]);
+var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillsContainer__SkillSplitDiv",
+  componentId: "sc-1g0c67q-2"
+})(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
+var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillsContainer__CloseButton",
+  componentId: "sc-1g0c67q-3"
+})(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
+
+var formatSpellCastingType = function formatSpellCastingType(castingType) {
+  var formattedCastingType = castingType.split("-").map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(" ");
+  return formattedCastingType;
+};
+
+var SpellInfo = function SpellInfo(_ref) {
+  var spell = _ref.spell;
+  var magicWords = spell.magicWords,
+    name = spell.name,
+    manaCost = spell.manaCost,
+    requiredItem = spell.requiredItem,
+    description = spell.description,
+    castingType = spell.castingType,
+    cooldown = spell.cooldown,
+    maxDistanceGrid = spell.maxDistanceGrid;
+  return React.createElement(Container$m, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$6, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+    className: "label"
+  }, "Casting Type:"), React.createElement("div", {
+    className: "value"
+  }, formatSpellCastingType(castingType))), React.createElement(Statistic$1, null, React.createElement("div", {
+    className: "label"
+  }, "Magic words:"), React.createElement("div", {
+    className: "value"
+  }, magicWords)), React.createElement(Statistic$1, null, React.createElement("div", {
+    className: "label"
+  }, "Mana cost:"), React.createElement("div", {
+    className: "value"
+  }, manaCost)), React.createElement(Statistic$1, null, React.createElement("div", {
+    className: "label"
+  }, "Cooldown:"), React.createElement("div", {
+    className: "value"
+  }, cooldown)), React.createElement(Statistic$1, null, React.createElement("div", {
+    className: "label"
+  }, "Max Distance Grid:"), React.createElement("div", {
+    className: "value"
+  }, maxDistanceGrid)), React.createElement(Statistic$1, null, requiredItem && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "label"
+  }, "Required Item:"), React.createElement("div", {
+    className: "value"
+  }, requiredItem))), React.createElement(Description$1, null, description));
+};
+var Container$m = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Container",
+  componentId: "sc-4hbw3q-0"
+})(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
+var Title$6 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Title",
+  componentId: "sc-4hbw3q-1"
+})(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
+var Type$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Type",
+  componentId: "sc-4hbw3q-2"
+})(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
+var Description$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Description",
+  componentId: "sc-4hbw3q-3"
+})(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
+var Header$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Header",
+  componentId: "sc-4hbw3q-4"
+})(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
+var Statistic$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfo__Statistic",
+  componentId: "sc-4hbw3q-5"
+})(["margin-bottom:0.4rem;width:max-content;.label{display:inline-block;margin-right:0.5rem;color:inherit;}.value{display:inline-block;color:inherit;}&.better,.better{color:", ";}&.worse,.worse{color:", ";}"], uiColors.lightGreen, uiColors.cardinal);
+
+var SpellInfoDisplay = function SpellInfoDisplay(_ref) {
+  var spell = _ref.spell,
+    isMobile = _ref.isMobile;
+  return React.createElement(Flex$1, {
+    "$isMobile": isMobile
+  }, React.createElement(SpellInfo, {
+    spell: spell
+  }));
+};
+var Flex$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellInfoDisplay__Flex",
+  componentId: "sc-1htnsmm-0"
+})(["display:flex;gap:0.5rem;flex-direction:", ";@media (max-width:580px){flex-direction:column-reverse;align-items:center;}"], function (_ref2) {
+  var $isMobile = _ref2.$isMobile;
+  return $isMobile ? 'row-reverse' : 'row';
+});
+
+var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
+  var spell = _ref.spell,
+    closeTooltip = _ref.closeTooltip,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale,
+    options = _ref.options,
+    onSelected = _ref.onSelected;
+  var ref = useRef(null);
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React.createElement(ModalPortal, null, React.createElement(Container$n, {
+    ref: ref,
+    onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
+      setTimeout(function () {
+        closeTooltip();
+      }, 100);
+    },
+    scale: scale
+  }, React.createElement(SpellInfoDisplay, {
+    spell: spell,
+    isMobile: true
+  }), React.createElement(OptionsContainer$1, null, options == null ? void 0 : options.map(function (option) {
+    return React.createElement(Option$1, {
+      key: option.id,
+      onTouchEnd: function onTouchEnd() {
+        handleFadeOut();
+        setTimeout(function () {
+          onSelected == null ? void 0 : onSelected(option.id);
+          closeTooltip();
+        }, 100);
+      }
+    }, option.text);
+  }))));
+};
+var Container$n = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MobileSpellTooltip__Container",
+  componentId: "sc-6p7uvr-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;}"]);
+var OptionsContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MobileSpellTooltip__OptionsContainer",
+  componentId: "sc-6p7uvr-1"
+})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:580px){flex-direction:row;justify-content:center;}"]);
+var Option$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "MobileSpellTooltip__Option",
+  componentId: "sc-6p7uvr-2"
+})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:580px){padding:1rem 0.5rem;}"]);
+
+var offset$1 = 20;
+var MagicTooltip = function MagicTooltip(_ref) {
+  var spell = _ref.spell;
+  var ref = useRef(null);
+  useEffect(function () {
+    var current = ref.current;
+    if (current) {
+      var handleMouseMove = function handleMouseMove(event) {
+        var clientX = event.clientX,
+          clientY = event.clientY;
+        // Adjust the position of the tooltip based on the mouse position
+        var rect = current.getBoundingClientRect();
+        var tooltipWidth = rect.width;
+        var tooltipHeight = rect.height;
+        var isOffScreenRight = clientX + tooltipWidth + offset$1 > window.innerWidth;
+        var isOffScreenBottom = clientY + tooltipHeight + offset$1 > window.innerHeight;
+        var x = isOffScreenRight ? clientX - tooltipWidth - offset$1 : clientX + offset$1;
+        var y = isOffScreenBottom ? clientY - tooltipHeight - offset$1 : clientY + offset$1;
+        current.style.transform = "translate(" + x + "px, " + y + "px)";
+        current.style.opacity = '1';
+      };
+      window.addEventListener('mousemove', handleMouseMove);
+      return function () {
+        window.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+    return;
+  }, []);
+  return React.createElement(ModalPortal, null, React.createElement(Container$o, {
+    ref: ref
+  }, React.createElement(SpellInfoDisplay, {
+    spell: spell
+  })));
+};
+var Container$o = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpellTooltip__Container",
+  componentId: "sc-1go0gwg-0"
+})(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
+
+var SpellInfoWrapper = function SpellInfoWrapper(_ref) {
+  var children = _ref.children,
+    spell = _ref.spell,
+    scale = _ref.scale;
+  var _useState = useState(false),
+    isTooltipVisible = _useState[0],
+    setIsTooltipVisible = _useState[1];
+  var _useState2 = useState(false),
+    isTooltipMobileVisible = _useState2[0],
+    setIsTooltipMobileVisible = _useState2[1];
+  return React.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      if (!isTooltipMobileVisible) setIsTooltipVisible(true);
+    },
+    onMouseLeave: setIsTooltipVisible.bind(null, false),
+    onTouchEnd: function onTouchEnd() {
+      setIsTooltipMobileVisible(true);
+      setIsTooltipVisible(false);
+    }
+  }, children, isTooltipVisible && !isTooltipMobileVisible && React.createElement(MagicTooltip, {
+    spell: spell
+  }), isTooltipMobileVisible && React.createElement(MobileSpellTooltip, {
+    closeTooltip: function closeTooltip() {
+      setIsTooltipMobileVisible(false);
+      console.log('close');
+    },
+    spell: spell,
+    scale: scale
+  }));
 };
-var SkillsDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
-  displayName: "SkillsContainer__SkillsDraggableContainer",
-  componentId: "sc-1g0c67q-0"
-})(["border:1px solid black;width:400px;height:90%;.DraggableContainer__TitleContainer-sc-184mpyl-2{width:auto;height:auto;}"]);
-var SkillsContainerDiv = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SkillsContainer__SkillsContainerDiv",
-  componentId: "sc-1g0c67q-1"
-})(["width:100%;-webkit-overflow-y:scroll;overflow-y:scroll;height:90%;padding-right:10px;"]);
-var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SkillsContainer__SkillSplitDiv",
-  componentId: "sc-1g0c67q-2"
-})(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SkillsContainer__CloseButton",
-  componentId: "sc-1g0c67q-3"
-})(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
 
 var Spell = function Spell(_ref) {
   var spellKey = _ref.spellKey,
-    name = _ref.name,
-    description = _ref.description,
-    magicWords = _ref.magicWords,
-    manaCost = _ref.manaCost,
     charMana = _ref.charMana,
     charMagicLevel = _ref.charMagicLevel,
     onPointerUp = _ref.onPointerUp,
     isSettingShortcut = _ref.isSettingShortcut,
-    minMagicLevelRequired = _ref.minMagicLevelRequired;
+    spell = _ref.spell,
+    activeCooldown = _ref.activeCooldown;
+  var manaCost = spell.manaCost,
+    minMagicLevelRequired = spell.minMagicLevelRequired,
+    magicWords = spell.magicWords,
+    name = spell.name,
+    description = spell.description;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React.createElement(Container$k, {
-    disabled: disabled,
+  return React.createElement(SpellInfoWrapper, {
+    spell: spell
+  }, React.createElement(Container$p, {
+    disabled: disabled || (activeCooldown != null ? activeCooldown : 0) > 0,
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, magicWords.split(' ').map(function (word) {
+  }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+    className: "cooldown"
+  }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, magicWords.split(' ').map(function (word) {
     return word[0];
-  })), React.createElement(Info, null, React.createElement(Title$6, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$7, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React.createElement(Description$1, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+  }, "(", magicWords, ")")), React.createElement(Description$2, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
-  }, manaCost)));
+  }, manaCost))));
 };
-var Container$k = /*#__PURE__*/styled.button.withConfig({
+var Container$p = /*#__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) {
@@ -16201,16 +16682,16 @@ var Container$k = /*#__PURE__*/styled.button.withConfig({
 var SpellImage = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__SpellImage",
   componentId: "sc-j96fa2-1"
-})(["width:4rem;height:4rem;font-size:", ";font-weight:bold;background-color:", ";color:", ";display:flex;justify-content:center;align-items:center;text-transform:uppercase;"], uiFonts.size.xLarge, uiColors.darkGray, uiColors.lightGray);
+})(["width:4rem;height:4rem;font-size:", ";font-weight:bold;background-color:", ";color:", ";display:flex;justify-content:center;align-items:center;text-transform:uppercase;position:relative;overflow:hidden;.cooldown{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0 0 0 / 20%);color:", ";font-weight:bold;display:flex;justify-content:center;align-items:center;}"], uiFonts.size.xLarge, uiColors.darkGray, uiColors.lightGray, uiColors.darkYellow);
 var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
-})(["width:0;flex:1;"]);
-var Title$6 = /*#__PURE__*/styled.p.withConfig({
+})(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
+var Title$7 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$1 = /*#__PURE__*/styled.div.withConfig({
+var Description$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -16240,7 +16721,8 @@ var Spellbook = function Spellbook(_ref) {
     removeShortcut = _ref.removeShortcut,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    spellCooldowns = _ref.spellCooldowns;
   var _useState = useState(''),
     search = _useState[0],
     setSearch = _useState[1];
@@ -16278,7 +16760,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$l, null, React.createElement(Title$7, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$q, null, React.createElement(Title$8, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -16302,15 +16784,17 @@ var Spellbook = function Spellbook(_ref) {
       charMagicLevel: magicLevel,
       onPointerUp: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
       spellKey: spell.key,
-      isSettingShortcut: settingShortcutIndex !== -1
+      isSettingShortcut: settingShortcutIndex !== -1,
+      spell: spell,
+      activeCooldown: spellCooldowns == null ? void 0 : spellCooldowns[spell.magicWords.replaceAll(' ', '_')]
     }, spell)));
   }))));
 };
-var Title$7 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -16324,16 +16808,16 @@ var TextArea = function TextArea(_ref) {
   return React.createElement("textarea", Object.assign({}, props));
 };
 
-var img$8 = 'data:image/gif;base64,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';
+var img$9 = 'data:image/gif;base64,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';
 
-var img$9 = 'data:image/gif;base64,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';
+var img$a = 'data:image/gif;base64,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';
 
-var img$a = 'data:image/gif;base64,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';
+var img$b = 'data:image/gif;base64,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';
 
 var DayNightPeriod = function DayNightPeriod(_ref) {
   var _periodOfDaySrcFiles;
   var periodOfDay = _ref.periodOfDay;
-  var periodOfDaySrcFiles = (_periodOfDaySrcFiles = {}, _periodOfDaySrcFiles[PeriodOfDay.Morning] = img$9, _periodOfDaySrcFiles[PeriodOfDay.Afternoon] = img$8, _periodOfDaySrcFiles[PeriodOfDay.Night] = img$a, _periodOfDaySrcFiles);
+  var periodOfDaySrcFiles = (_periodOfDaySrcFiles = {}, _periodOfDaySrcFiles[PeriodOfDay.Morning] = img$a, _periodOfDaySrcFiles[PeriodOfDay.Afternoon] = img$9, _periodOfDaySrcFiles[PeriodOfDay.Night] = img$b, _periodOfDaySrcFiles);
   return React.createElement(GifContainer, null, React.createElement("img", {
     src: periodOfDaySrcFiles[periodOfDay]
   }));
@@ -16343,7 +16827,7 @@ var GifContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10t97fw-0"
 })(["width:100%;img{width:67%;}"]);
 
-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 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 TimeWidget = function TimeWidget(_ref) {
   var onClose = _ref.onClose,
@@ -16361,7 +16845,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$b);
+})(["background-image:url(", ");background-size:10rem;background-repeat:no-repeat;width:10rem;position:absolute;height:100px;"], img$c);
 var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
@@ -16547,7 +17031,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$8, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$9, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -16577,7 +17061,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -16611,230 +17095,16 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$m, {
+  return React.createElement(Container$r, {
     maxLines: maxLines
   }, children);
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__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__*/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 = 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 = 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();
-    }
-  };
-  useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [chunkIndex]);
-  var _useState2 = useState(false),
-    showGoNextIndicator = _useState2[0],
-    setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$n, null, React.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.createElement(PressSpaceIndicator$1, {
-    right: type === 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;
-});
-
-var NPCDialogType;
-(function (NPCDialogType) {
-  NPCDialogType["TextOnly"] = "TextOnly";
-  NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
-})(NPCDialogType || (NPCDialogType = {}));
-var NPCDialog = function NPCDialog(_ref) {
-  var text = _ref.text,
-    type = _ref.type,
-    _onClose = _ref.onClose,
-    imagePath = _ref.imagePath,
-    _ref$isQuestionDialog = _ref.isQuestionDialog,
-    isQuestionDialog = _ref$isQuestionDialog === void 0 ? false : _ref$isQuestionDialog,
-    questions = _ref.questions,
-    answers = _ref.answers;
-  return React.createElement(RPGUIContainer, {
-    type: RPGUIContainerTypes.FramedGold,
-    width: isQuestionDialog ? '600px' : '80%',
-    height: '180px'
-  }, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
-    flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React.createElement(QuestionDialog, {
-    questions: questions,
-    answers: answers,
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
-    }
-  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
-    src: imagePath || img$5
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$o, null, React.createElement(TextContainer$2, {
-    flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React.createElement(NPCDialogText, {
-    type: type,
-    text: text || 'No text provided.',
-    onClose: function onClose() {
-      if (_onClose) {
-        _onClose();
-      }
-    }
-  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.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 = useState(0),
-    img = _useState[0],
-    setImage = _useState[1];
-  var onHandleSpacePress = function onHandleSpacePress(event) {
-    if (event.code === 'Space') {
-      if (img < (backgroundImgPath == null ? void 0 : backgroundImgPath.length) - 1) {
-        setImage(function (prev) {
-          return prev + 1;
-        });
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
-    }
-  };
-  useEffect(function () {
-    document.addEventListener('keydown', onHandleSpacePress);
-    return function () {
-      return document.removeEventListener('keydown', onHandleSpacePress);
-    };
-  }, [backgroundImgPath]);
-  return React.createElement(BackgroundContainer, {
-    imgPath: backgroundImgPath[img],
-    fullImg: fullCoverBackground
-  }, React.createElement(DialogContainer, null, textAndTypeArray ? React.createElement(NPCMultiDialog, {
-    textAndTypeArray: textAndTypeArray,
-    onClose: onClose
-  }) : questions && answers ? React.createElement(QuestionDialog, {
-    questions: questions,
-    answers: answers,
-    onClose: onClose
-  }) : text && imagePath ? React.createElement(NPCDialog, {
-    text: text,
-    imagePath: imagePath,
-    onClose: onClose,
-    type: NPCDialogType.TextAndThumbnail
-  }) : React.createElement(NPCDialog, {
-    text: text,
-    onClose: onClose,
-    type: NPCDialogType.TextOnly
-  })));
-};
-var BackgroundContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "HistoryDialog__BackgroundContainer",
-  componentId: "sc-u6oe75-0"
-})(["width:100%;height:100%;background-image:url(", ");background-size:", ";display:flex;justify-content:space-evenly;align-items:center;"], function (props) {
-  return props.imgPath;
-}, function (props) {
-  return props.imgPath ? 'cover' : 'auto';
-});
-var DialogContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "HistoryDialog__DialogContainer",
-  componentId: "sc-u6oe75-1"
-})(["display:flex;justify-content:center;padding-top:200px;"]);
-
 export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, rarityColor, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map