@rpg-engine/long-bow 0.6.7 → 0.6.9

package/dist/long-bow.esm.js

@@ -136,6 +136,337 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   return props.opensUp ? 'auto' : '100%';
 });
 
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return exports;
+  };
+  var exports = {},
+    Op = Object.prototype,
+    hasOwn = Op.hasOwnProperty,
+    defineProperty = Object.defineProperty || function (obj, key, desc) {
+      obj[key] = desc.value;
+    },
+    $Symbol = "function" == typeof Symbol ? Symbol : {},
+    iteratorSymbol = $Symbol.iterator || "@@iterator",
+    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+      generator = Object.create(protoGenerator.prototype),
+      context = new Context(tryLocsList || []);
+    return defineProperty(generator, "_invoke", {
+      value: makeInvokeMethod(innerFn, self, context)
+    }), generator;
+  }
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+  exports.wrap = wrap;
+  var ContinueSentinel = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+  var getProto = Object.getPrototypeOf,
+    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function (method) {
+      define(prototype, method, function (arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if ("throw" !== record.type) {
+        var result = record.arg,
+          value = result.value;
+        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+      reject(record.arg);
+    }
+    var previousPromise;
+    defineProperty(this, "_invoke", {
+      value: function (method, arg) {
+        function callInvokeWithMethodAndArg() {
+          return new PromiseImpl(function (resolve, reject) {
+            invoke(method, arg, resolve, reject);
+          });
+        }
+        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      }
+    });
+  }
+  function makeInvokeMethod(innerFn, self, context) {
+    var state = "suspendedStart";
+    return function (method, arg) {
+      if ("executing" === state) throw new Error("Generator is already running");
+      if ("completed" === state) {
+        if ("throw" === method) throw arg;
+        return doneResult();
+      }
+      for (context.method = method, context.arg = arg;;) {
+        var delegate = context.delegate;
+        if (delegate) {
+          var delegateResult = maybeInvokeDelegate(delegate, context);
+          if (delegateResult) {
+            if (delegateResult === ContinueSentinel) continue;
+            return delegateResult;
+          }
+        }
+        if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+          if ("suspendedStart" === state) throw state = "completed", context.arg;
+          context.dispatchException(context.arg);
+        } else "return" === context.method && context.abrupt("return", context.arg);
+        state = "executing";
+        var record = tryCatch(innerFn, self, context);
+        if ("normal" === record.type) {
+          if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+          return {
+            value: record.arg,
+            done: context.done
+          };
+        }
+        "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+      }
+    };
+  }
+  function maybeInvokeDelegate(delegate, context) {
+    var methodName = context.method,
+      method = delegate.iterator[methodName];
+    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
+    var record = tryCatch(method, delegate.iterator, context.arg);
+    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+    var info = record.arg;
+    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+  }
+  function pushTryEntry(locs) {
+    var entry = {
+      tryLoc: locs[0]
+    };
+    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+  }
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal", delete record.arg, entry.completion = record;
+  }
+  function Context(tryLocsList) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) return iteratorMethod.call(iterable);
+      if ("function" == typeof iterable.next) return iterable;
+      if (!isNaN(iterable.length)) {
+        var i = -1,
+          next = function next() {
+            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+            return next.value = undefined, next.done = !0, next;
+          };
+        return next.next = next;
+      }
+    }
+    return {
+      next: doneResult
+    };
+  }
+  function doneResult() {
+    return {
+      value: undefined,
+      done: !0
+    };
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (val) {
+    var object = Object(val),
+      keys = [];
+    for (var key in object) keys.push(key);
+    return keys.reverse(), function next() {
+      for (; keys.length;) {
+        var key = keys.pop();
+        if (key in object) return next.value = key, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, exports.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    },
+    stop: function () {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    dispatchException: function (exception) {
+      if (this.done) throw exception;
+      var context = this;
+      function handle(loc, caught) {
+        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+      }
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i],
+          record = entry.completion;
+        if ("root" === entry.tryLoc) return handle("end");
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+            hasFinally = hasOwn.call(entry, "finallyLoc");
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+      var record = finallyEntry ? finallyEntry.completion : {};
+      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+    },
+    complete: function (record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function (finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    catch: function (tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if ("throw" === record.type) {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+      throw new Error("illegal catch attempt");
+    },
+    delegateYield: function (iterable, resultName, nextLoc) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, exports;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -12757,6 +13088,159 @@ var Button$1 = /*#__PURE__*/styled.button.withConfig({
   return buttonBackgroundColor;
 });
 
+var _excluded$2 = ["innerRef"];
+var Input = function Input(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return React.createElement("input", Object.assign({}, rest, {
+    ref: props.innerRef
+  }));
+};
+
+var RPGUIContainerTypes;
+(function (RPGUIContainerTypes) {
+  RPGUIContainerTypes["Framed"] = "framed";
+  RPGUIContainerTypes["FramedGold"] = "framed-golden";
+  RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
+  RPGUIContainerTypes["FramedGrey"] = "framed-grey";
+})(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
+var RPGUIContainer = function RPGUIContainer(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '50%' : _ref$width,
+    height = _ref.height,
+    className = _ref.className;
+  return React.createElement(Container$5, {
+    width: width,
+    height: height || 'auto',
+    className: "rpgui-container " + type + " " + className
+  }, children);
+};
+var Container$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RPGUIContainer__Container",
+  componentId: "sc-a7heha-0"
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
+  return props.height;
+}, function (_ref2) {
+  var width = _ref2.width;
+  return width;
+});
+
+var ChatDeprecated = function ChatDeprecated(_ref) {
+  var chatMessages = _ref.chatMessages,
+    onSendChatMessage = _ref.onSendChatMessage,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '250px' : _ref$height,
+    onCloseButton = _ref.onCloseButton,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur;
+  var _useState = useState(''),
+    message = _useState[0],
+    setMessage = _useState[1];
+  useEffect(function () {
+    scrollChatToBottom();
+  }, []);
+  useEffect(function () {
+    scrollChatToBottom();
+  }, [chatMessages]);
+  var scrollChatToBottom = function scrollChatToBottom() {
+    var scrollingElement = document.querySelector('.chat-body');
+    if (scrollingElement) {
+      scrollingElement.scrollTop = scrollingElement.scrollHeight;
+    }
+  };
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    onSendChatMessage(message);
+    setMessage('');
+  };
+  var getInputValue = function getInputValue(value) {
+    setMessage(value);
+  };
+  var onRenderMessageLines = function onRenderMessageLines(emitter, createdAt, message) {
+    return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
+  };
+  var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
+    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (_ref2, index) {
+      var _id = _ref2._id,
+        createdAt = _ref2.createdAt,
+        emitter = _ref2.emitter,
+        message = _ref2.message;
+      return React.createElement(MessageText, {
+        key: _id + "_" + index
+      }, onRenderMessageLines(emitter, createdAt, message));
+    }) : React.createElement(MessageText, null, "No messages available.");
+  };
+  return React.createElement(Container$6, null, React.createElement(CustomContainer, {
+    type: RPGUIContainerTypes.FramedGrey,
+    width: width,
+    height: height,
+    className: "chat-container",
+    opacity: opacity
+  }, React.createElement(ErrorBoundary$1, {
+    fallback: React.createElement("p", null, "Oops! Your chat has crashed.")
+  }, onCloseButton && React.createElement(CloseButton, {
+    onPointerDown: onCloseButton
+  }, "X"), React.createElement(RPGUIContainer, {
+    type: RPGUIContainerTypes.FramedGrey,
+    width: '100%',
+    height: '80%',
+    className: "chat-body dark-background"
+  }, onRenderChatMessages(chatMessages)), React.createElement(Form$1, {
+    onSubmit: handleSubmit
+  }, React.createElement(Column, {
+    flex: 70
+  }, React.createElement(CustomInput, {
+    value: message,
+    id: "inputMessage",
+    onChange: function onChange(e) {
+      return getInputValue(e.target.value);
+    },
+    height: 20,
+    className: "chat-input dark-background",
+    type: "text",
+    autoComplete: "off",
+    onFocus: onFocus,
+    onBlur: onBlur
+  })), React.createElement(Column, {
+    justifyContent: "flex-end"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    id: "chat-send-button"
+  }, "Send"))))));
+};
+var Container$6 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatDeprecated__Container",
+  componentId: "sc-fuuod3-0"
+})(["position:relative;"]);
+var CloseButton = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatDeprecated__CloseButton",
+  componentId: "sc-fuuod3-1"
+})(["position:absolute;top:2px;right:0px;color:white;z-index:22;font-size:0.7rem;"]);
+var CustomInput = /*#__PURE__*/styled(Input).withConfig({
+  displayName: "ChatDeprecated__CustomInput",
+  componentId: "sc-fuuod3-2"
+})(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
+var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
+  displayName: "ChatDeprecated__CustomContainer",
+  componentId: "sc-fuuod3-3"
+})(["display:block;opacity:", ";&:hover{opacity:1;}.dark-background{background-color:", " !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"], function (props) {
+  return props.opacity;
+}, uiColors.darkGray);
+var Form$1 = /*#__PURE__*/styled.form.withConfig({
+  displayName: "ChatDeprecated__Form",
+  componentId: "sc-fuuod3-4"
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+var MessageText = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ChatDeprecated__MessageText",
+  componentId: "sc-fuuod3-5"
+})(["display:block !important;width:100%;font-size:", " !important;overflow-y:auto;margin:0;"], uiFonts.size.xsmall);
+
 var SearchCharacter = function SearchCharacter(_ref) {
   var onChangeCharacterName = _ref.onChangeCharacterName,
     onBlur = _ref.onBlur,
@@ -12797,7 +13281,7 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     hideSearchCharacterUI();
   };
