@rpg-engine/long-bow 0.8.195 → 0.8.197

package/dist/components/{SkillInfoOverlay.d.ts → SkillInfoModal.d.ts}

@@ -4,5 +4,5 @@ interface IProps {
     info: ISkillInfoEntry;
     onClose: () => void;
 }
-export declare const SkillInfoOverlay: React.FC<IProps>;
+export declare const SkillInfoModal: React.FC<IProps>;
 export {};

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

@@ -49977,55 +49977,61 @@ var SKILL_INFO_DATA = {
   }
 };
 
-var SkillInfoOverlay = function SkillInfoOverlay(_ref) {
+var SkillInfoModal = function SkillInfoModal(_ref) {
   var info = _ref.info,
     onClose = _ref.onClose;
-  return React__default.createElement(Overlay$9, null, React__default.createElement(Header$d, null, React__default.createElement(ColorBar, {
-    "$color": info.color
-  }), React__default.createElement(Title$i, {
+  var stopPropagation = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$9, {
+    onPointerDown: onClose
+  }), React__default.createElement(ModalContainer$7, null, React__default.createElement(ModalContent$7, {
+    onPointerDown: stopPropagation
+  }, React__default.createElement(Header$d, null, React__default.createElement(Title$i, {
     "$color": info.color
-  }, info.name), React__default.createElement(CloseBtn, {
+  }, info.name), React__default.createElement(CloseButton$f, {
     onPointerDown: onClose
-  }, "\u2715")), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "What it does"), React__default.createElement(Text$1, null, info.description)), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "How to train"), React__default.createElement(Text$1, null, info.howToTrain)), info.notes && React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "Notes"), React__default.createElement(Text$1, null, info.notes)));
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "What it does"), React__default.createElement(Text$1, null, info.description)), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "How to train"), React__default.createElement(Text$1, null, info.howToTrain)), info.notes && React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "Notes"), React__default.createElement(Text$1, null, info.notes)))));
 };
 var Overlay$9 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SkillInfoOverlay__Overlay",
-  componentId: "sc-1h4ocfv-0"
-})(["position:absolute;inset:0;background:rgba(20,20,30,0.97);z-index:10;overflow-y:auto;padding:0.75rem;display:flex;flex-direction:column;gap:0.75rem;"]);
+  displayName: "SkillInfoModal__Overlay",
+  componentId: "sc-pqkzdj-0"
+})(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
+var ModalContainer$7 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SkillInfoModal__ModalContainer",
+  componentId: "sc-pqkzdj-1"
+})(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
+var ModalContent$7 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SkillInfoModal__ModalContent",
+  componentId: "sc-pqkzdj-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;width:340px;max-width:90%;max-height:80dvh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
 var Header$d = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SkillInfoOverlay__Header",
-  componentId: "sc-1h4ocfv-1"
-})(["display:flex;flex-direction:row;align-items:center;gap:0.4rem;margin-bottom:0.25rem;"]);
-var ColorBar = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SkillInfoOverlay__ColorBar",
-  componentId: "sc-1h4ocfv-2"
-})(["width:3px;height:1rem;background:", ";border-radius:2px;flex-shrink:0;"], function (_ref2) {
+  displayName: "SkillInfoModal__Header",
+  componentId: "sc-pqkzdj-3"
+})(["display:flex;align-items:center;gap:8px;"]);
+var Title$i = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "SkillInfoModal__Title",
+  componentId: "sc-pqkzdj-4"
+})(["margin:0;flex:1;font-family:'Press Start 2P',cursive;font-size:0.65rem;color:", ";"], function (_ref2) {
   var $color = _ref2.$color;
   return $color;
 });
-var Title$i = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "SkillInfoOverlay__Title",
-  componentId: "sc-1h4ocfv-3"
-})(["font-size:0.65rem;font-weight:bold;flex:1;color:", ";"], function (_ref3) {
-  var $color = _ref3.$color;
-  return $color;
-});
-var CloseBtn = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SkillInfoOverlay__CloseBtn",
-  componentId: "sc-1h4ocfv-4"
-})(["cursor:pointer;color:rgba(255,255,255,0.6);font-size:0.7rem;line-height:1;padding:2px 4px;&:hover{color:rgba(255,255,255,0.9);}"]);
+var CloseButton$f = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "SkillInfoModal__CloseButton",
+  componentId: "sc-pqkzdj-5"
+})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
 var Section$4 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SkillInfoOverlay__Section",
