@rpg-engine/long-bow 0.8.49 → 0.8.51

package/dist/long-bow.esm.js

@@ -26111,6 +26111,103 @@ var Container$4 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-b34498-0"
 })(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
 
+var CharacterSkinSelectionModal = function CharacterSkinSelectionModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    availableCharacters = _ref.availableCharacters,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    _ref$initialSelectedS = _ref.initialSelectedSkin,
+    initialSelectedSkin = _ref$initialSelectedS === void 0 ? '' : _ref$initialSelectedS;
+  // Convert availableCharacters to the format used by PropertySelect
+  var propertySelectValues = availableCharacters.map(function (item) {
+    return {
+      id: item.textureKey,
+      name: item.name
+    };
+  });
+  // State to store the selected skin and the sprite key
+  var _useState = useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var _useState2 = useState(''),
+    selectedSpriteKey = _useState2[0],
+    setSelectedSpriteKey = _useState2[1];
+  // Update sprite when the selected value changes
+  var updateSelectedSpriteKey = function updateSelectedSpriteKey() {
+    var textureKey = selectedValue ? selectedValue.id : '';
+    var spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
+    if (spriteKey === selectedSpriteKey) {
+      return;
+    }
+    setSelectedSpriteKey(spriteKey);
+  };
+  // Update sprite when selectedValue changes
+  useEffect(function () {
+    updateSelectedSpriteKey();
+  }, [selectedValue]);
+  // Initialize selectedValue
+  useEffect(function () {
+    if (initialSelectedSkin) {
+      var initialProperty = propertySelectValues.find(function (prop) {
+        return prop.id === initialSelectedSkin;
+      });
+      setSelectedValue(initialProperty || propertySelectValues[0]);
+    } else if (propertySelectValues.length > 0) {
+      setSelectedValue(propertySelectValues[0]);
+    }
+  }, [initialSelectedSkin, availableCharacters]);
+  // Functions to handle confirmation and cancellation
+  var handleConfirm = function handleConfirm() {
+    if (selectedValue) {
+      onConfirm(selectedValue.id);
+      onClose();
+    }
+  };
+  var handleCancel = function handleCancel() {
+    onClose();
+  };
+  if (!isOpen) return null;
+  return React.createElement(Container$5, null, selectedSpriteKey && atlasIMG && atlasJSON && React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+    spriteKey: selectedSpriteKey,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    imgScale: 4,
+    height: 80,
+    width: 64,
+    containerStyle: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingBottom: '15px'
+    },
+    imgStyle: {
+      left: '22px'
+    }
+  })), React.createElement(PropertySelect, {
+    availableProperties: propertySelectValues,
+    onChange: function onChange(value) {
+      setSelectedValue(value);
+    }
+  }), React.createElement(ButtonsContainer, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: handleCancel
+  }, "Cancel"), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: handleConfirm,
+    disabled: !selectedValue
+  }, "Confirm")));
+};
+// Styled components
+var Container$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterSkinSelectionModal__Container",
+  componentId: "sc-qsroao-0"
+})(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
+var ButtonsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterSkinSelectionModal__ButtonsContainer",
+  componentId: "sc-qsroao-1"
+})(["display:flex;justify-content:center;gap:0.8rem;width:100%;margin:3rem 0 0.75rem;button{min-width:95px;font-size:0.9rem;}"]);
+
 var Chat = function Chat(_ref) {
   var chatMessages = _ref.chatMessages,
     onSendChatMessage = _ref.onSendChatMessage,
@@ -26256,13 +26353,13 @@ var RPGUIContainer = function RPGUIContainer(_ref) {
     width = _ref$width === void 0 ? '50%' : _ref$width,
     height = _ref.height,
     className = _ref.className;
-  return React.createElement(Container$5, {
+  return React.createElement(Container$6, {
     width: width,
     height: height || 'auto',
     className: "rpgui-container " + type + " " + className
   }, children);
 };
-var Container$5 = /*#__PURE__*/styled.div.withConfig({
+var Container$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIContainer__Container",
   componentId: "sc-a7heha-0"
 })(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
@@ -26334,7 +26431,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
       }, onRenderMessageLines(emitter, createdAt, message));
     }) : React.createElement(MessageText, null, "No messages available.");
   };
-  return React.createElement(Container$6, null, React.createElement(CustomContainer, {
+  return React.createElement(Container$7, null, React.createElement(CustomContainer, {
     type: RPGUIContainerTypes.FramedGrey,
     width: width,
     height: height,
@@ -26372,7 +26469,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     id: "chat-send-button"
   }, "Send"))))));
 };
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
+var Container$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
@@ -27161,7 +27258,7 @@ var CircularController = function CircularController(_ref) {
       return word[0];
     })));
   };