-  return React.createElement(SearchContainer, null, React.createElement(Form$1, {
+  return React.createElement(SearchContainer, null, React.createElement(Form$2, {
     onSubmit: handleSubmit
   }, React.createElement(Column, {
     flex: 70
@@ -12842,7 +13326,7 @@ var SearchContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
 })(["width:100%;"]);
-var Form$1 = /*#__PURE__*/styled.form.withConfig({
+var Form$2 = /*#__PURE__*/styled.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
 })(["display:flex;width:100%;justify-content:center;align-items:center;"]);
@@ -12946,7 +13430,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
       }
     }, React.createElement(StatusDot, {
       isUnseen: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) || false
-    }), character.name), React.createElement(CloseButton, {
+    }), character.name), React.createElement(CloseButton$1, {
       onPointerDown: function onPointerDown() {
         return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
       }
@@ -13045,164 +13529,11 @@ var StatusDot = /*#__PURE__*/styled.span.withConfig({
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";display:inline-block;margin-right:6px;"], function (props) {
   return props.isUnseen ? uiColors.lightGreen : uiColors.gray;
 });
-var CloseButton = /*#__PURE__*/styled.button.withConfig({
+var CloseButton$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "ChatRevamp__CloseButton",
   componentId: "sc-1sdiknw-12"
 })(["all:unset;font-size:", ";margin:0 0.5rem;transition:all 0.2s ease-in-out;background-color:", ";color:", ";&:hover{background-color:", ";color:", ";}"], uiFonts.size.xxsmall, uiColors.red, uiColors.white, uiColors.white, uiColors.red);
 
-var _excluded$2 = ["innerRef"];
-var Input = function Input(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  var rest = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return React.createElement("input", Object.assign({}, rest, {
-    ref: props.innerRef
-  }));
-};
-
-var RPGUIContainerTypes;
-(function (RPGUIContainerTypes) {
-  RPGUIContainerTypes["Framed"] = "framed";
-  RPGUIContainerTypes["FramedGold"] = "framed-golden";
-  RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
-  RPGUIContainerTypes["FramedGrey"] = "framed-grey";
-})(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
-var RPGUIContainer = function RPGUIContainer(_ref) {
-  var children = _ref.children,
-    type = _ref.type,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '50%' : _ref$width,
-    height = _ref.height,
-    className = _ref.className;
-  return React.createElement(Container$5, {
-    width: width,
-    height: height || 'auto',
-    className: "rpgui-container " + type + " " + className
-  }, children);
-};
-var Container$5 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "RPGUIContainer__Container",
-  componentId: "sc-a7heha-0"
-})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
-  return props.height;
-}, function (_ref2) {
-  var width = _ref2.width;
-  return width;
-});
-
-var ChatDeprecated = function ChatDeprecated(_ref) {
-  var chatMessages = _ref.chatMessages,
-    onSendChatMessage = _ref.onSendChatMessage,
-    _ref$opacity = _ref.opacity,
-    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '250px' : _ref$height,
-    onCloseButton = _ref.onCloseButton,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur;
-  var _useState = useState(''),
-    message = _useState[0],
-    setMessage = _useState[1];
-  useEffect(function () {
-    scrollChatToBottom();
-  }, []);
-  useEffect(function () {
-    scrollChatToBottom();
-  }, [chatMessages]);
-  var scrollChatToBottom = function scrollChatToBottom() {
-    var scrollingElement = document.querySelector('.chat-body');
-    if (scrollingElement) {
-      scrollingElement.scrollTop = scrollingElement.scrollHeight;
-    }
-  };
-  var handleSubmit = function handleSubmit(event) {
-    event.preventDefault();
-    onSendChatMessage(message);
-    setMessage('');
-  };
-  var getInputValue = function getInputValue(value) {
-    setMessage(value);
-  };
-  var onRenderMessageLines = function onRenderMessageLines(emitter, createdAt, message) {
-    return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
-  };
-  var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
-    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (_ref2, index) {
-      var _id = _ref2._id,
-        createdAt = _ref2.createdAt,
-        emitter = _ref2.emitter,
-        message = _ref2.message;
-      return React.createElement(MessageText, {
-        key: _id + "_" + index
-      }, onRenderMessageLines(emitter, createdAt, message));
-    }) : React.createElement(MessageText, null, "No messages available.");
-  };
-  return React.createElement(Container$6, null, React.createElement(CustomContainer, {
-    type: RPGUIContainerTypes.FramedGrey,
-    width: width,
-    height: height,
-    className: "chat-container",
-    opacity: opacity
-  }, React.createElement(ErrorBoundary$1, {
-    fallback: React.createElement("p", null, "Oops! Your chat has crashed.")
-  }, onCloseButton && React.createElement(CloseButton$1, {
-    onPointerDown: onCloseButton
-  }, "X"), React.createElement(RPGUIContainer, {
-    type: RPGUIContainerTypes.FramedGrey,
-    width: '100%',
-    height: '80%',
-    className: "chat-body dark-background"
-  }, onRenderChatMessages(chatMessages)), React.createElement(Form$2, {
-    onSubmit: handleSubmit
-  }, React.createElement(Column, {
-    flex: 70
-  }, React.createElement(CustomInput, {
-    value: message,
-    id: "inputMessage",
-    onChange: function onChange(e) {
-      return getInputValue(e.target.value);
-    },
-    height: 20,
-    className: "chat-input dark-background",
-    type: "text",
-    autoComplete: "off",
-    onFocus: onFocus,
-    onBlur: onBlur
-  })), React.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    id: "chat-send-button"
-  }, "Send"))))));
-};
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatDeprecated__Container",
-  componentId: "sc-fuuod3-0"
-})(["position:relative;"]);
-var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatDeprecated__CloseButton",
-  componentId: "sc-fuuod3-1"
-})(["position:absolute;top:2px;right:0px;color:white;z-index:22;font-size:0.7rem;"]);
-var CustomInput = /*#__PURE__*/styled(Input).withConfig({
-  displayName: "ChatDeprecated__CustomInput",
-  componentId: "sc-fuuod3-2"
-})(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
-var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
-  displayName: "ChatDeprecated__CustomContainer",
-  componentId: "sc-fuuod3-3"
-})(["display:block;opacity:", ";&:hover{opacity:1;}.dark-background{background-color:", " !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"], function (props) {
-  return props.opacity;
-}, uiColors.darkGray);
-var Form$2 = /*#__PURE__*/styled.form.withConfig({
-  displayName: "ChatDeprecated__Form",
-  componentId: "sc-fuuod3-4"
-})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
-var MessageText = /*#__PURE__*/styled.p.withConfig({
-  displayName: "ChatDeprecated__MessageText",
-  componentId: "sc-fuuod3-5"
-})(["display:block !important;width:100%;font-size:", " !important;overflow-y:auto;margin:0;"], uiFonts.size.xsmall);
-
 var CheckButton = function CheckButton(_ref) {
   var items = _ref.items,
     onChange = _ref.onChange;
@@ -16788,6 +17119,92 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   return isFullScreen && '50%';
 });
 
