@rpg-engine/long-bow 0.8.6 → 0.8.8

package/dist/long-bow.esm.js

@@ -12,6 +12,7 @@ import Draggable from 'react-draggable';
 import ReactDOM, { createPortal } from 'react-dom';
 import { camelCase, debounce } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
+import { HexColorPicker } from 'react-colorful';
 import { AiFillCaretRight } from 'react-icons/ai';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
@@ -602,6 +603,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
     _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    tintColor = _ref.tintColor,
     imgClassname = _ref.imgClassname,
     centered = _ref.centered,
     borderRadius = _ref.borderRadius;
@@ -627,7 +629,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     opacity: opacity,
     style: imgStyle,
     centered: centered,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    tintColor: tintColor
   }));
 };
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
@@ -643,7 +646,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";", " opacity:", ";"], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -660,11 +663,9 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.centered ? '0' : '8px';
 }, function (props) {
-  return props.grayScale ? 'grayscale(100%)' : 'none';
+  return props.tintColor && "\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: " + props.frame.w + "px;\n      height: " + props.frame.h + "px;\n      background-color: " + props.tintColor + ";\n      mask-image: url(" + props.atlasIMG + ");\n      mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      -webkit-mask-image: url(" + props.atlasIMG + ");\n      -webkit-mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      mix-blend-mode: color; \n      " + (props.grayScale ? 'filter: grayscale(100%);' : 'none') + "\n      }\n    ";
 }, function (props) {
   return props.opacity;
-}, function (props) {
-  return props.borderRadius ? props.borderRadius : '0';
 });
 
 var frames = {
@@ -25966,7 +25967,7 @@ var Ellipsis = function Ellipsis(_ref) {
 var Container$2 = /*#__PURE__*/styled.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) {
+})(["display:block;margin:0;.ellipsis-1-lines{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines,.ellipsis-3-lines,.ellipsis-4-lines,.ellipsis-5-lines{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:", ";font-size:", ";line-height:1.4;}.ellipsis-2-lines{-webkit-line-clamp:2;}.ellipsis-3-lines{-webkit-line-clamp:3;}.ellipsis-4-lines{-webkit-line-clamp:4;}.ellipsis-5-lines{-webkit-line-clamp:5;}"], function (props) {
   return props.maxWidth;
 }, function (props) {
   return props.fontSize;
@@ -25976,10 +25977,6 @@ var Container$2 = /*#__PURE__*/styled.span.withConfig({
   return props.maxWidth;
 }, function (props) {
   return props.fontSize;
-}, function (props) {
-  return props.maxWidth;
-}, function (props) {
-  return props.fontSize;
 });
 
 var PropertySelect = function PropertySelect(_ref) {
@@ -27636,7 +27633,8 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
         isStackable: item.isStackable
       }, atlasJSON),
       imgScale: 3,
-      imgClassname: "sprite-from-atlas-img--item"
+      imgClassname: "sprite-from-atlas-img--item",
+      tintColor: item.tintColor
     }), renderStackInfo(item), renderGems(item));
   };
   var renderEquipment = function renderEquipment(itemToRender) {
@@ -27800,6 +27798,14 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType,
         text: 'Open'
       });
     }
+    if (itemContainerType === ItemContainerType.Inventory) {
+      if (item.textureAtlas === 'items' && item.type === ItemType.Container) {
+        contextActionMenu.push({
+          id: ItemSocketEvents.ItemPropertyUpdate,
+          text: 'Set Color...'
+        });
+      }
+    }
   }
   return contextActionMenu;
 };
@@ -31354,6 +31360,64 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   return isFullScreen && '50%';
 });
 
