@rpg-engine/long-bow 0.3.80 → 0.3.81

package/dist/long-bow.esm.js

@@ -6,6 +6,7 @@ import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
 import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
+import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import 'rpgui/rpgui.min.css';
@@ -33360,6 +33361,18 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   return props.opened ? 'block' : 'none';
 });
 
+var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
+var ModalPortal = function ModalPortal(_ref) {
+  var children = _ref.children;
+  return ReactDOM.createPortal(React.createElement(Container$8, {
+    className: "rpgui-content"
+  }, children), modalRoot);
+};
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ModalPortal__Container",
+  componentId: "sc-dgmp04-0"
+})(["position:static !important;"]);
+
 var RelativeListMenu = function RelativeListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -33381,7 +33394,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React.createElement(Container$8, {
+  return React.createElement(Container$9, {
     fontSize: fontSize,
     ref: ref
   }, React.createElement("ul", {
@@ -33398,7 +33411,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$8 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:1rem;left:4rem;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -33420,24 +33433,17 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     options = _ref.options,
     onSelected = _ref.onSelected;
   var ref = useRef(null);
-  useEffect(function () {
-    var current = ref.current;
-    if (current) {
-      // Adjust the position to be on whole window
-      var rect = current.getBoundingClientRect();
-      var x = -rect.x * 100 / (scale * 100);
-      var y = -rect.y * 100 / (scale * 100);
-      current.style.transform = "translate(" + x + "px, " + y + "px)";
-      current.style.opacity = '0.92';
-    }
-    return;
-  }, []);
-  return React.createElement(Container$9, {
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React.createElement(ModalPortal, null, React.createElement(Container$a, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
       setTimeout(function () {
         closeTooltip();
-      }, 10);
+      }, 100);
     },
     scale: scale
   }, React.createElement(ItemInfoDisplay, {
@@ -33450,24 +33456,19 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     return React.createElement(Option, {
       key: option.id,
       onTouchEnd: function onTouchEnd() {
+        handleFadeOut();
         setTimeout(function () {
           onSelected == null ? void 0 : onSelected(option.id);
           closeTooltip();
-        }, 10);
+        }, 100);
       }
     }, option.text);
-  })));
+  }))));
 };
-var Container$9 = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-0"
-})(["position:fixed;z-index:50;left:0;top:0;opacity:0;width:", ";height:", ";background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;@media (max-width:580px){flex-direction:column;}"], function (_ref2) {
-  var scale = _ref2.scale;
-  return "calc(100vw * 100 / " + scale * 100 + ")";
-}, function (_ref3) {
-  var scale = _ref3.scale;
-  return "calc(100vh * 100 / " + scale * 100 + ")";
-});
+})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
 var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileItemTooltip__OptionsContainer",
   componentId: "sc-ku4p1j-1"
@@ -33475,7 +33476,7 @@ var OptionsContainer = /*#__PURE__*/styled.div.withConfig({
 var Option = /*#__PURE__*/styled.button.withConfig({
   displayName: "MobileItemTooltip__Option",
   componentId: "sc-ku4p1j-2"
-})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.2s;&:hover{background-color:#555;}@media (max-width:580px){padding:1rem 0.5rem;}"]);
+})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:580px){padding:1rem 0.5rem;}"]);
 
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
@@ -33670,7 +33671,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         maxWidth: "48px"
       }, React.createElement(ItemQty, {
         className: qtyClassName
-      }, " ", stackQty, " ")));
+      }, Math.round(stackQty * 100) / 100, ' ')));
     }
     return undefined;
   };
@@ -33764,7 +33765,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       onDragEnd(quantity);
     }
   };
-  return React.createElement(Container$a, {
+  return React.createElement(Container$b, {
     item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
@@ -33915,7 +33916,7 @@ var rarityColor = function rarityColor(item) {
       return null;
   }
 };
-var Container$a = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;&::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) {
@@ -34026,13 +34027,13 @@ var ItemInfo = function ItemInfo(_ref) {
       }));
     });
   };
-  return React.createElement(Container$b, {
+  return React.createElement(Container$c, {
     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
-  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React.createElement(Statistic, null, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", (_item$stackQty = item.stackQty) != null ? _item$stackQty : 1, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
+  }, item.rarity), React.createElement(Type, null, item.subType)), React.createElement(AllowedSlots, null, renderAvaibleSlots())), renderStatistics(), item.isTwoHanded && React.createElement(Statistic, null, "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$b = /*#__PURE__*/styled.div.withConfig({
+var Container$c = /*#__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:15rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -34145,22 +34146,18 @@ var ItemTooltip = function ItemTooltip(_ref) {
   var ref = useRef(null);
   useEffect(function () {
     var current = ref.current;
-    var initialOffset;
     if (current) {
       var handleMouseMove = function handleMouseMove(event) {
         var clientX = event.clientX,
           clientY = event.clientY;
         // Adjust the position of the tooltip based on the mouse position
         var rect = current.getBoundingClientRect();
-        if (!initialOffset) {
-          initialOffset = rect;
-        }
         var tooltipWidth = rect.width;
         var tooltipHeight = rect.height;
         var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
         var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
-        var x = (isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset) - initialOffset.x;
-        var y = (isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset) - initialOffset.y;
+        var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
+        var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
         current.style.transform = "translate(" + x + "px, " + y + "px)";
         current.style.opacity = '1';
       };
@@ -34171,19 +34168,19 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(Container$c, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet
-  }));
+  })));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
-})(["position:fixed;z-index:50;pointer-events:none;left:0;top:0;opacity:0;"]);
+})(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
 
 var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   var children = _ref.children,
@@ -34748,7 +34745,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
       return word[0];
     }));
   };
-  return React.createElement(Container$d, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$e, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 6
@@ -34764,7 +34761,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;}"]);
@@ -34881,7 +34878,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -34899,7 +34896,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         callback: function callback() {}
       });
     }
-  })));
+  }))));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
@@ -35001,7 +34998,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$e, {
+  return React.createElement(Container$f, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -35018,7 +35015,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -35072,7 +35069,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$f, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -35114,7 +35111,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$7
   }))), ")"));
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -35318,7 +35315,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$g, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$h, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -35328,7 +35325,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -35374,7 +35371,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$h, {
+  return React.createElement(Container$i, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -35403,7 +35400,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -35728,7 +35725,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$i, {
+  return React.createElement(Container$j, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -35737,7 +35734,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -35968,7 +35965,7 @@ var Spell = function Spell(_ref) {
     isSettingShortcut = _ref.isSettingShortcut,
     minMagicLevelRequired = _ref.minMagicLevelRequired;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$k, {
     disabled: disabled,
     onPointerDown: onPointerDown == null ? void 0 : onPointerDown.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
@@ -35981,7 +35978,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost)));
 };
-var Container$j = /*#__PURE__*/styled.button.withConfig({
+var Container$k = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;height:5rem;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -36068,7 +36065,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$k, null, React.createElement(Title$7, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$l, null, React.createElement(Title$7, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -36100,7 +36097,7 @@ var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -36400,11 +36397,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$l, {
+  return React.createElement(Container$m, {
     maxLines: maxLines
   }, children);
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -36467,7 +36464,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$m, null, React.createElement(DynamicText, {
+  return React.createElement(Container$n, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -36485,7 +36482,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -36527,7 +36524,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
     src: imagePath || img$6
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$n, null, React.createElement(TextContainer$2, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$o, null, React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
@@ -36541,7 +36538,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$6
   })))));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);