+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);
+  };
+  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();
+      }
+    }
+  }, 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,
+      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")));
+};
+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 LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
     rankType = props.rankType;
@@ -17619,12 +18036,12 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$4, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
     type: "text"
-  }), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
+  }), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
       onCreate();
@@ -17642,11 +18059,11 @@ var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__ButtonWrapper",
   componentId: "sc-13brop0-2"
 })(["margin-top:10px;width:100%;display:flex;justify-content:space-around;align-items:center;.cancel-button{filter:grayscale(0.7);}"]);
@@ -17691,7 +18108,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$4, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$5, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -17718,7 +18135,7 @@ var RowsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyDashboard__RowsWrapper",
   componentId: "sc-16cm41r-1"
 })(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -17755,7 +18172,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$6, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -17774,7 +18191,7 @@ var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -17832,7 +18249,7 @@ var PartyManager = function PartyManager(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$6, null, "Party Dashboard"), React.createElement("hr", {
+  }, React.createElement(Title$7, null, "Party Dashboard"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$2, {
     className: "partyRows"
@@ -17878,7 +18295,7 @@ var RowsWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManager__RowsWrapper",
   componentId: "sc-1yqcad8-2"
 })(["width:100%;"]);
-var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyManager__Title",
   componentId: "sc-1yqcad8-3"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -18143,7 +18560,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -18162,7 +18579,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -18209,7 +18626,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-15s2boc-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$7 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -18233,7 +18650,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$8, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$9, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -18254,7 +18671,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
   displayName: "QuestList__QuestDraggableContainer",
   componentId: "sc-1a2vx6q-0"
 })([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -18267,29 +18684,6 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
-var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
-  var children = _ref.children;
-  return React.createElement(Container$q, null, children);
-};
-var Container$q = /*#__PURE__*/styled.div.withConfig({
-  displayName: "RPGUIScrollbar__Container",
-  componentId: "sc-p3msmb-0"
-})([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
-
-var RPGUIOverrides = function RPGUIOverrides(_ref) {
-  var children = _ref.children;
-  return React.createElement(RPGUIScrollbar, null, children);
-};
-
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React.createElement(RPGUIOverrides, null, React.createElement("div", {
-    className: "rpgui-content"
-  }, children));
-};
-
 var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -18322,6 +18716,29 @@ var InputRadio$1 = function InputRadio(_ref) {
   }));
 };
 
