@rpg-engine/long-bow 0.3.0 → 0.3.23

package/dist/long-bow.esm.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
+import { CiPaperplane } from 'react-icons/ci';
 import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
 import { observer } from 'mobx-react-lite';
@@ -32697,6 +32698,147 @@ var Container$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-b34498-0"
 })(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
 
+var Column = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Column",
+  componentId: "sc-1pesqff-0"
+})(["flex:", ";display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";"], function (props) {
+  return props.flex || 'auto';
+}, function (props) {
+  return props.flexWrap || 'nowrap';
+}, function (props) {
+  return props.alignItems || 'flex-start';
+}, function (props) {
+  return props.justifyContent || 'flex-start';
+});
+
+var Chat = function Chat(_ref) {
+  var chatMessages = _ref.chatMessages,
+    onSendChatMessage = _ref.onSendChatMessage,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '80%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '250px' : _ref$height,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#c65102' : _ref$color,
+    _ref$buttonColor = _ref.buttonColor,
+    buttonColor = _ref$buttonColor === void 0 ? '#005b96' : _ref$buttonColor,
+    _ref$buttonBackground = _ref.buttonBackgroundColor,
+    buttonBackgroundColor = _ref$buttonBackground === void 0 ? '#FFF' : _ref$buttonBackground;
+  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(Message, {
+        color: color,
+        key: _id + "_" + index
+      }, onRenderMessageLines(emitter, createdAt, message));
+    }) : React.createElement(Message, {
+      color: color
+    }, "No messages available.");
+  };
+  return React.createElement(ChatContainer, {
+    width: width,
+    height: height
+  }, React.createElement(ErrorBoundary$1, {
+    fallback: React.createElement("p", null, "Oops! Your chat has crashed.")
+  }, React.createElement(MessagesContainer, null, onRenderChatMessages(chatMessages)), React.createElement(Form, {
+    onSubmit: handleSubmit
+  }, React.createElement(Column, {
+    flex: 70
+  }, React.createElement(TextField, {
+    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$1, {
+    buttonColor: buttonColor,
+    buttonBackgroundColor: buttonBackgroundColor,
+    id: "chat-send-button",
+    style: {
+      borderRadius: '20%'
+    }
+  }, React.createElement(CiPaperplane, {
+    size: 20
+  }))))));
+};
+var ChatContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Chat__ChatContainer",
+  componentId: "sc-1bk05n6-0"
+})(["height:", ";width:", ";border-radius:10px;padding:40px 30px;margin-top:100px;box-shadow:-3px -3px 9px #aaa9a9a2,3px 3px 7px rgba(147,149,151,0.671);"], function (props) {
+  return props.height;
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width;
+});
+var TextField = /*#__PURE__*/styled.input.withConfig({
+  displayName: "Chat__TextField",
+  componentId: "sc-1bk05n6-1"
+})(["width:100%;border-radius:10px;box-shadow:-3px -3px 9px #aaa9a9a2,3px 3px 7px rgba(147,149,151,0.671);"]);
+var MessagesContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Chat__MessagesContainer",
+  componentId: "sc-1bk05n6-2"
+})(["overflow:hidden;height:70%;margin-bottom:20px;"]);
+var Message = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Chat__Message",
+  componentId: "sc-1bk05n6-3"
+})(["margin-bottom:8px;color:", ";"], function (_ref4) {
+  var color = _ref4.color;
+  return color;
+});
+var Form = /*#__PURE__*/styled.form.withConfig({
+  displayName: "Chat__Form",
+  componentId: "sc-1bk05n6-4"
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+var Button$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Chat__Button",
+  componentId: "sc-1bk05n6-5"
+})(["color:", ";background-color:", ";width:50px;height:40px;"], function (_ref5) {
+  var buttonColor = _ref5.buttonColor;
+  return buttonColor;
+}, function (_ref6) {
+  var buttonBackgroundColor = _ref6.buttonBackgroundColor;
+  return buttonBackgroundColor;
+});
+
 var uiColors = {
   lightGray: '#757161',
   gray: '#4E4A4E',
@@ -32757,20 +32899,7 @@ var Container$4 = /*#__PURE__*/styled.div.withConfig({
   return width;
 });
 
-var Column = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Column",
-  componentId: "sc-1pesqff-0"
-})(["flex:", ";display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";"], function (props) {
-  return props.flex || 'auto';
-}, function (props) {
-  return props.flexWrap || 'nowrap';
-}, function (props) {
-  return props.alignItems || 'flex-start';
-}, function (props) {
-  return props.justifyContent || 'flex-start';
-});
-
-var Chat = function Chat(_ref) {
+var ChatDeprecated = function ChatDeprecated(_ref) {
   var chatMessages = _ref.chatMessages,
     onSendChatMessage = _ref.onSendChatMessage,
     _ref$opacity = _ref.opacity,
@@ -32835,7 +32964,7 @@ var Chat = function Chat(_ref) {
     width: '100%',
     height: '80%',
     className: "chat-body dark-background"
-  }, onRenderChatMessages(chatMessages)), React.createElement(Form, {
+  }, onRenderChatMessages(chatMessages)), React.createElement(Form$1, {
     onSubmit: handleSubmit
   }, React.createElement(Column, {
     flex: 70
@@ -32859,30 +32988,30 @@ var Chat = function Chat(_ref) {
   }, "Send"))))));
 };
 var Container$5 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Chat__Container",
-  componentId: "sc-1bk05n6-0"
+  displayName: "ChatDeprecated__Container",
+  componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
 var CloseButton = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Chat__CloseButton",
-  componentId: "sc-1bk05n6-1"
+  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: "Chat__CustomInput",
-  componentId: "sc-1bk05n6-2"
+  displayName: "ChatDeprecated__CustomInput",
+  componentId: "sc-fuuod3-2"
 })(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
 var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
-  displayName: "Chat__CustomContainer",
-  componentId: "sc-1bk05n6-3"
+  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 = /*#__PURE__*/styled.form.withConfig({
-  displayName: "Chat__Form",
-  componentId: "sc-1bk05n6-4"
+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: "Chat__MessageText",
-  componentId: "sc-1bk05n6-5"
+  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) {
@@ -34682,6 +34811,92 @@ 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$2, 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", {
+      onClick: 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,
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton
+  }, "Select")));
+};
+var Title$2 = /*#__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,
@@ -34817,7 +35032,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onTouchStart: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$2, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$3, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$9
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -34836,7 +35051,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$2, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$3, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$9
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -34883,7 +35098,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$2 = /*#__PURE__*/styled.h1.withConfig({
+var Title$3 = /*#__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);
@@ -34905,7 +35120,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$4, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -34926,7 +35141,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$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -34939,15 +35154,6 @@ 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 = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -34980,6 +35186,15 @@ var InputRadio = 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 SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
     _ref$bgColor = _ref.bgColor,
@@ -35384,7 +35599,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$4, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$5, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
@@ -35397,7 +35612,7 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
     }));
-  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), 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())), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
+  })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), 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())), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onClick: function onClick() {
@@ -35410,7 +35625,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -35434,7 +35649,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$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$2 = /*#__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;"]);
@@ -35455,91 +35670,5 @@ var Container$i = /*#__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);
-  };
-  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$5, 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", {
-      onClick: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onClick: onClose
-  }, "Cancel"), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton
-  }, "Select")));
-};
-var Title$5 = /*#__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$2 = /*#__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, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map