@rpg-engine/long-bow 0.8.53 → 0.8.55

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

@@ -34044,56 +34044,62 @@ var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   return isFullScreen && '50%';
 });
 
+// Global style to prevent body scrolling when modal is open
+var GlobalStyle = /*#__PURE__*/styled.createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
 var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     _ref$message = _ref.message,
     message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
-  var handleConfirm = function handleConfirm(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleConfirm = function handleConfirm() {
     onConfirm();
   };
-  var handleClose = function handleClose(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleClose = function handleClose() {
     onClose();
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$w, {
-    onClick: handleClose
-  }, React__default.createElement(DraggableContainer, {
-    width: "auto",
-    dragDisabled: true
-  }, React__default.createElement(Wrapper$1, {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, typeof message === 'string' ? React__default.createElement("p", null, message) : message, React__default.createElement(ButtonsWrapper, null, React__default.createElement("div", {
-    className: "cancel-button"
-  }, React__default.createElement(Button, {
+  var stopPropagation = function stopPropagation(e) {
+    e.stopPropagation();
+  };
+  return React__default.createElement(ModalPortal, null, React__default.createElement(GlobalStyle, null), React__default.createElement(Overlay$2, {
+    onPointerDown: handleClose
+  }), React__default.createElement(ModalContainer, null, React__default.createElement(ModalContent, {
+    onPointerDown: stopPropagation
+  }, React__default.createElement(MessageContainer, null, typeof message === 'string' ? React__default.createElement(Message$1, null, message) : message), React__default.createElement(ButtonsContainer$2, null, React__default.createElement(CancelButtonWrapper, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
-    onClick: handleClose
+    onPointerDown: handleClose
   }, "No")), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
-    onClick: handleConfirm
-  }, "Yes"))))));
+    onPointerDown: handleConfirm
+  }, "Yes")))));
 };
-var Background = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Background",
+var Overlay$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Overlay",
   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$w = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Container",
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,1);z-index:1000;animation:fadeIn 0.2s ease-out;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
+var ModalContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ModalContainer",
   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;"]);
-var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Wrapper",
+})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;"]);
+var ModalContent = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ModalContent",
   componentId: "sc-11qkyu1-2"
-})(["p{margin:0;}"]);
-var ButtonsWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__ButtonsWrapper",
+})(["background:url('/assets/ui/paper-dialog.png') no-repeat center center;background-size:100% 100%;padding:20px;min-width:300px;max-width:90%;margin:0 auto;animation:scaleIn 0.2s ease-out;transform-origin:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);@keyframes scaleIn{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}@media (max-width:768px){padding:25px;width:85%;}"]);
+var MessageContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__MessageContainer",
   componentId: "sc-11qkyu1-3"
