bnstooltips 1.6.5 → 2.1.0

package/build/index.es.js

@@ -30,8 +30,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$7 = "*[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.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(3, 3, 3, 0.9);\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@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(3, 3, 3, 0.9);\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";
-styleInject(css_248z$7);
+var css_248z$6 = "*[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.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(3, 3, 3, 0.9);\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@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(3, 3, 3, 0.9);\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";
+styleInject(css_248z$6);
 
 function TooltipBase(_a) {
     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;
@@ -133,8 +133,8 @@ function __generator(thisArg, body) {
     }
 }
 
-var css_248z$6 = ".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_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_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_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";
-styleInject(css_248z$6);
+var css_248z$5 = ".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_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_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_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";
+styleInject(css_248z$5);
 
 function BuildIconPath(iconPath, iconIndex) {
     if (iconPath == null)
@@ -1420,9 +1420,6 @@ function SetBonus(props) {
                     React.createElement(SkillModifiers, { jobstyle: jobstyle, isSetBonus: true, skillModifierGroups: setStage.skillModifiers })))); })))));
 }
 
-var css_248z$5 = ".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: black 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";
-styleInject(css_248z$5);
-
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -1579,29 +1576,32 @@ function getBasePlacement$1(placement) {
   return placement.split('-')[0];
 }
 
-// import { isHTMLElement } from './instanceOf';
-function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
-includeScale) {
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
 
   var rect = element.getBoundingClientRect();
   var scaleX = 1;
-  var scaleY = 1; // FIXME:
-  // `offsetWidth` returns an integer while `getBoundingClientRect`
-  // returns a float. This results in `scaleX` or `scaleY` being
-  // non-1 when it should be for elements that aren't a full pixel in
-  // width or height.
-  // if (isHTMLElement(element) && includeScale) {
-  //   const offsetHeight = element.offsetHeight;
-  //   const offsetWidth = element.offsetWidth;
-  //   // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-  //   // Fallback to 1 in case both values are `0`
-  //   if (offsetWidth > 0) {
-  //     scaleX = rect.width / offsetWidth || 1;
-  //   }
-  //   if (offsetHeight > 0) {
-  //     scaleY = rect.height / offsetHeight || 1;
-  //   }
-  // }
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
 
   return {
     width: rect.width / scaleX,
@@ -1720,6 +1720,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -1756,13 +1760,13 @@ function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
 
 function getFreshSideObject() {
   return {
@@ -1894,8 +1898,8 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
@@ -1910,14 +1914,23 @@ function mapToStyles(_ref2) {
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
-
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -1942,16 +1955,18 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
-      sideY = bottom; // $FlowFixMe[prop-missing]
-
-      y -= offsetParent[heightProp] - popperRect.height;
+      sideY = bottom;
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
-      sideX = right; // $FlowFixMe[prop-missing]
-
-      x -= offsetParent[widthProp] - popperRect.width;
+      sideX = right;
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
@@ -1960,6 +1975,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -1969,9 +1995,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -1994,7 +2020,8 @@ function computeStyles(_ref4) {
     variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
   };
 
   if (state.modifiersData.popperOffsets != null) {
@@ -2252,7 +2279,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement$1(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -2769,6 +2796,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -2778,13 +2813,15 @@ function preventOverflow(_ref) {
     return;
   }
 
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
     var mainSide = mainAxis === 'y' ? top : left;
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -2804,36 +2841,45 @@ function preventOverflow(_ref) {
     // width or height)
 
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+    var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+    var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+    var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-      var _max = _offset - overflow[_altSide];
+    var _min = _offset + overflow[_mainSide];
 
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+    var _max = _offset - overflow[_altSide];
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
 
   state.modifiersData[name] = data;
@@ -2865,8 +2911,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = rect.width / element.offsetWidth || 1;
-  var scaleY = rect.height / element.offsetHeight || 1;
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 } // Returns the composite rect of an element relative to its offsetParent.
 // Composite means it takes into account transforms as well as layout.
@@ -2878,9 +2924,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   }
 
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -2897,7 +2943,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -5548,1012 +5594,1113 @@ var Tippy = index;
 var css_248z$4 = ".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}";
 styleInject(css_248z$4);
 
-var ItemTooltipWrapper = function (_a) {
-    var data = _a.data, region = _a.region, children = _a.children, client = _a.client, _b = _a.offline, offline = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? "right" : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, jobstyleOverride = _a.jobstyleOverride, _f = _a.followCursor, followCursor$1 = _f === void 0 ? false : _f, _g = _a.trigger, trigger = _g === void 0 ? "mouseenter focus" : _g, _h = _a.showArrow, showArrow = _h === void 0 ? true : _h;
-    var spanRef = useRef(null);
-    var _j = useState(null), childRef = _j[0], setChildRef = _j[1];
-    /**
-     * Mount the temporary span element.
-     * retrieve and store the target element's reference.
-     */
-    useEffect(function () {
-        if (spanRef.current) {
-            setChildRef(spanRef.current.previousElementSibling);
-        }
-        return function () { return setChildRef(null); };
-    }, []);
-    var _k = useState(true), isOffline = _k[0], setIsOffline = _k[1];
-    return (React.createElement(React.Fragment, null,
-        children,
-        childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, onMount: function () { return setIsOffline(offline); }, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemTooltip, { region: region, jobstyleOverride: jobstyleOverride, data: data, offline: isOffline, client: client, debug: debug }), theme: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
-};
+var TooltipWrapperSettings = /** @class */ (function () {
+    function TooltipWrapperSettings(followCursor, interactive, placement, trigger, showArrow) {
+        if (followCursor === void 0) { followCursor = false; }
+        if (interactive === void 0) { interactive = true; }
+        if (placement === void 0) { placement = "right"; }
+        if (trigger === void 0) { trigger = "mouseenter focus"; }
+        if (showArrow === void 0) { showArrow = true; }
+        this.followCursor = followCursor;
+        this.interactive = interactive;
+        this.placement = placement;
+        this.trigger = trigger;
+        this.showArrow = showArrow;
+    }
+    return TooltipWrapperSettings;
+}());
 
-function ItemIconNameDiv(_a) {
-    var _this = this;
-    var _b;
-    var item = _a.item, region = _a.region, client = _a.client, _c = _a.showRandomIcon, showRandomIcon = _c === void 0 ? false : _c;
-    var _d = useState(), itemData = _d[0], setItemData = _d[1];
-    useEffect(function () {
-        if (client)
-            (function () { return __awaiter(_this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = setItemData;
-                            return [4 /*yield*/, client.GetItem(item.itemId, item.itemLevel)];
-                        case 1:
-                            _a.apply(void 0, [_b.sent()]);
-                            return [2 /*return*/];
-                    }
-                });
-            }); })();
-    }, [item, client]);
-    if (itemData) {
-        if (itemData.grade != 0)
-            return (React.createElement("div", { className: "ItemTooltip_itemiconnamediv" },
-                React.createElement(ItemTooltipWrapper, { region: region, client: client, data: itemData },
-                    React.createElement("img", { className: "ItemTooltip_itemIconSmall", alt: "", src: BuildIconPath((_b = itemData.icon) === null || _b === void 0 ? void 0 : _b.iconPath) })),
-                React.createElement("div", { className: "ItemTooltip_itemNameRandomDiv" },
-                    React.createElement("span", { className: "TooltipBase_grade-" + itemData.grade, dangerouslySetInnerHTML: { __html: itemData.name } }),
-                    showRandomIcon ? (React.createElement(React.Fragment, null,
-                        "\u00A0",
-                        React.createElement("div", null,
-                            React.createElement("img", { style: {
-                                    width: 36,
-                                    height: 18,
-                                    margin: "0 1px",
-                                    top: 4,
-                                    position: "relative",
-                                }, alt: "", src: "https://lean.bns.tools/bns/icons/00015590/Tag_Random.png" })))) : null)));
-        else
-            return null;
+var css_248z$3 = ".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: black 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";
+styleInject(css_248z$3);
+
+var TooltipSettingsBase = /** @class */ (function () {
+    function TooltipSettingsBase() {
+        this.debug = false;
+        this.fullHeight = false;
     }
-    else {
-        return (React.createElement("div", { className: "ItemTooltip_itemIconLoading" },
-            React.createElement("div", { className: "dot-elastic" })));
+    return TooltipSettingsBase;
+}());
+var TooltipWithNetworkSettings = /** @class */ (function (_super) {
+    __extends(TooltipWithNetworkSettings, _super);
+    function TooltipWithNetworkSettings(region, client, offline) {
+        if (offline === void 0) { offline = false; }
+        var _this = this;
+        var l_offline = offline;
+        if (region == null)
+            l_offline = true;
+        _this = _super.call(this) || this;
+        _this.region = region;
+        _this.client = client;
+        _this.offline = l_offline;
+        return _this;
     }
-}
+    return TooltipWithNetworkSettings;
+}(TooltipSettingsBase));
+
+var ItemTooltipSettings = /** @class */ (function (_super) {
+    __extends(ItemTooltipSettings, _super);
+    function ItemTooltipSettings(data, region, client, offline) {
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.data = data;
+        return _this;
+    }
+    return ItemTooltipSettings;
+}(TooltipWithNetworkSettings));
+
+var SkillTooltipSettings = /** @class */ (function (_super) {
+    __extends(SkillTooltipSettings, _super);
+    function SkillTooltipSettings(data) {
+        var _this = _super.call(this) || this;
+        _this.data = data;
+        return _this;
+    }
+    return SkillTooltipSettings;
+}(TooltipSettingsBase));
 
-function DecomposeResults(props) {
-    if (props.client)
-        return (React.createElement("div", null, props.items
-            .filter(function (x) { return x != null; })
-            .map(function (item, i) {
-            return (React.createElement("div", { className: "TooltipBase_flex", key: item.itemId + "-" + item.itemLevel + "_" + i },
-                React.createElement(ItemIconNameDiv, { region: props.region, item: item, client: props.client, showRandomIcon: item.isRandom }),
-                item.isRandom ? null : (React.createElement(React.Fragment, null,
-                    "\u00A0",
-                    item.isMinMax ? (React.createElement("span", null, GetRangeString(item.min, item.max))) : (React.createElement("span", null, GetRangeString(item.min)))))));
-        })));
-    else
+var css_248z$2 = ".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\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";
+styleInject(css_248z$2);
+
+function getButtonIconPath(button) {
+    var _a;
+    if (buttonIconMapping.find(function (x) { return x.button === button; }) == null)
         return null;
-}
+    return ("/00072858" + ((_a = buttonIconMapping.find(function (x) { return x.button === button; })) === null || _a === void 0 ? void 0 : _a.path));
+}
+var buttonIconMapping = [
+    {
+        button: "F",
+        path: "/Key_Alphabet_F",
+    },
+    {
+        button: "Q",
+        path: "/Key_Alphabet_Q",
+    },
+    {
+        button: "E",
+        path: "/Key_Alphabet_E",
+    },
+    {
+        button: "S",
+        path: "/Key_Alphabet_S",
+    },
+    {
+        button: "Z",
+        path: "/Key_Alphabet_Z",
+    },
+    {
+        button: "X",
+        path: "/Key_Alphabet_X",
+    },
+    {
+        button: "C",
+        path: "/Key_Alphabet_C",
+    },
+    {
+        button: "V",
+        path: "/Key_Alphabet_V",
+    },
+    {
+        button: "W",
+        path: "/Key_Alphabet_W",
+    },
+    {
+        button: "G",
+        path: "/Key_Alphabet_G",
+    },
+    {
+        button: "B",
+        path: "/Key_Alphabet_B",
+    },
+    {
+        button: "SPACE",
+        path: "/Key_Space_Big",
+    },
+    {
+        button: "TAB",
+        path: "/Key_Tab_Big",
+    },
+    {
+        button: "1",
+        path: "/Key_Num_1",
+    },
+    {
+        button: "2",
+        path: "/Key_Num_2",
+    },
+    {
+        button: "3",
+        path: "/Key_Num_3",
+    },
+    {
+        button: "4",
+        path: "/Key_Num_4",
+    },
+    {
+        button: "LMB",
+        path: "/GameUI_Tag_MouseL",
+    },
+    {
+        button: "RMB",
+        path: "/GameUI_Tag_MouseR",
+    },
+];
 
-function SetBonusToggle(_a) {
-    var jobstyles = _a.jobstyles, jobstyle = _a.jobstyle, setJobstyle = _a.setJobstyle;
-    return (React.createElement("div", { className: "ItemTooltip_jobstyleToggleContainer" }, jobstyles.map(function (style) { return (React.createElement("button", { key: style, className: "ItemTooltip_jobstyleButton" +
-            (style === jobstyle ? " ItemTooltip_jobstyleButton-active" : ""), onClick: function (e) {
-            e.stopPropagation();
-            setJobstyle(style);
-        } }, GetJobStyleNameString(style))); })));
+function SkillIconWithButton(_a) {
+    var skill = _a.skill;
+    return (React.createElement("div", { className: "SkillTooltip_skillIconContainer" },
+        React.createElement("img", { className: "SkillTooltip_skillIcon", src: BuildIconPath(skill.IconPath, skill.IconIndex - 1), alt: "" }),
+        getButtonIconPath(getNormalizedButton(skill)) ? (React.createElement("img", { className: "SkillTooltip_buttonIcon" +
+                " " +
+                (getNormalizedButton(skill) === "RMB" ||
+                    getNormalizedButton(skill) === "LMB"
+                    ? "SkillTooltip_buttonIconMouse"
+                    : ""), src: BuildIconPath(getButtonIconPath(getNormalizedButton(skill))), alt: "" })) : null));
 }
 
-function ItemDescriptionText(_a) {
-    var htmlString = _a.htmlString;
-    var textSplit = htmlString.replace("<br/>", "<br />").split("<br />");
-    return (React.createElement("div", { className: "ItemTooltip_descriptions TooltipBase_flex-col" }, textSplit.map(function (htmlText, i) { return (React.createElement("span", { key: i, dangerouslySetInnerHTML: {
-            __html: ReplaceIconsInHtmlString(htmlText),
-        } })); })));
+function SkillTooltipBoundary(_a) {
+    var head = _a.head, body = _a.body, _b = _a.bodyClass, bodyClass = _b === void 0 ? "" : _b, _c = _a.pvpModifier, pvpModifier = _c === void 0 ? false : _c, _d = _a.hasIcon, hasIcon = _d === void 0 ? false : _d;
+    return (React.createElement("div", { className: "SkillTooltip_boundary" },
+        React.createElement("div", { className: "SkillTooltip_boundaryHead" }, head),
+        React.createElement("div", { className: "SkillTooltip_boundaryBody " +
+                (pvpModifier ? "SkillTooltip_boundaryBodyModifier " : "") +
+                bodyClass +
+                (hasIcon ? " SkillTooltip_boundaryHasIcon " : "") }, body)));
 }
 
-function RawText(_a) {
-    var htmlString = _a.htmlString;
-    return (React.createElement("div", { className: "ItemTooltip_raw", dangerouslySetInnerHTML: { __html: htmlString } }));
+function SkillTooltipBoundaryContainer(_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: "SkillTooltip_boundaryContainer" }, children);
 }
 
-function TextWithNumber(_a) {
-    var text = _a.text, number = _a.number;
-    return (React.createElement("div", null,
-        text,
-        number));
-}
-
-function StringEnumerationWithText(_a) {
-    var enumeration = _a.enumeration, textBefore = _a.textBefore, textAfter = _a.textAfter;
-    return (React.createElement("div", null,
-        textBefore,
-        enumeration.map(function (item, i) { return (React.createElement("span", { key: i },
-            item,
-            i != enumeration.length - 1 ? ", " : null)); }),
-        textAfter));
+function PvpModifiers(_a) {
+    var skill = _a.skill;
+    return (React.createElement(SkillTooltipBoundaryContainer, null,
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", null, "Equalized PvP"), body: React.createElement("span", null,
+                "x\u00A0",
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: skill.EqualizedPvp } })), pvpModifier: true }),
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", null, "PvP"), body: React.createElement("span", null,
+                "x\u00A0",
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: skill.Pvp } })), pvpModifier: true })));
 }
 
