bnstooltips 1.15.1 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { EffectTooltipProps } from "./EffectTooltip.types";
3
+ import "./EffectTooltip.scss";
4
+ declare function EffectTooltip({ data, debug }: EffectTooltipProps): JSX.Element;
5
+ export default EffectTooltip;
@@ -0,0 +1,5 @@
1
+ import { BnsEffect } from "../Utilities/IBnsEffect";
2
+ export interface EffectTooltipProps {
3
+ data: BnsEffect;
4
+ debug?: boolean;
5
+ }
@@ -0,0 +1,6 @@
1
+ import { FunctionComponent } from "react";
2
+ import { EffectTooltipWrapperProps } from "./EffectTooltipWrapper.types";
3
+ import "./EffectTooltipWrapper.scss";
4
+ import "tippy.js/dist/tippy.css";
5
+ declare const EffectTooltipWrapper: FunctionComponent<EffectTooltipWrapperProps>;
6
+ export default EffectTooltipWrapper;
@@ -0,0 +1,6 @@
1
+ import { BnsEffect } from "../Utilities/IBnsEffect";
2
+ import { ITooltipWrapper } from "../Utilities/Models";
3
+ export interface EffectTooltipWrapperProps extends ITooltipWrapper {
4
+ data: BnsEffect;
5
+ debug?: boolean;
6
+ }
@@ -0,0 +1,12 @@
1
+ export interface BnsEffect {
2
+ ID: number;
3
+ Alias: string;
4
+ Name: string;
5
+ Description: string;
6
+ IconPath: string;
7
+ IconIndex: number;
8
+ SubTableDef: string;
9
+ StackCount: number;
10
+ StackAmount: number;
11
+ PassiveDuratonInMs: number;
12
+ }
package/build/index.d.ts CHANGED
@@ -28,3 +28,7 @@ import ItemImproveSelectStageTooltip from "./ItemImproveSelectStageTooltip/ItemI
28
28
  export { ItemImproveSelectStageTooltip };
29
29
  import ItemImproveSelectStageTooltipWrapper from "./ItemImproveSelectStageTooltipWrapper/ItemImproveSelectStageTooltipWrapper";
30
30
  export { ItemImproveSelectStageTooltipWrapper };
31
+ import EffectTooltip from "./EffectTooltip/EffectTooltip";
32
+ export { EffectTooltip };
33
+ import EffectTooltipWrapper from "./EffectTooltipWrapper/EffectTooltipWrapper";
34
+ export { EffectTooltipWrapper };
package/build/index.es.js CHANGED
@@ -28,8 +28,8 @@ function styleInject(css, ref) {
28
28
  }
29
29
  }
30
30
 
31
- var css_248z$d = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n color: #46bee1 !important;\n font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n color: #58ff77; }\n\n.TooltipBase_grade-none {\n color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n color: #6c6c6c !important;\n border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n color: #ffffff !important;\n border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n color: #58ff77 !important;\n border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n color: #46bee1 !important;\n border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n color: #d739ff !important;\n border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n color: #f1b248 !important;\n border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n color: #ff770a !important;\n border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n color: #ff0084 !important;\n border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n box-sizing: border-box;\n font-family: \"Montserrat\", sans-serif !important;\n scroll-behavior: smooth;\n touch-action: manipulation;\n -webkit-overflow-scrolling: touch;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n background-color: rgba(8, 8, 8, 0.93);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem;\n border: 1px solid;\n border-color: #6c6c6c;\n font-weight: 500;\n font-size: 16px;\n text-decoration: none;\n color: #fff;\n width: 380px;\n max-height: calc(100vh - 50px);\n overflow-y: auto;\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n border-radius: 3px;\n text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n display: none; }\n\n.TooltipBase_downgradeBlue {\n color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n .TooltipBase_container {\n width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n .TooltipBase_container {\n background-color: rgba(0, 0, 0, 0.95); }\n .TooltipBase_container-loading {\n background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n background-color: rgba(8, 8, 8, 0.93);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem; }\n\n.TooltipBase_title {\n flex: 1;\n overflow: hidden;\n padding-right: 1rem; }\n\n.TooltipBase_title_text {\n font-size: 18px;\n text-shadow: black 1px 1px 0;\n font-weight: 500; }\n\n.TooltipBase_subtitle {\n text-align: end;\n font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n display: flex;\n margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n margin-right: 0.5rem;\n margin-bottom: 0.25rem;\n float: left;\n position: relative; }\n\n.TooltipBase_iconBg {\n width: 64px;\n height: 64px;\n background-origin: content-box !important; }\n\n.TooltipBase_icon {\n width: calc(64px - (0px * 2));\n height: calc(64px - (0px * 2));\n padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n font-size: 16px;\n font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n display: flex;\n align-items: center; }\n\n.TooltipBase_flex-col {\n display: flex;\n justify-content: center;\n flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n font-weight: 500; }\n";
32
- styleInject(css_248z$d);
31
+ var css_248z$f = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n color: #46bee1 !important;\n font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n color: #58ff77; }\n\n.TooltipBase_grade-none {\n color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n color: #6c6c6c !important;\n border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n color: #ffffff !important;\n border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n color: #58ff77 !important;\n border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n color: #46bee1 !important;\n border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n color: #d739ff !important;\n border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n color: #f1b248 !important;\n border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n color: #ff770a !important;\n border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n color: #ff0084 !important;\n border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n box-sizing: border-box;\n font-family: \"Montserrat\", sans-serif !important;\n scroll-behavior: smooth;\n touch-action: manipulation;\n -webkit-overflow-scrolling: touch;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n background-color: rgba(8, 8, 8, 0.93);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem;\n border: 1px solid;\n border-color: #6c6c6c;\n font-weight: 500;\n font-size: 16px;\n text-decoration: none;\n color: #fff;\n width: 380px;\n max-height: calc(100vh - 50px);\n overflow-y: auto;\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n border-radius: 3px;\n text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n display: none; }\n\n.TooltipBase_downgradeBlue {\n color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n .TooltipBase_container {\n width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n .TooltipBase_container {\n background-color: rgba(0, 0, 0, 0.95); }\n .TooltipBase_container-loading {\n background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n background-color: rgba(8, 8, 8, 0.93);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem; }\n\n.TooltipBase_title {\n flex: 1;\n overflow: hidden;\n padding-right: 1rem; }\n\n.TooltipBase_title_text {\n font-size: 18px;\n text-shadow: black 1px 1px 0;\n font-weight: 500; }\n\n.TooltipBase_subtitle {\n text-align: end;\n font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n display: flex;\n margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n margin-right: 0.5rem;\n margin-bottom: 0.25rem;\n float: left;\n position: relative; }\n\n.TooltipBase_iconBg {\n width: 64px;\n height: 64px;\n background-origin: content-box !important; }\n\n.TooltipBase_icon {\n width: calc(64px - (0px * 2));\n height: calc(64px - (0px * 2));\n padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n font-size: 16px;\n font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n display: flex;\n align-items: center; }\n\n.TooltipBase_flex-col {\n display: flex;\n justify-content: center;\n flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n font-weight: 500; }\n";
32
+ styleInject(css_248z$f);
33
33
 