-  componentId: "sc-1h4ocfv-5"
-})(["display:flex;flex-direction:column;gap:0.15rem;"]);
+  displayName: "SkillInfoModal__Section",
+  componentId: "sc-pqkzdj-6"
+})(["display:flex;flex-direction:column;gap:6px;"]);
 var Label$7 = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "SkillInfoOverlay__Label",
-  componentId: "sc-1h4ocfv-6"
+  displayName: "SkillInfoModal__Label",
+  componentId: "sc-pqkzdj-7"
 })(["font-size:0.5rem;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.45);"]);
 var Text$1 = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "SkillInfoOverlay__Text",
-  componentId: "sc-1h4ocfv-7"
-})(["font-size:0.55rem;line-height:1.5;color:rgba(255,255,255,0.85);margin:0;"]);
+  displayName: "SkillInfoModal__Text",
+  componentId: "sc-pqkzdj-8"
+})(["font-size:0.55rem;line-height:1.6;color:rgba(255,255,255,0.85);margin:0;"]);
 
 var skillProps = {
   attributes: {
@@ -50152,9 +50158,9 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$f, {
+  }, onCloseButton && React__default.createElement(CloseButton$g, {
     onPointerDown: onCloseButton
-  }, "X"), selectedInfo && React__default.createElement(SkillInfoOverlay, {
+  }, "X"), selectedInfo && React__default.createElement(SkillInfoModal, {
     info: selectedInfo,
     onClose: function onClose() {
       return setSelectedSkillKey(null);
@@ -50186,7 +50192,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
 var SkillsDraggableContainer = /*#__PURE__*/styled__default(DraggableContainer).withConfig({
   displayName: "SkillsContainer__SkillsDraggableContainer",
   componentId: "sc-1g0c67q-0"
-})(["position:relative;border:1px solid black;max-width:450px;height:90%;.DraggableContainer__TitleContainer-sc-184mpyl-2{width:auto;height:auto;}"]);
+})(["border:1px solid black;max-width:450px;height:90%;.DraggableContainer__TitleContainer-sc-184mpyl-2{width:auto;height:auto;}"]);
 var SkillsContainerDiv = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__SkillsContainerDiv",
   componentId: "sc-1g0c67q-1"
@@ -50195,7 +50201,7 @@ var SkillSplitDiv = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$f = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$g = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -71367,7 +71373,7 @@ var CartView = function CartView(_ref2) {
   }
   return React__default.createElement(Container$M, null, React__default.createElement(Header$g, null, React__default.createElement(Title$n, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
     return s + ci.quantity;
-  }, 0), ")"), React__default.createElement(CloseButton$g, {
+  }, 0), ")"), React__default.createElement(CloseButton$h, {
     onPointerDown: onClose
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(CartItems, null, cartItems.length === 0 ? React__default.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2, _cartItem$item$region2, _cartItem$item$region3;
@@ -71421,7 +71427,7 @@ var Title$n = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
-var CloseButton$g = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$h = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__CloseButton",
   componentId: "sc-ydtyl1-3"
 })(["padding:0.5rem;min-width:unset;width:42px;height:42px;display:flex;font-size:1.5rem;align-items:center;color:white;justify-content:center;"]);
@@ -72022,11 +72028,11 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
   var dcSubText = dcRequired !== undefined ? dcBalance.toLocaleString() + " DC available \xB7 " + dcRequired.toLocaleString() + " DC needed" : dcBalance.toLocaleString() + " DC available";
   return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$b, {
     onPointerDown: onClose
-  }), React__default.createElement(ModalContainer$7, null, React__default.createElement(ModalContent$7, {
+  }), React__default.createElement(ModalContainer$8, null, React__default.createElement(ModalContent$8, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$h, null, React__default.createElement(Title$o, null, "How would you like to pay?"), React__default.createElement(CloseButton$h, {
+  }, React__default.createElement(Header$h, null, React__default.createElement(Title$o, null, "How would you like to pay?"), React__default.createElement(CloseButton$i, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options$1, null, React__default.createElement(RadioOption$2, {
@@ -72060,11 +72066,11 @@ var Overlay$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Overlay",
   componentId: "sc-1dxy6lr-0"
 })(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
-var ModalContainer$7 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContainer$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContainer",
   componentId: "sc-1dxy6lr-1"
 })(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
-var ModalContent$7 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContent$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContent",
   componentId: "sc-1dxy6lr-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
@@ -72076,7 +72082,7 @@ var Title$o = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$h = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$i = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
@@ -73752,7 +73758,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React__default.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$i, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$j, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React__default.createElement(DayNightContainer, {
@@ -73769,7 +73775,7 @@ var Time = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$i = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$j = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);