-function SealingResult(_a) {
-    var item = _a.item, client = _a.client, region = _a.region;
-    return (React.createElement("div", null, item.sealing.sealConsumeItems
-        .filter(function (x) { return x.min != 0; })
-        .map(function (consumeItem, i) { return (React.createElement("div", { className: "TooltipBase_flex", key: consumeItem.itemId + "_" + i },
-        React.createElement(ItemIconNameDiv, { region: region, item: consumeItem, client: client }),
-        "\u00A0",
-        GetRangeString(consumeItem.min))); })));
+function SkillBoundaries(_a) {
+    var skill = _a.skill;
+    var _b = React.useState(false), hasIcon = _b[0], setHasIcon = _b[1];
+    React.useEffect(function () {
+        setHasIcon(skill.Boundaries.Range.Shape != null && skill.Boundaries.Range.Shape != "");
+    }, [skill]);
+    return (React.createElement(SkillTooltipBoundaryContainer, null,
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Distance.Name,
+                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Distance.Value,
+                } }), hasIcon: hasIcon }),
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Range.Name,
+                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Range.Value,
+                } }), hasIcon: hasIcon, bodyClass: skill.Boundaries.Range.Shape }),
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Cast.Name,
+                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Cast.Value,
+                } }), hasIcon: hasIcon }),
+        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Recycle.Name,
+                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: skill.Boundaries.Recycle.Value,
+                } }), hasIcon: hasIcon })));
 }
 
