@rpg-engine/long-bow 0.6.69 → 0.6.70

package/dist/components/Friends/SearchFriend.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import type { IFriend } from './FriendList';
-interface ISearchFriendProp {
+import React from 'react';
+import { IFriend } from './FriendList';
+interface ISearchFriendProps {
     searchedCharacters: IFriend[];
     friendRequests: IFriend[];
     onFocus?: () => void;
@@ -10,5 +10,5 @@ interface ISearchFriendProp {
     onAcceptRequest: (character: IFriend) => void;
     onRejectRequest: (character: IFriend) => void;
 }
-export declare const SearchFriend: (props: ISearchFriendProp) => JSX.Element;
+export declare const SearchFriend: React.FC<ISearchFriendProps>;
 export {};

package/dist/components/Table/Table.d.ts

@@ -3,3 +3,8 @@ export declare const TableRow: import("styled-components").StyledComponent<"tr",
 export declare const TableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const TableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IUserActionProps {
+    color: string;
+}
+export declare const UserActionLink: import("styled-components").StyledComponent<"span", any, IUserActionProps, never>;
+export {};

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

@@ -28802,101 +28802,151 @@ var TableHeader = /*#__PURE__*/styled__default.th.withConfig({
 var TableCell = /*#__PURE__*/styled__default.td.withConfig({
   displayName: "Table__TableCell",
   componentId: "sc-1c24pcj-3"
-})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";"], uiColors.white, uiColors.lightGray);
+})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";text-align:", ";"], uiColors.white, uiColors.lightGray, function (_ref) {
+  var align = _ref.align;
+  return align ? align : 'left';
+});
 var ActionButtons = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Table__ActionButtons",
   componentId: "sc-1c24pcj-4"
 })(["display:flex;gap:10px;align-items:center;"]);
+var UserActionLink = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Table__UserActionLink",
+  componentId: "sc-1c24pcj-5"
+})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref2) {
+  var color = _ref2.color;
+  return color;
+});
 
-var SearchFriend = function SearchFriend(props) {
-  var searchedCharacters = props.searchedCharacters,
-    friendRequests = props.friendRequests,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onSearch = props.onSearch,
-    onSendFriendRequest = props.onSendFriendRequest,
-    onAcceptRequest = props.onAcceptRequest,
-    onRejectRequest = props.onRejectRequest;
+var SearchFriend = function SearchFriend(_ref) {
+  var searchedCharacters = _ref.searchedCharacters,
+    friendRequests = _ref.friendRequests,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onSearch = _ref.onSearch,
+    onSendFriendRequest = _ref.onSendFriendRequest,
+    onAcceptRequest = _ref.onAcceptRequest,
+    onRejectRequest = _ref.onRejectRequest;
   var _useState = React.useState(''),
     characterName = _useState[0],
     setCharacterName = _useState[1];
+  var debouncedSearch = React.useCallback(lodash.debounce(function (name) {
+    onSearch(name);
+  }, 300), []);
+  var handleInputChange = function handleInputChange(e) {
+    var name = e.target.value;
+    setCharacterName(name);
+    debouncedSearch(name);
+  };
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
-    onSearch(characterName);
+    if (characterName.trim()) {
+      onSearch(characterName);
+    }
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Form$3, {
+  var searchTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(SearchForm, {
     onSubmit: handleSubmit
-  }, React__default.createElement(Column, {
-    flex: 70
-  }, React__default.createElement(TextField$2, {
+  }, React__default.createElement(SearchInput, {
     value: characterName,
     id: "characterName",
     name: "characterName",
-    onChange: function onChange(e) {
-      setCharacterName(e.target.value);
-    },
-    height: 20,
+    onChange: handleInputChange,
     type: "text",
     autoComplete: "off",
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true
-  })), React__default.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React__default.createElement(Button, {
-    type: "submit",
-    buttonType: exports.ButtonTypes.RPGUIButton
-  }, "Search"))), React__default.createElement(ListContainer$1, null, searchedCharacters.map(function (character) {
-    return React__default.createElement(ListElement$3, {
+    autoFocus: true,
+    placeholder: "Search for a character..."
+  })), React__default.createElement(CharacterList, {
+    characters: searchedCharacters,
+    onAction: onSendFriendRequest,
+    actionLabel: "Add Friend"
+  }));
+  var requestsTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(FriendRequestSection, {
+    friendRequests: friendRequests,
+    onAccept: onAcceptRequest,
+    onReject: onRejectRequest
+  }));
+  var tabs = [{
+    id: 'search',
+    title: 'Search',
+    content: searchTabContent
+  }, {
+    id: 'requests',
+    title: "Requests (" + friendRequests.length + ")",
+    content: requestsTabContent
+  }];
+  return React__default.createElement(Container$g, null, React__default.createElement(TableTab, {
+    tabs: tabs,
+    activeTextColor: "#000",
+    inactiveColor: "#777",
+    borderColor: "#f59e0b"
+  }));
+};
+var CharacterList = function CharacterList(_ref2) {
+  var characters = _ref2.characters,
+    onAction = _ref2.onAction,
+    actionLabel = _ref2.actionLabel;
+  return React__default.createElement(ListContainer$1, null, characters.map(function (character) {
+    return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement("p", null, character.name), React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onSendFriendRequest(character);
+    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(UserActionLink, {
+      color: uiColors.lightGreen,
+      onClick: function onClick() {
+        return onAction(character);
       }
-    }, "Add Friend"));
-  })), React__default.createElement(FriendRequestTitle, null, "Friend Requests ", React__default.createElement("span", null, "(", friendRequests.length, ")")), friendRequests.length > 0 && React__default.createElement(ListContainer$1, null, friendRequests.map(function (character) {
-    return React__default.createElement(ListElement$3, {
+    }, actionLabel));
+  }));
+};
+var FriendRequestSection = function FriendRequestSection(_ref3) {
+  var friendRequests = _ref3.friendRequests,
+    onAccept = _ref3.onAccept,
+    onReject = _ref3.onReject;
+  return React__default.createElement(React__default.Fragment, null, friendRequests.length > 0 && React__default.createElement(ListContainer$1, null, friendRequests.map(function (character) {
+    return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement("p", null, character.name), React__default.createElement(AcceptRejectButtonContainer, null, React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onAcceptRequest(character);
+    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(AcceptRejectActions, null, React__default.createElement(UserActionLink, {
+      color: uiColors.lightGreen,
+      onClick: function onClick() {
+        return onAccept(character);
       }
-    }, "Accept"), React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onRejectRequest(character);
+    }, "Accept"), React__default.createElement(UserActionLink, {
+      color: uiColors.red,
+      onClick: function onClick() {
+        return onReject(character);
       }
     }, "Reject")));
   })));
 };
