@rpg-engine/long-bow 0.6.8 → 0.6.9

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

@@ -13095,6 +13095,158 @@ var Button$1 = /*#__PURE__*/styled__default.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__default.createElement("input", Object.assign({}, rest, {
+    ref: props.innerRef
+  }));
+};
+
+(function (RPGUIContainerTypes) {
+  RPGUIContainerTypes["Framed"] = "framed";
+  RPGUIContainerTypes["FramedGold"] = "framed-golden";
+  RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
+  RPGUIContainerTypes["FramedGrey"] = "framed-grey";
+})(exports.RPGUIContainerTypes || (exports.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__default.createElement(Container$5, {
+    width: width,
+    height: height || 'auto',
+    className: "rpgui-container " + type + " " + className
+  }, children);
+};
+var Container$5 = /*#__PURE__*/styled__default.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 = React.useState(''),
+    message = _useState[0],
+    setMessage = _useState[1];
+  React.useEffect(function () {
+    scrollChatToBottom();
+  }, []);
+  React.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__default.createElement(MessageText, {
+        key: _id + "_" + index
+      }, onRenderMessageLines(emitter, createdAt, message));
+    }) : React__default.createElement(MessageText, null, "No messages available.");
+  };
+  return React__default.createElement(Container$6, null, React__default.createElement(CustomContainer, {
+    type: exports.RPGUIContainerTypes.FramedGrey,
+    width: width,
+    height: height,
+    className: "chat-container",
+    opacity: opacity
+  }, React__default.createElement(reactErrorBoundary.ErrorBoundary, {
+    fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
+  }, onCloseButton && React__default.createElement(CloseButton, {
+    onPointerDown: onCloseButton
+  }, "X"), React__default.createElement(RPGUIContainer, {
+    type: exports.RPGUIContainerTypes.FramedGrey,
+    width: '100%',
+    height: '80%',
+    className: "chat-body dark-background"
+  }, onRenderChatMessages(chatMessages)), React__default.createElement(Form$1, {
+    onSubmit: handleSubmit
+  }, React__default.createElement(Column, {
+    flex: 70
+  }, React__default.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__default.createElement(Column, {
+    justifyContent: "flex-end"
+  }, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    id: "chat-send-button"
+  }, "Send"))))));
+};
+var Container$6 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ChatDeprecated__Container",
+  componentId: "sc-fuuod3-0"
+})(["position:relative;"]);
+var CloseButton = /*#__PURE__*/styled__default.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__default(Input).withConfig({
+  displayName: "ChatDeprecated__CustomInput",
+  componentId: "sc-fuuod3-2"
+})(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
+var CustomContainer = /*#__PURE__*/styled__default(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__default.form.withConfig({
+  displayName: "ChatDeprecated__Form",
+  componentId: "sc-fuuod3-4"
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+var MessageText = /*#__PURE__*/styled__default.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,
@@ -13135,7 +13287,7 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     hideSearchCharacterUI();
   };
-  return React__default.createElement(SearchContainer, null, React__default.createElement(Form$1, {
+  return React__default.createElement(SearchContainer, null, React__default.createElement(Form$2, {
     onSubmit: handleSubmit
   }, React__default.createElement(Column, {
     flex: 70
@@ -13180,7 +13332,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
 })(["width:100%;"]);
-var Form$1 = /*#__PURE__*/styled__default.form.withConfig({
+var Form$2 = /*#__PURE__*/styled__default.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
 })(["display:flex;width:100%;justify-content:center;align-items:center;"]);
@@ -13284,7 +13436,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
       }
     }, React__default.createElement(StatusDot, {
       isUnseen: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) || false
-    }), character.name), React__default.createElement(CloseButton, {
+    }), character.name), React__default.createElement(CloseButton$1, {
       onPointerDown: function onPointerDown() {
         return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
       }
@@ -13383,163 +13535,11 @@ var StatusDot = /*#__PURE__*/styled__default.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__default.button.withConfig({
+var CloseButton$1 = /*#__PURE__*/styled__default.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__default.createElement("input", Object.assign({}, rest, {
-    ref: props.innerRef
-  }));
-};
-
-(function (RPGUIContainerTypes) {
-  RPGUIContainerTypes["Framed"] = "framed";
-  RPGUIContainerTypes["FramedGold"] = "framed-golden";
-  RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
-  RPGUIContainerTypes["FramedGrey"] = "framed-grey";
-})(exports.RPGUIContainerTypes || (exports.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__default.createElement(Container$5, {
-    width: width,
-    height: height || 'auto',
-    className: "rpgui-container " + type + " " + className
-  }, children);
-};
-var Container$5 = /*#__PURE__*/styled__default.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 = React.useState(''),
-    message = _useState[0],
-    setMessage = _useState[1];
-  React.useEffect(function () {
-    scrollChatToBottom();
-  }, []);
-  React.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__default.createElement(MessageText, {
-        key: _id + "_" + index
-      }, onRenderMessageLines(emitter, createdAt, message));
-    }) : React__default.createElement(MessageText, null, "No messages available.");
-  };
-  return React__default.createElement(Container$6, null, React__default.createElement(CustomContainer, {
-    type: exports.RPGUIContainerTypes.FramedGrey,
-    width: width,
-    height: height,
-    className: "chat-container",
-    opacity: opacity
-  }, React__default.createElement(reactErrorBoundary.ErrorBoundary, {
-    fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
-  }, onCloseButton && React__default.createElement(CloseButton$1, {
-    onPointerDown: onCloseButton
-  }, "X"), React__default.createElement(RPGUIContainer, {
-    type: exports.RPGUIContainerTypes.FramedGrey,
-    width: '100%',
-    height: '80%',
-    className: "chat-body dark-background"
-  }, onRenderChatMessages(chatMessages)), React__default.createElement(Form$2, {
-    onSubmit: handleSubmit
-  }, React__default.createElement(Column, {
-    flex: 70
-  }, React__default.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__default.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    id: "chat-send-button"
-  }, "Send"))))));
-};
-var Container$6 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ChatDeprecated__Container",
-  componentId: "sc-fuuod3-0"
-})(["position:relative;"]);
-var CloseButton$1 = /*#__PURE__*/styled__default.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__default(Input).withConfig({
-  displayName: "ChatDeprecated__CustomInput",
-  componentId: "sc-fuuod3-2"
-})(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
-var CustomContainer = /*#__PURE__*/styled__default(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__default.form.withConfig({
-  displayName: "ChatDeprecated__Form",
-  componentId: "sc-fuuod3-4"
-})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
-var MessageText = /*#__PURE__*/styled__default.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;
@@ -17099,28 +17099,114 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     setQuantitySelect: setQuantitySelect
   }));
 };