34
34
  function TooltipBase(_a) {
35
35
  var title = _a.title, category = _a.subtitle, grade = _a.grade, _b = _a.icon, icon = _b === void 0 ? "" : _b, _c = _a.mainInfos, mainTexts = _c === void 0 ? [] : _c, _d = _a.subInfoGroups, subTexts = _d === void 0 ? [] : _d, id = _a.id, _e = _a.fullHeight, fullHeight = _e === void 0 ? false : _e, widthOverride = _a.widthOverride;
@@ -131,8 +131,8 @@ function __generator(thisArg, body) {
131
131
  }
132
132
  }
133
133
 
134
- var css_248z$c = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemTooltip_itemIconLoading {\n width: 50px;\n padding: 0.22rem 0;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n display: flex; }\n\n.ItemTooltip_optionPadding {\n margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.2);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_showButton:hover {\n background-color: rgba(255, 255, 255, 0.3);\n opacity: 1; }\n .ItemTooltip_showButton-active {\n background-color: rgba(255, 255, 255, 0.4) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_jobstyleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .ItemTooltip_jobstyleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_cooldown {\n font-weight: 400;\n font-size: 12px; }\n\n.ItemTooltip_subInfo {\n font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n font-size: 16px;\n margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n width: 18px !important;\n height: 18px !important;\n margin: 0 1px;\n top: 3px;\n position: relative; }\n\n.ItemTooltip_itemIconRandom {\n width: 36px !important;\n top: 6px;\n margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n width: 20px !important;\n height: 20px !important;\n margin-right: 0.33rem; }\n\n.ItemTooltip_itemIconSlate {\n width: 24px !important;\n height: 24px !important;\n margin-right: 0.11rem; }\n\n.ItemTooltip_setBonus {\n margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n padding-left: 0.33rem;\n padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n display: flex;\n margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n margin-top: 0.2rem;\n padding-top: 0.1rem;\n line-height: 16px;\n width: 16px;\n height: 16px;\n max-height: 16px;\n font-weight: 500;\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgba(88, 255, 119, 0.8);\n border: 1px solid rgba(88, 255, 119, 0.9);\n border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n padding-top: 0.2rem;\n flex-grow: 2;\n padding-left: 0.55rem;\n max-width: 90%;\n color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n display: flex;\n align-items: center;\n padding: 0.15rem 0 0.15rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_slateIconNameStatsDiv {\n display: flex;\n justify-content: space-between;\n padding: .15rem 0;\n border-bottom: solid 1px rgba(233, 233, 233, 0.3); }\n\n.ItemTooltip_slateIconNameDiv {\n display: flex;\n justify-content: start;\n align-items: center;\n flex: 1; }\n\n.ItemTooltip_slateItemNameSmall {\n font-size: 14px; }\n\n.ItemTooltip_slateStatsDiv {\n display: flex;\n flex-direction: column;\n align-items: end;\n justify-content: center;\n flex: 1; }\n\n.ItemTooltip_setItemIconNameDiv {\n display: flex;\n align-items: center;\n padding: 0.11rem 0 0.11rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n display: flex;\n font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n display: flex;\n align-items: center; }\n\n@media only screen and (max-width: 380px) {\n .ItemTooltip_jobstyleButton {\n padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0; }\n\n.dot-elastic::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1.5); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 1.5); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1.5); }\n 100% {\n transform: scale(1, 1); } }\n";
135
- styleInject(css_248z$c);
134
+ var css_248z$e = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemTooltip_itemIconLoading {\n width: 50px;\n padding: 0.22rem 0;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n display: flex; }\n\n.ItemTooltip_optionPadding {\n margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.2);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_showButton:hover {\n background-color: rgba(255, 255, 255, 0.3);\n opacity: 1; }\n .ItemTooltip_showButton-active {\n background-color: rgba(255, 255, 255, 0.4) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_jobstyleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .ItemTooltip_jobstyleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_cooldown {\n font-weight: 400;\n font-size: 12px; }\n\n.ItemTooltip_subInfo {\n font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n font-size: 16px;\n margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n width: 18px !important;\n height: 18px !important;\n margin: 0 1px;\n top: 3px;\n position: relative; }\n\n.ItemTooltip_itemIconRandom {\n width: 36px !important;\n top: 6px;\n margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n width: 20px !important;\n height: 20px !important;\n margin-right: 0.33rem; }\n\n.ItemTooltip_itemIconSlate {\n width: 24px !important;\n height: 24px !important;\n margin-right: 0.11rem; }\n\n.ItemTooltip_setBonus {\n margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n padding-left: 0.33rem;\n padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n display: flex;\n margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n margin-top: 0.2rem;\n padding-top: 0.1rem;\n line-height: 16px;\n width: 16px;\n height: 16px;\n max-height: 16px;\n font-weight: 500;\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgba(88, 255, 119, 0.8);\n border: 1px solid rgba(88, 255, 119, 0.9);\n border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n padding-top: 0.2rem;\n flex-grow: 2;\n padding-left: 0.55rem;\n max-width: 90%;\n color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n display: flex;\n align-items: center;\n padding: 0.15rem 0 0.15rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_slateIconNameStatsDiv {\n display: flex;\n justify-content: space-between;\n padding: .15rem 0;\n border-bottom: solid 1px rgba(233, 233, 233, 0.3); }\n\n.ItemTooltip_slateIconNameDiv {\n display: flex;\n justify-content: start;\n align-items: center;\n flex: 1; }\n\n.ItemTooltip_slateItemNameSmall {\n font-size: 14px; }\n\n.ItemTooltip_slateStatsDiv {\n display: flex;\n flex-direction: column;\n align-items: end;\n justify-content: center;\n flex: 1; }\n\n.ItemTooltip_setItemIconNameDiv {\n display: flex;\n align-items: center;\n padding: 0.11rem 0 0.11rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n display: flex;\n font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n display: flex;\n align-items: center; }\n\n@media only screen and (max-width: 380px) {\n .ItemTooltip_jobstyleButton {\n padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0; }\n\n.dot-elastic::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1.5); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 1.5); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1.5); }\n 100% {\n transform: scale(1, 1); } }\n";
135
+ styleInject(css_248z$e);
136
136
 
