@rpg-engine/long-bow 0.8.52 → 0.8.54

package/dist/long-bow.esm.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, Component, useRef, useCallback, useContext, createContext, useMemo, memo, Fragment } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
@@ -29306,40 +29306,6 @@ var EmptyState = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-19q95ue-15"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:", ";width:100%;padding:2rem;svg{font-size:3rem;margin-bottom:1rem;opacity:0.7;}p{font-family:'Press Start 2P',cursive;font-size:0.9rem;margin:0;}"], uiColors.lightGray);
 
-function useDailyTasksState(_ref) {
-  var onClaimReward = _ref.onClaimReward,
-    onClaimGlobalReward = _ref.onClaimGlobalReward;
-  var _useState = useState(false),
-    globalRewardClaimed = _useState[0],
-    setGlobalRewardClaimed = _useState[1];
-  var _useState2 = useState([]),
-    claimedTaskKeys = _useState2[0],
-    setClaimedTaskKeys = _useState2[1];
-  var handleClaimReward = function handleClaimReward(taskKey, type) {
-    onClaimReward({
-      type: type,
-      taskKey: taskKey
-    });
-    setClaimedTaskKeys(function (prev) {
-      return [].concat(prev, [taskKey]);
-    });
-  };
-  var handleClaimGlobalRewards = function handleClaimGlobalRewards(tasks) {
-    onClaimGlobalReward(tasks);
-    setGlobalRewardClaimed(true);
-  };
-  var isTaskRewardClaimed = function isTaskRewardClaimed(taskKey) {
-    return claimedTaskKeys.includes(taskKey);
-  };
-  return {
-    globalRewardClaimed: globalRewardClaimed,
-    claimedTaskKeys: claimedTaskKeys,
-    isTaskRewardClaimed: isTaskRewardClaimed,
-    handleClaimReward: handleClaimReward,
-    handleClaimGlobalRewards: handleClaimGlobalRewards
-  };
-}
-
 var formatTaskKey = function formatTaskKey(key) {
   var formatted = key.replace(/[-_]/g, ' ');
   formatted = formatted.replace(/([A-Z])/g, ' $1');
@@ -29737,6 +29703,7 @@ var GlobalDailyProgress = function GlobalDailyProgress(_ref) {
     return task.claimed === true;
   });
   var shouldShowGlobalButton = allCompleted && allClaimed && !globalRewardClaimed;
+  var shouldShowClaimedMessage = globalRewardClaimed;
   var handleClaimAll = function handleClaimAll() {
     var taskIdentifiers = tasks.map(function (task) {
       return {
@@ -29750,10 +29717,10 @@ var GlobalDailyProgress = function GlobalDailyProgress(_ref) {
   };
   return React.createElement(GlobalProgressContainer, null, React.createElement(HeaderContainer$1, null, React.createElement(GlobeIcon, null, "\uD83C\uDF0D"), React.createElement(ProgressText, null, "Global Tasks Completed: ", completedTasks, "/", totalTasks)), React.createElement(ProgressBar, null, React.createElement(ProgressFill, {
     percentage: completedTasks / totalTasks * 100
-  })), allCompleted && React.createElement(React.Fragment, null, shouldShowGlobalButton ? React.createElement(CollectWrapper$1, null, React.createElement(Button, {
+  })), allCompleted && React.createElement(React.Fragment, null, shouldShowGlobalButton && React.createElement(CollectWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: handleClaimAll
-  }, "Collect Global Rewards")) : React.createElement(ClaimedText$1, null, "Global Rewards Claimed")));
+  }, "Collect Global Rewards")), shouldShowClaimedMessage && React.createElement(ClaimedText$1, null, "Global Rewards Claimed")));
 };
 var GlobalProgressContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "GlobalDailyProgress__GlobalProgressContainer",
