@rpg-engine/long-bow 0.2.66 → 0.2.68

package/dist/components/CraftBook/CraftBook.d.ts

@@ -0,0 +1,15 @@
+import { ICraftableItem } from '@rpg-engine/shared';
+import React from 'react';
+export interface IItemCraftSelectorProps {
+    atlasJSON: any;
+    atlasIMG: any;
+    onClose: () => void;
+    onSelect: (value: string) => void;
+    onCraftItem: (value: string | undefined) => void;
+    craftablesItems: ICraftableItem[];
+}
+export interface ShowMessage {
+    show: boolean;
+    index: number;
+}
+export declare const CraftBook: React.FC<IItemCraftSelectorProps>;

package/dist/components/CraftBook/MockItems.d.ts

@@ -0,0 +1,2 @@
+import { ICraftableItem } from "@rpg-engine/shared";
+export declare const craftableItems: ICraftableItem[];

package/dist/components/itemSelector/ItemSelector.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface IOptionsItemSelectorProps {
     name: string;
-    description: string;
+    description?: string;
     imageKey: string;
 }
 export interface IItemSelectorProps {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
 export * from './components/CheckButton';
+export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';
@@ -10,6 +11,7 @@ export * from './components/HistoryDialog';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -18,17 +20,16 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RPGUIContainer';
-export * from './components/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
-export * from './components/itemSelector/ItemSelector';
-export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

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

@@ -27327,6 +27327,161 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   return props.opened ? 'block' : 'none';
 });
 
+var CraftBook = function CraftBook(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect,
+    onCraftItem = _ref.onCraftItem,
+    craftablesItems = _ref.craftablesItems;
+  var optionsId = 0;
+  var _useState = React.useState({
+      show: false,
+      index: 200
+    }),
+    isShown = _useState[0],
+    setIsShown = _useState[1];
+  var _useState2 = React.useState(),
+    craftItem = _useState2[0],
+    setCraftItem = _useState2[1];
+  var getDropdownOptions = function getDropdownOptions() {
+    var options = [];
+    Object.keys(shared.ItemSubType).forEach(function (key) {
+      options.push({
+        id: optionsId,
+        value: key,
+        option: key
+      });
+      optionsId += 1;
+    });
+    return options;
+  };
+  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 handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setCraftItem(elementValue);
+  };
+  return React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement(Title$1, null, 'Harvesting instruments'), React__default.createElement(Subtitle, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+    className: "golden"
+  })), React__default.createElement(Dropdown, {
+    options: getDropdownOptions(),
+    onChange: function onChange(value) {
+      return onSelect(value);
+    }
+  }), React__default.createElement(RadioInputScroller, null, craftablesItems == null ? void 0 : craftablesItems.map(function (option, index) {
+    return React__default.createElement(RadioOptionsWrapper, {
+      key: index
+    }, React__default.createElement(SpriteAtlasWrapper, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.key,
+      imgScale: 3,
+      grayScale: !option.canCraft
+    })), React__default.createElement("div", null, React__default.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test",
+      disabled: !option.canCraft
+    }), React__default.createElement("label", {
+      onClick: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setIsShown({
+          show: true,
+          index: index
+        });
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsShown({
+          show: false,
+          index: index
+        });
+      }
+    }, modifyString(option.name)), isShown && isShown.index === index && option.ingredients.map(function (option, index) {
+      return React__default.createElement(Recipes, {
+        key: index
+      }, React__default.createElement(SpriteFromAtlas, {
+        atlasIMG: atlasIMG,
+        atlasJSON: atlasJSON,
+        spriteKey: "" + option.key,
+        imgScale: 1
+      }), React__default.createElement(StyledItem, null, modifyString(option.key), " (", option.qty, "x)"));
+    })));
+  })), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: onClose
+  }, "Cancel"), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: function onClick() {
+      return onCraftItem(craftItem);
+    }
+  }, "Craft")));
+};
+var StyledItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__StyledItem",
+  componentId: "sc-19q95ue-0"
+})(["margin-left:10px;"]);
+var Recipes = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__Recipes",
+  componentId: "sc-19q95ue-1"
+})(["font-size:0.6rem;color:yellow !important;margin-bottom:3px;display:flex;align-items:center;.sprite-from-atlas-img{top:0px;left:0px;}"]);
+var Title$1 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "CraftBook__Title",
+  componentId: "sc-19q95ue-2"
+})(["font-size:0.6rem;color:yellow !important;"]);
+var Subtitle = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "CraftBook__Subtitle",
+  componentId: "sc-19q95ue-3"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__RadioInputScroller",
+  componentId: "sc-19q95ue-4"
+})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
+var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__SpriteAtlasWrapper",
+  componentId: "sc-19q95ue-5"
+})(["margin-right:40px;"]);
+var RadioOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__RadioOptionsWrapper",
+  componentId: "sc-19q95ue-6"
+})(["display:flex;align-items:stretch;margin-bottom:40px;"]);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CraftBook__ButtonWrapper",
+  componentId: "sc-19q95ue-7"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
     onChange = _ref.onChange,