137
137
  function BuildIconPath(iconPath, iconIndex) {
138
138
  if (iconPath == null)
@@ -2675,11 +2675,11 @@ var ItemDownloadClient = /** @class */ (function () {
2675
2675
  return ItemDownloadClient;
2676
2676
  }());
2677
2677
 
2678
- var css_248z$b = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
2679
- styleInject(css_248z$b);
2678
+ var css_248z$d = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
2679
+ styleInject(css_248z$d);
2680
2680
 
2681
- var css_248z$a = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
2682
- styleInject(css_248z$a);
2681
+ var css_248z$c = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
2682
+ styleInject(css_248z$c);
2683
2683
 
2684
2684
  var top = 'top';
2685
2685
  var bottom = 'bottom';
@@ -6852,11 +6852,11 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
6852
6852
 
6853
6853
  var Tippy = index;
6854
6854
 
6855
- var css_248z$9 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveTooltip_PrevCurNext {\n display: flex;\n align-items: center;\n justify-content: center; }\n .ItemImproveTooltip_PrevCurNext_container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90%; }\n .ItemImproveTooltip_PrevCurNext_container > div {\n margin: 0 .5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChild {\n flex: 3; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n flex: 3.5; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border: solid 1px rgba(108, 108, 108, 0.6);\n border-radius: 3px;\n padding: 1rem 0;\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n opacity: 1;\n filter: brightness(1.5); }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n flex: 1; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n opacity: 1;\n filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_icon {\n width: 56px;\n height: 56px; }\n .ItemImproveTooltip_ItemWithText_iconSmall {\n width: 40px;\n height: 40px; }\n .ItemImproveTooltip_ItemWithText_iconPad {\n border-width: 2px;\n border-color: rgba(108, 108, 108, 0.6);\n border-style: solid;\n border-radius: 3px;\n padding: 1px;\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_name {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center; }\n\n.ItemImproveUpgradeCost {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 2rem;\n margin-bottom: 1rem; }\n .ItemImproveUpgradeCost_title {\n text-align: center;\n font-size: 18px;\n padding-top: 1rem; }\n .ItemImproveUpgradeCost > div {\n width: 100%; }\n .ItemImproveUpgradeCost_money {\n margin-top: .5rem; }\n\n.SubCostSelector {\n display: flex;\n justify-content: center;\n align-items: stretch;\n margin-top: .5rem;\n margin-bottom: .5rem;\n overflow-x: auto; }\n .SubCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 2; }\n\n.MainCostSelector {\n margin: .33rem 0 .5rem 0;\n display: flex;\n justify-content: center;\n align-items: stretch; }\n .MainCostSelector_or {\n flex: 0 1 0px !important;\n padding: 0 2rem;\n font-size: 18px; }\n .MainCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1; }\n .MainCostSelector_warning {\n min-height: 1rem;\n display: flex;\n justify-content: center;\n align-items: center; }\n .MainCostSelector_warning_active {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: .5rem; }\n .MainCostSelector_container {\n display: flex;\n flex-direction: column;\n padding: 0 .1rem .33rem .1rem; }\n .MainCostSelector_container_space {\n flex: 1;\n margin: 0 0 .1rem 0; }\n";
6856
- styleInject(css_248z$9);
6855
+ var css_248z$b = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveTooltip_PrevCurNext {\n display: flex;\n align-items: center;\n justify-content: center; }\n .ItemImproveTooltip_PrevCurNext_container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90%; }\n .ItemImproveTooltip_PrevCurNext_container > div {\n margin: 0 .5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChild {\n flex: 3; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n flex: 3.5; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border: solid 1px rgba(108, 108, 108, 0.6);\n border-radius: 3px;\n padding: 1rem 0;\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n opacity: 1;\n filter: brightness(1.5); }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n flex: 1; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n opacity: 1;\n filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_icon {\n width: 56px;\n height: 56px; }\n .ItemImproveTooltip_ItemWithText_iconSmall {\n width: 40px;\n height: 40px; }\n .ItemImproveTooltip_ItemWithText_iconPad {\n border-width: 2px;\n border-color: rgba(108, 108, 108, 0.6);\n border-style: solid;\n border-radius: 3px;\n padding: 1px;\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_name {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center; }\n\n.ItemImproveUpgradeCost {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 2rem;\n margin-bottom: 1rem; }\n .ItemImproveUpgradeCost_title {\n text-align: center;\n font-size: 18px;\n padding-top: 1rem; }\n .ItemImproveUpgradeCost > div {\n width: 100%; }\n .ItemImproveUpgradeCost_money {\n margin-top: .5rem; }\n\n.SubCostSelector {\n display: flex;\n justify-content: center;\n align-items: stretch;\n margin-top: .5rem;\n margin-bottom: .5rem;\n overflow-x: auto; }\n .SubCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 2; }\n\n.MainCostSelector {\n margin: .33rem 0 .5rem 0;\n display: flex;\n justify-content: center;\n align-items: stretch; }\n .MainCostSelector_or {\n flex: 0 1 0px !important;\n padding: 0 2rem;\n font-size: 18px; }\n .MainCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1; }\n .MainCostSelector_warning {\n min-height: 1rem;\n display: flex;\n justify-content: center;\n align-items: center; }\n .MainCostSelector_warning_active {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: .5rem; }\n .MainCostSelector_container {\n display: flex;\n flex-direction: column;\n padding: 0 .1rem .33rem .1rem; }\n .MainCostSelector_container_space {\n flex: 1;\n margin: 0 0 .1rem 0; }\n";
6856
+ styleInject(css_248z$b);
6857
6857
 
