@rpg-engine/long-bow 0.5.65 → 0.5.67

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

@@ -6,8 +6,10 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var reactSpinners = require('react-spinners');
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var uuid = require('uuid');
 var shared = require('@rpg-engine/shared');
 var dayjs = _interopDefault(require('dayjs'));
 var reactErrorBoundary = require('react-error-boundary');
@@ -16,12 +18,125 @@ var Draggable = _interopDefault(require('react-draggable'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
-var uuid = require('uuid');
 var ai = require('react-icons/ai');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
 var capitalize = _interopDefault(require('lodash/capitalize'));
 
+var uiColors = {
+  lightGray: '#888',
+  gray: '#4E4A4E',
+  darkGray: '#3e3e3e',
+  darkYellow: '#FFC857',
+  yellow: '#FFFF00',
+  orange: '#D27D2C',
+  cardinal: '#C5283D',
+  red: '#D04648',
+  darkRed: '#442434',
+  raisinBlack: '#191923',
+  navyBlue: '#0E79B2',
+  purple: '#6833A3',
+  darkPurple: '#522761',
+  blue: '#597DCE',
+  darkBlue: '#30346D',
+  brown: '#854C30',
+  lightGreen: '#66cd1c',
+  brownGreen: '#346524',
+  white: '#fff'
+};
+
+var AsyncDropdown = function AsyncDropdown(_ref) {
+  var _options$, _options$find, _options$2;
+  var options = _ref.options,
+    width = _ref.width,
+    onChange = _ref.onChange,
+    defaultValue = _ref.defaultValue;
+  var dropdownId = uuid.v4();
+  var _useState = React.useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var _useState2 = React.useState((options == null ? void 0 : (_options$find = options.find(function (option) {
+      return option.value === defaultValue;
+    })) == null ? void 0 : _options$find.option) || (options == null ? void 0 : (_options$2 = options[0]) == null ? void 0 : _options$2.option)),
+    selectedOption = _useState2[0],
+    setSelectedOption = _useState2[1];
+  var _useState3 = React.useState(false),
+    opened = _useState3[0],
+    setOpened = _useState3[1];
+  React.useEffect(function () {
+    if (defaultValue) {
+      var _options$find2;
+      setSelectedValue(defaultValue);
+      setSelectedOption( //@ts-ignore
+      options == null ? void 0 : (_options$find2 = options.find(function (option) {
+        return option.value === defaultValue;
+      })) == null ? void 0 : _options$find2.option);
+    } else if ((options == null ? void 0 : options.length) > 0) {
+      setSelectedValue(options[0].value);
+      setSelectedOption(options[0].option);
+    }
+  }, [options, defaultValue]);
+  var handleSelection = function handleSelection(value, option) {
+    if (value !== selectedValue) {
+      setSelectedValue(value);
+      setSelectedOption(option);
+      onChange(value);
+    }
+  };
+  return React__default.createElement(Container, {
+    onMouseLeave: function onMouseLeave() {
+      return setOpened(false);
+    },
+    width: width
+  }, React__default.createElement(DropdownSelect, {
+    id: "dropdown-" + dropdownId,
+    className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
+    onPointerUp: function onPointerUp() {
+      return setOpened(function (prev) {
+        return !prev;
+      });
+    }
+  }, React__default.createElement(DropdownDisplay, null, React__default.createElement(DropdownLabel, null, "\u25BC"), " ", selectedOption, !options.length && React__default.createElement(reactSpinners.BeatLoader, {
+    size: 4,
+    color: uiColors.white
+  }))), React__default.createElement(DropdownOptions, {
+    className: "rpgui-dropdown-imp",
+    opened: opened
+  }, options == null ? void 0 : options.map(function (option) {
+    return React__default.createElement("li", {
+      key: option.id,
+      onPointerUp: function onPointerUp() {
+        handleSelection(option.value, option.option);
+        setOpened(false);
+      }
+    }, option.option);
+  })));
+};
+var DropdownDisplay = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "AsyncDropdown__DropdownDisplay",
+  componentId: "sc-lk409c-0"
+})(["display:flex;flex-wrap:wrap;justify-content:start;align-items:center;"]);
+var DropdownLabel = /*#__PURE__*/styled__default.label.withConfig({
+  displayName: "AsyncDropdown__DropdownLabel",
+  componentId: "sc-lk409c-1"
+})(["margin-right:0.5rem;"]);
+var Container = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "AsyncDropdown__Container",
+  componentId: "sc-lk409c-2"
+})(["position:relative;width:", ";"], function (props) {
+  return props.width || '100%';
+});
+var DropdownSelect = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "AsyncDropdown__DropdownSelect",
+  componentId: "sc-lk409c-3"
+})(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
+var DropdownOptions = /*#__PURE__*/styled__default.ul.withConfig({
+  displayName: "AsyncDropdown__DropdownOptions",
+  componentId: "sc-lk409c-4"
+})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
+  return props.opened ? 'block' : 'none';
+});
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -129,7 +244,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     console.error("SpriteFromAtlas: Could not find sprite with key " + spriteKey + " in atlasJSON.");
     return null;
   }
