@rpg-engine/long-bow 0.5.29 → 0.5.31

package/dist/components/Item/Inventory/ItemSlotRarity.d.ts

@@ -1,9 +1,2 @@
 import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IProps {
-    item: IItem | null;
-    children: React.ReactNode;
-}
-export declare const ItemSlotRarity: ({ children, item }: IProps) => JSX.Element;
 export declare const rarityColor: (item: IItem | null) => "rgba(13, 193, 13, 0.6)" | "rgba(8, 104, 187, 0.6)" | "rgba(191, 0, 255, 0.6)" | "rgba(255, 191, 0,0.6)" | null;
-export {};

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

@@ -13391,6 +13391,21 @@ var Container$7 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case shared.ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case shared.ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case shared.ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case shared.ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return null;
+  }
+};
+
 var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
   var isFractionalStackQty = stackQty % 1 !== 0;
   var isLargerThan999 = stackQty > 999;
@@ -13429,42 +13444,6 @@ var ItemQty = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-keb1s5-1"
 })(["&.regular{font-size:", ";}&.small{font-size:", ";}&.xsmall{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall, uiFonts.size.xxsmall);
 
-var ItemSlotRarity = function ItemSlotRarity(_ref) {
-  var children = _ref.children,
-    item = _ref.item;
-  if (!item) return React__default.createElement(React__default.Fragment, null, children);
-  return React__default.createElement(Container$8, {
-    item: item
-  }, children);
-};
-var rarityColor = function rarityColor(item) {
-  switch (item == null ? void 0 : item.rarity) {
-    case shared.ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case shared.ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case shared.ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case shared.ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return null;
-  }
-};
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSlotRarity__Container",
-  componentId: "sc-1n0r6n7-0"
-})([".sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}"], function (_ref2) {
-  var item = _ref2.item;
-  return rarityColor(item);
-}, function (_ref3) {
-  var item = _ref3.item;
-  return "0 0 5px 2px " + rarityColor(item);
-}, function (_ref4) {
-  var item = _ref4.item;
-  return "0 0 4px 3px " + rarityColor(item);
-});
-
 var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
   var containerType = _ref.containerType,
     atlasJSON = _ref.atlasJSON,
@@ -13478,8 +13457,6 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
     }
     return React__default.createElement(ErrorBoundary, {
       key: item._id
-    }, React__default.createElement(ItemSlotRarity, {
-      item: item
     }, React__default.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
@@ -13491,7 +13468,7 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
       }, atlasJSON),
       imgScale: 3,
       imgClassname: "sprite-from-atlas-img--item"
-    }), onRenderStackInfo(item._id, (_item$stackQty = item.stackQty) != null ? _item$stackQty : 0)));
+    }), onRenderStackInfo(item._id, (_item$stackQty = item.stackQty) != null ? _item$stackQty : 0));
   };
   var renderEquipment = function renderEquipment(itemToRender) {
     var _itemToRender$allowed;
@@ -13544,7 +13521,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$8, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -13561,7 +13538,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$8 = /*#__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) {
@@ -13591,7 +13568,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -13619,7 +13596,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__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;}"]);
@@ -13889,6 +13866,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     setDropPosition = _useState8[1];
   var dragContainer = React.useRef(null);
   var _useDragging = useDragging(),
+    draggingItem = _useDragging.item,
     setDraggingItem = _useDragging.setDraggingItem;
   var _useState9 = React.useState([]),
     contextActions = _useState9[0],
@@ -13994,7 +13972,6 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       return;
     }
     if (onDragStart && containerType) {
-      setDraggingItem(item);
       onDragStart(item, slotIndex, containerType);
     }
   };
@@ -14003,8 +13980,12 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setWasDragged(true);
       setIsFocused(true);
     }
+    if (!draggingItem) {
+      setDraggingItem(item);
+    }
   };
-  return React__default.createElement(Container$b, {
+  return React__default.createElement(Container$a, {
+    isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -14080,11 +14061,23 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     setIsTooltipVisible: setTooltipVisible
   }));
 });
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:0;}position:relative;&::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) {
-  var isSelectingShortcut = _ref2.isSelectingShortcut;
+})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+  var isDraggingItem = _ref2.isDraggingItem;
+  return isDraggingItem ? 0 : 1;
+}, function (_ref3) {
+  var item = _ref3.item;
+  return rarityColor(item);
+}, function (_ref4) {
+  var item = _ref4.item;
+  return "0 0 5px 2px " + rarityColor(item);
+}, function (_ref5) {
+  var item = _ref5.item;
+  return "0 0 4px 3px " + rarityColor(item);
+}, function (_ref6) {
+  var isSelectingShortcut = _ref6.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
@@ -14184,7 +14177,7 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React__default.createElement(Container$c, {
+  return React__default.createElement(Container$b, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
@@ -14198,7 +14191,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__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 ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -14344,7 +14337,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$c, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
@@ -14353,7 +14346,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__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;"]);
@@ -14706,7 +14699,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement(Container$e, {
+  return React__default.createElement(Container$d, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -14733,7 +14726,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -14845,7 +14838,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React__default.createElement(Container$f, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$e, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -14863,7 +14856,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$f = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -15079,7 +15072,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$g, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$f, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -15097,7 +15090,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -15249,7 +15242,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$h, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$g, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -15259,7 +15252,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__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;"]);
@@ -15319,7 +15312,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$i, null, React__default.createElement(TextContainer$1, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$h, null, React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React__default.createElement(NPCDialogText, {
     type: type,
@@ -15333,7 +15326,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__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;"]);
@@ -15389,7 +15382,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$j, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$i, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -15431,7 +15424,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__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;"]);
@@ -15722,7 +15715,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$k, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$j, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -15740,7 +15733,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -16186,7 +16179,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$l, {
+  return React__default.createElement(Container$k, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -16203,7 +16196,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__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) {
@@ -16222,7 +16215,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$m, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$l, 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));
@@ -16236,7 +16229,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__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);
@@ -16249,7 +16242,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$n, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$m, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -16272,7 +16265,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$n = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__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;"]);
@@ -17237,7 +17230,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$o, {
+  return React__default.createElement(Container$n, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -17267,7 +17260,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__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) {
@@ -17615,7 +17608,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$o, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -17624,7 +17617,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -17913,7 +17906,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$q, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$p, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -17939,7 +17932,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__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);
@@ -17993,7 +17986,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$r, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$q, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -18018,7 +18011,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__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;}"]);
@@ -18059,13 +18052,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$s, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$r, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__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;"]);
@@ -18125,7 +18118,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$t, {
+  }, React__default.createElement(Container$s, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -18144,7 +18137,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$t = /*#__PURE__*/styled.button.withConfig({
+var Container$s = /*#__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) {
@@ -18223,7 +18216,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$u, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$t, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -18259,7 +18252,7 @@ var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -18605,11 +18598,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$v, {
+  return React__default.createElement(Container$u, {
     maxLines: maxLines
   }, children);
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__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) {