6858
- var css_248z$8 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
6859
- styleInject(css_248z$8);
6858
+ var css_248z$a = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
6859
+ styleInject(css_248z$a);
6860
6860
 
6861
6861
  var ItemTooltipWrapper = function (_a) {
6862
6862
  var data = _a.data, region = _a.region, children = _a.children, client = _a.client, _b = _a.showUpgrade, showUpgrade = _b === void 0 ? false : _b, _c = _a.offline, offline = _c === void 0 ? false : _c, _d = _a.interactive, interactive = _d === void 0 ? true : _d, _e = _a.placement, placement = _e === void 0 ? "right" : _e, _f = _a.debug, debug = _f === void 0 ? false : _f, jobstyleOverride = _a.jobstyleOverride, _g = _a.followCursor, followCursor$1 = _g === void 0 ? false : _g, _h = _a.trigger, trigger = _h === void 0 ? "mouseenter focus" : _h, _j = _a.showArrow, showArrow = _j === void 0 ? true : _j;
@@ -6918,11 +6918,11 @@ function ItemWithText(_a) {
6918
6918
  React.createElement("div", { dangerouslySetInnerHTML: { __html: item.name }, className: "TooltipBase_grade-" + item.grade + " ItemImproveTooltip_ItemWithText_name" })));
6919
6919
  }
6920
6920
 
6921
- var css_248z$7 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
6922
- styleInject(css_248z$7);
6921
+ var css_248z$9 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
6922
+ styleInject(css_248z$9);
6923
6923
 
6924
- var css_248z$6 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveEffectsTooltip_entry {\n padding: 0.1rem 0 0 .5rem; }\n";
6925
- styleInject(css_248z$6);
6924
+ var css_248z$8 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveEffectsTooltip_entry {\n padding: 0.1rem 0 0 .5rem; }\n";
6925
+ styleInject(css_248z$8);
6926
6926
 
6927
6927
  function ItemImproveEffectsTooltip(_a) {
6928
6928
  var effectsForName = _a.effectsForName;
@@ -8073,8 +8073,8 @@ function AddEtchingStones(subInfoGroups, item) {
8073
8073
  });
8074
8074
  }
8075
8075
 
8076
- var css_248z$5 = "";
8077
- styleInject(css_248z$5);
8076
+ var css_248z$7 = "";
8077
+ styleInject(css_248z$7);
8078
8078
 