-})(["display:flex;justify-content:flex-end;gap:5px;margin-top:5px;.cancel-button{filter:grayscale(0.7);}"]);
+})(["margin-bottom:20px;text-align:center;"]);
+var Message$1 = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "ConfirmModal__Message",
+  componentId: "sc-11qkyu1-4"
+})(["margin:0;font-size:16px;color:#333;text-shadow:0 1px 0 rgba(255,255,255,0.5);@media (max-width:768px){font-size:18px;}"]);
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ButtonsContainer",
+  componentId: "sc-11qkyu1-5"
+})(["display:flex;justify-content:center;gap:20px;@media (max-width:768px){gap:30px;transform:scale(1.1);margin-top:5px;}"]);
+var CancelButtonWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__CancelButtonWrapper",
+  componentId: "sc-11qkyu1-6"
+})(["filter:grayscale(0.7);"]);
 
 var ColorSelector = function ColorSelector(_ref) {
   var selectedColor = _ref.selectedColor,
@@ -34137,7 +34143,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React__default.createElement(Container$x, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
+  }, React__default.createElement(Container$w, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -34153,7 +34159,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$x = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
@@ -34509,7 +34515,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$y, {
+  return React__default.createElement(Container$x, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -34526,7 +34532,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__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) {
@@ -34545,7 +34551,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$z, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$y, 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));
@@ -34559,7 +34565,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$y = /*#__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);
@@ -35080,13 +35086,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React__default.createElement(Container$A, {
+  return React__default.createElement(Container$z, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$A = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -35227,7 +35233,7 @@ var PartyCreate = function PartyCreate(_ref) {
     width: "500px",
     height: "300px",
     cancelDrag: ".partyRows"
-  }, React__default.createElement(Wrapper$2, null, React__default.createElement("div", {
+  }, React__default.createElement(Wrapper$1, null, React__default.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35250,7 +35256,7 @@ var PartyCreate = function PartyCreate(_ref) {
     }
   }, "Cancel"))));
 };
-var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
+var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35299,7 +35305,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     width: "800px",
     height: "400px",
     cancelDrag: ".partyRows"
-  }, React__default.createElement(Wrapper$3, null, React__default.createElement("div", {
+  }, React__default.createElement(Wrapper$2, null, React__default.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35322,7 +35328,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     });
   })));
 };
-var Wrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
+var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyDashboard__Wrapper",
   componentId: "sc-16cm41r-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35363,7 +35369,7 @@ var PartyInvite = function PartyInvite(_ref) {
     width: "600px",
     height: "400px",
     cancelDrag: ".playersRows"
-  }, React__default.createElement(Wrapper$4, null, React__default.createElement("div", {
+  }, React__default.createElement(Wrapper$3, null, React__default.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35382,7 +35388,7 @@ var PartyInvite = function PartyInvite(_ref) {
     });
   })));
 };
-var Wrapper$4 = /*#__PURE__*/styled__default.div.withConfig({
+var Wrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35738,7 +35744,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$B, {
+  return React__default.createElement(Container$A, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35768,7 +35774,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$B = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__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) {
@@ -36009,9 +36015,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$C, null, children);
+  return React__default.createElement(Container$B, null, children);
 };
-var Container$C = /*#__PURE__*/styled__default.div.withConfig({
+var Container$B = /*#__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;}"]);
@@ -36167,7 +36173,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__default.createElement(Container$D, {
+  return React__default.createElement(Container$C, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -36176,7 +36182,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$D = /*#__PURE__*/styled__default.div.withConfig({
+var Container$C = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -36509,10 +36515,10 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React__default.createElement(Container$E, null, React__default.createElement(HeaderImage, {
+  }, React__default.createElement(Container$D, null, React__default.createElement(HeaderImage, {
     src: img$9,
     alt: ""
-  }), React__default.createElement(ButtonsContainer$2, null, React__default.createElement(MainButtons, null, React__default.createElement(SocialButton$1, {
+  }), React__default.createElement(ButtonsContainer$3, null, React__default.createElement(MainButtons, null, React__default.createElement(SocialButton$1, {
     onClick: handleDiscordClick
   }, React__default.createElement(fa.FaDiscord, null), " Discord"), React__default.createElement(SocialButton$1, {
     onClick: handleRedditClick
@@ -36527,7 +36533,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React__default.createElement(fa.FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$E = /*#__PURE__*/styled__default.div.withConfig({
+var Container$D = /*#__PURE__*/styled__default.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% );}"]);
@@ -36535,7 +36541,7 @@ var HeaderImage = /*#__PURE__*/styled__default.img.withConfig({
   displayName: "SocialModal__HeaderImage",
   componentId: "sc-tbjhp9-1"
 })(["width:100%;height:160px;object-fit:cover;border-bottom:2px solid rgba(0,0,0,0.3);display:block;border-top-left-radius:8px;border-top-right-radius:8px;"]);
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SocialModal__ButtonsContainer",
   componentId: "sc-tbjhp9-2"
 })(["padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px;"]);
@@ -36573,7 +36579,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$F, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$E, null, React__default.createElement(Header$5, null, React__default.createElement("div", null, React__default.createElement(Title$b, 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"
@@ -36599,7 +36605,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$4, null, description));
 };
-var Container$F = /*#__PURE__*/styled__default.div.withConfig({
+var Container$E = /*#__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);
@@ -36653,7 +36659,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$G, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$F, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -36678,7 +36684,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$G = /*#__PURE__*/styled__default.div.withConfig({
+var Container$F = /*#__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;}"]);
@@ -36719,13 +36725,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$H, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$G, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$H = /*#__PURE__*/styled__default.div.withConfig({
+var Container$G = /*#__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;"]);
@@ -36798,11 +36804,11 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$I, {
+  }, React__default.createElement(Container$H, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React__default.createElement(Overlay$2, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
+  }, disabled && React__default.createElement(Overlay$3, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -36817,7 +36823,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$I = /*#__PURE__*/styled__default.button.withConfig({
+var Container$H = /*#__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) {
@@ -36848,7 +36854,7 @@ var Cost = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay$2 = /*#__PURE__*/styled__default.p.withConfig({
+var Overlay$3 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
@@ -36896,7 +36902,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$J, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$I, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36932,7 +36938,7 @@ var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$J = /*#__PURE__*/styled__default.div.withConfig({
+var Container$I = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -37414,7 +37420,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$K, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$J, null, React__default.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -37442,7 +37448,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$K = /*#__PURE__*/styled__default.div.withConfig({
+var Container$J = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -37476,11 +37482,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$L, {
+  return React__default.createElement(Container$K, {
     maxLines: maxLines
   }, children);
 };
-var Container$L = /*#__PURE__*/styled__default.div.withConfig({
+var Container$K = /*#__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) {
@@ -37588,7 +37594,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$M, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$L, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -37605,7 +37611,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$M = /*#__PURE__*/styled__default.div.withConfig({
+var Container$L = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);