+var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
+  var children = _ref.children;
+  return React.createElement(Container$q, null, children);
+};
+var Container$q = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RPGUIScrollbar__Container",
+  componentId: "sc-p3msmb-0"
+})([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
+
+var RPGUIOverrides = function RPGUIOverrides(_ref) {
+  var children = _ref.children;
+  return React.createElement(RPGUIScrollbar, null, children);
+};
+
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React.createElement(RPGUIOverrides, null, React.createElement("div", {
+    className: "rpgui-content"
+  }, children));
+};
+
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -18760,7 +19177,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$s, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$9, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$s, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$a, 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"
@@ -18790,7 +19207,7 @@ var Container$s = /*#__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$9 = /*#__PURE__*/styled.div.withConfig({
+var Title$a = /*#__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);
@@ -18985,7 +19402,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$b, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$3, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
@@ -19006,7 +19423,7 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$a = /*#__PURE__*/styled.p.withConfig({
+var Title$b = /*#__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);
@@ -19070,7 +19487,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$w, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$w, null, React.createElement(Title$c, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -19102,7 +19519,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$b = /*#__PURE__*/styled.h1.withConfig({
+var Title$c = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -19118,14 +19535,83 @@ var SpellList = /*#__PURE__*/styled.div.withConfig({
 var Stepper = function Stepper(_ref) {
   var _steps$currentStep;
   var steps = _ref.steps,
-    finalCTAButton = _ref.finalCTAButton;
+    finalCTAButton = _ref.finalCTAButton,
+    onError = _ref.onError,
+    _ref$useSideArrows = _ref.useSideArrows,
+    useSideArrows = _ref$useSideArrows === void 0 ? false : _ref$useSideArrows;
   var _useState = useState(0),
     currentStep = _useState[0],
     setCurrentStep = _useState[1];
   var currentComponent = (_steps$currentStep = steps[currentStep]) == null ? void 0 : _steps$currentStep.component;
   var totalSteps = steps.length;
-  var onStepChange = function onStepChange(step) {
-    setCurrentStep(step);
+  var onStepChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(step) {
+      var _steps$currentStep2;
+      var isValid;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!((_steps$currentStep2 = steps[currentStep]) != null && _steps$currentStep2.validate)) {
+              _context.next = 14;
+              break;
+            }
+            _context.prev = 1;
+            _context.next = 4;
+            return steps[currentStep].validate();
+          case 4:
+            isValid = _context.sent;
+            if (isValid) {
+              _context.next = 8;
+              break;
+            }
+            if (onError) {
+              onError(steps[currentStep].errorMessage || "Validation failed on step " + (currentStep + 1));
+            }
+            return _context.abrupt("return");
+          case 8:
+            _context.next = 14;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](1);
+            if (onError) {
+              onError("An error occurred during validation on step " + (currentStep + 1));
+            }
+            return _context.abrupt("return");
+          case 14:
+            setCurrentStep(step);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 10]]);
+    }));
+    return function onStepChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var renderArrows = function renderArrows() {
+    var leftArrow = React.createElement(SelectArrow, {
+      direction: "left",
+      onPointerDown: function onPointerDown() {
+        return onStepChange(Math.max(0, currentStep - 1));
+      }
+    });
+    var rightArrow = React.createElement(SelectArrow, {
+      direction: "right",
+      onPointerDown: function onPointerDown() {
+        return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
+      }
+    });
+    if (useSideArrows) {
+      return React.createElement(React.Fragment, null, currentStep > 0 && React.createElement(ArrowContainer$1, {
+        left: true
+      }, leftArrow), currentStep < totalSteps - 1 && React.createElement(ArrowContainer$1, {
+        right: true
+      }, rightArrow));
+    } else {
+      return React.createElement(React.Fragment, null, currentStep > 0 && leftArrow, currentStep < totalSteps - 1 && rightArrow);
+    }
   };
   return React.createElement(StepperContainer, {
     className: "stepper-container"
@@ -19139,19 +19625,9 @@ var Stepper = function Stepper(_ref) {
         return onStepChange(i);
       }
     });
-  })), React.createElement(StepperBody, null, currentComponent), React.createElement(StepperFooter, null, currentStep > 0 && React.createElement(SelectArrow, {
-    direction: "left",
-    onPointerDown: function onPointerDown() {
-      return onStepChange(Math.max(0, currentStep - 1));
-    }
-  }), currentStep < totalSteps - 1 && React.createElement(SelectArrow, {
-    direction: "right",
-    onPointerDown: function onPointerDown() {
-      return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
-    }
-  }), currentStep === totalSteps - 1 && finalCTAButton && React.createElement(Button, {
+  })), React.createElement(StepperBodyContainer, null, useSideArrows && renderArrows(), React.createElement(StepperBody, null, currentComponent)), React.createElement(StepperFooter, null, !useSideArrows && renderArrows(), currentStep === totalSteps - 1 && finalCTAButton && React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: finalCTAButton.onClick
+    onClick: finalCTAButton.onClick
   }, finalCTAButton.label)));
 };
 var StepperContainer = /*#__PURE__*/styled.div.withConfig({
@@ -19162,24 +19638,39 @@ var StepperTop = /*#__PURE__*/styled.div.withConfig({
   displayName: "Stepper__StepperTop",
   componentId: "sc-13obf1-1"
 })(["flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:1rem;"]);
+var StepperBodyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__StepperBodyContainer",
+  componentId: "sc-13obf1-2"
+})(["flex:8;display:flex;align-items:center;position:relative;"]);
 var StepperBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "Stepper__StepperBody",