8079
8079
  function JsonTooltip(props) {
8080
8080
  var tooltipProps = {
@@ -8110,8 +8110,8 @@ function JsonArrayToJsxArray(stringArray) {
8110
8110
  return jsxArray;
8111
8111
  }
8112
8112
 
8113
- var css_248z$4 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.SkillTooltip_skillIconContainer {\n width: 60px;\n height: 60px;\n padding: 0;\n float: left;\n position: relative; }\n\n.SkillTooltip_skillIcon {\n width: 60px;\n height: 60px;\n position: relative; }\n\n.SkillTooltip_skillIconCanvas {\n width: 60px;\n height: 60px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n filter: blur(30px);\n opacity: .5; }\n\n.SkillTooltip_buttonIcon {\n position: absolute;\n right: 1px;\n bottom: 1px;\n height: 18px;\n opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n font-weight: 500; }\n\n.SkillTooltip_smallText {\n font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n display: flex;\n width: 100%;\n margin-bottom: 0.5rem;\n line-height: 17px; }\n\n.SkillTooltip_boundary {\n flex: 1;\n flex-basis: 0px;\n min-width: 0;\n display: flex;\n flex-direction: column;\n color: black;\n margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n color: white;\n font-weight: 500;\n font-size: 12px;\n text-overflow: ellipsis;\n overflow: hidden;\n padding: 0.3rem;\n text-align: center;\n flex: 1;\n min-height: 26px;\n background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n color: white;\n padding: 0.5rem 0.3rem;\n margin-top: 0.15rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 40px;\n flex: 2;\n background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n display: flex;\n align-items: center;\n font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n width: 20px;\n height: 20px;\n margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n width: 12px;\n height: 12px;\n margin-right: 0.22rem; }\n\n.tooltipArg {\n color: #46bee1;\n font-weight: 600; }\n\n.target-360 {\n background-image: url(\"./360.png\");\n background-repeat: no-repeat;\n background-position: 50% 60%;\n background-size: auto 64px; }\n\n.target-front-180 {\n background-image: url(\"./180.png\");\n background-repeat: no-repeat;\n background-position: 50% 70%;\n background-size: auto 64px; }\n\n.laser {\n background-image: url(\"./laser.png\");\n background-repeat: no-repeat;\n background-position: 50% 50%;\n background-size: auto 64px; }\n";
8114
- styleInject(css_248z$4);
8113
+ var css_248z$6 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.SkillTooltip_skillIconContainer {\n width: 60px;\n height: 60px;\n padding: 0;\n float: left;\n position: relative; }\n\n.SkillTooltip_skillIcon {\n width: 60px;\n height: 60px;\n position: relative; }\n\n.SkillTooltip_skillIconCanvas {\n width: 60px;\n height: 60px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n filter: blur(30px);\n opacity: .5; }\n\n.SkillTooltip_buttonIcon {\n position: absolute;\n right: 1px;\n bottom: 1px;\n height: 18px;\n opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n font-weight: 500; }\n\n.SkillTooltip_smallText {\n font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n display: flex;\n width: 100%;\n margin-bottom: 0.5rem;\n line-height: 17px; }\n\n.SkillTooltip_boundary {\n flex: 1;\n flex-basis: 0px;\n min-width: 0;\n display: flex;\n flex-direction: column;\n color: black;\n margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n color: white;\n font-weight: 500;\n font-size: 12px;\n text-overflow: ellipsis;\n overflow: hidden;\n padding: 0.3rem;\n text-align: center;\n flex: 1;\n min-height: 26px;\n background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n color: white;\n padding: 0.5rem 0.3rem;\n margin-top: 0.15rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 40px;\n flex: 2;\n background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n display: flex;\n align-items: center;\n font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n width: 20px;\n height: 20px;\n margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n width: 12px;\n height: 12px;\n margin-right: 0.22rem; }\n\n.tooltipArg {\n color: #46bee1;\n font-weight: 600; }\n\n.wordbreakall {\n word-break: break-all; }\n\n.wordbreakword {\n word-break: break-word; }\n\n.target-360 {\n background-image: url(\"./360.png\");\n background-repeat: no-repeat;\n background-position: 50% 60%;\n background-size: auto 64px; }\n\n.target-front-180 {\n background-image: url(\"./180.png\");\n background-repeat: no-repeat;\n background-position: 50% 70%;\n background-size: auto 64px; }\n\n.laser {\n background-image: url(\"./laser.png\");\n background-repeat: no-repeat;\n background-position: 50% 50%;\n background-size: auto 64px; }\n";
8114
+ styleInject(css_248z$6);
8115
8115
 
8116
8116
  function getButtonIconPath(button) {
8117
8117
  var _a;
@@ -8389,34 +8389,34 @@ function AddIds(subInfoGroups, skill) {
8389
8389
  texts: [
8390
8390
  React.createElement("div", null,
8391
8391
  "Id: ",
8392
- React.createElement(BlueColoredText, { text: skill.ID.toString() })),
8392
+ React.createElement(BlueColoredText$1, { text: skill.ID.toString() })),
8393
8393
  React.createElement("div", null,
8394
8394
  "Variation: ",
8395
- React.createElement(BlueColoredText, { text: skill.Variation.toString() })),
8395
+ React.createElement(BlueColoredText$1, { text: skill.Variation.toString() })),
8396
8396
  ],
8397
8397
  };
8398
8398
  if (skill.GcdGroup != null) {
8399
8399
  subInfoGroup.texts.push(React.createElement("div", null,
8400
8400
  "Gcd group: ",
8401
- React.createElement(BlueColoredText, { text: skill.GcdGroup.toString() })));
8401
+ React.createElement(BlueColoredText$1, { text: skill.GcdGroup.toString() })));
8402
8402
  }
8403
8403
  if (skill.GcdDuration != null) {
8404
8404
  subInfoGroup.texts.push(React.createElement("div", null,
8405
8405
  "Gcd duration: ",
8406
- React.createElement(BlueColoredText, { text: skill.GcdDuration.toString() })));
8406
+ React.createElement(BlueColoredText$1, { text: skill.GcdDuration.toString() })));
8407
8407
  }
8408
8408
  if (skill.CdRecycle != null) {
8409
8409
  subInfoGroup.texts.push(React.createElement("div", null,
8410
8410
  "Cd group: ",
8411
- React.createElement(BlueColoredText, { text: skill.CdRecycle.Item1.toString() })));
8411
+ React.createElement(BlueColoredText$1, { text: skill.CdRecycle.Item1.toString() })));
8412
8412
  subInfoGroup.texts.push(React.createElement("div", null,
8413
8413
  "Cd id: ",
8414
- React.createElement(BlueColoredText, { text: skill.CdRecycle.Item2.toString() })));
8414
+ React.createElement(BlueColoredText$1, { text: skill.CdRecycle.Item2.toString() })));
8415
8415
  }
8416
8416
  if (skill.RealCooldown != null) {
8417
8417
  subInfoGroup.texts.push(React.createElement("div", null,
8418
8418
  "Real cooldown: ",
8419
- React.createElement(BlueColoredText, { text: skill.RealCooldown.toString() })));
8419
+ React.createElement(BlueColoredText$1, { text: skill.RealCooldown.toString() })));
8420
8420
  }
8421
8421
  subInfoGroups.push(subInfoGroup);
8422
8422
  }
@@ -8427,29 +8427,29 @@ function AddRealEffects(subInfoGroups, skill) {
8427
8427
  for (var key in realEffects.Effects) {
8428
8428
  var realEffect = realEffects.Effects[key];
8429
8429
  var subInfoGroup = {
8430
- title: "Effect: " + realEffect.Alias,
8430
+ title: "Effect",
8431
8431
  texts: []
8432
8432
  };
8433
8433
  var texts = [
8434
8434
  React.createElement("div", null,
8435
8435
  "Id: ",
8436
- React.createElement(BlueColoredText, { text: realEffect.Id.toString() })),
8436
+ React.createElement(BlueColoredText$1, { text: realEffect.Id.toString() })),
8437
8437
  React.createElement("div", null,
8438
8438
  "Alias: ",
8439
- React.createElement(BlueColoredText, { text: realEffect.Alias })),
8439
+ React.createElement(BlueColoredText$1, { text: realEffect.Alias, customClasses: "wordbreakall" })),
8440
8440
  React.createElement("div", null,
8441
8441
  "Effect type: ",
8442
- React.createElement(BlueColoredText, { text: realEffect.EffectType }))
8442
+ React.createElement(BlueColoredText$1, { text: realEffect.EffectType }))
8443
8443
  ];