-function AccountTransfer(_a) {
-    var item = _a.item, client = _a.client, region = _a.region;
-    return (React.createElement("div", null,
-        item.accountTransfer.requiredItems.map(function (consumeItem, i) { return (React.createElement("div", { className: "TooltipBase_flex", key: consumeItem.itemId + "_" + i },
-            React.createElement(ItemIconNameDiv, { region: region, client: client, item: consumeItem }),
-            "\u00A0",
-            GetRangeString(consumeItem.min))); }),
-        item.accountTransfer.moneyCost != null &&
-            item.accountTransfer.moneyCost > 0 ? (React.createElement("span", null,
-            item.accountTransfer.moneyCost,
-            "\u00A0copper")) : null));
+function SkillConditions(_a) {
+    var tooltipItems = _a.tooltipItems;
+    return (React.createElement(React.Fragment, null, tooltipItems.map(function (sub, i) { return (React.createElement("div", { key: i, className: "SkillTooltip_conditionRow" },
+        sub.IconPath != null ? (React.createElement("img", { src: sub.IconIndex != null && sub.IconIndex > 0
+                ? BuildIconPath(sub.IconPath, sub.IconIndex - 1)
+                : BuildIconPath(sub.IconPath), alt: "", className: "SkillTooltip_conditionIcon" })) : null,
+        React.createElement("div", { key: i, dangerouslySetInnerHTML: { __html: sub.Text } }))); })));
 }
 
-function ItemTooltip(_a) {
-    var _this = this;
-    var _b, _c, _d;
-    var data = _a.data, region = _a.region, _e = _a.debug, debug = _e === void 0 ? false : _e, _f = _a.offline, offline = _f === void 0 ? false : _f, clientProp = _a.client, jobstyleOverride = _a.jobstyleOverride, _g = _a.fullHeight, fullHeight = _g === void 0 ? false : _g;
-    var _h = useState("advanced-1"), jobstyle = _h[0], setJobstyle = _h[1];
-    var _j = useState(), client = _j[0], setClient = _j[1];
-    useEffect(function () {
-        if (offline)
-            return;
-        if (clientProp == undefined) {
-            (function () { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    setClient(new ItemDownloadClient(region));
-                    return [2 /*return*/];
-                });
-            }); })();
-        }
-        else {
-            setClient(clientProp);
-        }
-    }, [offline]);
-    useEffect(function () {
-        if (jobstyleOverride != undefined) {
-            setJobstyle(jobstyleOverride);
-        }
-    }, [jobstyleOverride]);
-    var item = data;
-    var itemCategory = (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "";
-    if (itemCategory == "none")
-        itemCategory = "";
+function SkillTooltip(_a) {
+    var settings = _a.settings;
+    var debug = settings.debug;
+    var skill = settings.data;
     var tooltipBaseProps = {
-        title: item.name,
-        grade: item.grade,
-        id: item.id + "-" + item.level,
-        icon: item.icon ? BuildIconPath(item.icon.iconPath) : "",
-        subtitle: itemCategory,
+        title: skill.Name,
+        id: skill.ID + "-" + skill.Variation,
+        grade: 4,
+        icon: skill.IconPath ? React.createElement(SkillIconWithButton, { skill: skill }) : "",
+        subtitle: skill.AdditionalInfo
+            ? "<div style=\"font-size: 12px;\">".concat(skill.AdditionalInfo, "</div>")
+            : "",
         mainInfos: [],
         subInfoGroups: [],
-        fullHeight: fullHeight,
     };
-    var setHasSkillModifiers = false;
-    var jobstyles = [];
-    var itemCombats = false;
-    if (item.skills != null && item.skills.length > 0) {
-        item.skills.forEach(function (itemSkill) {
-            if (itemSkill.jobstyle != null) {
-                setHasSkillModifiers = true;
-                itemCombats = true;
-                if (!jobstyles.includes(itemSkill.jobstyle)) {
-                    jobstyles.push(itemSkill.jobstyle);
-                }
-            }
-        });
-    }
-    if (((_d = item.setBonus) === null || _d === void 0 ? void 0 : _d.setBonusStages) != null) {
-        item.setBonus.setBonusStages.forEach(function (stage) {
-            if (stage.skillModifiers != null && stage.skillModifiers.length > 0) {
-                setHasSkillModifiers = true;
-                stage.skillModifiers.forEach(function (modifier) {
-                    if (!jobstyles.includes(modifier.jobstyle)) {
-                        jobstyles.push(modifier.jobstyle);
-                    }
-                });
-            }
-        });
-    }
-    //top part
-    AddMainInfo(tooltipBaseProps.mainInfos, item);
-    AddSubInfo(tooltipBaseProps.mainInfos, item);
-    AddSkillTitles(tooltipBaseProps.mainInfos, item, itemCombats, jobstyle);
-    AddCooldowns(tooltipBaseProps.mainInfos, item);
-    AddItemStats(tooltipBaseProps.mainInfos, item);
-    AddItemRandomStats(tooltipBaseProps.mainInfos, item);
-    //bottom part
-    AddGearScore(tooltipBaseProps.subInfoGroups, item, debug);
-    AddJobstyleToggles(setHasSkillModifiers, tooltipBaseProps.subInfoGroups, jobstyles, jobstyle, setJobstyle);
-    AddTopText(tooltipBaseProps.subInfoGroups, item);
-    AddSkillDescriptions(tooltipBaseProps.subInfoGroups, item, itemCombats, jobstyle);
-    AddSkillModifiers(tooltipBaseProps.subInfoGroups, item, false, jobstyle);
-    AddSetBonus(tooltipBaseProps.subInfoGroups, item, jobstyle);
-    if (!offline) {
-        AddDecomposeResults(tooltipBaseProps.subInfoGroups, item, client, region);
-    }
-    AddUnityPoints(tooltipBaseProps.subInfoGroups, item);
-    AddDescriptions(tooltipBaseProps.subInfoGroups, item);
-    AddFlavorText(tooltipBaseProps.subInfoGroups, item);
-    AddItemUsableGroup(tooltipBaseProps.subInfoGroups, item);
-    AddRequiredLevel(tooltipBaseProps.subInfoGroups, item);
-    AddRequiredJobs(tooltipBaseProps.subInfoGroups, item);
-    AddBoundToAccount(tooltipBaseProps.subInfoGroups, item);
-    AddAbleToTrade(tooltipBaseProps.subInfoGroups, item);
-    if (!offline) {
-        AddSealingResult(tooltipBaseProps.subInfoGroups, item, client, region);
-        AddAccountTransferResult(tooltipBaseProps.subInfoGroups, item, client, region);
+    if (skill.Tooltip != null) {
+        //topPart
+        AddMainText1s(tooltipBaseProps.mainInfos, skill);
+        AddMainText2s(tooltipBaseProps.mainInfos, skill);
+        //bottomPart
+        AddSubTexts(tooltipBaseProps.subInfoGroups, skill);
+        AddBreakValue(tooltipBaseProps.subInfoGroups, skill);
+        AddPvpModifiers(tooltipBaseProps.subInfoGroups, skill);
+        AddBoundaries(tooltipBaseProps.subInfoGroups, skill);
+        AddConditions(tooltipBaseProps.subInfoGroups, skill);
+        AddStances(tooltipBaseProps.subInfoGroups, skill);
+        if (debug) {
+            AddIds(tooltipBaseProps.subInfoGroups, skill);
+        }
     }
     return React.createElement(TooltipBase, __assign({}, tooltipBaseProps));
 }
-function AddMainInfo(mainInfos, item) {
-    if (item.mainInfo != null)
-        mainInfos.push(React.createElement(ItemMainInfo, __assign({}, item)));
-}
-function AddSubInfo(mainInfos, item) {
-    if (item.subInfo != null)
-        mainInfos.push(React.createElement(ItemSubInfo, __assign({}, item)));
-}
-function AddSkillTitles(mainInfos, item, itemCombats, jobstyle) {
-    var itemSkills = item.skills;
-    if (itemSkills == null || itemSkills.length == 0)
-        return;
-    mainInfos.push(React.createElement(ItemSkillTitles, { item: item, itemCombats: itemCombats, jobstyle: jobstyle }));
-}
-function AddCooldowns(mainInfos, item) {
-    if ((item.cooldownInMs == null || item.cooldownInMs == 0) &&
-        (item.bgCooldownInMs == null || item.bgCooldownInMs == 0))
-        return;
-    mainInfos.push(React.createElement(ItemCooldowns, __assign({}, item)));
-}
-function AddItemStats(mainInfos, item) {
-    if (item.stats == null || item.stats.length == 0)
-        return;
-    mainInfos.push(React.createElement(ItemStats, __assign({}, item)));
+function AddMainText1s(mainInfos, skill) {
+    skill.Tooltip.Main1.forEach(function (main) {
+        mainInfos.push(React.createElement("div", { className: "SkillTooltip_mainText", dangerouslySetInnerHTML: { __html: main.Text } }));
+    });
 }
-function AddItemRandomStats(mainInfos, item) {
-    if (item.randomStats == null || item.randomStats.length === 0)
-        return;
-    mainInfos.push(React.createElement(ItemRandomStats, __assign({}, item)));
+function AddMainText2s(mainInfos, skill) {
+    skill.Tooltip.Main2.forEach(function (main) {
+        mainInfos.push(React.createElement("div", { className: "SkillTooltip_smallText", dangerouslySetInnerHTML: { __html: main.Text } }));
+    });
 }
-function AddGearScore(subInfoGroups, item, debugMode) {
-    if (!debugMode)
-        return;
+function AddSubTexts(subInfoGroups, skill) {
+    var texts = [];
+    skill.Tooltip.Sub.forEach(function (sub, i) {
+        texts.push(React.createElement("div", { className: "SkillTooltip_subText" +
+                (i != skill.Tooltip.Sub.length - 1
+                    ? " SkillTooltip_subTextMargin"
+                    : "") },
+            sub.IconPath != null && sub.IconPath != "" ? (React.createElement("img", { src: sub.IconIndex != null && sub.IconIndex > 0
+                    ? BuildIconPath(sub.IconPath, sub.IconIndex - 1)
+                    : BuildIconPath(sub.IconPath), alt: "", className: "SkillTooltip_conditionIconSmall" })) : null,
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: sub.Text } })));
+    });
     subInfoGroups.push({
         title: "",
-        texts: [React.createElement(GearScore, __assign({}, item))],
+        texts: texts,
     });
 }
-function AddTopText(subInfoGroups, item) {
-    if (item.topText == null)
+function AddBreakValue(subInfoGroups, skill) {
+    if (skill.BreakValue != null && skill.BreakValue !== "0") {
+        subInfoGroups.push({
+            title: "",
+            texts: [
+                React.createElement("div", null,
+                    "Breaker value:\u00A0",
+                    React.createElement("span", { className: "tooltipArg", dangerouslySetInnerHTML: { __html: skill.BreakValue } })),
+            ],
+        });
+    }
+}
+function AddPvpModifiers(subInfoGroups, skill) {
+    if (skill.Pvp == null || skill.EqualizedPvp == null)
         return;
     subInfoGroups.push({
         title: "",
-        texts: [React.createElement(TopText, __assign({}, item))],
+        texts: [React.createElement(PvpModifiers, { skill: skill })],
     });
 }
-function AddSkillDescriptions(subInfoGroups, item, itemCombats, jobstyle) {
-    if (item.skills == null || item.skills.length == 0)
+function AddBoundaries(subInfoGroups, skill) {
+    if (skill.Boundaries == null)
         return;
     subInfoGroups.push({
         title: "",
-        texts: [
-            React.createElement(ItemSkillDescriptions, { item: item, itemCombats: itemCombats, jobstyle: jobstyle }),
-        ],
+        texts: [React.createElement(SkillBoundaries, { skill: skill })],
     });
 }
-function AddSkillModifiers(subInfoGroups, item, isSetBonus, jobstyle) {
-    if (item.skillModifierGroups == null || item.skillModifierGroups.length == 0)
+function AddConditions(subInfoGroups, skill) {
+    if (skill.Tooltip.Condition.length == 0)
         return;
     subInfoGroups.push({
-        title: "",
-        texts: [
-            React.createElement(SkillModifiers, { skillModifierGroups: item.skillModifierGroups, isSetBonus: isSetBonus, jobstyle: jobstyle }),
-        ],
+        title: "Terms of Use",
+        texts: [React.createElement(SkillConditions, { tooltipItems: skill.Tooltip.Condition })],
     });
 }
-function AddSetBonus(subInfoGroups, item, jobstyle) {
-    if (item.setBonus == null)
+function AddStances(subInfoGroups, skill) {
+    if (skill.Tooltip.Stance.length == 0)
         return;
     subInfoGroups.push({
-        title: "Set Effect:",
-        texts: [React.createElement(SetBonus, { item: item, jobstyle: jobstyle })],
+        title: "Switch Position",
+        texts: [React.createElement(SkillConditions, { tooltipItems: skill.Tooltip.Stance })],
     });
 }
-function AddDecomposeResults(subInfoGroups, item, client, region) {
-    if (item.decomposeRewards == null || item.decomposeRewards.length == 0)
-        return;
-    var fixedItems = []
-        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.fixedItems; })).filter(function (x) { return x != null; });
-    var randomItems = []
-        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.randomItems; })).filter(function (x) { return x != null; });
-    var selectItems = []
-        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.selectItems; })).filter(function (x) { return x != null; });
-    if (fixedItems.length > 0)
-        subInfoGroups.push({
-            title: "Guaranteed/Salvage:",
-            texts: [
-                React.createElement(DecomposeResults, { region: region, items: fixedItems, client: client }),
-            ],
-        });
-    if (randomItems.length > 0)
-        subInfoGroups.push({
-            title: "Random:",
-            texts: [
-                React.createElement(DecomposeResults, { region: region, items: randomItems, client: client }),
-            ],
-        });
-    if (selectItems.length > 0)
-        subInfoGroups.push({
-            title: "Select:",
-            texts: [
-                React.createElement(DecomposeResults, { region: region, items: selectItems, client: client }),
-            ],
-        });
-}
-function AddJobstyleToggles(setHasSkillModifiers, subInfoGroups, jobstyles, jobstyle, setJobstyle) {
-    if (!setHasSkillModifiers)
-        return;
+function AddIds(subInfoGroups, skill) {
     subInfoGroups.push({
-        title: "",
-        texts: [
-            React.createElement(SetBonusToggle, { jobstyles: jobstyles, jobstyle: jobstyle, setJobstyle: setJobstyle }),
-        ],
-    });
-}
-function AddDescriptions(subInfoGroups, item) {
-    if (item.descriptions == null || item.descriptions.length == 0)
-        return;
-    item.descriptions
-        .filter(function (x) { return x.text != null && x.text != ""; })
-        .forEach(function (description) {
-        subInfoGroups.push({
-            title: description.title,
-            texts: [React.createElement(ItemDescriptionText, { htmlString: description.text })],
-        });
+        title: "Debug info",
+        texts: [React.createElement("div", null,
+                "ID: ",
+                skill.ID), React.createElement("div", null,
+                "Variation: ",
+                skill.Variation)],
     });
+}
+
+var NpcTooltipSettings = /** @class */ (function (_super) {
+    __extends(NpcTooltipSettings, _super);
+    function NpcTooltipSettings(npc, region, grade, client, offline) {
+        if (grade === void 0) { grade = 4; }
+        var _this = _super.call(this, region, client, offline) || this;
+        _this.npc = npc;
+        _this.grade = grade;
+        return _this;
+    }
+    return NpcTooltipSettings;
+}(TooltipWithNetworkSettings));
+
+var css_248z$1 = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  border: none;\n  padding: 0.33rem;\n  margin: 0 0.1rem;\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  .NpcTooltip_toggleButton img {\n    width: 32px;\n    height: 32px; }\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 > 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";
+styleInject(css_248z$1);
+
+function StoreToggle(_a) {
+    var store = _a.store, isActive = _a.isActive, setActive = _a.setActive;
+    return (React.createElement("button", { className: "NpcTooltip_toggleButton " +
+            (isActive ? "NpcTooltip_toggleButton-active" : ""), onClick: setActive }, store.Icon != null && store.Icon != "" ? (React.createElement("img", { src: store.Icon, alt: store.Name })) : (React.createElement("span", null, store.Name))));
+}
+
+function StoreToggleBar(_a) {
+    var stores = _a.stores, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab;
+    return (React.createElement("div", { className: "NpcTooltip_toggleBarContainer" }, stores.map(function (store, i) { return (React.createElement(StoreToggle, { key: i, store: store, isActive: activeTab === i, setActive: function () { return setActiveTab(i); } })); })));
+}
+
+var BuyLimitReset;
+(function (BuyLimitReset) {
+    BuyLimitReset[BuyLimitReset["Day"] = 0] = "Day";
+    BuyLimitReset[BuyLimitReset["Week"] = 1] = "Week";
+    BuyLimitReset[BuyLimitReset["Month"] = 2] = "Month";
+    BuyLimitReset[BuyLimitReset["Absolute"] = 3] = "Absolute";
+})(BuyLimitReset || (BuyLimitReset = {}));
+var BuyLimitType;
+(function (BuyLimitType) {
+    BuyLimitType[BuyLimitType["Character"] = 0] = "Character";
+    BuyLimitType[BuyLimitType["Account"] = 1] = "Account";
+})(BuyLimitType || (BuyLimitType = {}));
+
+function ItemBuyLimit(_a) {
+    var limit = _a.limit;
+    if (limit == null)
+        return null;
+    return (React.createElement("div", { className: "NpcTooltip_storeEntryItemLimit" }, GetStringForBuyLimitType(limit.LimitType) +
+        "Limit: " +
+        limit.Amount +
+        "/" +
+        GetStringForBuyLimitReset(limit.LimitReset)));
 }
-function AddFlavorText(subInfoGroups, item) {
-    if (item.flavorText == null || item.flavorText == "")
-        return;
-    subInfoGroups.push({
-        title: "",
-        texts: [React.createElement(ItemDescriptionText, { htmlString: item.flavorText })],
-    });
+function GetStringForBuyLimitType(type) {
+    switch (type) {
+        case BuyLimitType.Account:
+            return "Account ";
+        case BuyLimitType.Character:
+            return "Character ";
+        default:
+            return "";
+    }
 }
-function AddItemUsableGroup(subInfoGroups, item) {
-    if (IsNullOrEmpty(item.usableGroup))
-        return;
-    subInfoGroups.push({
-        title: "",
-        texts: [React.createElement(RawText, { htmlString: item.usableGroup })],
-    });
+function GetStringForBuyLimitReset(reset) {
+    switch (reset) {
+        case BuyLimitReset.Day:
+            return "Day";
+        case BuyLimitReset.Week:
+            return "Week ";
+        case BuyLimitReset.Month:
+            return "Month";
+        default:
+            return "";
+    }
+}
+
+function Money(_a) {
+    var money = _a.money;
+    var bnsmoney = getMoneyObj(money);
+    if (bnsmoney == null)
+        return null;
+    return (React.createElement("div", { className: "NpcTooltip_moneyContainer" },
+        bnsmoney.Gold > 0 ? (React.createElement("span", null,
+            bnsmoney.Gold,
+            React.createElement("img", { src: BuildIconPath("gold"), alt: "" }))) : null,
+        bnsmoney.Silver > 0 ? (React.createElement("span", null,
+            bnsmoney.Silver,
+            React.createElement("img", { src: BuildIconPath("silver"), alt: "" }))) : null,
+        bnsmoney.Copper > 0 ? (React.createElement("span", null,
+            bnsmoney.Copper,
+            React.createElement("img", { src: BuildIconPath("copper"), alt: "" }))) : null));
+}
+
+function StoreItemBuyPriceEntry(_a) {
+    var _this = this;
+    var itemRef = _a.itemRef, client = _a.client;
+    var _b = useState(), item = _b[0], setItem = _b[1];
+    useEffect(function () {
+        if (client == null)
+            return;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setItem;
+                        return [4 /*yield*/, client.GetItem(itemRef.itemId, itemRef.itemLevel)];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [itemRef, client]);
+    var tooltipItemSettings = new ItemTooltipSettings(item, client.region, client);
+    var wrapperSettings = new TooltipWrapperSettings(undefined, undefined, undefined, "click", undefined);
+    return (React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntry" }, item ? (React.createElement(TooltipWrapper, { targetSettings: wrapperSettings, contentSettings: tooltipItemSettings },
+        React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer" },
+            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer-shadow" }),
+            React.createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" }),
+            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryCount" },
+                React.createElement("span", null, itemRef.min))))) : null));
+}
+
+function NpcStoreEntry(_a) {
+    var _this = this;
+    var _b, _c;
+    var data = _a.data, client = _a.client;
+    var _d = useState(), item = _d[0], setItem = _d[1];
+    useEffect(function () {
+        if (client == null)
+            return;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var res;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, client.GetItem(data.Item.itemId, data.Item.itemLevel)];
+                    case 1:
+                        res = _a.sent();
+                        setItem(res);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [data, client]);
+    if (item != undefined) {
+        var tooltipItemSettings = new ItemTooltipSettings(item, client.region, client);
+        var wrapperSettings = new TooltipWrapperSettings(undefined, undefined, undefined, "click", undefined);
+        return (React.createElement("div", { className: "NpcTooltip_storeEntry" },
+            React.createElement("div", { className: "NpcTooltip_storeEntryItemIconName" },
+                React.createElement(TooltipWrapper, { targetSettings: wrapperSettings, contentSettings: tooltipItemSettings },
+                    React.createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" })),
+                React.createElement("div", { className: "NpcTooltip_storeEntryItemNameLimit" },
+                    React.createElement("div", { className: "NpcTooltip_storeEntryItemName TooltipBase_grade-" + item.grade, dangerouslySetInnerHTML: { __html: item.name } }),
+                    React.createElement(ItemBuyLimit, { limit: data.Limit }))),
+            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntriesContainer" },
+                ((_b = data.BuyPrice.Items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntries " +
+                        (data.BuyPrice.Money > 0
+                            ? "NpcTooltip_itemBuyPriceEntries-moneyMargin"
+                            : "") }, (_c = data.BuyPrice.Items) === null || _c === void 0 ? void 0 : _c.map(function (itemCountRef, i) { return (React.createElement(StoreItemBuyPriceEntry, { itemRef: itemCountRef, client: client, key: i })); }))) : null,
+                React.createElement(Money, { money: data.BuyPrice.Money }))));
+    }
+    else {
+        return null;
+    }
+}
+
+function NpcStores(_a) {
+    var stores = _a.stores, activeTab = _a.activeTab, client = _a.client;
+    var activeStore = stores[activeTab];
+    return (React.createElement("div", null, activeStore.Entries.map(function (entry, i) { return (React.createElement(NpcStoreEntry, { key: i, data: entry, client: client })); })));
+}
+
+function NpcTooltip(_a) {
+    var _this = this;
+    var _b, _c;
+    var settings = _a.settings;
+    var npc = settings.npc;
+    var _d = useState(0), activeTab = _d[0], setActiveTab = _d[1];
+    var _e = useState(), client = _e[0], setClient = _e[1];
+    useEffect(function () {
+        if (!settings.offline) {
+            if (settings.client == undefined) {
+                (function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        setClient(new ItemDownloadClient(settings.region));
+                        return [2 /*return*/];
+                    });
+                }); })();
+            }
+            else {
+                setClient(settings.client);
+            }
+        }
+    }, [settings.offline]);
+    var tooltipBaseProps = {
+        title: npc.Name,
+        grade: (_b = settings.grade) !== null && _b !== void 0 ? _b : 4,
+        id: npc.Alias,
+        subtitle: (_c = npc.Title) !== null && _c !== void 0 ? _c : "",
+        fullHeight: settings.fullHeight,
+        subInfoGroups: [],
+    };
+    //no top part
+    AddStoreToggles(tooltipBaseProps.subInfoGroups, activeTab, setActiveTab, npc.Stores);
+    AddStores(tooltipBaseProps.subInfoGroups, activeTab, client, npc.Stores);
+    return React.createElement(TooltipBase, __assign({}, tooltipBaseProps));
 }