-var Form$3 = /*#__PURE__*/styled__default.form.withConfig({
-  displayName: "SearchFriend__Form",
+var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
-})(["display:flex;width:100%;justify-content:center;align-items:center;margin-top:1rem;"]);
-var TextField$2 = /*#__PURE__*/styled__default.input.withConfig({
-  displayName: "SearchFriend__TextField",
+})(["display:flex;flex-direction:column;gap:1rem;"]);
+var SearchForm = /*#__PURE__*/styled__default.form.withConfig({
+  displayName: "SearchFriend__SearchForm",
   componentId: "sc-1lt1ols-1"
-})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
+})(["display:flex;align-items:center;width:100%;margin-top:1rem;"]);
+var SearchInput = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "SearchFriend__SearchInput",
+  componentId: "sc-1lt1ols-2"
+})(["width:100%;background-color:rgba(0,0,0,0.25);border:none;padding:0.5rem;font-size:", ";"], uiFonts.size.small);
 var ListContainer$1 = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "SearchFriend__ListContainer",
-  componentId: "sc-1lt1ols-2"
-})(["width:100%;c4height:50vh;border:none;overflow-y:scroll;list-style:none;padding:0;@media (max-width:768px){max-height:90wh;}"]);
-var ListElement$3 = /*#__PURE__*/styled__default.li.withConfig({
-  displayName: "SearchFriend__ListElement",
   componentId: "sc-1lt1ols-3"
-})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;display:flex;align-items:center;justify-content:space-between;"], uiFonts.size.small);
-var FriendRequestTitle = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "SearchFriend__FriendRequestTitle",
+})(["list-style:none;padding:0;margin:0;width:100%;max-height:50vh;overflow-y:auto;@media (max-width:768px){max-height:90vh;}"]);
+var ListItem = /*#__PURE__*/styled__default.li.withConfig({
+  displayName: "SearchFriend__ListItem",
   componentId: "sc-1lt1ols-4"
-})(["font-size:", " !important;margin-top:0.5rem !important;text-align:center;gap:0.5rem;"], uiFonts.size.small);
-var AcceptRejectButtonContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SearchFriend__AcceptRejectButtonContainer",
+})(["display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);"]);
+var CharacterName = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "SearchFriend__CharacterName",
   componentId: "sc-1lt1ols-5"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+})(["font-size:", ";margin:0;"], uiFonts.size.small);