8444
8444
  if (realEffect.Name != null && realEffect.Name != "") {
8445
8445
  texts.push(React.createElement("div", null,
8446
8446
  "Name: ",
8447
- React.createElement(BlueColoredText, { text: realEffect.Name })));
8447
+ React.createElement(BlueColoredText$1, { text: realEffect.Name })));
8448
8448
  }
8449
8449
  if (realEffect.Description != null && realEffect.Description != "") {
8450
8450
  texts.push(React.createElement("div", null,
8451
8451
  "Description: ",
8452
- React.createElement(BlueColoredTextDangerous, { text: realEffect.Description })));
8452
+ React.createElement(BlueColoredTextDangerous, { text: realEffect.Description, customClasses: "wordbreakword" })));
8453
8453
  }
8454
8454
  subInfoGroup.texts = texts;
8455
8455
  subInfoGroups.push(subInfoGroup);
@@ -8460,21 +8460,21 @@ function AddRealCastConds(subInfoGroups, skill) {
8460
8460
  if (realCastCondition == undefined || realCastCondition == null)
8461
8461
  return;
8462
8462
  var subInfoGroup = {
8463
- title: "Real cast conditions",
8463
+ title: "Cast conditions",
8464
8464
  texts: [],
8465
8465
  };
8466
8466
  if (realCastCondition.Id != null) {
8467
8467
  subInfoGroup.texts.push(React.createElement("div", null,
8468
8468
  "Id: ",
8469
- React.createElement(BlueColoredText, { text: realCastCondition.Id.toString() })));
8469
+ React.createElement(BlueColoredText$1, { text: realCastCondition.Id.toString() })));
8470
8470
  }
8471
8471
  subInfoGroup.texts.push(React.createElement("div", null,
8472
8472
  "Stance: ",
8473
- React.createElement(BlueColoredText, { text: realCastCondition.Stance })), React.createElement("div", null,
8473
+ React.createElement(BlueColoredText$1, { text: realCastCondition.Stance })), React.createElement("div", null,
8474
8474
  "Required weapon: ",
8475
- React.createElement(BlueColoredText, { text: realCastCondition.RequiredWeaponType })), React.createElement("div", null,
8475
+ React.createElement(BlueColoredText$1, { text: realCastCondition.RequiredWeaponType })), React.createElement("div", null,
8476
8476
  "Move type: ",
8477
- React.createElement(BlueColoredText, { text: realCastCondition.MoveType })));
8477
+ React.createElement(BlueColoredText$1, { text: realCastCondition.MoveType })));
8478
8478
  if (realCastCondition.PrevComboIds != null && realCastCondition.PrevComboIds.length > 0) {
8479
8479
  var subInfoGroup2 = {
8480
8480
  title: "Prev combo Ids",
@@ -8492,9 +8492,9 @@ function AddRealCastConds(subInfoGroups, skill) {
8492
8492
  realCastCondition.SuccessRecycles.forEach(function (recycle) {
8493
8493
  subInfoGroup3.texts.push(React.createElement("div", null,
8494
8494
  "Group: ",
8495
- React.createElement(BlueColoredText, { text: recycle.Item1 }),
8495
+ React.createElement(BlueColoredText$1, { text: recycle.Item1 }),
8496
8496
  ", Id: ",
8497
- React.createElement(BlueColoredText, { text: recycle.Item2.toString() })));
8497
+ React.createElement(BlueColoredText$1, { text: recycle.Item2.toString() })));
8498
8498
  });
8499
8499
  }
8500
8500
  if (realCastCondition.FailRecycles != null && realCastCondition.FailRecycles.length > 0) {
@@ -8505,9 +8505,9 @@ function AddRealCastConds(subInfoGroups, skill) {
8505
8505
  realCastCondition.FailRecycles.forEach(function (recycle) {
8506
8506
  subInfoGroup4.texts.push(React.createElement("div", null,
8507
8507
  "Group: ",
8508
- React.createElement(BlueColoredText, { text: recycle.Item1 }),
8508
+ React.createElement(BlueColoredText$1, { text: recycle.Item1 }),
8509
8509
  ", Id: ",
8510
- React.createElement(BlueColoredText, { text: recycle.Item2.toString() })));
8510
+ React.createElement(BlueColoredText$1, { text: recycle.Item2.toString() })));
8511
8511
  });
8512
8512
  }