-function AddRequiredLevel(subInfoGroups, item) {
-    if (item.levelRequired == null || item.levelRequired <= 1)
+function AddStoreToggles(subInfoGroups, activeTab, setActiveTab, Stores) {
+    if (Stores == null || Stores.length <= 0)
         return;
     subInfoGroups.push({
         title: "",
         texts: [
-            React.createElement(TextWithNumber, { text: "Requires Level ", number: item.levelRequired }),
+            React.createElement(StoreToggleBar, { stores: Stores, activeTab: activeTab, setActiveTab: setActiveTab }),
         ],
     });
 }
-function AddRequiredJobs(subInfoGroups, item) {
-    if (item.classRequired == null || item.classRequired.length == 0)
+function AddStores(subInfoGroups, activeTab, client, Stores) {
+    if (Stores == null || Stores.length <= 0)
         return;
-    var enJobNames = item.classRequired.map(function (x) { return x.enName; });
     subInfoGroups.push({
         title: "",
         texts: [
-            React.createElement(StringEnumerationWithText, { enumeration: enJobNames, textAfter: " Only", textBefore: "" }),
-        ],
-    });
-}
-function AddBoundToAccount(subInfoGroups, item) {
-    if (item.boundToAccount == null || item.boundToAccount == false)
-        return;
-    subInfoGroups.push({
-        title: "",
-        texts: [React.createElement("div", null, "Bound to Account")],
-    });
-}
-function AddAbleToTrade(subInfoGroups, item) {
-    if (item.unableToTrade == null || item.unableToTrade == false)
-        return;
-    subInfoGroups.push({
-        title: "",
-        texts: [React.createElement("div", null, "Unable to Trade")],
-    });
-}
-function AddSealingResult(subInfoGroups, item, client, region) {
-    if (item.sealing == null ||
-        item.sealing.sealAcquireItemId == null ||
-        item.sealing.sealConsumeItems.filter(function (x) { return x.min != 0; }).length == 0)
-        return;
-    subInfoGroups.push({
-        title: "Can be resealed with:",
-        texts: [React.createElement(SealingResult, { region: region, item: item, client: client })],
-    });
-}
-function AddAccountTransferResult(subInfoGroups, item, client, region) {
-    if (item.accountTransfer == null ||
-        item.accountTransfer.requiredItems == null ||
-        item.accountTransfer.requiredItems.length == 0)
-        return;
-    subInfoGroups.push({
-        title: "Can be transferred with:",
-        texts: [React.createElement(AccountTransfer, { region: region, item: item, client: client })],
-    });
-}
-function AddUnityPoints(subInfoGroups, item) {
-    if (item.setPoints == null || item.refinementPoints == null)
-        return;
-    if (item.setPoints === 0)
-        return;
-    if (item.refinementPoints === 0)
-        return;
-    subInfoGroups.push({
-        title: "",
-        texts: [
-            React.createElement("span", null,
-                "Splendor Stone Set Points: ",
-                item.setPoints),
-            React.createElement("span", null,
-                "Splendor Stone Refinement Points: ",
-                item.refinementPoints),
+            React.createElement(NpcStores, { stores: Stores, activeTab: activeTab, client: client }),
         ],
     });
 }
 
-var css_248z$3 = "";
-styleInject(css_248z$3);
-
-function JsonTooltip(props) {
-    var tooltipProps = {
-        title: props.title,
-        grade: props.grade,
-        icon: props.icon,
-        mainInfos: JsonArrayToJsxArray(props.mainInfos),
-        subtitle: props.subtitle,
-        subInfoGroups: JsonSubInfoToJsxSubInfo(props.subInfoGroups),
-    };
-    return React.createElement(TooltipBase, __assign({}, tooltipProps));
-}
-function JsonSubInfoToJsxSubInfo(subInfoGroups) {
-    if (subInfoGroups == undefined)
-        return undefined;
-    var result = [];
-    subInfoGroups.forEach(function (subInfoGroup) {
-        var jsxSubInfoGroup = {
-            title: subInfoGroup.title,
-            texts: JsonArrayToJsxArray(subInfoGroup.texts),
-        };
-        result.push(jsxSubInfoGroup);
-    });
-    return result;
-}
-function JsonArrayToJsxArray(stringArray) {
-    if (stringArray == undefined)
-        return undefined;
-    var jsxArray = [];
-    stringArray.forEach(function (mainInfo) {
-        jsxArray.push(React.createElement("span", { dangerouslySetInnerHTML: { __html: mainInfo } }));
-    });
-    return jsxArray;
+function TooltipWrapper(_a) {
+    var targetSettings = _a.targetSettings, contentSettings = _a.contentSettings, children = _a.children, jobstyleOverride = _a.jobstyleOverride;
+    if (targetSettings == undefined) {
+        targetSettings = new TooltipWrapperSettings();
+    }
+    if (targetSettings == null || contentSettings == null)
+        return null;
+    var spanRef = useRef(null);
+    var _b = useState(null), childRef = _b[0], setChildRef = _b[1];
+    var _c = useState(true), origOffline = _c[0], setOrigOffline = _c[1];
+    /**
+     * Mount the temporary span element.
+     * retrieve and store the target element's reference.
+     */
+    useEffect(function () {
+        if (spanRef.current) {
+            setChildRef(spanRef.current.previousElementSibling);
+        }
+        var offline = contentSettings instanceof TooltipWithNetworkSettings
+            ? contentSettings.offline
+            : true;
+        setOrigOffline(offline);
+        return function () { return setChildRef(null); };
+    }, []);
+    var _d = useState(true), isOffline = _d[0], setIsOffline = _d[1];
+    var _e = useState(4), grade = _e[0], setGrade = _e[1];
+    var _f = useState(null), content = _f[0], setContent = _f[1];
+    useEffect(function () {
+        var _a;
+        if (contentSettings == null)
+            return;
+        if (contentSettings instanceof TooltipWithNetworkSettings)
+            contentSettings.offline = isOffline;
+        if (contentSettings instanceof ItemTooltipSettings) {
+            setContent(React.createElement(ItemTooltipComponent, { jobstyleOverride: jobstyleOverride, settings: contentSettings }));
+            setGrade(contentSettings.data.grade);
+        }
+        if (contentSettings instanceof SkillTooltipSettings) {
+            setContent(React.createElement(SkillTooltip, { settings: contentSettings }));
+            setGrade(4);
+        }
+        if (contentSettings instanceof NpcTooltipSettings) {
+            setContent(React.createElement(NpcTooltip, { settings: contentSettings }));
+            setGrade((_a = contentSettings.grade) !== null && _a !== void 0 ? _a : 4);
+        }
+    }, [contentSettings, isOffline]);
+    function mountOfflineState() {
+        if (origOffline != isOffline)
+            setIsOffline(origOffline);
+    }
+    return (React.createElement(React.Fragment, null,
+        children,
+        childRef && content ? (React.createElement(Tippy, { arrow: targetSettings.showArrow, trigger: targetSettings.trigger, plugins: [followCursor], followCursor: targetSettings.followCursor && !targetSettings.interactive, appendTo: document.body, onMount: function () { return mountOfflineState(); }, placement: targetSettings.placement, animation: "fade", interactive: targetSettings.interactive, content: content, theme: "grade" + grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 }
 
-var css_248z$2 = ".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\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";
-styleInject(css_248z$2);
+function ItemIconNameDiv(_a) {
+    var _this = this;
+    var _b;
+    var item = _a.item, region = _a.region, client = _a.client, _c = _a.showRandomIcon, showRandomIcon = _c === void 0 ? false : _c;
+    var _d = useState(), itemData = _d[0], setItemData = _d[1];
+    useEffect(function () {
+        if (client)
+            (function () { return __awaiter(_this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = setItemData;
+                            return [4 /*yield*/, client.GetItem(item.itemId, item.itemLevel)];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+    }, [item, client]);
+    if (itemData) {
+        if (itemData.grade != 0) {
+            var itemSettings = new ItemTooltipSettings(itemData, region, client);
+            return (React.createElement("div", { className: "ItemTooltip_itemiconnamediv" },
+                React.createElement(TooltipWrapper, { targetSettings: new TooltipWrapperSettings(), contentSettings: itemSettings },
+                    React.createElement("img", { className: "ItemTooltip_itemIconSmall", alt: "", src: BuildIconPath((_b = itemData.icon) === null || _b === void 0 ? void 0 : _b.iconPath) })),
+                React.createElement("div", { className: "ItemTooltip_itemNameRandomDiv" },
+                    React.createElement("span", { className: "TooltipBase_grade-" + itemData.grade, dangerouslySetInnerHTML: { __html: itemData.name } }),
+                    showRandomIcon ? (React.createElement(React.Fragment, null,
+                        "\u00A0",
+                        React.createElement("div", null,
+                            React.createElement("img", { style: {
+                                    width: 36,
+                                    height: 18,
+                                    margin: "0 1px",
+                                    top: 4,
+                                    position: "relative",
+                                }, alt: "", src: "https://lean.bns.tools/bns/icons/00015590/Tag_Random.png" })))) : null)));
+        }
+        else
+            return null;
+    }
+    else {
+        return (React.createElement("div", { className: "ItemTooltip_itemIconLoading" },
+            React.createElement("div", { className: "dot-elastic" })));
+    }
+}
 
-function getButtonIconPath(button) {
-    var _a;
-    if (buttonIconMapping.find(function (x) { return x.button === button; }) == null)
+function DecomposeResults(props) {
+    if (props.client)
+        return (React.createElement("div", null, props.items
+            .filter(function (x) { return x != null; })
+            .map(function (item, i) {
+            return (React.createElement("div", { className: "TooltipBase_flex", key: item.itemId + "-" + item.itemLevel + "_" + i },
+                React.createElement(ItemIconNameDiv, { region: props.region, item: item, client: props.client, showRandomIcon: item.isRandom }),
+                item.isRandom ? null : (React.createElement(React.Fragment, null,
+                    "\u00A0",
+                    item.isMinMax ? (React.createElement("span", null, GetRangeString(item.min, item.max))) : (React.createElement("span", null, GetRangeString(item.min)))))));
+        })));
+    else
         return null;
-    return ("/00072858" + ((_a = buttonIconMapping.find(function (x) { return x.button === button; })) === null || _a === void 0 ? void 0 : _a.path));
-}
-var buttonIconMapping = [
-    {
-        button: "F",
-        path: "/Key_Alphabet_F",
-    },
-    {
-        button: "Q",
-        path: "/Key_Alphabet_Q",
-    },
-    {
-        button: "E",
-        path: "/Key_Alphabet_E",
-    },
-    {
-        button: "S",
-        path: "/Key_Alphabet_S",
-    },
-    {
-        button: "Z",
-        path: "/Key_Alphabet_Z",
-    },
-    {
-        button: "X",
-        path: "/Key_Alphabet_X",
-    },
-    {
-        button: "C",
-        path: "/Key_Alphabet_C",
-    },
-    {
-        button: "V",
-        path: "/Key_Alphabet_V",
-    },
-    {
-        button: "W",
-        path: "/Key_Alphabet_W",
-    },
-    {
-        button: "G",
-        path: "/Key_Alphabet_G",
-    },
-    {
-        button: "B",
-        path: "/Key_Alphabet_B",
-    },
-    {
-        button: "SPACE",
-        path: "/Key_Space_Big",
-    },
-    {
-        button: "TAB",
-        path: "/Key_Tab_Big",
-    },
-    {
-        button: "1",
-        path: "/Key_Num_1",
-    },
-    {
-        button: "2",
-        path: "/Key_Num_2",
-    },
-    {
-        button: "3",
-        path: "/Key_Num_3",
-    },
-    {
-        button: "4",
-        path: "/Key_Num_4",
-    },
-    {
-        button: "LMB",
-        path: "/GameUI_Tag_MouseL",
-    },
-    {
-        button: "RMB",
-        path: "/GameUI_Tag_MouseR",
-    },
-];
+}
 
-function SkillIconWithButton(_a) {
-    var skill = _a.skill;
-    return (React.createElement("div", { className: "SkillTooltip_skillIconContainer" },
-        React.createElement("img", { className: "SkillTooltip_skillIcon", src: BuildIconPath(skill.IconPath, skill.IconIndex - 1), alt: "" }),
-        getButtonIconPath(getNormalizedButton(skill)) ? (React.createElement("img", { className: "SkillTooltip_buttonIcon" +
-                " " +
-                (getNormalizedButton(skill) === "RMB" ||
-                    getNormalizedButton(skill) === "LMB"
-                    ? "SkillTooltip_buttonIconMouse"
-                    : ""), src: BuildIconPath(getButtonIconPath(getNormalizedButton(skill))), alt: "" })) : null));
+function SetBonusToggle(_a) {
+    var jobstyles = _a.jobstyles, jobstyle = _a.jobstyle, setJobstyle = _a.setJobstyle;
+    return (React.createElement("div", { className: "ItemTooltip_jobstyleToggleContainer" }, jobstyles.map(function (style) { return (React.createElement("button", { key: style, className: "ItemTooltip_jobstyleButton" +
+            (style === jobstyle ? " ItemTooltip_jobstyleButton-active" : ""), onClick: function (e) {
+            e.stopPropagation();
+            setJobstyle(style);
+        } }, GetJobStyleNameString(style))); })));
 }
 
-function SkillTooltipBoundary(_a) {
-    var head = _a.head, body = _a.body, _b = _a.bodyClass, bodyClass = _b === void 0 ? "" : _b, _c = _a.pvpModifier, pvpModifier = _c === void 0 ? false : _c, _d = _a.hasIcon, hasIcon = _d === void 0 ? false : _d;
-    return (React.createElement("div", { className: "SkillTooltip_boundary" },
-        React.createElement("div", { className: "SkillTooltip_boundaryHead" }, head),
-        React.createElement("div", { className: "SkillTooltip_boundaryBody " +
-                (pvpModifier ? "SkillTooltip_boundaryBodyModifier " : "") +
-                bodyClass +
-                (hasIcon ? " SkillTooltip_boundaryHasIcon " : "") }, body)));
+function ItemDescriptionText(_a) {
+    var htmlString = _a.htmlString;
+    var textSplit = htmlString.replace("<br/>", "<br />").split("<br />");
+    return (React.createElement("div", { className: "ItemTooltip_descriptions TooltipBase_flex-col" }, textSplit.map(function (htmlText, i) { return (React.createElement("span", { key: i, dangerouslySetInnerHTML: {
+            __html: ReplaceIconsInHtmlString(htmlText),
+        } })); })));
 }
 
-function SkillTooltipBoundaryContainer(_a) {
-    var children = _a.children;
-    return React.createElement("div", { className: "SkillTooltip_boundaryContainer" }, children);
+function RawText(_a) {
+    var htmlString = _a.htmlString;
+    return (React.createElement("div", { className: "ItemTooltip_raw", dangerouslySetInnerHTML: { __html: htmlString } }));
 }
 
-function PvpModifiers(_a) {
-    var skill = _a.skill;
-    return (React.createElement(SkillTooltipBoundaryContainer, null,
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", null, "Equalized PvP"), body: React.createElement("span", null,
-                "x\u00A0",
-                React.createElement("span", { dangerouslySetInnerHTML: { __html: skill.EqualizedPvp } })), pvpModifier: true }),
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", null, "PvP"), body: React.createElement("span", null,
-                "x\u00A0",
-                React.createElement("span", { dangerouslySetInnerHTML: { __html: skill.Pvp } })), pvpModifier: true })));
+function TextWithNumber(_a) {
+    var text = _a.text, number = _a.number;
+    return (React.createElement("div", null,
+        text,
+        number));
 }
 
-function SkillBoundaries(_a) {
-    var skill = _a.skill;
-    var _b = React.useState(false), hasIcon = _b[0], setHasIcon = _b[1];
-    React.useEffect(function () {
-        setHasIcon(skill.Boundaries.Range.Shape != null && skill.Boundaries.Range.Shape != "");
-    }, [skill]);
-    return (React.createElement(SkillTooltipBoundaryContainer, null,
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Distance.Name,
-                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Distance.Value,
-                } }), hasIcon: hasIcon }),
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Range.Name,
-                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Range.Value,
-                } }), hasIcon: hasIcon, bodyClass: skill.Boundaries.Range.Shape }),
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Cast.Name,
-                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Cast.Value,
-                } }), hasIcon: hasIcon }),
-        React.createElement(SkillTooltipBoundary, { head: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Recycle.Name,
-                } }), body: React.createElement("span", { dangerouslySetInnerHTML: {
-                    __html: skill.Boundaries.Recycle.Value,
-                } }), hasIcon: hasIcon })));
+function StringEnumerationWithText(_a) {
+    var enumeration = _a.enumeration, textBefore = _a.textBefore, textAfter = _a.textAfter;
+    return (React.createElement("div", null,
+        textBefore,
+        enumeration.map(function (item, i) { return (React.createElement("span", { key: i },
+            item,
+            i != enumeration.length - 1 ? ", " : null)); }),
+        textAfter));
 }
 
