@rpg-engine/long-bow 0.4.84 → 0.4.86

package/dist/long-bow.esm.js

@@ -12646,7 +12646,8 @@ var uiColors = {
   darkBlue: '#30346D',
   brown: '#854C30',
   lightGreen: '#66cd1c',
-  brownGreen: '#346524'
+  brownGreen: '#346524',
+  white: '#fff'
 };
 
 var _excluded$2 = ["innerRef"];
@@ -15556,92 +15557,6 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15y5p9l-1"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
-var 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 ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -16245,6 +16160,370 @@ var PagerContainer$1 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-h904b1-0"
 })(["display:flex;justify-content:space-between;align-items:center;width:calc(100% - 30px);"]);
 
+var PartyCreate = function PartyCreate(_ref) {
+  var onClose = _ref.onClose,
+    onCreate = _ref.onCreate;
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "500px",
+    height: "300px",
+    cancelDrag: ".partyRows"
+  }, React.createElement(Wrapper$2, null, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$3, 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, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      onCreate();
+    }
+  }, "Confirm"), React.createElement("div", {
+    className: "cancel-button"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      close();
+    }
+  }, "Cancel"))));
+};
+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({
+  displayName: "PartyCreate__Title",
+  componentId: "sc-13brop0-1"
+})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
+var ButtonWrapper$1 = /*#__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);}"]);
+
+var PartyRow = function PartyRow(_ref) {
+  var charName = _ref.charName,
+    charClass = _ref.charClass,
+    charLevel = _ref.charLevel,
+    playerQty = _ref.playerQty,
+    isInvited = _ref.isInvited,
+    partyName = _ref.partyName;
+  return React.createElement(PartyWrapper, null, React.createElement(TextContainer$3, null, partyName), React.createElement(TextContainer$3, null, charName), React.createElement(TextContainer$3, null, charClass), React.createElement(TextContainer$3, null, charLevel), React.createElement(TextContainer$3, null, playerQty, "/5"), isInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Accept"), React.createElement("div", {
+    className: "cancel-button"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Decline"))) : React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Join"));
+};
+var PartyWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyRows__PartyWrapper",
+  componentId: "sc-xzuhrw-0"
+})(["width:100%;display:flex;align-items:center;justify-content:space-around;.cancel-button{filter:grayscale(0.7);}"]);
+var TextContainer$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyRows__TextContainer",
+  componentId: "sc-xzuhrw-1"
+})(["color:", ";"], uiColors.white);
+
+var PartyDashboard = function PartyDashboard(_ref) {
+  var partyRows = _ref.partyRows;
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      console.log('Close');
+    },
+    width: "800px",
+    height: "400px",
+    cancelDrag: ".partyRows"
+  }, React.createElement(Wrapper$3, null, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$4, null, "Party Dashboard"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Create"), React.createElement("hr", {
+    className: "golden"
+  }))), React.createElement(RowsWrapper, {
+    className: "partyRows"
+  }, partyRows.map(function (partyRows) {
+    return React.createElement(PartyRow, {
+      key: partyRows.id,
+      charName: partyRows.charName,
+      charClass: partyRows.charClass,
+      charLevel: partyRows.charLevel,
+      playerQty: partyRows.playerQty,
+      id: partyRows.id,
+      isInvited: partyRows.isInvited,
+      partyName: partyRows.partyName
+    });
+  })));
+};
+var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyDashboard__Wrapper",
+  componentId: "sc-16cm41r-0"
+})(["display:flex;flex-direction:column;width:100%;"]);
+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({
+  displayName: "PartyDashboard__Title",
+  componentId: "sc-16cm41r-2"
+})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
+
+var PlayersRow = function PlayersRow(_ref) {
+  var charName = _ref.charName,
+    charClass = _ref.charClass,
+    charLevel = _ref.charLevel,
+    isNotInvited = _ref.isNotInvited;
+  return React.createElement(PartyWrapper$1, null, React.createElement(TextContainer$4, null, charName), React.createElement(TextContainer$4, null, charClass), React.createElement(TextContainer$4, null, charLevel), isNotInvited ? React.createElement(React.Fragment, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Invite")) : React.createElement(TextContainer$4, null, "Invited"));
+};
+var PartyWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PlayersRows__PartyWrapper",
+  componentId: "sc-1ji7yc1-0"
+})(["width:100%;display:flex;align-items:center;justify-content:space-around;flex-direction:row;flex:auto;"]);
+var TextContainer$4 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PlayersRows__TextContainer",
+  componentId: "sc-1ji7yc1-1"
+})(["color:", ";flex:auto;margin:auto;"], uiColors.white);
+
+var PartyInvite = function PartyInvite(_ref) {
+  var playersRows = _ref.playersRows;
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      console.log('Close');
+    },
+    width: "600px",
+    height: "400px",
+    cancelDrag: ".playersRows"
+  }, React.createElement(Wrapper$4, null, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$5, null, "Invite for Party"), React.createElement("hr", {
+    className: "golden"
+  }))), React.createElement(RowsWrapper$1, {
+    className: "playersRows"
+  }, playersRows.map(function (playersRows) {
+    return React.createElement(PlayersRow, {
+      key: playersRows.id,
+      charName: playersRows.charName,
+      charClass: playersRows.charClass,
+      charLevel: playersRows.charLevel,
+      id: playersRows.id,
+      isNotInvited: playersRows.isNotInvited
+    });
+  })));
+};
+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({
+  displayName: "PartyInvite__Title",
+  componentId: "sc-eu8ggt-1"
+})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
+var RowsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyInvite__RowsWrapper",
+  componentId: "sc-eu8ggt-2"
+})(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
+
+var PartyManagerRow = function PartyManagerRow(_ref) {
+  var charName = _ref.charName,
+    charClass = _ref.charClass,
+    charLevel = _ref.charLevel;
+  return React.createElement(PartyWrapper$2, null, React.createElement(TextContainer$5, null, charName), React.createElement(TextContainer$5, null, charClass), React.createElement(TextContainer$5, null, charLevel), React.createElement("div", {
+    className: "cancel-button"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Remove")), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "New Leader"));
+};
+var PartyWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyManagerRows__PartyWrapper",
+  componentId: "sc-uqajew-0"
+})(["width:100%;display:flex;align-items:center;justify-content:space-around;.cancel-button{filter:grayscale(0.7);}"]);
+var TextContainer$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyManagerRows__TextContainer",
+  componentId: "sc-uqajew-1"
+})(["color:", ";"], uiColors.white);
+
+var PartyManager = function PartyManager(_ref) {
+  var partyRows = _ref.partyRows;
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      console.log('Close');
+    },
+    width: "800px",
+    height: "400px",
+    cancelDrag: ".partyRows"
+  }, React.createElement(Wrapper$5, null, React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React.createElement(Title$6, null, "Party Dashboard"), React.createElement("hr", {
+    className: "golden"
+  }))), React.createElement(RowsWrapper$2, {
+    className: "partyRows"
+  }, partyRows.map(function (partyRows) {
+    return React.createElement(PartyManagerRow, {
+      key: partyRows.id,
+      charName: partyRows.charName,
+      charClass: partyRows.charClass,
+      charLevel: partyRows.charLevel,
+      id: partyRows.id
+    });
+  })));
+};
+var Wrapper$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyManager__Wrapper",
+  componentId: "sc-1yqcad8-0"
+})(["display:flex;flex-direction:column;width:100%;"]);
+var RowsWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PartyManager__RowsWrapper",
+  componentId: "sc-1yqcad8-1"
+})(["width:100%;"]);
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "PartyManager__Title",
+  componentId: "sc-1yqcad8-2"
+})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
+
+var mockedPartyRows = [{
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  playerQty: 3,
+  isInvited: true,
+  partyName: 'Party'
+}];
+var mockedPlayersRows = [{
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  isNotInvited: true
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  isNotInvited: true
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  isNotInvited: true
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  isNotInvited: true
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1,
+  isNotInvited: true
+}];
+var mockedPartyManager = [{
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1
+}, {
+  id: /*#__PURE__*/v4(),
+  charName: 'CharNome',
+  charClass: 'CharClass',
+  charLevel: 1
+}];
+
 var ProgressBar = function ProgressBar(_ref) {
   var max = _ref.max,
     value = _ref.value,
@@ -16351,7 +16630,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$4, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -16370,7 +16649,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$4, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -16417,7 +16696,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$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__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);
@@ -16441,7 +16720,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$8, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -16462,7 +16741,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$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -16475,6 +16754,15 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React.createElement("div", {
+    className: "rpgui-content"
+  }, children);
+};
+
 var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -16507,15 +16795,6 @@ var InputRadio$1 = function InputRadio(_ref) {
   }));
 };
 
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React.createElement("div", {
-    className: "rpgui-content"
-  }, children);
-};
-
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -16932,7 +17211,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$o, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$6, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$o, 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", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -16962,7 +17241,7 @@ var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$6 = /*#__PURE__*/styled.div.withConfig({
+var Title$9 = /*#__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);
@@ -17144,7 +17423,7 @@ var Spell = function Spell(_ref) {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, magicWords.split(' ').map(function (word) {
     return word[0];
-  })), React.createElement(Info, null, React.createElement(Title$7, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$2, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
@@ -17165,7 +17444,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$7 = /*#__PURE__*/styled.p.withConfig({
+var Title$a = /*#__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);
@@ -17227,7 +17506,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$s, null, React.createElement(Title$8, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$s, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -17257,7 +17536,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -17498,7 +17777,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$9, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$c, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -17528,7 +17807,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$9 = /*#__PURE__*/styled.h1.withConfig({
+var Title$c = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -17573,5 +17852,91 @@ var Container$t = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, rarityColor, useEventListener };
+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$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'
+      }
+    }, 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")));
+};
+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%;"]);
+
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, rarityColor, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map