-  return React__default.createElement(Container, {
+  return React__default.createElement(Container$1, {
     width: width,
     height: height,
     hasHover: grayScale,
@@ -147,7 +262,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     borderRadius: borderRadius
   }));
 };
-var Container = /*#__PURE__*/styled__default.div.withConfig({
+var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpriteFromAtlas__Container",
   componentId: "sc-1lpani8-0"
 })(["width:", "px;height:", "px;", ""], function (props) {
@@ -12363,7 +12478,7 @@ var Ellipsis = function Ellipsis(_ref) {
     maxWidth = _ref.maxWidth,
     fontSize = _ref.fontSize,
     center = _ref.center;
-  return React__default.createElement(Container$1, {
+  return React__default.createElement(Container$2, {
     maxWidth: maxWidth,
     fontSize: fontSize,
     center: center
@@ -12371,7 +12486,7 @@ var Ellipsis = function Ellipsis(_ref) {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
 };
-var Container$1 = /*#__PURE__*/styled__default.span.withConfig({
+var Container$2 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
 })(["display:block;margin:0;.ellipsis-1-lines{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines{display:block;display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}.ellipsis-3-lines{display:block;display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}"], function (props) {
@@ -12420,7 +12535,7 @@ var PropertySelect = function PropertySelect(_ref) {
     }
     return '';
   };
-  return React__default.createElement(Container$2, null, React__default.createElement(TextOverlay, null, React__default.createElement("p", null, React__default.createElement(Item, null, React__default.createElement(Ellipsis, {
+  return React__default.createElement(Container$3, null, React__default.createElement(TextOverlay, null, React__default.createElement("p", null, React__default.createElement(Item, null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "60%",
     center: true
@@ -12442,7 +12557,7 @@ var TextOverlay = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PropertySelect__TextOverlay",
   componentId: "sc-12uqx6s-1"
 })(["width:100%;position:relative;"]);
-var Container$2 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PropertySelect__Container",
   componentId: "sc-12uqx6s-2"
 })(["position:relative;display:flex;flex-direction:column;justify-content:start;align-items:flex-start;min-width:100px;width:40%;"]);
@@ -12479,7 +12594,7 @@ var CharacterSelection = function CharacterSelection(_ref) {
   React.useEffect(function () {
     setSelectedValue(propertySelectValues[0]);
   }, [availableCharacters]);
-  return React__default.createElement(Container$3, null, selectedSpriteKey && atlasIMG && atlasJSON && React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(Container$4, null, selectedSpriteKey && atlasIMG && atlasJSON && React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
     spriteKey: selectedSpriteKey,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -12501,7 +12616,7 @@ var CharacterSelection = function CharacterSelection(_ref) {
     }
   }));
 };
-var Container$3 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterSelection__Container",
   componentId: "sc-b34498-0"
 })(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
@@ -12642,28 +12757,6 @@ var Button$1 = /*#__PURE__*/styled__default.button.withConfig({
   return buttonBackgroundColor;
 });
 
-var uiColors = {
-  lightGray: '#888',
-  gray: '#4E4A4E',
-  darkGray: '#3e3e3e',
-  darkYellow: '#FFC857',
-  yellow: '#FFFF00',
-  orange: '#D27D2C',
-  cardinal: '#C5283D',
-  red: '#D04648',
-  darkRed: '#442434',
-  raisinBlack: '#191923',
-  navyBlue: '#0E79B2',
-  purple: '#6833A3',
-  darkPurple: '#522761',
-  blue: '#597DCE',
-  darkBlue: '#30346D',
-  brown: '#854C30',
-  lightGreen: '#66cd1c',
-  brownGreen: '#346524',
-  white: '#fff'
-};
-
 var SearchCharacter = function SearchCharacter(_ref) {
   var onChangeCharacterName = _ref.onChangeCharacterName,
     onBlur = _ref.onBlur,
@@ -12979,13 +13072,13 @@ var RPGUIContainer = function RPGUIContainer(_ref) {
     width = _ref$width === void 0 ? '50%' : _ref$width,
     height = _ref.height,
     className = _ref.className;
-  return React__default.createElement(Container$4, {
+  return React__default.createElement(Container$5, {
     width: width,
     height: height || 'auto',
     className: "rpgui-container " + type + " " + className
   }, children);
 };
-var Container$4 = /*#__PURE__*/styled__default.div.withConfig({
+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) {
@@ -13044,7 +13137,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
       }, onRenderMessageLines(emitter, createdAt, message));
     }) : React__default.createElement(MessageText, null, "No messages available.");
   };
-  return React__default.createElement(Container$5, null, React__default.createElement(CustomContainer, {
+  return React__default.createElement(Container$6, null, React__default.createElement(CustomContainer, {
     type: exports.RPGUIContainerTypes.FramedGrey,
     width: width,
     height: height,
@@ -13082,7 +13175,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     id: "chat-send-button"
   }, "Send"))))));
 };
-var Container$5 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
@@ -13418,7 +13511,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     },
     defaultPosition: initialPosition,
     scale: scale
-  }, React__default.createElement(Container$6, {
+  }, React__default.createElement(Container$7, {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
@@ -13433,7 +13526,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     onPointerDown: onCloseButton
   }, "X"), children));
 };
-var Container$6 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
 })(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;&.rpgui-container{padding-top:1.5rem;}"], function (props) {
@@ -13504,11 +13597,11 @@ var countItemFromInventory = function countItemFromInventory(itemKey, inventory)
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React__default.createElement(Container$7, {
+  return ReactDOM.createPortal(React__default.createElement(Container$8, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -13643,7 +13736,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$8, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -13660,7 +13753,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -13690,7 +13783,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -13718,7 +13811,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
@@ -14118,7 +14211,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setDraggingItem(item);
     }
   };
-  return React__default.createElement(Container$a, {
+  return React__default.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -14196,7 +14289,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     setIsTooltipVisible: setTooltipVisible
   }));
 });
-var Container$a = /*#__PURE__*/styled__default.div.withConfig({
+var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
@@ -14312,7 +14405,7 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React__default.createElement(Container$b, {
+  return React__default.createElement(Container$c, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
@@ -14326,7 +14419,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$b = /*#__PURE__*/styled__default.div.withConfig({
+var Container$c = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -14472,7 +14565,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$c, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
@@ -14481,7 +14574,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$c = /*#__PURE__*/styled__default.div.withConfig({
+var Container$d = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -14799,12 +14892,9 @@ var ItemTypes = /*#__PURE__*/styled__default.div.withConfig({
 var Dropdown = function Dropdown(_ref) {
   var options = _ref.options,
     width = _ref.width,
-    onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
-    _ref$triggerChangeOnM = _ref.triggerChangeOnMount,
-    triggerChangeOnMount = _ref$triggerChangeOnM === void 0 ? true : _ref$triggerChangeOnM;
+    onChange = _ref.onChange;
   var dropdownId = uuid.v4();
-  var _useState = React.useState(defaultValue || ''),
+  var _useState = React.useState(''),
     selectedValue = _useState[0],
     setSelectedValue = _useState[1];
   var _useState2 = React.useState(''),
@@ -14833,27 +14923,16 @@ var Dropdown = function Dropdown(_ref) {
     }
   }, [options]);
   React.useEffect(function () {
-    if (defaultValue) {
-      var option = options.find(function (o) {
-        return o.value === defaultValue;
-      });
-      if (option) {
-        setSelectedValue(option.value);
-        setSelectedOption(option.option);
-      }
-    }
-  }, [defaultValue]);
-  React.useEffect(function () {
-    if (selectedValue && triggerChangeOnMount) {
+    if (selectedValue) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement(Container$d, {
+  return React__default.createElement(Container$e, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
     width: width
-  }, React__default.createElement(DropdownSelect, {
+  }, React__default.createElement(DropdownSelect$1, {
     id: "dropdown-" + dropdownId,
     className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
     onPointerUp: function onPointerUp() {
@@ -14861,7 +14940,7 @@ var Dropdown = function Dropdown(_ref) {
         return !prev;
       });
     }
-  }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions, {
+  }, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions$1, {
     className: "rpgui-dropdown-imp",
     opened: opened
   }, options.map(function (option) {
@@ -14875,17 +14954,17 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$d = /*#__PURE__*/styled__default.div.withConfig({
+var Container$e = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
   return props.width || '100%';
 });
-var DropdownSelect = /*#__PURE__*/styled__default.p.withConfig({
+var DropdownSelect$1 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Dropdown__DropdownSelect",
   componentId: "sc-8arn65-1"
 })(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
-var DropdownOptions = /*#__PURE__*/styled__default.ul.withConfig({
+var DropdownOptions$1 = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
   componentId: "sc-8arn65-2"
 })(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
@@ -14987,7 +15066,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React__default.createElement(Container$e, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$f, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -15005,7 +15084,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$e = /*#__PURE__*/styled__default.div.withConfig({
+var Container$f = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -15398,7 +15477,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$f, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$g, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -15416,7 +15495,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$f = /*#__PURE__*/styled__default.div.withConfig({
+var Container$g = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -15568,7 +15647,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$g, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$h, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -15578,7 +15657,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+var Container$h = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -15638,7 +15717,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$h, null, React__default.createElement(TextContainer$1, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$i, null, React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React__default.createElement(NPCDialogText, {
     type: type,
@@ -15652,7 +15731,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$h = /*#__PURE__*/styled__default.div.withConfig({
+var Container$i = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -15708,7 +15787,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$i, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$j, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -15750,7 +15829,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$i = /*#__PURE__*/styled__default.div.withConfig({
+var Container$j = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -15936,8 +16015,7 @@ var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
 
 var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
-  var basePath = _ref.basePath,
-    imagesSrc = _ref.imagesSrc,
+  var images = _ref.images,
     styles = _ref.styles,
     _ref$autoCycle = _ref.autoCycle,
     autoCycle = _ref$autoCycle === void 0 ? false : _ref$autoCycle,
@@ -15948,42 +16026,43 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
   var _useState = React.useState(0),
     currentImage = _useState[0],
     setCurrentImage = _useState[1];
-  var isInteracted = React.useRef(false);
+  var _useState2 = React.useState(null),
+    autoCycleId = _useState2[0],
+    setAutoCycleId = _useState2[1];
+  var handleLeftClick = function handleLeftClick() {
+    setCurrentImage(function (prevImage) {
+      return (prevImage - 1 + images.length) % images.length;
+    });
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
+  var handleRightClick = function handleRightClick() {
+    setCurrentImage(function (prevImage) {
+      return (prevImage + 1) % images.length;
+    });
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
   React.useEffect(function () {
-    var timer = null;
-    if (autoCycle && !isInteracted.current) {
-      timer = setInterval(function () {
-        if (stopAutoCyclingOnInteraction && isInteracted.current) {
-          clearInterval(timer);
-          return;
-        }
-        handleRightClick(true);
+    if (autoCycle) {
+      var id = setInterval(function () {
+        setCurrentImage(function (prevImage) {
+          return (prevImage + 1) % images.length;
+        });
       }, autoCycleDelay);
+      setAutoCycleId(id);
     }
     return function () {
-      if (timer) {
-        clearInterval(timer);
+      if (autoCycleId) {
+        clearInterval(autoCycleId);
       }
     };
-  }, [autoCycle, autoCycleDelay]);
-  var handleLeftClick = function handleLeftClick() {
-    isInteracted.current = true;
-    setCurrentImage(function (oldImage) {
-      return oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1;
-    });
-  };
-  var handleRightClick = function handleRightClick(isAutomatedClick) {
-    if (isAutomatedClick === void 0) {
-      isAutomatedClick = false;
-    }
-    if (!isAutomatedClick) {
-      isInteracted.current = true;
-    }
-    setCurrentImage(function (oldImage) {
-      return oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1;
-    });
-  };
-  var hasMoreThanOneImage = imagesSrc.length > 1;
+  }, [autoCycle, autoCycleDelay, images.length]);
+  var hasMoreThanOneImage = images.length > 1;
   return React__default.createElement(ImageContainer, {
     style: styles
   }, hasMoreThanOneImage && React__default.createElement(CustomLeftArrow, {
@@ -15994,8 +16073,8 @@ var SimpleImageCarousel = function SimpleImageCarousel(_ref) {
     onPointerDown: handleRightClick
   }), React__default.createElement(Carousel, null, React__default.createElement(FadeInCarouselImg, {
     key: currentImage,
-    src: basePath + "/" + imagesSrc[currentImage],
-    alt: imagesSrc[currentImage]
+    src: images[currentImage],
+    alt: "Image " + currentImage
   })));
 };
 var ImageContainer = /*#__PURE__*/styled__default.div.withConfig({
@@ -16178,7 +16257,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$j, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$k, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -16196,7 +16275,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$j = /*#__PURE__*/styled__default.div.withConfig({
+var Container$k = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -16688,7 +16767,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$k, {
+  return React__default.createElement(Container$l, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -16705,7 +16784,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$k = /*#__PURE__*/styled__default.div.withConfig({
+var Container$l = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -16724,7 +16803,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$l, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$m, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -16738,7 +16817,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$l = /*#__PURE__*/styled__default.div.withConfig({
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -16751,7 +16830,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$m, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$n, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -16774,7 +16853,7 @@ var Background = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -17739,7 +17818,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$n, {
+  return React__default.createElement(Container$o, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -17769,7 +17848,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$n = /*#__PURE__*/styled__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -17951,9 +18030,9 @@ var NoQuestContainer = /*#__PURE__*/styled__default.div.withConfig({
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$o, null, children);
+  return React__default.createElement(Container$p, null, children);
 };
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__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;}"]);
@@ -18131,7 +18210,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$q, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -18140,7 +18219,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -18434,7 +18513,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$q, 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$r, 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", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -18460,7 +18539,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__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);
@@ -18514,7 +18593,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$r, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$s, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -18539,7 +18618,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -18580,13 +18659,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$s, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$t, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -18646,7 +18725,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$t, {
+  }, React__default.createElement(Container$u, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -18665,7 +18744,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$t = /*#__PURE__*/styled__default.button.withConfig({
+var Container$u = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -18744,7 +18823,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$u, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$v, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -18780,7 +18859,7 @@ var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -19126,11 +19205,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$v, {
+  return React__default.createElement(Container$w, {
     maxLines: maxLines
   }, children);
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -19223,6 +19302,7 @@ var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
+exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
 exports.Chat = Chat;