-function SkillConditions(_a) {
-    var tooltipItems = _a.tooltipItems;
-    return (React.createElement(React.Fragment, null, tooltipItems.map(function (sub, i) { return (React.createElement("div", { key: i, className: "SkillTooltip_conditionRow" },
-        sub.IconPath != null ? (React.createElement("img", { src: sub.IconIndex != null && sub.IconIndex > 0
-                ? BuildIconPath(sub.IconPath, sub.IconIndex - 1)
-                : BuildIconPath(sub.IconPath), alt: "", className: "SkillTooltip_conditionIcon" })) : null,
-        React.createElement("div", { key: i, dangerouslySetInnerHTML: { __html: sub.Text } }))); })));
+function SealingResult(_a) {
+    var item = _a.item, client = _a.client, region = _a.region;
+    return (React.createElement("div", null, item.sealing.sealConsumeItems
+        .filter(function (x) { return x.min != 0; })
+        .map(function (consumeItem, i) { return (React.createElement("div", { className: "TooltipBase_flex", key: consumeItem.itemId + "_" + i },
+        React.createElement(ItemIconNameDiv, { region: region, item: consumeItem, client: client }),
+        "\u00A0",
+        GetRangeString(consumeItem.min))); })));
 }
 
-function SkillTooltip(_a) {
-    var data = _a.data, _b = _a.debug, debug = _b === void 0 ? false : _b;
-    var skill = data;
+function AccountTransfer(_a) {
+    var item = _a.item, client = _a.client, region = _a.region;
+    return (React.createElement("div", null,
+        item.accountTransfer.requiredItems.map(function (consumeItem, i) { return (React.createElement("div", { className: "TooltipBase_flex", key: consumeItem.itemId + "_" + i },
+            React.createElement(ItemIconNameDiv, { region: region, client: client, item: consumeItem }),
+            "\u00A0",
+            GetRangeString(consumeItem.min))); }),
+        item.accountTransfer.moneyCost != null &&
+            item.accountTransfer.moneyCost > 0 ? (React.createElement("span", null,
+            item.accountTransfer.moneyCost,
+            "\u00A0copper")) : null));
+}
+
+function ItemTooltipComponent(_a) {
+    var _this = this;
+    var _b, _c, _d;
+    var settings = _a.settings, jobstyleOverride = _a.jobstyleOverride;
+    var _e = useState("advanced-1"), jobstyle = _e[0], setJobstyle = _e[1];
+    var _f = useState(), client = _f[0], setClient = _f[1];
+    useEffect(function () {
+        if (settings.offline)
+            return;
+        if (settings.client == undefined) {
+            (function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    setClient(new ItemDownloadClient(settings.region));
+                    return [2 /*return*/];
+                });
+            }); })();
+        }
+        else {
+            setClient(settings.client);
+        }
+    }, [settings.offline]);
+    useEffect(function () {
+        if (jobstyleOverride != undefined) {
+            setJobstyle(jobstyleOverride);
+        }
+    }, [jobstyleOverride]);
+    var item = settings.data;
+    var itemCategory = (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "";
+    if (itemCategory == "none")
+        itemCategory = "";
     var tooltipBaseProps = {
-        title: skill.Name,
-        id: skill.ID + "-" + skill.Variation,
-        grade: 4,
-        icon: skill.IconPath ? React.createElement(SkillIconWithButton, { skill: skill }) : "",
-        subtitle: skill.AdditionalInfo
-            ? "<div style=\"font-size: 12px;\">".concat(skill.AdditionalInfo, "</div>")
-            : "",
+        title: item.name,
+        grade: item.grade,
+        id: item.id + "-" + item.level,
+        icon: item.icon ? BuildIconPath(item.icon.iconPath) : "",
+        subtitle: itemCategory,
         mainInfos: [],
         subInfoGroups: [],
+        fullHeight: settings.fullHeight,
     };
-    if (skill.Tooltip != null) {
-        //topPart
-        AddMainText1s(tooltipBaseProps.mainInfos, skill);
-        AddMainText2s(tooltipBaseProps.mainInfos, skill);
-        //bottomPart
-        AddSubTexts(tooltipBaseProps.subInfoGroups, skill);
-        AddBreakValue(tooltipBaseProps.subInfoGroups, skill);
-        AddPvpModifiers(tooltipBaseProps.subInfoGroups, skill);
-        AddBoundaries(tooltipBaseProps.subInfoGroups, skill);
-        AddConditions(tooltipBaseProps.subInfoGroups, skill);
-        AddStances(tooltipBaseProps.subInfoGroups, skill);
-        if (debug) {
-            AddIds(tooltipBaseProps.subInfoGroups, skill);
-        }
+    var setHasSkillModifiers = false;
+    var jobstyles = [];
+    var itemCombats = false;
+    if (item.skills != null && item.skills.length > 0) {
+        item.skills.forEach(function (itemSkill) {
+            if (itemSkill.jobstyle != null) {
+                setHasSkillModifiers = true;
+                itemCombats = true;
+                if (!jobstyles.includes(itemSkill.jobstyle)) {
+                    jobstyles.push(itemSkill.jobstyle);
+                }
+            }
+        });
+    }
+    if (((_d = item.setBonus) === null || _d === void 0 ? void 0 : _d.setBonusStages) != null) {
+        item.setBonus.setBonusStages.forEach(function (stage) {
+            if (stage.skillModifiers != null && stage.skillModifiers.length > 0) {
+                setHasSkillModifiers = true;
+                stage.skillModifiers.forEach(function (modifier) {
+                    if (!jobstyles.includes(modifier.jobstyle)) {
+                        jobstyles.push(modifier.jobstyle);
+                    }
+                });
+            }
+        });
+    }
+    //top part
+    AddMainInfo(tooltipBaseProps.mainInfos, item);
+    AddSubInfo(tooltipBaseProps.mainInfos, item);
+    AddSkillTitles(tooltipBaseProps.mainInfos, item, itemCombats, jobstyle);
+    AddCooldowns(tooltipBaseProps.mainInfos, item);
+    AddItemStats(tooltipBaseProps.mainInfos, item);
+    AddItemRandomStats(tooltipBaseProps.mainInfos, item);
+    //bottom part
+    AddGearScore(tooltipBaseProps.subInfoGroups, item, settings.debug);
+    AddJobstyleToggles(setHasSkillModifiers, tooltipBaseProps.subInfoGroups, jobstyles, jobstyle, setJobstyle);
+    AddTopText(tooltipBaseProps.subInfoGroups, item);
+    AddSkillDescriptions(tooltipBaseProps.subInfoGroups, item, itemCombats, jobstyle);
+    AddSkillModifiers(tooltipBaseProps.subInfoGroups, item, false, jobstyle);
+    AddSetBonus(tooltipBaseProps.subInfoGroups, item, jobstyle);
+    if (!settings.offline) {
+        AddDecomposeResults(tooltipBaseProps.subInfoGroups, item, client, settings.region);
+    }
+    AddUnityPoints(tooltipBaseProps.subInfoGroups, item);
+    AddDescriptions(tooltipBaseProps.subInfoGroups, item);
+    AddFlavorText(tooltipBaseProps.subInfoGroups, item);
+    AddItemUsableGroup(tooltipBaseProps.subInfoGroups, item);
+    AddRequiredLevel(tooltipBaseProps.subInfoGroups, item);
+    AddRequiredJobs(tooltipBaseProps.subInfoGroups, item);
+    AddBoundToAccount(tooltipBaseProps.subInfoGroups, item);
+    AddAbleToTrade(tooltipBaseProps.subInfoGroups, item);
+    if (!settings.offline) {
+        AddSealingResult(tooltipBaseProps.subInfoGroups, item, client, settings.region);
+        AddAccountTransferResult(tooltipBaseProps.subInfoGroups, item, client, settings.region);
     }
     return React.createElement(TooltipBase, __assign({}, tooltipBaseProps));
 }
-function AddMainText1s(mainInfos, skill) {
-    skill.Tooltip.Main1.forEach(function (main) {
-        mainInfos.push(React.createElement("div", { className: "SkillTooltip_mainText", dangerouslySetInnerHTML: { __html: main.Text } }));
-    });
+function AddMainInfo(mainInfos, item) {
+    if (item.mainInfo != null)
+        mainInfos.push(React.createElement(ItemMainInfo, __assign({}, item)));
 }
-function AddMainText2s(mainInfos, skill) {
-    skill.Tooltip.Main2.forEach(function (main) {
-        mainInfos.push(React.createElement("div", { className: "SkillTooltip_smallText", dangerouslySetInnerHTML: { __html: main.Text } }));
-    });
+function AddSubInfo(mainInfos, item) {
+    if (item.subInfo != null)
+        mainInfos.push(React.createElement(ItemSubInfo, __assign({}, item)));
 }
-function AddSubTexts(subInfoGroups, skill) {
-    var texts = [];
-    skill.Tooltip.Sub.forEach(function (sub, i) {
-        texts.push(React.createElement("div", { className: "SkillTooltip_subText" +
-                (i != skill.Tooltip.Sub.length - 1
-                    ? " SkillTooltip_subTextMargin"
-                    : "") },
-            sub.IconPath != null && sub.IconPath != "" ? (React.createElement("img", { src: sub.IconIndex != null && sub.IconIndex > 0
-                    ? BuildIconPath(sub.IconPath, sub.IconIndex - 1)
-                    : BuildIconPath(sub.IconPath), alt: "", className: "SkillTooltip_conditionIconSmall" })) : null,
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: sub.Text } })));
-    });
+function AddSkillTitles(mainInfos, item, itemCombats, jobstyle) {
+    var itemSkills = item.skills;
+    if (itemSkills == null || itemSkills.length == 0)
+        return;
+    mainInfos.push(React.createElement(ItemSkillTitles, { item: item, itemCombats: itemCombats, jobstyle: jobstyle }));
+}
+function AddCooldowns(mainInfos, item) {
+    if ((item.cooldownInMs == null || item.cooldownInMs == 0) &&
+        (item.bgCooldownInMs == null || item.bgCooldownInMs == 0))
+        return;
+    mainInfos.push(React.createElement(ItemCooldowns, __assign({}, item)));
+}
+function AddItemStats(mainInfos, item) {
+    if (item.stats == null || item.stats.length == 0)
+        return;
+    mainInfos.push(React.createElement(ItemStats, __assign({}, item)));
+}
+function AddItemRandomStats(mainInfos, item) {
+    if (item.randomStats == null || item.randomStats.length === 0)
+        return;
+    mainInfos.push(React.createElement(ItemRandomStats, __assign({}, item)));
+}
+function AddGearScore(subInfoGroups, item, debugMode) {
+    if (!debugMode)
+        return;
     subInfoGroups.push({
         title: "",
-        texts: texts,
+        texts: [React.createElement(GearScore, __assign({}, item))],
     });
 }
-function AddBreakValue(subInfoGroups, skill) {
-    if (skill.BreakValue != null && skill.BreakValue !== "0") {
-        subInfoGroups.push({
-            title: "",
-            texts: [
-                React.createElement("div", null,
-                    "Breaker value:\u00A0",
-                    React.createElement("span", { className: "tooltipArg", dangerouslySetInnerHTML: { __html: skill.BreakValue } })),
-            ],
-        });
-    }
-}
-function AddPvpModifiers(subInfoGroups, skill) {
-    if (skill.Pvp == null || skill.EqualizedPvp == null)
+function AddTopText(subInfoGroups, item) {
+    if (item.topText == null)
         return;
     subInfoGroups.push({
         title: "",
-        texts: [React.createElement(PvpModifiers, { skill: skill })],
+        texts: [React.createElement(TopText, __assign({}, item))],
     });
 }
-function AddBoundaries(subInfoGroups, skill) {
-    if (skill.Boundaries == null)
+function AddSkillDescriptions(subInfoGroups, item, itemCombats, jobstyle) {
+    if (item.skills == null || item.skills.length == 0)
         return;
     subInfoGroups.push({
         title: "",
-        texts: [React.createElement(SkillBoundaries, { skill: skill })],
+        texts: [
+            React.createElement(ItemSkillDescriptions, { item: item, itemCombats: itemCombats, jobstyle: jobstyle }),
+        ],
     });
 }
-function AddConditions(subInfoGroups, skill) {
-    if (skill.Tooltip.Condition.length == 0)
+function AddSkillModifiers(subInfoGroups, item, isSetBonus, jobstyle) {
+    if (item.skillModifierGroups == null || item.skillModifierGroups.length == 0)
         return;
     subInfoGroups.push({
-        title: "Terms of Use",
-        texts: [React.createElement(SkillConditions, { tooltipItems: skill.Tooltip.Condition })],
+        title: "",
+        texts: [
+            React.createElement(SkillModifiers, { skillModifierGroups: item.skillModifierGroups, isSetBonus: isSetBonus, jobstyle: jobstyle }),
+        ],
     });
 }
-function AddStances(subInfoGroups, skill) {
-    if (skill.Tooltip.Stance.length == 0)
+function AddSetBonus(subInfoGroups, item, jobstyle) {
+    if (item.setBonus == null)
         return;
     subInfoGroups.push({
-        title: "Switch Position",
-        texts: [React.createElement(SkillConditions, { tooltipItems: skill.Tooltip.Stance })],
+        title: "Set Effect:",
+        texts: [React.createElement(SetBonus, { item: item, jobstyle: jobstyle })],
     });
 }
-function AddIds(subInfoGroups, skill) {
+function AddDecomposeResults(subInfoGroups, item, client, region) {
+    if (item.decomposeRewards == null || item.decomposeRewards.length == 0)
+        return;
+    var fixedItems = []
+        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.fixedItems; })).filter(function (x) { return x != null; });
+    var randomItems = []
+        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.randomItems; })).filter(function (x) { return x != null; });
+    var selectItems = []
+        .concat.apply([], Array.from(item.decomposeRewards, function (x) { return x.selectItems; })).filter(function (x) { return x != null; });
+    if (fixedItems.length > 0)
+        subInfoGroups.push({
+            title: "Guaranteed/Salvage:",
+            texts: [
+                React.createElement(DecomposeResults, { region: region, items: fixedItems, client: client }),
+            ],
+        });
+    if (randomItems.length > 0)
+        subInfoGroups.push({
+            title: "Random:",
+            texts: [
+                React.createElement(DecomposeResults, { region: region, items: randomItems, client: client }),
+            ],
+        });
+    if (selectItems.length > 0)
+        subInfoGroups.push({
+            title: "Select:",
+            texts: [
+                React.createElement(DecomposeResults, { region: region, items: selectItems, client: client }),
+            ],
+        });
+}
+function AddJobstyleToggles(setHasSkillModifiers, subInfoGroups, jobstyles, jobstyle, setJobstyle) {
+    if (!setHasSkillModifiers)
+        return;
     subInfoGroups.push({
-        title: "Debug info",
-        texts: [React.createElement("div", null,
-                "ID: ",
-                skill.ID), React.createElement("div", null,
-                "Variation: ",
-                skill.Variation)],
+        title: "",
+        texts: [
+            React.createElement(SetBonusToggle, { jobstyles: jobstyles, jobstyle: jobstyle, setJobstyle: setJobstyle }),
+        ],
+    });
+}
+function AddDescriptions(subInfoGroups, item) {
+    if (item.descriptions == null || item.descriptions.length == 0)
+        return;
+    item.descriptions
+        .filter(function (x) { return x.text != null && x.text != ""; })
+        .forEach(function (description) {
+        subInfoGroups.push({
+            title: description.title,
+            texts: [React.createElement(ItemDescriptionText, { htmlString: description.text })],
+        });
+    });
+}
+function AddFlavorText(subInfoGroups, item) {
+    if (item.flavorText == null || item.flavorText == "")
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [React.createElement(ItemDescriptionText, { htmlString: item.flavorText })],
     });
