@rpg-engine/long-bow 0.7.91 → 0.7.92

package/dist/long-bow.esm.js

@@ -5,11 +5,11 @@ import { v4 } from 'uuid';
 import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes } from 'react-icons/fa';
+import { FaTimes, FaSearch, FaThumbtack, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 import { camelCase, debounce } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import { AiFillCaretRight } from 'react-icons/ai';
@@ -27157,6 +27157,47 @@ var StyledShortcut = /*#__PURE__*/styled(SingleShortcut).withConfig({
   componentId: "sc-1fewf3h-4"
 })(["width:2.5rem;height:2.5rem;transition:all 0.1s;.mana,.qty{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";border-color:", ";}"], uiColors.lightGray, uiColors.gray, uiColors.yellow);
 
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+function useLocalStorage(key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  var _useState = useState(function () {
+      if (typeof window === 'undefined') {
+        return initialValue;
+      }
+      try {
+        // Get from local storage by key
+        var item = window.localStorage.getItem(key);
+        // Parse stored json or if none return initialValue
+        return item ? JSON.parse(item) : initialValue;
+      } catch (error) {
+        // If error also return initialValue
+        console.log(error);
+        return initialValue;
+      }
+    }),
+    storedValue = _useState[0],
+    setStoredValue = _useState[1];
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  var setValue = function setValue(value) {
+    try {
+      // Allow value to be a function so we have same API as useState
+      var valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}
+
 function useOutsideClick(ref, id) {
   useEffect(function () {
     /**
@@ -27319,54 +27360,99 @@ var Icon = /*#__PURE__*/styled.img.withConfig({
   return width;
 });
 
-var InputRadio = function InputRadio(_ref) {
-  var label = _ref.label,
-    name = _ref.name,
-    value = _ref.value,
-    isChecked = _ref.isChecked,
-    onRadioSelect = _ref.onRadioSelect;
-  var onRadioClick = function onRadioClick() {
-    onRadioSelect(value);
-  };
-  return React.createElement("div", {
-    onPointerUp: onRadioClick
-  }, React.createElement("input", {
-    className: "rpgui-radio",
-    name: name,
-    value: value,
-    type: "radio",
-    "data-rpguitype": "radio",
-    checked: isChecked,
-    // rpgui breaks onChange on this input (doesn't work). That's why I had to wrap it with a div and a onClick listener.
-    readOnly: true
-  }), React.createElement("label", null, label));
-};
-
-var countItemFromInventory = function countItemFromInventory(itemKey, inventory) {
-  var itemsFromInventory = [];
-  if (inventory) {
-    Object.keys(inventory.slots).forEach(function (i) {
-      var _inventory$slots$inde;
-      var index = parseInt(i);
-      if (((_inventory$slots$inde = inventory.slots[index]) == null ? void 0 : _inventory$slots$inde.key) === itemKey) {
-        itemsFromInventory.push(inventory.slots[index]);
+var Dropdown = function Dropdown(_ref) {
+  var options = _ref.options,
+    width = _ref.width,
+    onChange = _ref.onChange,
+    _ref$opensUp = _ref.opensUp,
+    opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
+  var dropdownId = v4();
+  var _useState = useState(''),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var _useState2 = useState(''),
+    selectedOption = _useState2[0],
+    setSelectedOption = _useState2[1];
+  var _useState3 = useState(false),
+    opened = _useState3[0],
+    setOpened = _useState3[1];
+  useEffect(function () {
+    var firstOption = options[0];
+    if (firstOption) {
+      var change = !selectedValue;
+      if (!change) {
+        change = options.filter(function (o) {
+          return o.value === selectedValue;
+        }).length < 1;
       }
-    });
-  }
-  var totalQty = itemsFromInventory.reduce(function (acc, item) {
-    return acc + ((item == null ? void 0 : item.stackQty) || 1);
-  }, 0);
-  return totalQty;
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
+    }
+  }, [options]);
+  useEffect(function () {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+  return React.createElement(Container$8, {
+    onMouseLeave: function onMouseLeave() {
+      return setOpened(false);
+    },
+    width: width
+  }, React.createElement(DropdownSelect$1, {
+    id: "dropdown-" + dropdownId,
+    className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
+    onPointerUp: function onPointerUp() {
+      return setOpened(function (prev) {
+        return !prev;
+      });
+    }
+  }, React.createElement("label", null, "\u25BC"), " ", selectedOption), React.createElement(DropdownOptions$1, {
+    className: "rpgui-dropdown-imp",
+    opened: opened,
+    opensUp: opensUp
+  }, options.map(function (option) {
+    return React.createElement("li", {
+      key: option.id,
+      onPointerUp: function onPointerUp() {
+        setSelectedValue(option.value);
+        setSelectedOption(option.option);
+        setOpened(false);
+      }
+    }, option.option);
+  })));
 };
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Dropdown__Container",
+  componentId: "sc-8arn65-0"
+})(["position:relative;width:", ";"], function (props) {
+  return props.width || '100%';
+});
+var DropdownSelect$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Dropdown__DropdownSelect",
+  componentId: "sc-8arn65-1"
+})(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
+var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "Dropdown__DropdownOptions",
+  componentId: "sc-8arn65-2"
+})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
+  return props.opened ? 'block' : 'none';
+}, function (props) {
+  return props.opensUp ? '100%' : 'auto';
+}, function (props) {
+  return props.opensUp ? 'auto' : '100%';
+});
 
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React.createElement(Container$8, {
+  return ReactDOM.createPortal(React.createElement(Container$9, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -28042,7 +28128,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       });
     }
   };
-  return React.createElement(Container$9, {
+  return React.createElement(Container$a, {
     isDraggingItem: !!draggingState.item,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -28106,7 +28192,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     containerType: containerType
   }))));
 });
-var Container$9 = /*#__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:", ";}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) {
@@ -28222,7 +28308,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$a, {
+  return React.createElement(Container$b, {
     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
@@ -28236,7 +28322,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$a = /*#__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) {
@@ -28382,7 +28468,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$b, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$c, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
@@ -28391,7 +28477,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$b = /*#__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;"]);
@@ -28411,7 +28497,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$c, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -28439,7 +28525,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__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;}"]);
@@ -28492,8 +28578,114 @@ var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   }));
 };
 
-var CraftingRecipe = function CraftingRecipe(_ref) {
+var countItemFromInventory = function countItemFromInventory(itemKey, inventory) {
+  var itemsFromInventory = [];
+  if (inventory) {
+    Object.keys(inventory.slots).forEach(function (i) {
+      var _inventory$slots$inde;
+      var index = parseInt(i);
+      if (((_inventory$slots$inde = inventory.slots[index]) == null ? void 0 : _inventory$slots$inde.key) === itemKey) {
+        itemsFromInventory.push(inventory.slots[index]);
+      }
+    });
+  }
+  var totalQty = itemsFromInventory.reduce(function (acc, item) {
+    return acc + ((item == null ? void 0 : item.stackQty) || 1);
+  }, 0);
+  return totalQty;
+};
+
+var modifyString = function modifyString(str) {
+  var parts = str.split('/');
+  var fileName = parts[parts.length - 1];
+  parts = fileName.split('.');
+  var name = parts[0];
+  name = name.replace(/-/g, ' ');
+  var words = name.split(' ');
+  var firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
+  var modifiedWords = [firstWord].concat(words.slice(1));
+  return modifiedWords.join(' ');
+};
+
+var TooltipContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__TooltipContainer",
+  componentId: "sc-iqzgok-0"
+})(["position:fixed;left:", "px;top:", "px;background-color:rgba(0,0,0,0.95);color:white;text-align:left;border-radius:4px;padding:10px;z-index:1000;font-family:'Press Start 2P',cursive;font-size:0.6rem;width:max-content;max-width:250px;white-space:normal;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);line-height:1.4;&:before{content:'';position:absolute;top:12px;left:-6px;border-width:6px 6px 6px 0;border-style:solid;border-color:transparent rgba(0,0,0,0.95) transparent transparent;}"], function (props) {
+  return props.x;
+}, function (props) {
+  return props.y;
+}, uiColors.darkGray);
+var MinCraftingRequirementsText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__MinCraftingRequirementsText",
+  componentId: "sc-iqzgok-1"
+})(["font-size:0.55rem;margin:0;margin-bottom:12px;color:", " !important;"], function (_ref) {
+  var levelIsOk = _ref.levelIsOk;
+  return levelIsOk ? uiColors.lightGreen : uiColors.lightGray;
+});
+var IngredientsTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__IngredientsTitle",
+  componentId: "sc-iqzgok-2"
+})(["color:", ";font-size:0.6rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;"], uiColors.yellow);
+var Recipe = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__Recipe",
+  componentId: "sc-iqzgok-3"
+})(["display:flex;align-items:center;font-size:0.55rem;margin-bottom:8px;margin-left:4px;&:last-child{margin-bottom:0;}.sprite-from-atlas-img{top:0px;left:0px;}"]);
+var Ingredient = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingTooltip__Ingredient",
+  componentId: "sc-iqzgok-4"
+})(["margin:0;margin-left:14px;color:", " !important;"], function (_ref2) {
+  var isQuantityOk = _ref2.isQuantityOk;
+  return isQuantityOk ? uiColors.lightGreen : uiColors.lightGray;
+});
+var CraftingTooltip = function CraftingTooltip(_ref3) {
   var _skills$level, _skills, _recipe$minCraftingRe, _recipe$minCraftingRe2, _recipe$levelIsOk, _recipe$minCraftingRe3, _recipe$minCraftingRe4, _recipe$minCraftingRe5, _recipe$minCraftingRe6;
+  var x = _ref3.x,
+    y = _ref3.y,
+    recipe = _ref3.recipe,
+    inventory = _ref3.inventory,
+    skills = _ref3.skills,
+    atlasIMG = _ref3.atlasIMG,
+    atlasJSON = _ref3.atlasJSON;
+  var levelInSkill = (_skills$level = skills == null ? void 0 : (_skills = skills[(_recipe$minCraftingRe = recipe == null ? void 0 : (_recipe$minCraftingRe2 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe2[0]) != null ? _recipe$minCraftingRe : '']) == null ? void 0 : _skills.level) != null ? _skills$level : 1;
+  var levelIsOk = (_recipe$levelIsOk = recipe == null ? void 0 : recipe.levelIsOk) != null ? _recipe$levelIsOk : false;
+  return React.createElement(TooltipContainer, {
+    x: x,
+    y: y
+  }, React.createElement(MinCraftingRequirementsText, {
+    levelIsOk: levelIsOk
+  }, modifyString("" + ((_recipe$minCraftingRe3 = recipe == null ? void 0 : (_recipe$minCraftingRe4 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe4[0]) != null ? _recipe$minCraftingRe3 : '')), " lvl", ' ', (_recipe$minCraftingRe5 = recipe == null ? void 0 : (_recipe$minCraftingRe6 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe6[1]) != null ? _recipe$minCraftingRe5 : 0, " (", levelInSkill, ")"), React.createElement(IngredientsTitle, null, "Ingredients"), recipe.ingredients.map(function (ingredient, index) {
+    var itemQtyInInventory = !inventory ? 0 : countItemFromInventory(ingredient.key, inventory);
+    var isQuantityOk = ingredient.qty <= itemQtyInInventory;
+    return React.createElement(Recipe, {
+      key: index
+    }, React.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: ingredient.texturePath,
+      imgScale: 1.2
+    }), React.createElement(Ingredient, {
+      isQuantityOk: isQuantityOk
+    }, modifyString(ingredient.key), " x", ingredient.qty, " (", itemQtyInInventory, ")"));
+  }));
+};
+
+var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__RadioOptionsWrapper",
+  componentId: "sc-1fe04wz-0"
+})(["display:flex;align-items:stretch;margin-bottom:0.5rem;padding:8px;position:relative;cursor:pointer;"]);
+var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__SpriteAtlasWrapper",
+  componentId: "sc-1fe04wz-1"
+})(["margin-right:40px;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;"]);
+var MainContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__MainContent",
+  componentId: "sc-1fe04wz-2"
+})(["flex:1;min-width:0;"]);
+var ItemHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftingRecipe__ItemHeader",
+  componentId: "sc-1fe04wz-3"
+})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;label{font-size:0.9rem;font-weight:bold;display:flex;align-items:center;}"]);
+var CraftingRecipe = function CraftingRecipe(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
     equipmentSet = _ref.equipmentSet,
@@ -28503,23 +28695,42 @@ var CraftingRecipe = function CraftingRecipe(_ref) {
     selectedCraftItemKey = _ref.selectedCraftItemKey,
     inventory = _ref.inventory,
     skills = _ref.skills;
-  var modifyString = function modifyString(str) {
-    // Split the string by "/" and "."
-    var parts = str.split('/');
-    var fileName = parts[parts.length - 1];
-    parts = fileName.split('.');
-    var name = parts[0];
-    // Replace all occurrences of "-" with " "
-    name = name.replace(/-/g, ' ');
-    // Uppercase the first word
-    var words = name.split(' ');
-    var firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
-    var modifiedWords = [firstWord].concat(words.slice(1));
-    name = modifiedWords.join(' ');
-    return name;
+  var _useState = useState(false),
+    showTooltip = _useState[0],
+    setShowTooltip = _useState[1];
+  var _useState2 = useState({
+      x: 0,
+      y: 0
+    }),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var wrapperRef = useRef(null);
+  var isSelected = selectedCraftItemKey === recipe.key;
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setShowTooltip(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var handleClick = function handleClick() {
+    if (wrapperRef.current) {
+      var rect = wrapperRef.current.getBoundingClientRect();
+      setTooltipPosition({
+        x: rect.right + 10,
+        y: rect.top
+      });
+      setShowTooltip(true);
+    }
   };
-  var levelInSkill = (_skills$level = skills == null ? void 0 : (_skills = skills[(_recipe$minCraftingRe = recipe == null ? void 0 : (_recipe$minCraftingRe2 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe2[0]) != null ? _recipe$minCraftingRe : '']) == null ? void 0 : _skills.level) != null ? _skills$level : 1;
-  return React.createElement(RadioOptionsWrapper, null, React.createElement(SpriteAtlasWrapper, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(RadioOptionsWrapper, {
+    ref: wrapperRef,
+    onClick: handleClick
+  }, React.createElement(SpriteAtlasWrapper, null, React.createElement(ItemInfoWrapper, {
     item: recipe,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -28531,7 +28742,7 @@ var CraftingRecipe = function CraftingRecipe(_ref) {
     spriteKey: recipe.texturePath,
     imgScale: 3,
     grayScale: !recipe.canCraft
-  }))), React.createElement("div", null, React.createElement("div", {
+  }))), React.createElement(MainContent, null, React.createElement(ItemHeader, {
     onPointerUp: recipe.canCraft ? handleRecipeSelect : undefined
   }, React.createElement("input", {
     className: "rpgui-radio",
@@ -28539,55 +28750,18 @@ var CraftingRecipe = function CraftingRecipe(_ref) {
     value: recipe.name,
     name: "test",
     disabled: !recipe.canCraft,
-    checked: selectedCraftItemKey === recipe.key,
+    checked: isSelected,
     onChange: handleRecipeSelect
-  }), React.createElement("label", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, modifyString(recipe.name))), React.createElement(MinCraftingRequirementsText, {
-    levelIsOk: (_recipe$levelIsOk = recipe == null ? void 0 : recipe.levelIsOk) != null ? _recipe$levelIsOk : false
-  }, modifyString("" + ((_recipe$minCraftingRe3 = recipe == null ? void 0 : (_recipe$minCraftingRe4 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe4[0]) != null ? _recipe$minCraftingRe3 : '')), " lvl", ' ', (_recipe$minCraftingRe5 = recipe == null ? void 0 : (_recipe$minCraftingRe6 = recipe.minCraftingRequirements) == null ? void 0 : _recipe$minCraftingRe6[1]) != null ? _recipe$minCraftingRe5 : 0, " (", levelInSkill, ")"), recipe.ingredients.map(function (ingredient, index) {
-    var itemQtyInInventory = !inventory ? 0 : countItemFromInventory(ingredient.key, inventory);
-    return React.createElement(Recipe, {
-      key: index
-    }, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: ingredient.texturePath,
-      imgScale: 1.2
-    }), React.createElement(Ingredient, {
-      isQuantityOk: ingredient.qty <= itemQtyInInventory
-    }, modifyString(ingredient.key), " x", ingredient.qty, " (", itemQtyInInventory, ")"));
-  })));
+  }), React.createElement("label", null, modifyString(recipe.name)))), showTooltip && createPortal(React.createElement(CraftingTooltip, {
+    x: tooltipPosition.x,
+    y: tooltipPosition.y,
+    recipe: recipe,
+    inventory: inventory,
+    skills: skills,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON
+  }), document.body));
 };
-var Ingredient = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CraftingRecipe__Ingredient",
-  componentId: "sc-1fe04wz-0"
-})(["margin:0;margin-left:14px;color:", " !important;"], function (_ref2) {
-  var isQuantityOk = _ref2.isQuantityOk;
-  return isQuantityOk ? uiColors.lightGreen : uiColors.lightGray;
-});
-var Recipe = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftingRecipe__Recipe",
-  componentId: "sc-1fe04wz-1"
-})(["font-size:0.6rem;margin-bottom:3px;display:flex;align-items:center;margin-left:4px;.sprite-from-atlas-img{top:0px;left:0px;}"]);
-var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftingRecipe__SpriteAtlasWrapper",
-  componentId: "sc-1fe04wz-2"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftingRecipe__RadioOptionsWrapper",
-  componentId: "sc-1fe04wz-3"
-})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var MinCraftingRequirementsText = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CraftingRecipe__MinCraftingRequirementsText",
-  componentId: "sc-1fe04wz-4"
-})(["font-size:0.6rem !important;margin:0 5px 0 35px;color:", " !important;"], function (_ref3) {
-  var levelIsOk = _ref3.levelIsOk;
-  return levelIsOk ? uiColors.lightGreen : uiColors.lightGray;
-});
 
 function calculateMaxCraftable(recipe, inventory) {
   if (!inventory || !(recipe != null && recipe.ingredients)) {
@@ -28621,6 +28795,7 @@ var mobilePortrait = {
   width: '500px',
   height: '700px'
 };
+var ITEMS_PER_PAGE = 8;
 var CraftBook = function CraftBook(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -28646,8 +28821,17 @@ var CraftBook = function CraftBook(_ref) {
     searchTerm = _useState4[0],
     setSearchTerm = _useState4[1];
   var _useState5 = useState(false),
-    isCraftingDisabled = _useState5[0],
-    setIsCraftingDisabled = _useState5[1];
+    isSearchVisible = _useState5[0],
+    setIsSearchVisible = _useState5[1];
+  var _useState6 = useState(false),
+    isCraftingDisabled = _useState6[0],
+    setIsCraftingDisabled = _useState6[1];
+  var _useLocalStorage = useLocalStorage('pinnedCraftItems', []),
+    pinnedItems = _useLocalStorage[0],
+    setPinnedItems = _useLocalStorage[1];
+  var _useState7 = useState(1),
+    currentPage = _useState7[0],
+    setCurrentPage = _useState7[1];
   useEffect(function () {
     var handleResize = function handleResize() {
       if (window.innerWidth < 500 && (size == null ? void 0 : size.width) !== mobilePortrait.width && (!scale || scale < 1)) {
@@ -28664,93 +28848,90 @@ var CraftBook = function CraftBook(_ref) {
       return window.removeEventListener('resize', handleResize);
     };
   }, [scale]);
-  var renderItemTypes = function renderItemTypes() {
-    var itemTypes = ['Suggested'].concat(Object.keys(ItemSubType)).filter(function (type) {
-      return type !== 'DeadBody';
-    }).sort(function (a, b) {
-      if (a === 'Suggested') return -1;
-      if (b === 'Suggested') return 1;
-      return a.localeCompare(b);
-    });
-    if (window.innerWidth > parseInt(mobilePortrait.width)) {
-      return itemTypes.map(function (type) {
-        return React.createElement(InputRadio, {
-          key: type,
-          value: type,
-          label: type,
-          name: type,
-          isChecked: selectedType === type,
-          onRadioSelect: function onRadioSelect(value) {
-            setSelectedType(value);
-            onSelect(value);
-          }
-        });
-      });
-    }
-    var rows = [[], []];
-    itemTypes.forEach(function (type, index) {
-      var row = 0;
-      if (index % 2 === 1) row = 1;
-      rows[row].push(React.createElement(InputRadio, {
-        key: type,
-        value: type,
-        label: type,
-        name: type,
-        isChecked: selectedType === type,
-        onRadioSelect: function onRadioSelect(value) {
-          setSelectedType(value);
-          onSelect(value);
-        }
-      }));
-    });
-    return rows.map(function (row, index) {
-      return React.createElement("div", {
-        key: index,
-        style: {
-          display: 'flex',
-          gap: '10px'
-        }
-      }, row);
+  var togglePinItem = function togglePinItem(itemKey) {
+    setPinnedItems(function (current) {
+      return current.includes(itemKey) ? current.filter(function (key) {
+        return key !== itemKey;
+      }) : [].concat(current, [itemKey]);
     });
   };
+  var categoryOptions = ['Suggested'].concat(pinnedItems.length > 0 ? ['Pinned'] : [], Object.keys(ItemSubType)).filter(function (type) {
+    return type !== 'DeadBody';
+  }).sort(function (a, b) {
+    if (a === 'Suggested') return -1;
+    if (b === 'Suggested') return 1;
+    if (a === 'Pinned') return -1;
+    if (b === 'Pinned') return 1;
+    return a.localeCompare(b);
+  }).map(function (type, index) {
+    return {
+      id: index,
+      value: type,
+      option: type
+    };
+  });
   var filteredCraftableItems = craftablesItems == null ? void 0 : craftablesItems.filter(function (item) {
     var matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
-    var matchesCategory = selectedType === 'Suggested' || item.type === selectedType;
+    var matchesCategory = selectedType === 'Suggested' || selectedType === 'Pinned' && pinnedItems.includes(item.key) || item.type === selectedType;
     return matchesSearch && matchesCategory;
   });
+  var sortedItems = [].concat(filteredCraftableItems || []).sort(function (a, b) {
+    var aIsPinned = pinnedItems.includes(a.key);
+    var bIsPinned = pinnedItems.includes(b.key);
+    if (aIsPinned && !bIsPinned) return -1;
+    if (!aIsPinned && bIsPinned) return 1;
+    return 0;
+  });
+  var totalPages = Math.ceil(sortedItems.length / ITEMS_PER_PAGE);
+  var paginatedItems = sortedItems.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+  useEffect(function () {
+    setCurrentPage(1);
+  }, [selectedType, searchTerm]);
   if (!size) return null;
   return React.createElement(DraggableContainer, {
     type: RPGUIContainerTypes.Framed,
     width: size.width,
     height: size.height,
     cancelDrag: ".inputRadioCraftBook",
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    },
+    onCloseButton: onClose,
     scale: scale
-  }, React.createElement(Wrapper, null, React.createElement("div", {
-    style: {
-      width: '100%'
+  }, React.createElement(Wrapper, null, React.createElement(HeaderContainer, null, React.createElement(Title$2, null, "Craftbook"), React.createElement(HeaderControls, null, React.createElement(DropdownWrapper, null, React.createElement(Dropdown, {
+    options: categoryOptions,
+    onChange: function onChange(value) {
+      setSelectedType(value);
+      onSelect(value);
+    },
+    width: "200px"
+  })), React.createElement(SearchButton$2, {
+    onClick: function onClick() {
+      return setIsSearchVisible(!isSearchVisible);
     }
-  }, React.createElement(Title$2, null, "Craftbook"), React.createElement(Subtitle, null, "Select an item to craft"), React.createElement(SearchContainer$1, null, React.createElement("input", {
+  }, React.createElement(FaSearch, {
+    size: 16
+  })))), isSearchVisible && React.createElement(SearchContainer$1, null, React.createElement("input", {
     type: "text",
     className: "rpgui-input",
     placeholder: "Search items...",
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
-    }
-  })), React.createElement("hr", {
-    className: "golden"
-  })), React.createElement(ContentContainer, null, React.createElement(ItemTypes, {
-    className: "inputRadioCraftBook"
-  }, renderItemTypes()), React.createElement(RadioInputScroller, {
+    },
+    autoFocus: true
+  })), React.createElement(ContentContainer, null, React.createElement(RadioInputScroller, {
     className: "inputRadioCraftBook"
-  }, filteredCraftableItems == null ? void 0 : filteredCraftableItems.map(function (item) {
-    return React.createElement(CraftingRecipe, {
+  }, paginatedItems == null ? void 0 : paginatedItems.map(function (item) {
+    return React.createElement(CraftingRecipeWrapper, {
       key: item.key,
+      isSelected: pinnedItems.includes(item.key)
+    }, React.createElement(PinButton, {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        togglePinItem(item.key);
+      },
+      isPinned: pinnedItems.includes(item.key)
+    }, React.createElement(FaThumbtack, {
+      size: 14
+    })), React.createElement(CraftingRecipe, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       equipmentSet: equipmentSet,
@@ -28760,8 +28941,26 @@ var CraftBook = function CraftBook(_ref) {
       selectedCraftItemKey: craftItemKey,
       inventory: inventory,
       skills: skills
-    });
-  }))), React.createElement(ButtonWrapper, null, React.createElement(Button, {
+    }));
+  }))), React.createElement(PaginationContainer, null, React.createElement(PaginationButton, {
+    onClick: function onClick() {
+      return setCurrentPage(function (prev) {
+        return Math.max(1, prev - 1);
+      });
+    },
+    disabled: currentPage === 1
+  }, React.createElement(FaChevronLeft, {
+    size: 12
+  })), React.createElement(PageInfo, null, "Page ", currentPage, " of ", totalPages), React.createElement(PaginationButton, {
+    onClick: function onClick() {
+      return setCurrentPage(function (prev) {
+        return Math.min(totalPages, prev + 1);
+      });
+    },
+    disabled: currentPage === totalPages
+  }, React.createElement(FaChevronRight, {
+    size: 12
+  }))), React.createElement(Footer, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: onClose
   }, "Cancel"), React.createElement(Button, {
@@ -28784,120 +28983,75 @@ var CraftBook = function CraftBook(_ref) {
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__Wrapper",
   componentId: "sc-19q95ue-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;"]);
+})(["display:flex;flex-direction:column;width:100%;height:100%;& > *{box-sizing:border-box;}"]);
+var HeaderContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__HeaderContainer",
+  componentId: "sc-19q95ue-1"
+})(["display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 16px 0;"]);
 var Title$2 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "CraftBook__Title",
-  componentId: "sc-19q95ue-1"
-})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var Subtitle = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "CraftBook__Subtitle",
   componentId: "sc-19q95ue-2"
-})(["font-size:0.4rem;color:", " !important;"], uiColors.yellow);
-var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__RadioInputScroller",
+})(["font-size:1.2rem;color:", " !important;margin:0;text-shadow:2px 2px 2px rgba(0,0,0,0.5);"], uiColors.yellow);
+var HeaderControls = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__HeaderControls",
   componentId: "sc-19q95ue-3"
-})(["padding-left:15px;padding-top:10px;margin-top:1rem;align-items:center;align-items:flex-start;overflow-y:scroll;min-height:0;flex:1;margin-left:10px;-webkit-overflow-scrolling:touch;@media (max-width:", "){margin-left:0;}"], mobilePortrait.width);
-var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__ButtonWrapper",
+})(["display:flex;align-items:center;gap:16px;position:relative;left:-2rem;"]);
+var DropdownWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__DropdownWrapper",
   componentId: "sc-19q95ue-4"
-})(["display:flex;justify-content:flex-end;margin-top:10px;width:100%;button{padding:0px 50px;margin:5px;}@media (max-width:", "){justify-content:center;}"], mobilePortrait.width);
-var ContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__ContentContainer",
+})(["width:200px;"]);
+var SearchButton$2 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "CraftBook__SearchButton",
   componentId: "sc-19q95ue-5"
-})(["display:flex;width:100%;min-height:0;flex:1;@media (max-width:", "){flex-direction:column;}"], mobilePortrait.width);
-var ItemTypes = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CraftBook__ItemTypes",
-  componentId: "sc-19q95ue-6"
-})(["display:flex;overflow-y:scroll;overflow-x:hidden;width:max-content;flex-direction:column;padding-right:5px;@media (max-width:", "){overflow-x:scroll;overflow-y:hidden;padding-right:0;width:100%;}"], mobilePortrait.width);
+})(["background:none;border:none;cursor:pointer;padding:8px;width:32px;height:32px;color:", ";opacity:0.8;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center;&:hover{opacity:1;}"], uiColors.yellow);
 var SearchContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CraftBook__SearchContainer",
+  componentId: "sc-19q95ue-6"
+})(["padding:0 16px;margin-top:16px;input{width:100%;font-size:0.8rem;padding:8px 12px;background-color:rgba(0,0,0,0.3);border:none;color:white;border-radius:4px;&::placeholder{color:rgba(255,255,255,0.5);}&:focus{outline:none;background-color:rgba(0,0,0,0.4);}}"]);
+var ContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__ContentContainer",
   componentId: "sc-19q95ue-7"
-})(["margin:8px 0;padding:0 16px;input{width:100%;font-size:0.8rem;padding:8px 12px;background-color:rgba(0,0,0,0.3);border:none;color:white;border-radius:4px;&::placeholder{color:rgba(255,255,255,0.5);}&:focus{outline:none;background-color:rgba(0,0,0,0.4);}}"]);
-
-var Dropdown = function Dropdown(_ref) {
-  var options = _ref.options,
-    width = _ref.width,
-    onChange = _ref.onChange,
-    _ref$opensUp = _ref.opensUp,
-    opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
-  var dropdownId = v4();
-  var _useState = useState(''),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var _useState2 = useState(''),
-    selectedOption = _useState2[0],
-    setSelectedOption = _useState2[1];
-  var _useState3 = useState(false),
-    opened = _useState3[0],
-    setOpened = _useState3[1];
-  useEffect(function () {
-    var firstOption = options[0];
-    if (firstOption) {
-      var change = !selectedValue;
-      if (!change) {
-        change = options.filter(function (o) {
-          return o.value === selectedValue;
-        }).length < 1;
-      }
-      if (change) {
-        setSelectedValue(firstOption.value);
-        setSelectedOption(firstOption.option);
-      }
-    }
-  }, [options]);
-  useEffect(function () {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-  return React.createElement(Container$d, {
-    onMouseLeave: function onMouseLeave() {
-      return setOpened(false);
-    },
-    width: width
-  }, React.createElement(DropdownSelect$1, {
-    id: "dropdown-" + dropdownId,
-    className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
-    onPointerUp: function onPointerUp() {
-      return setOpened(function (prev) {
-        return !prev;
-      });
-    }
-  }, React.createElement("label", null, "\u25BC"), " ", selectedOption), React.createElement(DropdownOptions$1, {
-    className: "rpgui-dropdown-imp",
-    opened: opened,
-    opensUp: opensUp
-  }, options.map(function (option) {
-    return React.createElement("li", {
-      key: option.id,
-      onPointerUp: function onPointerUp() {
-        setSelectedValue(option.value);
-        setSelectedOption(option.option);
-        setOpened(false);
-      }
-    }, option.option);
-  })));
-};
-var Container$d = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Dropdown__Container",
-  componentId: "sc-8arn65-0"
-})(["position:relative;width:", ";"], function (props) {
-  return props.width || '100%';
+})(["flex:1;min-height:0;padding:16px;padding-right:0;padding-bottom:0;overflow:hidden;width:100%;"]);
+var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__RadioInputScroller",
+  componentId: "sc-19q95ue-8"
+})(["height:100%;overflow-y:scroll;overflow-x:hidden;padding:8px 16px;padding-right:24px;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;@media (max-width:", "){grid-template-columns:1fr;}"], mobilePortrait.width);
+var CraftingRecipeWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__CraftingRecipeWrapper",
+  componentId: "sc-19q95ue-9"
+})(["position:relative;width:100%;min-width:0;box-sizing:border-box;transition:background-color 0.2s;&:hover{background:rgba(0,0,0,0.4);}", ""], function (props) {
+  return props.isSelected && "\n    background: rgba(255, 215, 0, 0.1);\n  ";
 });
-var DropdownSelect$1 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Dropdown__DropdownSelect",
-  componentId: "sc-8arn65-1"
-})(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
-var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "Dropdown__DropdownOptions",
-  componentId: "sc-8arn65-2"
-})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
-  return props.opened ? 'block' : 'none';
+var PinButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "CraftBook__PinButton",
+  componentId: "sc-19q95ue-10"
+})(["position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;padding:4px;color:", ";opacity:", ";transition:all 0.2s;z-index:2;&:hover{opacity:1;color:", ";}"], function (props) {
+  return props.isPinned ? uiColors.yellow : uiColors.lightGray;
 }, function (props) {
-  return props.opensUp ? '100%' : 'auto';
+  return props.isPinned ? 1 : 0.6;
+}, uiColors.yellow);
+var Footer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__Footer",
+  componentId: "sc-19q95ue-11"
+})(["display:flex;justify-content:flex-end;gap:16px;padding:8px;button{min-width:100px;}@media (max-width:", "){justify-content:center;}"], mobilePortrait.width);
+var PaginationContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__PaginationContainer",
+  componentId: "sc-19q95ue-12"
+})(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;margin-top:8px;border-top:1px solid ", ";"], uiColors.darkGray);
+var PaginationButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "CraftBook__PaginationButton",
+  componentId: "sc-19q95ue-13"
+})(["background:none;border:none;color:", ";cursor:", ";opacity:", ";padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s;&:hover:not(:disabled){opacity:1;}"], function (props) {
+  return props.disabled ? uiColors.darkGray : uiColors.yellow;
 }, function (props) {
-  return props.opensUp ? 'auto' : '100%';
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.disabled ? 0.5 : 0.8;
 });
+var PageInfo = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__PageInfo",
+  componentId: "sc-19q95ue-14"
+})(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
@@ -30909,7 +31063,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$3, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
+  }, React.createElement(Title$3, null, 'Harvesting instruments'), React.createElement(Subtitle, null, 'Use the tool, you need it'), React.createElement("hr", {
     className: "golden"
   })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
     return React.createElement(RadioOptionsWrapper$1, {
@@ -30931,7 +31085,7 @@ var ItemSelector = function ItemSelector(_ref) {
         alignItems: 'center'
       }
     }, option.name, " ", React.createElement("br", null), option.description)));
-  })), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
+  })), React.createElement(ButtonWrapper, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: onClose
   }, "Cancel"), React.createElement(Button, {
@@ -30942,7 +31096,7 @@ var Title$3 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
+var Subtitle = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Subtitle",
   componentId: "sc-gptoxp-1"
 })(["font-size:0.4rem;color:yellow !important;"]);
@@ -30958,7 +31112,7 @@ var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSelector__RadioOptionsWrapper",
   componentId: "sc-gptoxp-4"
 })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
-var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSelector__ButtonWrapper",
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
@@ -31854,7 +32008,7 @@ var PartyCreate = function PartyCreate(_ref) {
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
     type: "text"
-  }), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
+  }), React.createElement(ButtonWrapper$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: function onPointerDown() {
       onCreate();
@@ -31876,7 +32030,7 @@ var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__ButtonWrapper",
   componentId: "sc-13brop0-2"
 })(["margin-top:10px;width:100%;display:flex;justify-content:space-around;align-items:center;.cancel-button{filter:grayscale(0.7);}"]);
@@ -32593,7 +32747,7 @@ var formatQuestStatus = function formatQuestStatus(status) {
   });
 };
 
-var InputRadio$1 = function InputRadio(_ref) {
+var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
     onChange = _ref.onChange;
@@ -33935,7 +34089,7 @@ var TradingMenu = function TradingMenu(_ref) {
       scale: scale,
       isBuy: isBuy()
     });
-  })), React.createElement(InfoSection, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$3, null, React.createElement(Button, {
+  })), React.createElement(InfoSection, null, React.createElement(GoldInfo, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React.createElement(GoldInfo, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertText, null, "Sorry, not enough money.") : React.createElement(GoldInfo, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold().toFixed(2)))), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
@@ -33970,7 +34124,7 @@ var AlertText = /*#__PURE__*/styled.p.withConfig({
   displayName: "TradingMenu__AlertText",
   componentId: "sc-1wjsz1l-5"
 })(["color:red !important;text-align:center;margin:0.3rem 0;font-size:0.5rem;"]);
-var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;width:100%;margin-top:1rem;"]);
@@ -34130,5 +34284,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, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, 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, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemQuantitySelectorModal, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, 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