+var AcceptRejectActions = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchFriend__AcceptRejectActions",
+  componentId: "sc-1lt1ols-6"
+})(["display:flex;gap:0.5rem;"]);
 
 var FriendList = function FriendList(_ref) {
   var friends = _ref.friends,
@@ -28936,12 +28986,12 @@ var FriendList = function FriendList(_ref) {
       key: friend._id
     }, React__default.createElement(TableCell, null, React__default.createElement(IsOnlineBadge, {
       "$isOnline": friend.isOnline
-    })), React__default.createElement(TableCell, null, friend.name), React__default.createElement(TableCell, null, React__default.createElement(ActionButtons, null, React__default.createElement(UserAction, {
-      color: uiColors.yellow,
+    })), React__default.createElement(TableCell, null, friend.name), React__default.createElement(TableCell, null, React__default.createElement(ActionButtons, null, React__default.createElement(UserActionLink, {
+      color: uiColors.white,
       onClick: function onClick() {
         return onOpenPrivateMessage(friend);
       }
-    }, "Chat"), React__default.createElement(UserAction, {
+    }, "Chat"), React__default.createElement(UserActionLink, {
       color: uiColors.red,
       onClick: function onClick() {
         return onRemoveFriend(friend);
@@ -28976,13 +29026,6 @@ var ButtonContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FriendList__ButtonContainer",
   componentId: "sc-3jf9vt-3"
 })(["display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;"]);
-var UserAction = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "FriendList__UserAction",
-  componentId: "sc-3jf9vt-4"
-})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref3) {
-  var color = _ref3.color;
-  return color;
-});
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/shared.isMobileOrTablet();
 
@@ -29079,7 +29122,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$h, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -29097,7 +29140,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+var Container$h = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -29249,7 +29292,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$i, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -29259,7 +29302,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$h = /*#__PURE__*/styled__default.div.withConfig({
+var Container$i = /*#__PURE__*/styled__default.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;"]);
@@ -29319,7 +29362,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(CloseIcon, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$j, null, React__default.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -29335,7 +29378,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$i = /*#__PURE__*/styled__default.div.withConfig({
+var Container$j = /*#__PURE__*/styled__default.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;"]);
@@ -29395,7 +29438,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$k, 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() {
@@ -29437,7 +29480,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$j = /*#__PURE__*/styled__default.div.withConfig({
+var Container$k = /*#__PURE__*/styled__default.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;"]);
@@ -29866,7 +29909,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$l, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -29884,7 +29927,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$k = /*#__PURE__*/styled__default.div.withConfig({
+var Container$l = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -30486,7 +30529,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$m, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -30495,7 +30538,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$4, {
+    return React__default.createElement(ListElement$3, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30503,7 +30546,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$l = /*#__PURE__*/styled__default.div.withConfig({
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -30511,7 +30554,7 @@ var Container$l = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$4 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$3 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -30522,7 +30565,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$n, 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));
@@ -30536,7 +30579,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -30549,7 +30592,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$o, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -30572,7 +30615,7 @@ var Background = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.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;"]);
@@ -31088,12 +31131,12 @@ var TabBody = function TabBody(_ref) {
   var id = _ref.id,
     children = _ref.children,
     styles = _ref.styles;
-  return React__default.createElement(Container$o, {
+  return React__default.createElement(Container$p, {
     styles: styles,
     "data-tab-id": id
   }, children);
 };
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:100%;height:", ";overflow-y:auto;"], function (props) {
@@ -31710,7 +31753,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$q, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -31740,7 +31783,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -31954,9 +31997,9 @@ var InputRadio$1 = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$q, null, children);
+  return React__default.createElement(Container$r, null, children);
 };
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -32112,7 +32155,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React__default.createElement(Container$r, {
+  return React__default.createElement(Container$s, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -32121,7 +32164,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -32401,7 +32444,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$s, 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$t, 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"
@@ -32427,7 +32470,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -32481,7 +32524,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$t, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$u, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -32506,7 +32549,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -32547,13 +32590,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$u, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$v, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -32613,7 +32656,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$v, {
+  }, React__default.createElement(Container$w, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -32632,7 +32675,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$v = /*#__PURE__*/styled__default.button.withConfig({
+var Container$w = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -32711,7 +32754,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$w, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$x, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32747,7 +32790,7 @@ var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -33298,11 +33341,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$x, {
+  return React__default.createElement(Container$y, {
     maxLines: maxLines
   }, children);
 };
-var Container$x = /*#__PURE__*/styled__default.div.withConfig({
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -33410,7 +33453,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$y, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$z, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -33427,7 +33470,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -33514,6 +33557,7 @@ exports.TimeWidget = TimeWidget;
 exports.TradingMenu = TradingMenu;
 exports.Truncate = Truncate;
 exports.TutorialStepper = TutorialStepper;
+exports.UserActionLink = UserActionLink;
 exports._RPGUI = _RPGUI;
 exports.getMockedPlayersRowsLeader = getMockedPlayersRowsLeader;
 exports.getMockedPlayersRowsNotLeader = getMockedPlayersRowsNotLeader;