-}
-
-var css_248z$1 = ".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: black 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";
-styleInject(css_248z$1);
-
-var SkillTooltipWrapper = function (_a) {
-    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;
-    var spanRef = useRef(null);
-    var _g = useState(null), childRef = _g[0], setChildRef = _g[1];
-    /**
-     * Mount the temporary span element.
-     * retrieve and store the target element's reference.
-     */
-    useEffect(function () {
-        if (spanRef.current) {
-            setChildRef(spanRef.current.previousElementSibling);
-        }
-        return function () { return setChildRef(null); };
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        children,
-        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(SkillTooltip, { data: data, debug: false }), theme: "grade" + 4, reference: childRef })) : (React.createElement("span", { ref: spanRef, style: { display: "none" } }))));
-};
-
-var ServerRegion;
-(function (ServerRegion) {
-    ServerRegion["EUNA"] = "EUNA";
-    ServerRegion["Korea"] = "Korea";
-    ServerRegion["KoreaTest"] = "KoreaTest";
-})(ServerRegion || (ServerRegion = {}));
-
-var css_248z = ".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 > 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";
-styleInject(css_248z);
-
-function StoreToggle(_a) {
-    var store = _a.store, isActive = _a.isActive, setActive = _a.setActive;
-    return (React.createElement("button", { className: "NpcTooltip_toggleButton " +
-            (isActive ? "NpcTooltip_toggleButton-active" : ""), onClick: setActive },
-        React.createElement("span", null, store.Name)));
-}
-
-function StoreToggleBar(_a) {
-    var stores = _a.stores, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab;
-    return (React.createElement("div", { className: "NpcTooltip_toggleBarContainer" }, stores.map(function (store, i) { return (React.createElement(StoreToggle, { key: i, store: store, isActive: activeTab === i, setActive: function () { return setActiveTab(i); } })); })));
-}
-
-var BuyLimitReset;
-(function (BuyLimitReset) {
-    BuyLimitReset[BuyLimitReset["Day"] = 0] = "Day";
-    BuyLimitReset[BuyLimitReset["Week"] = 1] = "Week";
-    BuyLimitReset[BuyLimitReset["Month"] = 2] = "Month";
-    BuyLimitReset[BuyLimitReset["Absolute"] = 3] = "Absolute";
-})(BuyLimitReset || (BuyLimitReset = {}));
-var BuyLimitType;
-(function (BuyLimitType) {
-    BuyLimitType[BuyLimitType["Character"] = 0] = "Character";
-    BuyLimitType[BuyLimitType["Account"] = 1] = "Account";
-})(BuyLimitType || (BuyLimitType = {}));
-
-function ItemBuyLimit(_a) {
-    var limit = _a.limit;
-    if (limit == null)
-        return null;
-    return (React.createElement("div", { className: "NpcTooltip_storeEntryItemLimit" }, GetStringForBuyLimitType(limit.LimitType) +
-        "Limit: " +
-        limit.Amount +
-        "/" +
-        GetStringForBuyLimitReset(limit.LimitReset)));
 }