-  return React.createElement(ButtonsContainer, null, React.createElement(ShortcutsContainer, null, Array.from({
+  return React.createElement(ButtonsContainer$1, null, React.createElement(ShortcutsContainer, null, Array.from({
     length: 12
   }).map(function (_, i) {
     return renderShortcut(i);
@@ -27183,7 +27280,7 @@ var CancelButton = /*#__PURE__*/styled(Button$1).withConfig({
   displayName: "CircularController__CancelButton",
   componentId: "sc-1fewf3h-1"
 })(["width:3rem;height:3rem;font-size:0.8rem;position:relative;left:2.6rem;span{margin-top:4px;margin-left:2px;pointer-events:none;}"]);
-var ButtonsContainer = /*#__PURE__*/styled.div.withConfig({
+var ButtonsContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CircularController__ButtonsContainer",
   componentId: "sc-1fewf3h-2"
 })(["display:flex;align-items:center;justify-content:center;gap:0.5rem;scale:0.9;"]);
@@ -27339,7 +27436,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     },
     defaultPosition: initialPosition,
     scale: scale
-  }, React.createElement(Container$7, {
+  }, React.createElement(Container$8, {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
@@ -27358,7 +27455,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     onPointerDown: onCloseButton
   }, "X"), children));
 };
-var Container$7 = /*#__PURE__*/styled.div.withConfig({
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
 })(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
@@ -27438,7 +27535,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React.createElement(Container$8, {
+  return React.createElement(Container$9, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -27467,7 +27564,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";max-height:", "px;"], function (props) {
@@ -27493,11 +27590,11 @@ var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React.createElement(Container$9, {
+  return ReactDOM.createPortal(React.createElement(Container$a, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -28217,7 +28314,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       });
     }
   };
-  return React.createElement(Container$a, {
+  return React.createElement(Container$b, {
     isDraggingItem: !!draggingState.item,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -28281,7 +28378,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     containerType: containerType
   }))));
 });
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.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,", ";}.quality-star{position:absolute;top:0.5rem;left:0.5rem;font-size:1.2rem;z-index:2;text-shadow:0 0 3px black;pointer-events:none;color:", ";}&::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) {
@@ -28400,7 +28497,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.createElement(Container$b, {
+  return React.createElement(Container$c, {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
@@ -28414,7 +28511,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__PURE__*/styled.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 ", ";box-shadow:", ";height:max-content;width:18rem;position:relative;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -28563,7 +28660,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$c, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
@@ -28572,7 +28669,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.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;"]);
@@ -28592,7 +28689,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$e, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -28620,7 +28717,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.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;}"]);
@@ -29311,20 +29408,20 @@ var DailyRewardsTooltip = function DailyRewardsTooltip(_ref) {
   return React.createElement(TooltipContainer$1, null, React.createElement(CollapsibleHeader, {
     onClick: toggleExpand
   }, React.createElement(HeaderText, null, "Rewards?"), React.createElement(ExpandIcon, null, isExpanded ? '▼' : '▶')), isExpanded && React.createElement(CollapsibleContent, null, React.createElement(RewardsList, null, sortedRewards.map(function (reward, index) {
-    var _reward$key;
+    var _reward$texturePath, _reward$key;
     return React.createElement(RewardItem, {
       key: index
     }, React.createElement(SpriteFromAtlas, {
       atlasJSON: itemsAtlasJSON,
       atlasIMG: itemsAtlasIMG,
-      spriteKey: reward.type === RewardType.Gold ? 'others/gold-coin-qty-6.png' : reward.type === RewardType.Experience ? 'others/royal-chalice.png' : reward.texturePath || 'others/no-image.png',
+      spriteKey: (_reward$texturePath = reward.texturePath) != null ? _reward$texturePath : 'check.png',
       width: 24,
       height: 24,
       imgScale: 1.75
     }), React.createElement(ItemContent, null, React.createElement(RewardLabel, null, React.createElement(Ellipsis, {
       maxWidth: "100%",
       maxLines: 2
-    }, formatTaskKey((_reward$key = reward.key) != null ? _reward$key : ''), ":"))), React.createElement(RewardValue, null, "x", reward.quantity));
+    }, formatTaskKey((_reward$key = reward.key) != null ? _reward$key : reward.type), ":"))), React.createElement(RewardValue, null, "x", reward.quantity));
   }))));
 };
 var TooltipContainer$1 = /*#__PURE__*/styled.div.withConfig({
@@ -29362,7 +29459,7 @@ var ItemContent = /*#__PURE__*/styled.div.withConfig({
 var RewardLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "DailyRewardsTooltip__RewardLabel",
   componentId: "sc-wxzcu4-8"
-})(["color:", ";font-size:0.9rem;line-height:1.2;display:inline-flex;align-items:center;"], uiColors.yellow);
+})(["color:", ";font-size:0.9rem;line-height:1.2;padding-top:15px;display:inline-flex;align-items:center;"], uiColors.yellow);
 var RewardValue = /*#__PURE__*/styled.span.withConfig({
   displayName: "DailyRewardsTooltip__RewardValue",
   componentId: "sc-wxzcu4-9"
@@ -29372,7 +29469,7 @@ var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
   var labelLeft = _ref.labelLeft,
     labelRight = _ref.labelRight,
     checked = _ref.checked;
-  return React.createElement(Container$e, null, labelLeft && React.createElement(Label, null, labelLeft), React.createElement("div", {
+  return React.createElement(Container$f, null, labelLeft && React.createElement(Label, null, labelLeft), React.createElement("div", {
     className: "rpgui-checkbox-container"
   }, React.createElement(CheckBox, {
     className: "rpgui-checkbox",
@@ -29383,7 +29480,7 @@ var ReadOnlyCheckItem = function ReadOnlyCheckItem(_ref) {
     isRight: true
   }, labelRight));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "ReadOnlyCheckItem__Container",
   componentId: "sc-1peplf9-0"
 })(["display:flex;align-items:center;width:100%;height:20px;"]);
@@ -29424,7 +29521,7 @@ var TaskProgressDetails = function TaskProgressDetails(_ref) {
         value = _ref3[1];
       return React.createElement(ProgressItem, {
         key: index
-      }, React.createElement("span", null, key, ":"), React.createElement(ProgressCount, null, value, "/", ((_task$requirements$ta2 = task.requirements.targets.find(function (t) {
+      }, React.createElement("span", null, formatTaskKey(key), ":"), React.createElement(ProgressCount, null, value, "/", ((_task$requirements$ta2 = task.requirements.targets.find(function (t) {
         return t.key === key;
       })) == null ? void 0 : _task$requirements$ta2.quantity) || 0));
     });
@@ -29611,7 +29708,7 @@ 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
-  })), totalTasks > 0 && allCompleted && allClaimed && React.createElement(React.Fragment, null, isClaimed ? React.createElement(ClaimedText$1, null, "Global Rewards Claimed") : React.createElement(CollectWrapper$1, null, React.createElement(Button, {
+  })), totalTasks > 0 && allCompleted && React.createElement(React.Fragment, null, allClaimed || isClaimed ? React.createElement(ClaimedText$1, null, "Global Rewards Claimed") : React.createElement(CollectWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: handleClaimAll
   }, "Collect Global Rewards"))));
@@ -29663,34 +29760,16 @@ var DailyTasks = function DailyTasks(_ref) {
     iconAtlasJSON = _ref.iconAtlasJSON,
     iconAtlasIMG = _ref.iconAtlasIMG;
   var _React$useState = React.useState(tasks),
-    localTasks = _React$useState[0],
-    setLocalTasks = _React$useState[1];
+    localTasks = _React$useState[0];
   var size = useResponsiveSize(scale);
   var handleClaimReward = function handleClaimReward(taskKey, type) {
-    setLocalTasks(function (prevTasks) {
-      return prevTasks.map(function (task) {
-        return task.key === taskKey ? _extends({}, task, {
-          claimed: true
-        }) : task;
-      });
-    });
     onClaimReward({
       type: type,
       taskKey: taskKey
     });
   };
-  var handleClaimAllRewards = function handleClaimAllRewards() {
-    var tasksToReward = localTasks.filter(function (task) {
-      return task.status === TaskStatus.Completed && !task.claimed;
-    }).map(function (task) {
-      return {
-        type: task.type,
-        taskKey: task.key
-      };
-    });
-    onClaimGlobalReward({
-      tasks: tasksToReward
-    });
+  var handleClaimGlobalRewards = function handleClaimGlobalRewards(tasks) {
+    onClaimGlobalReward(tasks);
   };
   if (!size) return null;
   return React.createElement(TasksContainer, {
@@ -29700,11 +29779,11 @@ var DailyTasks = function DailyTasks(_ref) {
     scale: scale,
     width: size.width,
     height: size.height
-  }, React.createElement(TaskTitle$1, null, "Daily Tasks"), React.createElement(Container$f, null, React.createElement(TasksList, {
+  }, React.createElement(TaskTitle$1, null, "Daily Tasks"), React.createElement(Container$g, null, React.createElement(TasksList, {
     className: "tasks-container"
   }, React.createElement(GlobalDailyProgress, {
     tasks: localTasks,
-    onClaimAllRewards: handleClaimAllRewards
+    onClaimAllRewards: handleClaimGlobalRewards
   }), localTasks.map(function (task) {
     return React.createElement(DailyTaskItem, {
       key: task.key,
@@ -29722,7 +29801,7 @@ var TasksContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "DailyTasks__TasksContainer",
   componentId: "sc-ittn77-0"
 })(["min-width:450px;max-width:550px;margin:0 auto;.rpgui-container-title{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;}.rpgui-container{padding:0 !important;overflow:hidden !important;background-color:rgba(30,30,30,0.9) !important;}"]);
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "DailyTasks__Container",
   componentId: "sc-ittn77-1"
 })(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow-y:auto;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
@@ -30094,7 +30173,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET$1;
   var centeredY = y - OFFSET$1;
   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.createElement(Container$g, null, React.createElement(SpriteContainer, {
+  return React.createElement(Container$h, null, React.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React.createElement(SpriteFromAtlas, {
@@ -30112,7 +30191,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$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -30150,7 +30229,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$h, Object.assign({
+  return React.createElement(ModalPortal, null, React.createElement(Container$i, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React.createElement("ul", {
@@ -30167,7 +30246,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.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) {
@@ -30441,7 +30520,7 @@ var SearchFriend = function SearchFriend(_ref) {
     title: "Requests (" + friendRequests.length + ")",
     content: requestsTabContent
   }];
-  return React.createElement(Container$i, null, React.createElement(InternalTabs, {
+  return React.createElement(Container$j, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000",
     inactiveColor: "#777",
@@ -30483,7 +30562,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
     }, "Reject")));
   })));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
 })(["display:flex;flex-direction:column;gap:1rem;"]);
@@ -30686,7 +30765,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$j, null, React.createElement(DynamicText, {
+  return React.createElement(Container$k, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -30704,7 +30783,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -30856,7 +30935,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$k, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$l, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -30866,7 +30945,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.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;"]);
@@ -30927,7 +31006,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$l, null, React.createElement(CloseIcon, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$m, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -30943,7 +31022,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.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;"]);
@@ -31004,7 +31083,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$m, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$n, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31046,7 +31125,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.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;"]);
@@ -31478,7 +31557,7 @@ var Pagination = function Pagination(_ref) {
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     className = _ref.className;
-  return React.createElement(Container$n, {
+  return React.createElement(Container$o, {
     className: className
   }, React.createElement(PaginationButton$1, {
     onClick: function onClick() {
@@ -31496,7 +31575,7 @@ var Pagination = function Pagination(_ref) {
     size: 12
   })));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-3k4m4u-0"
 })(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
@@ -31522,7 +31601,7 @@ var SearchBar = function SearchBar(_ref) {
     className = _ref.className,
     rightElement = _ref.rightElement;
   var hasRightElement = Boolean(rightElement);
-  return React.createElement(Container$o, {
+  return React.createElement(Container$p, {
     className: className
   }, React.createElement(Input$1, {
     type: "text",
@@ -31535,7 +31614,7 @@ var SearchBar = function SearchBar(_ref) {
     "$hasRightElement": hasRightElement
   }), React.createElement(IconContainer, null, React.createElement(SearchIcon, null), rightElement));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchBar__Container",
   componentId: "sc-13n8z02-0"
 })(["position:relative;width:100%;"]);
@@ -31643,7 +31722,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     setCurrentPage = _usePagination.setCurrentPage,
     paginatedItems = _usePagination.paginatedItems,
     totalPages = _usePagination.totalPages;
-  return React.createElement(Container$p, {
+  return React.createElement(Container$q, {
     className: className
   }, (searchOptions || filterOptions) && React.createElement(SearchHeader, {
     searchOptions: searchOptions,
@@ -31665,7 +31744,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     onPageChange: setCurrentPage
   }))));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__Container",
   componentId: "sc-lzp9hn-0"
 })(["display:flex;flex-direction:column;gap:0.5rem;min-height:400px;width:100%;"]);
@@ -31787,7 +31866,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$q, null, React.createElement(Overlay, {
+  return React.createElement(Container$r, null, React.createElement(Overlay, {
     onClick: onBack
   }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
     onClick: onBack
@@ -31800,7 +31879,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     imgScale: 1
   })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
 })(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
@@ -31842,7 +31921,7 @@ var Collapsible = function Collapsible(_ref) {
   var _useState = useState(defaultOpen),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
-  return React.createElement(Container$r, {
+  return React.createElement(Container$s, {
     className: className
   }, React.createElement(Header$2, {
     onClick: function onClick() {
@@ -31850,7 +31929,7 @@ var Collapsible = function Collapsible(_ref) {
     }
   }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Container",
   componentId: "sc-s4h8ey-0"
 })(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
@@ -32180,7 +32259,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       onClose();
     }
   };
-  return React.createElement(Container$s, null, React.createElement(FilterButton, {
+  return React.createElement(Container$t, null, React.createElement(FilterButton, {
     onClick: onToggle,
     "$hasActiveFilters": hasActiveFilters,
     ref: buttonRef
@@ -32211,7 +32290,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
     onClick: onClearAll
   }, "Clear All Filters"))));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__Container",
   componentId: "sc-1xj6ldr-0"
 })(["position:relative;margin-left:0.5rem;"]);
@@ -33305,7 +33384,7 @@ var InformationCenter = function InformationCenter(_ref) {
     minWidth: "300px",
     cancelDrag: ".PaginatedContent-content",
     onCloseButton: onClose
-  }, React.createElement(Container$t, null, React.createElement(InternalTabs, {
+  }, React.createElement(Container$u, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -33316,7 +33395,7 @@ var InformationCenter = function InformationCenter(_ref) {
     hoverColor: "#fef3c7"
   })));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
 })(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow:hidden;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
@@ -33487,7 +33566,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$u, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$v, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -33505,7 +33584,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -33950,7 +34029,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     e.stopPropagation();
     onClose();
   };
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$v, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$w, {
     onClick: handleClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -33973,7 +34052,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$v = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__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;"]);
@@ -34028,7 +34107,7 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$w, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$x, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
@@ -34044,7 +34123,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__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;"]);
@@ -34400,7 +34479,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$x, {
+  return React.createElement(Container$y, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -34417,7 +34496,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__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) {
@@ -34436,7 +34515,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$y, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$z, 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));
@@ -34450,7 +34529,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__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);
@@ -34971,13 +35050,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$z, {
+  return React.createElement(Container$A, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -35630,7 +35709,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$A, {
+  return React.createElement(Container$B, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35660,7 +35739,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__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) {
@@ -35901,9 +35980,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$B, null, children);
+  return React.createElement(Container$C, null, children);
 };
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__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;}"]);
@@ -36059,7 +36138,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$C, {
+  return React.createElement(Container$D, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -36068,7 +36147,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -36401,10 +36480,10 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$D, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$E, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
-  }), React.createElement(ButtonsContainer$1, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
+  }), React.createElement(ButtonsContainer$2, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
     onClick: handleDiscordClick
   }, React.createElement(FaDiscord, null), " Discord"), React.createElement(SocialButton$1, {
     onClick: handleRedditClick
@@ -36419,7 +36498,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$D = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__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% );}"]);
@@ -36427,7 +36506,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$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonsContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__ButtonsContainer",
   componentId: "sc-tbjhp9-2"
 })(["padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px;"]);
@@ -36465,7 +36544,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  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", {
+  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", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -36491,7 +36570,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$E = /*#__PURE__*/styled.div.withConfig({
+var Container$F = /*#__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);
@@ -36545,7 +36624,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$F, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -36570,7 +36649,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$F = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__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;}"]);
@@ -36611,13 +36690,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$H, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$G = /*#__PURE__*/styled.div.withConfig({
+var Container$H = /*#__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;"]);
@@ -36690,7 +36769,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$H, {
+  }, React.createElement(Container$I, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -36709,7 +36788,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$H = /*#__PURE__*/styled.button.withConfig({
+var Container$I = /*#__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) {
@@ -36788,7 +36867,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$I, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$J, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36824,7 +36903,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$I = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -37306,7 +37385,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$K, null, React.createElement(Title$e, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -37334,7 +37413,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$J = /*#__PURE__*/styled.div.withConfig({
+var Container$K = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -37368,11 +37447,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$K, {
+  return React.createElement(Container$L, {
     maxLines: maxLines
   }, children);
 };
-var Container$K = /*#__PURE__*/styled.div.withConfig({
+var Container$L = /*#__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) {
@@ -37480,7 +37559,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$L, null, React.createElement(Stepper, {
+  return React.createElement(Container$M, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -37497,7 +37576,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$L = /*#__PURE__*/styled.div.withConfig({
+var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -37518,5 +37597,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, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, 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$1 as 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, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, 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$1 as 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