8513
8513
  if (realCastCondition.UnnecessaryAcquired) {
@@ -8535,12 +8535,12 @@ function AddRealCastConds(subInfoGroups, skill) {
8535
8535
  subInfoGroups.push(subInfoGroup4);
8536
8536
  }
8537
8537
  function BlueColoredTextDangerous(_a) {
8538
- var text = _a.text;
8539
- return (React.createElement("span", { className: "tooltipArg", dangerouslySetInnerHTML: { __html: text } }));
8538
+ var text = _a.text, _b = _a.customClasses, customClasses = _b === void 0 ? "" : _b;
8539
+ return (React.createElement("span", { className: "tooltipArg " + customClasses, dangerouslySetInnerHTML: { __html: text } }));
8540
8540
  }
8541
- function BlueColoredText(_a) {
8542
- var text = _a.text;
8543
- return (React.createElement("span", { className: "tooltipArg" }, text));
8541
+ function BlueColoredText$1(_a) {
8542
+ var text = _a.text, _b = _a.customClasses, customClasses = _b === void 0 ? "" : _b;
8543
+ return (React.createElement("span", { className: "tooltipArg " + customClasses }, text));
8544
8544
  }
8545
8545
  function RedColoredText(_a) {
8546
8546
  var text = _a.text;
@@ -8551,8 +8551,8 @@ function GreenColoredText(_a) {
8551
8551
  return (React.createElement("span", { className: "00008130.UI.Label_Green03_12" }, text));
8552
8552
  }
8553
8553
 
8554
- var css_248z$3 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
8555
- styleInject(css_248z$3);
8554
+ var css_248z$5 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
8555
+ styleInject(css_248z$5);
8556
8556
 
8557
8557
  var SkillTooltipWrapper = function (_a) {
8558
8558
  var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f, _g = _a.debug, debug = _g === void 0 ? false : _g;
@@ -8580,8 +8580,8 @@ var ServerRegion;
8580
8580
  ServerRegion["KoreaTest"] = "KoreaTest";
8581
8581
  })(ServerRegion || (ServerRegion = {}));
8582
8582
 
8583
- var css_248z$2 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.NpcTooltip_toggleBarContainer {\n display: flex; }\n\n.NpcTooltip_toggleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .NpcTooltip_toggleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .NpcTooltip_toggleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.NpcTooltip_storeEntry {\n display: flex;\n align-items: stretch;\n background-color: rgba(233, 233, 233, 0.1);\n padding: 0.33rem;\n font-size: 14px; }\n .NpcTooltip_storeEntry:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n flex: 1;\n display: flex;\n align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n display: flex;\n align-items: center; }\n .NpcTooltip_storeEntryItemIconName img {\n width: 48px;\n height: 48px;\n margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: flex-end;\n justify-content: center;\n padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n display: flex; }\n .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n position: relative;\n height: 32px; }\n .NpcTooltip_itemBuyPriceEntryContainer img {\n width: 32px;\n height: 32px; }\n .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n position: absolute;\n bottom: 0;\n left: 0;\n color: #ffffff;\n background-color: rgba(0, 0, 0, 0.4);\n width: 32px;\n line-height: 12px;\n text-align: center; }\n\n.NpcTooltip_moneyContainer {\n display: flex;\n align-items: center;\n justify-content: flex-end; }\n .NpcTooltip_moneyContainer_center {\n justify-content: center; }\n .NpcTooltip_moneyContainer > span {\n display: flex;\n align-items: center; }\n .NpcTooltip_moneyContainer > span:not(:first-child) {\n margin-left: 0.1rem; }\n .NpcTooltip_moneyContainer > span > img {\n width: 16px;\n height: 16px; }\n";
8584
- styleInject(css_248z$2);
8583
+ var css_248z$4 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.NpcTooltip_toggleBarContainer {\n display: flex; }\n\n.NpcTooltip_toggleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .NpcTooltip_toggleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .NpcTooltip_toggleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.NpcTooltip_storeEntry {\n display: flex;\n align-items: stretch;\n background-color: rgba(233, 233, 233, 0.1);\n padding: 0.33rem;\n font-size: 14px; }\n .NpcTooltip_storeEntry:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n flex: 1;\n display: flex;\n align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n display: flex;\n align-items: center; }\n .NpcTooltip_storeEntryItemIconName img {\n width: 48px;\n height: 48px;\n margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: flex-end;\n justify-content: center;\n padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n display: flex; }\n .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n position: relative;\n height: 32px; }\n .NpcTooltip_itemBuyPriceEntryContainer img {\n width: 32px;\n height: 32px; }\n .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n position: absolute;\n bottom: 0;\n left: 0;\n color: #ffffff;\n background-color: rgba(0, 0, 0, 0.4);\n width: 32px;\n line-height: 12px;\n text-align: center; }\n\n.NpcTooltip_moneyContainer {\n display: flex;\n align-items: center;\n justify-content: flex-end; }\n .NpcTooltip_moneyContainer_center {\n justify-content: center; }\n .NpcTooltip_moneyContainer > span {\n display: flex;\n align-items: center; }\n .NpcTooltip_moneyContainer > span:not(:first-child) {\n margin-left: 0.1rem; }\n .NpcTooltip_moneyContainer > span > img {\n width: 16px;\n height: 16px; }\n";
8584
+ styleInject(css_248z$4);
8585
8585
 
8586
8586
  function StoreToggle(_a) {
8587
8587
  var store = _a.store, isActive = _a.isActive, setActive = _a.setActive;
@@ -8770,8 +8770,8 @@ function AddStores(subInfoGroups, activeTab, client, Stores) {
8770
8770
  });
8771
8771
  }
8772
8772
 