-function GetStringForBuyLimitType(type) {
-    switch (type) {
-        case BuyLimitType.Account:
-            return "Account ";
-        case BuyLimitType.Character:
-            return "Character ";
-        default:
-            return "";
-    }
+function AddItemUsableGroup(subInfoGroups, item) {
+    if (IsNullOrEmpty(item.usableGroup))
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [React.createElement(RawText, { htmlString: item.usableGroup })],
+    });
 }
-function GetStringForBuyLimitReset(reset) {
-    switch (reset) {
-        case BuyLimitReset.Day:
-            return "Day";
-        case BuyLimitReset.Week:
-            return "Week ";
-        case BuyLimitReset.Month:
-            return "Month";
-        default:
-            return "";
-    }
-}
-
-function Money(_a) {
-    var money = _a.money;
-    var bnsmoney = getMoneyObj(money);
-    if (bnsmoney == null)
-        return null;
-    return (React.createElement("div", { className: "NpcTooltip_moneyContainer" },
-        bnsmoney.Gold > 0 ? (React.createElement("span", null,
-            bnsmoney.Gold,
-            React.createElement("img", { src: BuildIconPath("gold"), alt: "" }))) : null,
-        bnsmoney.Silver > 0 ? (React.createElement("span", null,
-            bnsmoney.Silver,
-            React.createElement("img", { src: BuildIconPath("silver"), alt: "" }))) : null,
-        bnsmoney.Copper > 0 ? (React.createElement("span", null,
-            bnsmoney.Copper,
-            React.createElement("img", { src: BuildIconPath("copper"), alt: "" }))) : null));
-}
-
-function StoreItemBuyPriceEntry(_a) {
-    var _this = this;
-    var itemRef = _a.itemRef, client = _a.client;
-    var _b = useState(), item = _b[0], setItem = _b[1];
-    useEffect(function () {
-        if (client == null)
-            return;
-        (function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = setItem;
-                        return [4 /*yield*/, client.GetItem(itemRef.itemId, itemRef.itemLevel)];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [itemRef, client]);
-    return (React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntry" }, item ? (React.createElement(ItemTooltipWrapper, { trigger: "click", data: item, region: client.region, client: client },
-        React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer" },
-            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryContainer-shadow" }),
-            React.createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" }),
-            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntryCount" },
-                React.createElement("span", null, itemRef.min))))) : null));
-}
-
-function NpcStoreEntry(_a) {
-    var _this = this;
-    var _b, _c;
-    var data = _a.data, client = _a.client;
-    var _d = useState(), item = _d[0], setItem = _d[1];
-    useEffect(function () {
-        if (client == null)
-            return;
-        (function () { return __awaiter(_this, void 0, void 0, function () {
-            var res;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, client.GetItem(data.Item.itemId, data.Item.itemLevel)];
-                    case 1:
-                        res = _a.sent();
-                        setItem(res);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [data, client]);
-    if (item != undefined) {
-        return (React.createElement("div", { className: "NpcTooltip_storeEntry" },
-            React.createElement("div", { className: "NpcTooltip_storeEntryItemIconName" },
-                React.createElement(ItemTooltipWrapper, { data: item, client: client, region: client.region, trigger: "click" },
-                    React.createElement("img", { className: "TooltipBase_iconbg-grade-" + item.grade, src: BuildIconPath(item.icon.iconPath), alt: "" })),
-                React.createElement("div", { className: "NpcTooltip_storeEntryItemNameLimit" },
-                    React.createElement("div", { className: "NpcTooltip_storeEntryItemName TooltipBase_grade-" + item.grade, dangerouslySetInnerHTML: { __html: item.name } }),
-                    React.createElement(ItemBuyLimit, { limit: data.Limit }))),
-            React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntriesContainer" },
-                ((_b = data.BuyPrice.Items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (React.createElement("div", { className: "NpcTooltip_itemBuyPriceEntries " +
-                        (data.BuyPrice.Money > 0
-                            ? "NpcTooltip_itemBuyPriceEntries-moneyMargin"
-                            : "") }, (_c = data.BuyPrice.Items) === null || _c === void 0 ? void 0 : _c.map(function (itemCountRef, i) { return (React.createElement(StoreItemBuyPriceEntry, { itemRef: itemCountRef, client: client, key: i })); }))) : null,
-                React.createElement(Money, { money: data.BuyPrice.Money }))));
-    }
-    else {
-        return null;
-    }
-}
-
-function NpcStores(_a) {
-    var stores = _a.stores, activeTab = _a.activeTab, client = _a.client;
-    var activeStore = stores[activeTab];
-    return (React.createElement("div", null, activeStore.Entries.map(function (entry, i) { return (React.createElement(NpcStoreEntry, { key: i, data: entry, client: client })); })));
-}
-
-function NpcTooltip(_a) {
-    var _this = this;
-    var _b;
-    var clientProp = _a.client, npc = _a.npc; _a.debug; var region = _a.region, _c = _a.grade, grade = _c === void 0 ? 4 : _c, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d;
-    var _e = useState(0), activeTab = _e[0], setActiveTab = _e[1];
-    var _f = useState(), client = _f[0], setClient = _f[1];
-    useEffect(function () {
-        if (clientProp == undefined) {
-            (function () { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    setClient(new ItemDownloadClient(region));
-                    return [2 /*return*/];
-                });
-            }); })();
-        }
-        else {
-            setClient(clientProp);
-        }
-    }, []);
-    var tooltipBaseProps = {
-        title: npc.Name,
-        grade: grade,
-        id: npc.Alias,
-        subtitle: (_b = npc.Title) !== null && _b !== void 0 ? _b : "",
-        fullHeight: fullHeight,
-        subInfoGroups: [],
-    };
-    //no top part
-    AddStoreToggles(tooltipBaseProps.subInfoGroups, npc.Stores, activeTab, setActiveTab);
-    AddStores(tooltipBaseProps.subInfoGroups, npc.Stores, activeTab, client);
-    return React.createElement(TooltipBase, __assign({}, tooltipBaseProps));
+function AddRequiredLevel(subInfoGroups, item) {
+    if (item.levelRequired == null || item.levelRequired <= 1)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [
+            React.createElement(TextWithNumber, { text: "Requires Level ", number: item.levelRequired }),
+        ],
+    });
 }