-  componentId: "sc-13obf1-2"
-})(["flex:8;"]);
+  componentId: "sc-13obf1-3"
+})(["flex:1;"]);
+var ArrowContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Stepper__ArrowContainer",
+  componentId: "sc-13obf1-4"
+})(["position:absolute;top:50%;transform:translateY(-50%);", " ", ""], function (props) {
+  return props.left && 'left: -30px;';
+}, function (props) {
+  return props.right && 'right: -30px;';
+});
 var StepperFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "Stepper__StepperFooter",
-  componentId: "sc-13obf1-3"
-})(["margin-top:1rem;flex:1;display:flex;justify-content:flex-end;"]);
+  componentId: "sc-13obf1-5"
+})(["margin-top:1rem;flex:1;display:flex;justify-content:flex-end;align-items:center;"]);
 var ProgressIndicator = /*#__PURE__*/styled.div.withConfig({
   displayName: "Stepper__ProgressIndicator",
-  componentId: "sc-13obf1-4"
-})(["width:20px;height:20px;border-radius:50%;background-color:", ";margin:0 5px;transition:background-color 0.3s;opacity:", ";border:1px solid ", ";cursor:pointer;"], function (_ref2) {
-  var isActive = _ref2.isActive;
-  return isActive ? uiColors.orange : uiColors.lightGray;
-}, function (_ref3) {
+  componentId: "sc-13obf1-6"
+})(["width:20px;height:20px;background-color:", ";margin:0 5px;transition:background-color 0.3s;opacity:", ";border:1px solid ", ";cursor:pointer;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:", ";border-radius:0;"], function (_ref3) {
   var isActive = _ref3.isActive;
+  return isActive ? uiColors.orange : uiColors.lightGray;
+}, function (_ref4) {
+  var isActive = _ref4.isActive;
   return isActive ? 1 : 0.25;
-}, uiColors.raisinBlack);
+}, uiColors.raisinBlack, function (_ref5) {
+  var isActive = _ref5.isActive;
+  return isActive ? '0 0 0 1px black, 1px 1px 0 1px black, 2px 2px 0 1px black, -1px -1px 0 1px black' : '0 0 0 1px black, 1px 1px 0 1px gray, 2px 2px 0 1px gray, -1px -1px 0 1px gray';
+});
 
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
@@ -19453,7 +19944,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$c, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$d, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -19471,7 +19962,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     }));
-  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2))), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2))), React.createElement(ButtonWrapper$3, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -19484,7 +19975,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$c = /*#__PURE__*/styled.h1.withConfig({
+var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -19508,7 +19999,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__AlertWrapper",
   componentId: "sc-1wjsz1l-5"
 })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;button{padding:0px 50px;}"]);
@@ -19529,91 +20020,45 @@ var Container$x = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-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 TutorialStepper = function TutorialStepper(_ref) {
+  var lessons = _ref.lessons,
+    onLessonFinish = _ref.onLessonFinish;
+  var generateLessons = function generateLessons() {
+    return lessons.map(function (lesson, index) {
+      return {
+        component: React.createElement("div", null, React.createElement("h1", null, lesson.title), lesson.image && React.createElement(LessonImage, null, React.createElement("img", {
+          src: lesson.image,
+          alt: lesson.title
+        })), lesson.body && React.createElement(LessonBody, null, lesson.body), lesson.text && React.createElement(DynamicText, {
+          text: lesson.text
+        })),
+        id: index
+      };
+    });
   };
-  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();
-      }
-    }
-  }, React.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React.createElement(Title$d, 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'
+  return React.createElement(Container$y, null, React.createElement(Stepper, {
+    steps: generateLessons(),
+    finalCTAButton: {
+      label: 'Close',
+      onClick: function onClick() {
+        onLessonFinish();
       }
-    }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper$3, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "Cancel"), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton
-  }, "Select")));
+    },
+    useSideArrows: true
+  }));
 };
-var Title$d = /*#__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$3 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__ButtonWrapper",
-  componentId: "sc-gptoxp-5"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+var LessonBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TutorialStepper__LessonBody",
+  componentId: "sc-7tgzv2-0"
+})([""]);
+var Container$y = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TutorialStepper__Container",
+  componentId: "sc-7tgzv2-1"
+})(["margin:2rem;"]);
+var LessonImage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TutorialStepper__LessonImage",
+  componentId: "sc-7tgzv2-2"
+})(["display:flex;justify-content:center;align-items:center;img{width:600px;height:400px;border-radius:10px;}"]);
 
-export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map