@@ -29800,18 +29767,34 @@ var DailyTasks = function DailyTasks(_ref) {
     itemsAtlasJSON = _ref.itemsAtlasJSON,
     itemsAtlasIMG = _ref.itemsAtlasIMG,
     iconAtlasJSON = _ref.iconAtlasJSON,
-    iconAtlasIMG = _ref.iconAtlasIMG;
+    iconAtlasIMG = _ref.iconAtlasIMG,
+    _ref$globalRewardClai = _ref.globalRewardClaimed,
+    globalRewardClaimed = _ref$globalRewardClai === void 0 ? false : _ref$globalRewardClai;
   var _React$useState = React.useState(tasks),
     localTasks = _React$useState[0];
   var size = useResponsiveSize(scale);
-  var _useDailyTasksState = useDailyTasksState({
-      onClaimReward: onClaimReward,
-      onClaimGlobalReward: onClaimGlobalReward
-    }),
-    globalRewardClaimed = _useDailyTasksState.globalRewardClaimed,
-    handleClaimReward = _useDailyTasksState.handleClaimReward,
-    handleClaimGlobalRewards = _useDailyTasksState.handleClaimGlobalRewards,
-    isTaskRewardClaimed = _useDailyTasksState.isTaskRewardClaimed;
+  var _useState = useState([]),
+    claimedTasks = _useState[0],
+    setClaimedTasks = _useState[1];
+  var _useState2 = useState(false),
+    globalRewardClaimedLocal = _useState2[0],
+    setGlobalRewardClaimedLocal = _useState2[1];
+  var handleClaimReward = function handleClaimReward(taskKey, taskType) {
+    onClaimReward({
+      taskKey: taskKey,
+      type: taskType
+    });
+    setClaimedTasks(function (prev) {
+      return [].concat(prev, [taskKey]);
+    });
+  };
+  var handleClaimGlobalRewards = function handleClaimGlobalRewards(tasks) {
+    onClaimGlobalReward(tasks);
+    setGlobalRewardClaimedLocal(true);
+  };
+  var isTaskRewardClaimed = function isTaskRewardClaimed(taskKey) {
+    return claimedTasks.includes(taskKey);
+  };
   if (!size) return null;
   return React.createElement(TasksContainer, {
     type: RPGUIContainerTypes.Framed,
@@ -29825,7 +29808,7 @@ var DailyTasks = function DailyTasks(_ref) {
   }, React.createElement(GlobalDailyProgress, {
     tasks: localTasks,
     onClaimAllRewards: handleClaimGlobalRewards,
-    globalRewardClaimed: globalRewardClaimed
+    globalRewardClaimed: globalRewardClaimed || globalRewardClaimedLocal
   }), localTasks.map(function (task) {
     return React.createElement(DailyTaskItem, {
       key: task.key,
@@ -29836,7 +29819,7 @@ var DailyTasks = function DailyTasks(_ref) {
       itemsAtlasIMG: itemsAtlasIMG,
       iconAtlasJSON: iconAtlasJSON,
       iconAtlasIMG: iconAtlasIMG,
-      isRewardClaimed: isTaskRewardClaimed(task.key)
+      isRewardClaimed: task.claimed || isTaskRewardClaimed(task.key)
     });
   }))));
 };
@@ -34057,56 +34040,62 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   return isFullScreen && '50%';
 });
 
+// Global style to prevent body scrolling when modal is open
+var GlobalStyle = /*#__PURE__*/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.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$w, {
-    onClick: handleClose
-  }, React.createElement(DraggableContainer, {
-    width: "auto",
-    dragDisabled: true
-  }, React.createElement(Wrapper$1, {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, typeof message === 'string' ? React.createElement("p", null, message) : message, React.createElement(ButtonsWrapper, null, React.createElement("div", {
-    className: "cancel-button"
-  }, React.createElement(Button, {
+  var stopPropagation = function stopPropagation(e) {
+    e.stopPropagation();
+  };
+  return React.createElement(ModalPortal, null, React.createElement(GlobalStyle, null), React.createElement(Overlay$2, {
+    onPointerDown: handleClose
+  }), React.createElement(ModalContainer, null, React.createElement(ModalContent, {
+    onPointerDown: stopPropagation
+  }, React.createElement(MessageContainer, null, typeof message === 'string' ? React.createElement(Message$1, null, message) : message), React.createElement(ButtonsContainer$2, null, React.createElement(CancelButtonWrapper, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
-    onClick: handleClose
+    onPointerDown: handleClose
   }, "No")), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
-    onClick: handleConfirm
-  }, "Yes"))))));
+    onPointerDown: handleConfirm
+  }, "Yes")))));
 };