-var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemContainer__ItemsContainer",
-  componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:", ";flex-wrap:wrap;max-height:", ";overflow-y:", ";overflow-x:hidden;width:", ";max-height:", ";@media screen and (max-height:350px){max-height:", ";}"], function (_ref2) {
-  var isFullScreen = _ref2.isFullScreen;
-  return isFullScreen ? 'flex-start' : 'center';
-}, function (_ref3) {
-  var isFullScreen = _ref3.isFullScreen;
-  return isFullScreen ? undefined : '270px';
-}, function (_ref4) {
-  var isScrollable = _ref4.isScrollable;
-  return isScrollable ? 'auto' : 'hidden';
-}, function (_ref5) {
-  var isFullScreen = _ref5.isFullScreen;
-  return isFullScreen ? '100vw' : '415px';
-}, function (_ref6) {
-  var isFullScreen = _ref6.isFullScreen;
-  return isFullScreen && '60%';
-}, function (_ref7) {
-  var isFullScreen = _ref7.isFullScreen;
-  return isFullScreen && '50%';
-});
+var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemContainer__ItemsContainer",
+  componentId: "sc-15y5p9l-0"
+})(["display:flex;justify-content:", ";flex-wrap:wrap;max-height:", ";overflow-y:", ";overflow-x:hidden;width:", ";max-height:", ";@media screen and (max-height:350px){max-height:", ";}"], function (_ref2) {
+  var isFullScreen = _ref2.isFullScreen;
+  return isFullScreen ? 'flex-start' : 'center';
+}, function (_ref3) {
+  var isFullScreen = _ref3.isFullScreen;
+  return isFullScreen ? undefined : '270px';
+}, function (_ref4) {
+  var isScrollable = _ref4.isScrollable;
+  return isScrollable ? 'auto' : 'hidden';
+}, function (_ref5) {
+  var isFullScreen = _ref5.isFullScreen;
+  return isFullScreen ? '100vw' : '415px';
+}, function (_ref6) {
+  var isFullScreen = _ref6.isFullScreen;
+  return isFullScreen && '60%';
+}, function (_ref7) {
+  var isFullScreen = _ref7.isFullScreen;
+  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 = React.useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+  React.useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement(Title$3, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+    className: "golden"
+  })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
+    return React__default.createElement(RadioOptionsWrapper$1, {
+      key: index
+    }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React__default.createElement("div", null, React__default.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React__default.createElement("label", {
+      onPointerDown: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, option.name, " ", React__default.createElement("br", null), option.description)));
+  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: onClose
+  }, "Cancel"), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton
+  }, "Select")));
+};
+var Title$3 = /*#__PURE__*/styled__default.h1.withConfig({
+  displayName: "ItemSelector__Title",
+  componentId: "sc-gptoxp-0"
+})(["font-size:0.6rem;color:yellow !important;"]);
+var Subtitle$1 = /*#__PURE__*/styled__default.h1.withConfig({
+  displayName: "ItemSelector__Subtitle",
+  componentId: "sc-gptoxp-1"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller$1 = /*#__PURE__*/styled__default.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__default.div.withConfig({
+  displayName: "ItemSelector__SpriteAtlasWrapper",
+  componentId: "sc-gptoxp-3"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemSelector__RadioOptionsWrapper",
+  componentId: "sc-gptoxp-4"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.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,
@@ -17952,12 +18038,12 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$3, null, "Create Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$4, null, "Create Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement("h1", null, "Type your party name"), React__default.createElement(Input, {
     placeholder: "Type party name",
     type: "text"
-  }), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
+  }), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
       onCreate();
@@ -17975,11 +18061,11 @@ var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$3 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var ButtonWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);}"]);
@@ -18024,7 +18110,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$4, null, "Party Dashboard"), React__default.createElement(Button, {
+  }, React__default.createElement(Title$5, null, "Party Dashboard"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Create"), React__default.createElement("hr", {
     className: "golden"
@@ -18051,7 +18137,7 @@ var RowsWrapper = /*#__PURE__*/styled__default.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__default.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -18088,7 +18174,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$5, null, "Invite for Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$6, null, "Invite for Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -18107,7 +18193,7 @@ var Wrapper$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$5 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -18165,7 +18251,7 @@ var PartyManager = function PartyManager(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$6, null, "Party Dashboard"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$7, null, "Party Dashboard"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(RowsWrapper$2, {
     className: "partyRows"
@@ -18211,7 +18297,7 @@ var RowsWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyManager__RowsWrapper",
   componentId: "sc-1yqcad8-2"
 })(["width:100%;"]);
-var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyManager__Title",
   componentId: "sc-1yqcad8-3"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -18476,7 +18562,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -18495,7 +18581,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -18542,7 +18628,7 @@ var TitleContainer$1 = /*#__PURE__*/styled__default.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__default.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -18566,7 +18652,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$8, null, "Quests"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$9, null, "Quests"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React__default.createElement("div", {
@@ -18587,7 +18673,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled__default(DraggableContainer)
   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__default.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -18600,29 +18686,6 @@ var NoQuestContainer = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
-var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(Container$q, null, children);
-};
-var Container$q = /*#__PURE__*/styled__default.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__default.createElement(RPGUIScrollbar, null, children);
-};
-
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React__default.createElement(RPGUIOverrides, null, React__default.createElement("div", {
-    className: "rpgui-content"
-  }, children));
-};
-
 var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -18655,6 +18718,29 @@ var InputRadio$1 = function InputRadio(_ref) {
   }));
 };
 