-function AddStoreToggles(subInfoGroups, Stores, activeTab, setActiveTab) {
+function AddRequiredJobs(subInfoGroups, item) {
+    if (item.classRequired == null || item.classRequired.length == 0)
+        return;
+    var enJobNames = item.classRequired.map(function (x) { return x.enName; });
     subInfoGroups.push({
         title: "",
         texts: [
-            React.createElement(StoreToggleBar, { stores: Stores, activeTab: activeTab, setActiveTab: setActiveTab }),
+            React.createElement(StringEnumerationWithText, { enumeration: enJobNames, textAfter: " Only", textBefore: "" }),
         ],
     });
 }
-function AddStores(subInfoGroups, Stores, activeTab, client) {
+function AddBoundToAccount(subInfoGroups, item) {
+    if (item.boundToAccount == null || item.boundToAccount == false)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [React.createElement("div", null, "Bound to Account")],
+    });
+}
+function AddAbleToTrade(subInfoGroups, item) {
+    if (item.unableToTrade == null || item.unableToTrade == false)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [React.createElement("div", null, "Unable to Trade")],
+    });
+}
+function AddSealingResult(subInfoGroups, item, client, region) {
+    if (item.sealing == null ||
+        item.sealing.sealAcquireItemId == null ||
+        item.sealing.sealConsumeItems.filter(function (x) { return x.min != 0; }).length == 0)
+        return;
+    subInfoGroups.push({
+        title: "Can be resealed with:",
+        texts: [React.createElement(SealingResult, { region: region, item: item, client: client })],
+    });
+}
+function AddAccountTransferResult(subInfoGroups, item, client, region) {
+    if (item.accountTransfer == null ||
+        item.accountTransfer.requiredItems == null ||
+        item.accountTransfer.requiredItems.length == 0)
+        return;
+    subInfoGroups.push({
+        title: "Can be transferred with:",
+        texts: [React.createElement(AccountTransfer, { region: region, item: item, client: client })],
+    });
+}
+function AddUnityPoints(subInfoGroups, item) {
+    if (item.setPoints == null || item.refinementPoints == null)
+        return;
+    if (item.setPoints === 0)
+        return;
+    if (item.refinementPoints === 0)
+        return;
     subInfoGroups.push({
         title: "",
         texts: [
-            React.createElement(NpcStores, { stores: Stores, activeTab: activeTab, client: client }),
+            React.createElement("span", null,
+                "Splendor Stone Set Points: ",
+                item.setPoints),
+            React.createElement("span", null,
+                "Splendor Stone Refinement Points: ",
+                item.refinementPoints),
         ],
     });
 }
 
-export { GetCooldownString, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
+var css_248z = "";
+styleInject(css_248z);
+
+function JsonTooltip(props) {
+    var tooltipProps = {
+        title: props.title,
+        grade: props.grade,
+        icon: props.icon,
+        mainInfos: JsonArrayToJsxArray(props.mainInfos),
+        subtitle: props.subtitle,
+        subInfoGroups: JsonSubInfoToJsxSubInfo(props.subInfoGroups),
+    };
+    return React.createElement(TooltipBase, __assign({}, tooltipProps));
+}
+function JsonSubInfoToJsxSubInfo(subInfoGroups) {
+    if (subInfoGroups == undefined)
+        return undefined;
+    var result = [];
+    subInfoGroups.forEach(function (subInfoGroup) {
+        var jsxSubInfoGroup = {
+            title: subInfoGroup.title,
+            texts: JsonArrayToJsxArray(subInfoGroup.texts),
+        };
+        result.push(jsxSubInfoGroup);
+    });
+    return result;
+}
+function JsonArrayToJsxArray(stringArray) {
+    if (stringArray == undefined)
+        return undefined;
+    var jsxArray = [];
+    stringArray.forEach(function (mainInfo) {
+        jsxArray.push(React.createElement("span", { dangerouslySetInnerHTML: { __html: mainInfo } }));
+    });
+    return jsxArray;
+}
+
+var ServerRegion;
+(function (ServerRegion) {
+    ServerRegion["EUNA"] = "EUNA";
+    ServerRegion["Korea"] = "Korea";
+    ServerRegion["KoreaTest"] = "KoreaTest";
+})(ServerRegion || (ServerRegion = {}));
+
+export { GetCooldownString, ItemTooltipComponent as ItemTooltip, ItemTooltipSettings, JsonTooltip, NpcTooltip, NpcTooltipSettings, ServerRegion, SkillTooltip, SkillTooltipSettings, TooltipBase, TooltipWrapper, TooltipWrapperSettings };
 //# sourceMappingURL=index.es.js.map