-var Background = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__Background",
+var Overlay$2 = /*#__PURE__*/styled.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.div.withConfig({
-  displayName: "ConfirmModal__Container",
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:1000;animation:fadeIn 0.2s ease-out;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
+var ModalContainer = /*#__PURE__*/styled.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.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.div.withConfig({
+  displayName: "ConfirmModal__ModalContent",
   componentId: "sc-11qkyu1-2"
-})(["p{margin:0;}"]);
-var ButtonsWrapper = /*#__PURE__*/styled.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.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.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.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.div.withConfig({
+  displayName: "ConfirmModal__CancelButtonWrapper",
+  componentId: "sc-11qkyu1-6"
+})(["filter:grayscale(0.7);"]);
 
 var ColorSelector = function ColorSelector(_ref) {
   var selectedColor = _ref.selectedColor,
@@ -34150,7 +34139,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$x, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$w, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -34166,7 +34155,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.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;"]);
@@ -34522,7 +34511,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$y, {
+  return React.createElement(Container$x, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -34539,7 +34528,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__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) {
@@ -34558,7 +34547,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$z, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$y, 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));
@@ -34572,7 +34561,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__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);
@@ -35093,13 +35082,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$A, {
+  return React.createElement(Container$z, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -35241,7 +35230,7 @@ var PartyCreate = function PartyCreate(_ref) {
     width: "500px",
     height: "300px",
     cancelDrag: ".partyRows"
-  }, React.createElement(Wrapper$2, null, React.createElement("div", {
+  }, React.createElement(Wrapper$1, null, React.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35264,7 +35253,7 @@ var PartyCreate = function PartyCreate(_ref) {
     }
   }, "Cancel"))));
 };
-var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35313,7 +35302,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     width: "800px",
     height: "400px",
     cancelDrag: ".partyRows"
-  }, React.createElement(Wrapper$3, null, React.createElement("div", {
+  }, React.createElement(Wrapper$2, null, React.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35336,7 +35325,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     });
   })));
 };
-var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyDashboard__Wrapper",
   componentId: "sc-16cm41r-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35377,7 +35366,7 @@ var PartyInvite = function PartyInvite(_ref) {
     width: "600px",
     height: "400px",
     cancelDrag: ".playersRows"
-  }, React.createElement(Wrapper$4, null, React.createElement("div", {
+  }, React.createElement(Wrapper$3, null, React.createElement("div", {
     style: {
       width: '100%'
     }
@@ -35396,7 +35385,7 @@ var PartyInvite = function PartyInvite(_ref) {
     });
   })));
 };
-var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -35752,7 +35741,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$B, {
+  return React.createElement(Container$A, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35782,7 +35771,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__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) {
@@ -36023,9 +36012,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$C, null, children);
+  return React.createElement(Container$B, null, children);
 };
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__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;}"]);
@@ -36181,7 +36170,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$D, {
+  return React.createElement(Container$C, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -36190,7 +36179,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$D = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -36523,10 +36512,10 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$E, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$D, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
-  }), React.createElement(ButtonsContainer$2, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
+  }), React.createElement(ButtonsContainer$3, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
     onClick: handleDiscordClick
   }, React.createElement(FaDiscord, null), " Discord"), React.createElement(SocialButton$1, {
     onClick: handleRedditClick
@@ -36541,7 +36530,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$E = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__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% );}"]);
@@ -36549,7 +36538,7 @@ var HeaderImage = /*#__PURE__*/styled.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.div.withConfig({
+var ButtonsContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__ButtonsContainer",
   componentId: "sc-tbjhp9-2"
 })(["padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px;"]);
@@ -36587,7 +36576,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$F, null, React.createElement(Header$5, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$E, null, React.createElement(Header$5, null, React.createElement("div", null, React.createElement(Title$b, 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"
@@ -36613,7 +36602,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$F = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__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);
@@ -36667,7 +36656,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$G, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$F, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -36692,7 +36681,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$G = /*#__PURE__*/styled.div.withConfig({
+var Container$F = /*#__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;}"]);
@@ -36733,13 +36722,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$H, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$H = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__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;"]);
@@ -36812,11 +36801,11 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$I, {
+  }, React.createElement(Container$H, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay$2, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+  }, disabled && React.createElement(Overlay$3, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -36831,7 +36820,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$I = /*#__PURE__*/styled.button.withConfig({
+var Container$H = /*#__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) {
@@ -36862,7 +36851,7 @@ var Cost = /*#__PURE__*/styled.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.p.withConfig({
+var Overlay$3 = /*#__PURE__*/styled.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);
@@ -36910,7 +36899,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$I, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36946,7 +36935,7 @@ var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$J = /*#__PURE__*/styled.div.withConfig({
+var Container$I = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -37428,7 +37417,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$K, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$J, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -37456,7 +37445,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$K = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -37490,11 +37479,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$L, {
+  return React.createElement(Container$K, {
     maxLines: maxLines
   }, children);
 };
-var Container$L = /*#__PURE__*/styled.div.withConfig({
+var Container$K = /*#__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) {
@@ -37602,7 +37591,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$M, null, React.createElement(Stepper, {
+  return React.createElement(Container$L, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -37619,7 +37608,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$M = /*#__PURE__*/styled.div.withConfig({
+var Container$L = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);