+var ColorSelector = function ColorSelector(_ref) {
+  var selectedColor = _ref.selectedColor,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    _onChange = _ref.onChange;
+  var _useState = useState(selectedColor),
+    currentColor = _useState[0],
+    setCurrentColor = _useState[1];
+  useEffect(function () {
+    if (isOpen) setCurrentColor(selectedColor);
+  }, [isOpen, selectedColor]);
+  var handleConfirm = function handleConfirm() {
+    onConfirm(currentColor);
+    onClose();
+  };
+  if (!isOpen) return null;
+  return isOpen ? React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    cancelDrag: ".react-colorful",
+    width: "20rem",
+    onCloseButton: onClose
+  }, React.createElement(Container$m, null, React.createElement(Header$1, null, "Select Color"), React.createElement(HexColorPicker, {
+    color: currentColor,
+    onChange: function onChange(color) {
+      setCurrentColor(color);
+      _onChange(color);
+    }
+  }), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    type: "button",
+    onClick: handleConfirm
+  }, "Confirm"))) : null;
+};
+var Container$m = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemPropertyColorSelector__Container",
+  componentId: "sc-me1r4z-0"
+})(["padding:2rem;text-align:center;background:inherit;"]);
+var Header$1 = /*#__PURE__*/styled.h2.withConfig({
+  displayName: "ItemPropertyColorSelector__Header",
+  componentId: "sc-me1r4z-1"
+})(["font-family:'Press Start 2P',cursive;color:white;font-size:1rem;margin-bottom:1rem;"]);
+
+var ItemPropertySimpleHandler = function ItemPropertySimpleHandler(_ref) {
+  var isOpen = _ref.isOpen,
+    selectedColor = _ref.selectedColor,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    onChange = _ref.onChange;
+  return React.createElement(ColorSelector, {
+    selectedColor: selectedColor,
+    isOpen: isOpen,
+    onClose: onClose,
+    onConfirm: onConfirm,
+    onChange: onChange
+  });
+};
+
 var ItemSelector = function ItemSelector(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -31563,7 +31627,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$m, {
+  return React.createElement(Container$n, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -31580,7 +31644,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.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) {
@@ -31599,7 +31663,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$n, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$o, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -31613,7 +31677,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.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);
@@ -31626,7 +31690,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$o, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$p, {
     onPointerDown: onClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -31649,7 +31713,7 @@ var Background = /*#__PURE__*/styled.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$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.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;"]);
@@ -32174,13 +32238,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$p, {
+  return React.createElement(Container$q, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -32833,7 +32897,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$q, {
+  return React.createElement(Container$r, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -32863,7 +32927,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.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) {
@@ -33104,9 +33168,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$r, null, children);
+  return React.createElement(Container$s, null, children);
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -33262,7 +33326,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React.createElement(Container$s, {
+  return React.createElement(Container$t, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -33271,7 +33335,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -33604,7 +33668,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$t, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$u, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React.createElement(ButtonsContainer$1, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
@@ -33622,7 +33686,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -33668,7 +33732,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$u, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$8, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$v, null, React.createElement(Header$2, null, React.createElement("div", null, React.createElement(Title$8, 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"
@@ -33694,7 +33758,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$2, null, description));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__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);
@@ -33710,7 +33774,7 @@ var Description$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$1 = /*#__PURE__*/styled.div.withConfig({
+var Header$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -33748,7 +33812,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$v, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$w, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -33773,7 +33837,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.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;}"]);
@@ -33814,13 +33878,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$w, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$x, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.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;"]);
@@ -33893,7 +33957,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$x, {
+  }, React.createElement(Container$y, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -33912,7 +33976,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$x = /*#__PURE__*/styled.button.withConfig({
+var Container$y = /*#__PURE__*/styled.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) {
@@ -33991,7 +34055,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$y, null, React.createElement(Title$a, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$z, null, React.createElement(Title$a, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -34027,7 +34091,7 @@ var Title$a = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -34509,7 +34573,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$z, null, React.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$A, null, React.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -34537,7 +34601,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -34571,11 +34635,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$A, {
+  return React.createElement(Container$B, {
     maxLines: maxLines
   }, children);
 };
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__PURE__*/styled.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) {
@@ -34683,7 +34747,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$B, null, React.createElement(Stepper, {
+  return React.createElement(Container$C, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -34700,7 +34764,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -34721,5 +34785,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map