@@ -28349,6 +28504,92 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15y5p9l-0"
 })(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
 
+var ItemSelector = function ItemSelector(_ref) {
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    options = _ref.options,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useState = React.useState(),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleClick = function handleClick() {
+    var element = document.querySelector("input[name='test']:checked");
+    var elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+  React.useEffect(function () {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    width: "500px",
+    cancelDrag: ".equipment-container-body .arrow-selector",
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement(Title$2, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+    className: "golden"
+  })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
+    return React__default.createElement(RadioOptionsWrapper$1, {
+      key: index
+    }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: option.imageKey,
+      imgScale: 3
+    })), React__default.createElement("div", null, React__default.createElement("input", {
+      className: "rpgui-radio",
+      type: "radio",
+      value: option.name,
+      name: "test"
+    }), React__default.createElement("label", {
+      onClick: handleClick,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, option.name, " ", React__default.createElement("br", null), option.description)));
+  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: onClose
+  }, "Cancel"), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton
+  }, "Select")));
+};
+var Title$2 = /*#__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({
+  displayName: "ItemSelector__Subtitle",
+  componentId: "sc-gptoxp-1"
+})(["font-size:0.4rem;color:yellow !important;"]);
+var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__RadioInputScroller",
+  componentId: "sc-gptoxp-2"
+})(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
+var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSelector__SpriteAtlasWrapper",
+  componentId: "sc-gptoxp-3"
+})(["margin-right:40px;"]);
+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({
+  displayName: "ItemSelector__ButtonWrapper",
+  componentId: "sc-gptoxp-5"
+})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
+
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -28484,7 +28725,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onTouchStart: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$1, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -28503,7 +28744,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$1, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -28550,7 +28791,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-15s2boc-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$1 = /*#__PURE__*/styled.h1.withConfig({
+var Title$3 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -28572,7 +28813,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$2, null, "Quests"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$4, null, "Quests"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React__default.createElement("div", {
@@ -28593,7 +28834,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
   displayName: "QuestList__QuestDraggableContainer",
   componentId: "sc-1a2vx6q-0"
 })([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$2 = /*#__PURE__*/styled.h1.withConfig({
+var Title$4 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -28606,15 +28847,6 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1a2vx6q-3"
 })(["text-align:center;p{margin-top:5px;}"]);
 
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React__default.createElement("div", {
-    className: "rpgui-content"
-  }, children);
-};
-
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,
     items = _ref.items,
@@ -28647,6 +28879,15 @@ var InputRadio = function InputRadio(_ref) {
   }));
 };
 
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React__default.createElement("div", {
+    className: "rpgui-content"
+  }, children);
+};
+
 (function (RangeSliderType) {
   RangeSliderType["Slider"] = "rpgui-slider";
   RangeSliderType["GoldSlider"] = "rpgui-slider golden";
@@ -29081,7 +29322,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$3, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$5, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
@@ -29094,7 +29335,7 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
     }));
-  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper, null, React__default.createElement(Button, {
+  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onClick: function onClick() {
@@ -29107,7 +29348,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$3 = /*#__PURE__*/styled.h1.withConfig({
+var Title$5 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -29131,7 +29372,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__AlertWrapper",
   componentId: "sc-1wjsz1l-5"
 })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
-var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
@@ -29152,96 +29393,11 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
   return props.maxLines;
 });
 
-var ItemSelector = function ItemSelector(_ref) {
-  var atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    options = _ref.options,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect;
-  var _useState = React.useState(),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleClick = function handleClick() {
-    var element = document.querySelector("input[name='test']:checked");
-    var elementValue = element.value;
-    setSelectedValue(elementValue);
-  };
-  React.useEffect(function () {
-    if (selectedValue) {
-      onSelect(selectedValue);
-    }
-  }, [selectedValue]);
-  return React__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    width: "500px",
-    cancelDrag: ".equipment-container-body .arrow-selector",
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React__default.createElement(Title$4, null, 'Harvesting instruments'), React__default.createElement(Subtitle, null, 'Use the tool, you need it'), React__default.createElement("hr", {
-    className: "golden"
-  })), React__default.createElement(RadioInputScroller, null, options == null ? void 0 : options.map(function (option, index) {
-    return React__default.createElement(RadioOptionsWrapper, {
-      key: index
-    }, React__default.createElement(SpriteAtlasWrapper, null, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: option.imageKey,
-      imgScale: 3
-    })), React__default.createElement("div", null, React__default.createElement("input", {
-      className: "rpgui-radio",
-      type: "radio",
-      value: option.name,
-      name: "test"
-    }), React__default.createElement("label", {
-      onClick: handleClick,
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, option.name, " ", React__default.createElement("br", null), option.description)));
-  })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onClick: onClose
-  }, "Cancel"), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton
-  }, "Select")));
-};
-var Title$4 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Title",
-  componentId: "sc-gptoxp-0"
-})(["font-size:0.6rem;color:yellow !important;"]);
-var Subtitle = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "ItemSelector__Subtitle",
-  componentId: "sc-gptoxp-1"
-})(["font-size:0.4rem;color:yellow !important;"]);
-var RadioInputScroller = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__RadioInputScroller",
-  componentId: "sc-gptoxp-2"
-})(["width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
-var SpriteAtlasWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemSelector__SpriteAtlasWrapper",
-  componentId: "sc-gptoxp-3"
-})(["margin-right:40px;"]);
-var RadioOptionsWrapper = /*#__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({
-  displayName: "ItemSelector__ButtonWrapper",
-  componentId: "sc-gptoxp-5"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
-
 exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
 exports.Chat = Chat;
 exports.CheckButton = CheckButton;
+exports.CraftBook = CraftBook;
 exports.DraggableContainer = DraggableContainer;
 exports.Dropdown = Dropdown;
 exports.DropdownSelectorContainer = DropdownSelectorContainer;