8773
- var css_248z$1 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveSelectStageTooltip_item {\n cursor: pointer;\n border: solid 1px transparent; }\n .ItemImproveSelectStageTooltip_item:hover {\n border: solid 1px #ffffff; }\n";
8774
- styleInject(css_248z$1);
8773
+ var css_248z$3 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.ItemImproveSelectStageTooltip_item {\n cursor: pointer;\n border: solid 1px transparent; }\n .ItemImproveSelectStageTooltip_item:hover {\n border: solid 1px #ffffff; }\n";
8774
+ styleInject(css_248z$3);
8775
8775
 
8776
8776
  function ItemImproveSelectStageTooltip(_a) {
8777
8777
  var items = _a.items, onClick = _a.onClick;
@@ -8800,8 +8800,8 @@ function ItemImproveSelectStageTooltip(_a) {
8800
8800
  return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
8801
8801
  }
8802
8802
 
8803
- var css_248z = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
8804
- styleInject(css_248z);
8803
+ var css_248z$2 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n";
8804
+ styleInject(css_248z$2);
8805
8805
 
8806
8806
  var ItemImproveSelectStageTooltipWrapper = function (_a) {
8807
8807
  var items = _a.items, onClick = _a.onClick, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f;
@@ -8822,5 +8822,104 @@ var ItemImproveSelectStageTooltipWrapper = function (_a) {
8822
8822
  childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemImproveSelectStageTooltip, { items: items, onClick: onClick }), theme: "grade" + 2, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
8823
8823
  };
8824
8824
 
8825
- export { GetCooldownString, ItemImproveEffectsTooltip, ItemImproveEffectsTooltipWrapper, ItemImproveSelectStageTooltip, ItemImproveSelectStageTooltipWrapper, ItemImproveTooltip, ItemImproveTooltipWrapper, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
8825
+ var css_248z$1 = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.EffectTooltip_mainText {\n font-weight: 500; }\n\n.EffectTooltip_subTextMargin {\n margin-bottom: 0.3rem; }\n\n.tooltipArg {\n color: #46bee1;\n font-weight: 600; }\n";
8826
+ styleInject(css_248z$1);
8827
+
8828
+ function EffectTooltip(_a) {
8829
+ var data = _a.data, _b = _a.debug, debug = _b === void 0 ? false : _b;
8830
+ var effect = data;
8831
+ var tooltipBaseProps = {
8832
+ title: effect.Name,
8833
+ id: effect.ID.toString(),
8834
+ grade: 4,
8835
+ icon: BuildIconPath(effect.IconPath, effect.IconIndex - 1),
8836
+ subtitle: effect.SubTableDef,
8837
+ mainInfos: [],
8838
+ subInfoGroups: []
8839
+ };
8840
+ AddDescription(tooltipBaseProps.mainInfos, effect);
8841
+ AddStackInfo(tooltipBaseProps.subInfoGroups, effect);
8842
+ AddDurationInfo(tooltipBaseProps.subInfoGroups, effect);
8843
+ if (debug)
8844
+ AddAliasInfo(tooltipBaseProps.subInfoGroups, effect);
8845
+ return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
8846
+ }
8847
+ function AddDescription(mainInfos, effect) {
8848
+ mainInfos.push(React.createElement("div", { className: "EffectTooltip_mainText", dangerouslySetInnerHTML: { __html: effect.Description } }));
8849
+ }
8850
+ function AddStackInfo(subInfoGroups, effect) {
8851
+ var texts = [];
8852
+ if (effect.StackCount > 0) {
8853
+ texts.push(React.createElement("div", { key: "stackCount" },
8854
+ "Stack Count: ",
8855
+ React.createElement(BlueColoredText, { text: effect.StackCount.toString() })));
8856
+ }
8857
+ if (effect.StackAmount > 0) {
8858
+ texts.push(React.createElement("div", { key: "stackAmount" },
8859
+ "Stack Limit: ",
8860
+ React.createElement(BlueColoredText, { text: effect.StackAmount.toString() })));
8861
+ }
8862
+ if (texts.length > 0) {
8863
+ subInfoGroups.push({
8864
+ title: "Stack Info",
8865
+ texts: texts
8866
+ });
8867
+ }
8868
+ }
8869
+ function AddDurationInfo(subInfoGroups, effect) {
8870
+ var texts = [];
8871
+ if (effect.PassiveDuratonInMs > 0) {
8872
+ texts.push(React.createElement("div", { key: "passiveDuration" },
8873
+ "Duration: ",
8874
+ React.createElement(BlueColoredText, { text: ToDurationString(effect.PassiveDuratonInMs) })));
8875
+ }
8876
+ if (texts.length > 0) {
8877
+ subInfoGroups.push({
8878
+ title: "Duration Info",
8879
+ texts: texts
8880
+ });
8881
+ }
8882
+ }
8883
+ function AddAliasInfo(subInfoGroups, effect) {
8884
+ if (effect.Alias.length > 0) {
8885
+ subInfoGroups.push({
8886
+ title: "Alias",
8887
+ texts: [React.createElement(BlueColoredText, { text: effect.Alias })]
8888
+ });
8889
+ }
8890
+ }
8891
+ function ToDurationString(durationInMs) {
8892
+ if (durationInMs <= 100) {
8893
+ return durationInMs + "ms";
8894
+ }
8895
+ return (durationInMs / 1000).toLocaleString('en-US') + " sec.";
8896
+ }
8897
+ function BlueColoredText(_a) {
8898
+ var text = _a.text, _b = _a.customClasses, customClasses = _b === void 0 ? "" : _b;
8899
+ return (React.createElement("span", { className: "tooltipArg " + customClasses }, text));
8900
+ }
8901
+
8902
+ var css_248z = ".TooltipBase_bns_upgradeRed_color {\n color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n color: #28A9F0; }\n\n.tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
8903
+ styleInject(css_248z);
8904
+
8905
+ var EffectTooltipWrapper = function (_a) {
8906
+ var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f, _g = _a.debug, debug = _g === void 0 ? false : _g;
8907
+ var spanRef = useRef(null);
8908
+ var _h = useState(null), childRef = _h[0], setChildRef = _h[1];
8909
+ /**
8910
+ * Mount the temporary span element.
8911
+ * retrieve and store the target element's reference.
8912
+ */
8913
+ useEffect(function () {
8914
+ if (spanRef.current) {
8915
+ setChildRef(spanRef.current.previousElementSibling);
8916
+ }
8917
+ return function () { return setChildRef(null); };
8918
+ }, []);
8919
+ return (React.createElement(React.Fragment, null,
8920
+ children,
8921
+ childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && (!interactive && !debug), appendTo: document.body, placement: placement, animation: "fade", interactive: interactive || debug, content: React.createElement(EffectTooltip, { data: data, debug: debug }), theme: "grade" + 4, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
8922
+ };
8923
+
8924
+ export { EffectTooltip, EffectTooltipWrapper, GetCooldownString, ItemImproveEffectsTooltip, ItemImproveEffectsTooltipWrapper, ItemImproveSelectStageTooltip, ItemImproveSelectStageTooltipWrapper, ItemImproveTooltip, ItemImproveTooltipWrapper, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
8826
8925
  //# sourceMappingURL=index.es.js.map