+var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(Container$q, null, children);
+};
+var Container$q = /*#__PURE__*/styled__default.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__default.createElement(RPGUIScrollbar, null, children);
+};
+
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(RPGUIOverrides, null, React__default.createElement("div", {
+    className: "rpgui-content"
+  }, children));
+};
+
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -19093,7 +19179,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$s, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$s, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$a, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -19123,7 +19209,7 @@ var Container$s = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Title$a = /*#__PURE__*/styled__default.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);
@@ -19318,7 +19404,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$a, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$b, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$3, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -19339,7 +19425,7 @@ var Info = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$a = /*#__PURE__*/styled__default.p.withConfig({
+var Title$b = /*#__PURE__*/styled__default.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);
@@ -19403,7 +19489,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$w, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$w, null, React__default.createElement(Title$c, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -19435,7 +19521,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -19452,7 +19538,9 @@ var Stepper = function Stepper(_ref) {
   var _steps$currentStep;
   var steps = _ref.steps,
     finalCTAButton = _ref.finalCTAButton,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    _ref$useSideArrows = _ref.useSideArrows,
+    useSideArrows = _ref$useSideArrows === void 0 ? false : _ref$useSideArrows;
   var _useState = React.useState(0),
     currentStep = _useState[0],
     setCurrentStep = _useState[1];
@@ -19478,7 +19566,6 @@ var Stepper = function Stepper(_ref) {
               _context.next = 8;
               break;
             }
-            // If the current step is not valid, prevent navigation and trigger onError
             if (onError) {
               onError(steps[currentStep].errorMessage || "Validation failed on step " + (currentStep + 1));
             }
@@ -19489,7 +19576,6 @@ var Stepper = function Stepper(_ref) {
           case 10:
             _context.prev = 10;
             _context.t0 = _context["catch"](1);
-            // Handle unexpected validation errors
             if (onError) {
               onError("An error occurred during validation on step " + (currentStep + 1));
             }
@@ -19506,6 +19592,29 @@ var Stepper = function Stepper(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  var renderArrows = function renderArrows() {
+    var leftArrow = React__default.createElement(SelectArrow, {
+      direction: "left",
+      onPointerDown: function onPointerDown() {
+        return onStepChange(Math.max(0, currentStep - 1));
+      }
+    });
+    var rightArrow = React__default.createElement(SelectArrow, {
+      direction: "right",
+      onPointerDown: function onPointerDown() {
+        return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
+      }
+    });
+    if (useSideArrows) {
+      return React__default.createElement(React__default.Fragment, null, currentStep > 0 && React__default.createElement(ArrowContainer$1, {
+        left: true
+      }, leftArrow), currentStep < totalSteps - 1 && React__default.createElement(ArrowContainer$1, {
+        right: true
+      }, rightArrow));
+    } else {
+      return React__default.createElement(React__default.Fragment, null, currentStep > 0 && leftArrow, currentStep < totalSteps - 1 && rightArrow);
+    }
+  };
   return React__default.createElement(StepperContainer, {
     className: "stepper-container"
   }, React__default.createElement(StepperTop, null, Array.from({
@@ -19518,17 +19627,7 @@ var Stepper = function Stepper(_ref) {
         return onStepChange(i);
       }
     });
-  })), React__default.createElement(StepperBody, null, currentComponent), React__default.createElement(StepperFooter, null, currentStep > 0 && React__default.createElement(SelectArrow, {
-    direction: "left",
-    onPointerDown: function onPointerDown() {
-      return onStepChange(Math.max(0, currentStep - 1));
-    }
-  }), currentStep < totalSteps - 1 && React__default.createElement(SelectArrow, {
-    direction: "right",
-    onPointerDown: function onPointerDown() {
-      return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
-    }
-  }), currentStep === totalSteps - 1 && finalCTAButton && React__default.createElement(Button, {
+  })), React__default.createElement(StepperBodyContainer, null, useSideArrows && renderArrows(), React__default.createElement(StepperBody, null, currentComponent)), React__default.createElement(StepperFooter, null, !useSideArrows && renderArrows(), currentStep === totalSteps - 1 && finalCTAButton && React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onClick: finalCTAButton.onClick
   }, finalCTAButton.label)));
@@ -19541,24 +19640,39 @@ var StepperTop = /*#__PURE__*/styled__default.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__default.div.withConfig({
+  displayName: "Stepper__StepperBodyContainer",
+  componentId: "sc-13obf1-2"
+})(["flex:8;display:flex;align-items:center;position:relative;"]);
 var StepperBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Stepper__StepperBody",
-  componentId: "sc-13obf1-2"
-})(["flex:8;"]);
+  componentId: "sc-13obf1-3"
+})(["flex:1;"]);
+var ArrowContainer$1 = /*#__PURE__*/styled__default.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__default.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__default.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 (_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));
@@ -19832,7 +19946,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$c, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$d, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -19850,7 +19964,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     }));
-  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2))), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
+  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2))), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -19863,7 +19977,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -19887,7 +20001,7 @@ var AlertWrapper = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.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;}"]);
@@ -19908,91 +20022,45 @@ var Container$x = /*#__PURE__*/styled__default.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 = React.useState(),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleClick = function handleClick() {
-    var element = document.querySelector("input[name='test']:checked");
-    var elementValue = element.value;
-    setSelectedValue(elementValue);
+var TutorialStepper = function TutorialStepper(_ref) {
+  var lessons = _ref.lessons,
+    onLessonFinish = _ref.onLessonFinish;
+  var generateLessons = function generateLessons() {
+    return lessons.map(function (lesson, index) {
+      return {
+        component: React__default.createElement("div", null, React__default.createElement("h1", null, lesson.title), lesson.image && React__default.createElement(LessonImage, null, React__default.createElement("img", {
+          src: lesson.image,
+          alt: lesson.title
+        })), lesson.body && React__default.createElement(LessonBody, null, lesson.body), lesson.text && React__default.createElement(DynamicText, {
+          text: lesson.text
+        })),
+        id: index
+      };
+    });
   };
-  React.useEffect(function () {
-    if (selectedValue) {
-      onSelect(selectedValue);
-    }
-  }, [selectedValue]);
-  return React__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    width: "500px",
-    cancelDrag: ".equipment-container-body .arrow-selector",
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React__default.createElement(Title$d, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
-    className: "golden"
-  })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
-    return React__default.createElement(RadioOptionsWrapper$1, {
-      key: index
-    }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.imageKey,
-      imgScale: 3
-    })), React__default.createElement("div", null, React__default.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test"
-    }), React__default.createElement("label", {
-      onPointerDown: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
+  return React__default.createElement(Container$y, null, React__default.createElement(Stepper, {
+    steps: generateLessons(),
+    finalCTAButton: {
+      label: 'Close',
+      onClick: function onClick() {
+        onLessonFinish();
       }
-    }, option.name, " ", React__default.createElement("br", null), option.description)));
-  })), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "Cancel"), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton
-  }, "Select")));
+    },
+    useSideArrows: true
+  }));
 };
