@rpg-engine/long-bow 0.8.32 → 0.8.33

package/dist/long-bow.esm.js

@@ -31154,44 +31154,6 @@ var CellName = /*#__PURE__*/styled.h3.withConfig({
   componentId: "sc-w48fdf-2"
 })(["font-size:0.7rem;color:#fef08a;margin:0;text-align:center;font-family:'Press Start 2P',cursive;line-height:1.2;word-break:break-word;max-width:100%;"]);
 
-var Collapsible = function Collapsible(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-    className = _ref.className;
-  var _useState = useState(defaultOpen),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  return React.createElement(Container$o, {
-    className: className
-  }, React.createElement(Header$1, {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
-  }, React.createElement(Title$3, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$1, null, children));
-};
-var Container$o = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Container",
-  componentId: "sc-s4h8ey-0"
-})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
-var Header$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Header",
-  componentId: "sc-s4h8ey-1"
-})(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
-var Title$3 = /*#__PURE__*/styled.h3.withConfig({
-  displayName: "Collapsible__Title",
-  componentId: "sc-s4h8ey-2"
-})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
-var Icon$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Collapsible__Icon",
-  componentId: "sc-s4h8ey-3"
-})(["color:", ";font-size:0.6rem;display:flex;align-items:center;"], uiColors.yellow);
-var Content$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Collapsible__Content",
-  componentId: "sc-s4h8ey-4"
-})(["padding:6px;"]);
-
 var BaseInformationDetails = function BaseInformationDetails(_ref) {
   var name = _ref.name,
     spriteKey = _ref.spriteKey,
@@ -31199,20 +31161,20 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$p, null, React.createElement(Overlay, {
+  return React.createElement(Container$o, null, React.createElement(Overlay, {
     onClick: onBack
   }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
     onClick: onBack
-  }, React.createElement(FaTimes, null)), React.createElement(Header$2, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(FaTimes, null)), React.createElement(Header$1, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: spriteKey,
     width: 32,
     height: 32,
     imgScale: 1
-  })), React.createElement(Title$4, null, name)), React.createElement(Content$2, null, children)));
+  })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
 })(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
@@ -31223,20 +31185,20 @@ var Overlay = /*#__PURE__*/styled.div.withConfig({
 var Modal = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
-})(["position:fixed;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90%;top:5%;left:5%;max-width:800px;margin:0 auto;@media (max-width:768px){width:100%;height:100%;top:0;left:0;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
+})(["position:relative;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90vh;max-width:800px;max-height:800px;@media (max-width:768px){width:100%;height:100%;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
 var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
 })(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
-var Header$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Header",
   componentId: "sc-1vguuz8-4"
 })(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
-var Content$2 = /*#__PURE__*/styled.div.withConfig({
+var Content$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Content",
   componentId: "sc-1vguuz8-5"
 })(["display:flex;flex-direction:column;gap:12px;height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;@media (max-width:768px){height:calc(100% - 64px);gap:8px;padding-right:4px;margin-right:-4px;}"]);
-var Title$4 = /*#__PURE__*/styled.h2.withConfig({
+var Title$3 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
 })(["color:", ";font-size:1rem;margin:0;"], uiColors.yellow);
@@ -31245,6 +31207,44 @@ var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1vguuz8-7"
 })(["width:64px;height:64px;background:rgba(0,0,0,0.3);border-radius:4px;display:flex;justify-content:center;align-items:center;position:relative;.sprite-from-atlas-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);transform-origin:center;}"]);
 
+var Collapsible = function Collapsible(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    className = _ref.className;
+  var _useState = useState(defaultOpen),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  return React.createElement(Container$p, {
+    className: className
+  }, React.createElement(Header$2, {
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
+};
+var Container$p = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Container",
+  componentId: "sc-s4h8ey-0"
+})(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
+var Header$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Header",
+  componentId: "sc-s4h8ey-1"
+})(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
+var Title$4 = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "Collapsible__Title",
+  componentId: "sc-s4h8ey-2"
+})(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
+var Icon$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Collapsible__Icon",
+  componentId: "sc-s4h8ey-3"
+})(["color:", ";font-size:0.6rem;display:flex;align-items:center;"], uiColors.yellow);
+var Content$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Collapsible__Content",
+  componentId: "sc-s4h8ey-4"
+})(["padding:6px;"]);
+
 var InformationCenterItemDetails = function InformationCenterItemDetails(_ref) {
   var item = _ref.item,
     itemsAtlasJSON = _ref.itemsAtlasJSON,
@@ -31756,7 +31756,15 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     }
   }, React.createElement(InformationCenterItemTooltip, {
     item: tooltipState.item
-  }))), selectedItem && React.createElement(Portal, null, React.createElement(InformationCenterItemDetails, {
+  }))), selectedItem && React.createElement(Portal, null, React.createElement(BaseInformationDetails, {
+    name: selectedItem.name,
+    spriteKey: selectedItem.texturePath,
+    atlasJSON: itemsAtlasJSON,
+    atlasIMG: itemsAtlasIMG,
+    onBack: function onBack() {
+      return setSelectedItem(null);
+    }
+  }, React.createElement(InformationCenterItemDetails, {
     item: selectedItem,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -31764,7 +31772,7 @@ var InformationCenterItemsSection = function InformationCenterItemsSection(_ref)
     onBack: function onBack() {
       return setSelectedItem(null);
     }
-  })));
+  }))));
 };
 var TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterItemsSection__TooltipWrapper",
@@ -32311,7 +32319,15 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     npc: tooltipState.item,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG
-  }))), selectedMonster && React.createElement(Portal, null, React.createElement(InformationCenterNPCDetails, {
+  }))), selectedMonster && React.createElement(Portal, null, React.createElement(BaseInformationDetails, {
+    name: selectedMonster.name,
+    spriteKey: selectedMonster.key,
+    atlasJSON: entitiesAtlasJSON,
+    atlasIMG: entitiesAtlasIMG,
+    onBack: function onBack() {
+      return setSelectedMonster(null);
+    }
+  }, React.createElement(InformationCenterNPCDetails, {
     npc: selectedMonster,
     itemsAtlasJSON: itemsAtlasJSON,
     itemsAtlasIMG: itemsAtlasIMG,
@@ -32322,7 +32338,7 @@ var InformationCenterBestiarySection = function InformationCenterBestiarySection
     onBack: function onBack() {
       return setSelectedMonster(null);
     }
-  })));
+  }))));
 };
 var TooltipWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenterBestiarySection__TooltipWrapper",