-var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
-  displayName: "ItemSelector__Title",
-  componentId: "sc-gptoxp-0"
-})(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle$1 = /*#__PURE__*/styled__default.h1.withConfig({
-  displayName: "ItemSelector__Subtitle",
-  componentId: "sc-gptoxp-1"
-})(["font-size:0.4rem;color:yellow !important;"]);
-var RadioInputScroller$1 = /*#__PURE__*/styled__default.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__default.div.withConfig({
-  displayName: "ItemSelector__SpriteAtlasWrapper",
-  componentId: "sc-gptoxp-3"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemSelector__RadioOptionsWrapper",
-  componentId: "sc-gptoxp-4"
-})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ItemSelector__ButtonWrapper",
-  componentId: "sc-gptoxp-5"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__LessonBody",
+  componentId: "sc-7tgzv2-0"
+})([""]);
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__Container",
+  componentId: "sc-7tgzv2-1"
+})(["margin:2rem;"]);
+var LessonImage = /*#__PURE__*/styled__default.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;}"]);
 
 exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;
@@ -20053,6 +20121,7 @@ exports.TextArea = TextArea;
 exports.TimeWidget = TimeWidget;
 exports.TradingMenu = TradingMenu;
 exports.Truncate = Truncate;
+exports.TutorialStepper = TutorialStepper;
 exports._RPGUI = _RPGUI;
 exports.mockedPartyManager = mockedPartyManager;
 exports.mockedPartyRows = mockedPartyRows;