bnstooltips 1.6.5 → 1.7.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$9 = "*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n  color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n  color: #46bee1 !important;\n  font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n  color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n  color: #58ff77; }\n\n.TooltipBase_grade-none {\n  color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n  color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n  border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n  color: #6c6c6c !important;\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n  color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n  border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n  border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n  color: #ffffff !important;\n  border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n  color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n  border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n  border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n  color: #58ff77 !important;\n  border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n  color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n  border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n  border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n  color: #46bee1 !important;\n  border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n  color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n  border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n  border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n  color: #d739ff !important;\n  border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n  color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n  border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n  border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n  color: #f1b248 !important;\n  border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n  color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n  border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n  border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n  color: #ff770a !important;\n  border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n  color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n  border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n  border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n  color: #ff0084 !important;\n  border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n  box-sizing: border-box;\n  font-family: \"Montserrat\", sans-serif !important;\n  scroll-behavior: smooth;\n  touch-action: manipulation;\n  -webkit-overflow-scrolling: touch;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  background-color: rgba(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$9);
 
 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$8 = ".ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex; }\n\n.ItemTooltip_optionPadding {\n  margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_showButton:hover {\n    background-color: rgba(255, 255, 255, 0.3);\n    opacity: 1; }\n  .ItemTooltip_showButton-active {\n    background-color: rgba(255, 255, 255, 0.4) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_jobstyleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .ItemTooltip_jobstyleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px; }\n\n.ItemTooltip_subInfo {\n  font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n  font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative; }\n\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem; }\n\n.ItemTooltip_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$8);
 
 function BuildIconPath(iconPath, iconIndex) {
     if (iconPath == null)
@@ -712,6 +712,27 @@ var BnsItemApiFetchParamCreator = function (configuration) {
                 options: localVarRequestOptions,
             };
         },
+        /**
+         *
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bnsItemRegionsGet: function (options) {
+            if (options === void 0) { options = {}; }
+            var localVarPath = "/BnsItem/Regions";
+            var localVarUrlObj = url.parse(localVarPath, true);
+            var localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+            var localVarHeaderParameter = {};
+            var localVarQueryParameter = {};
+            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
+            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+            delete localVarUrlObj.search;
+            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+            return {
+                url: url.format(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          *
          * @param {string} region
@@ -978,6 +999,26 @@ var BnsItemApiFp = function (configuration) {
                 });
             };
         },
+        /**
+         *
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bnsItemRegionsGet: function (options) {
+            var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemRegionsGet(options);
+            return function (fetch, basePath) {
+                if (fetch === void 0) { fetch = isomorphicFetch; }
+                if (basePath === void 0) { basePath = BASE_PATH; }
+                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(function (response) {
+                    if (response.status >= 200 && response.status < 300) {
+                        return response.json();
+                    }
+                    else {
+                        throw response;
+                    }
+                });
+            };
+        },
         /**
          *
          * @param {string} region
@@ -1125,6 +1166,15 @@ var BnsItemApi = /** @class */ (function (_super) {
     BnsItemApi.prototype.bnsItemPingGet = function (options) {
         return BnsItemApiFp(this.configuration).bnsItemPingGet(options)(this.fetch, this.basePath);
     };
+    /**
+     *
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof BnsItemApi
+     */
+    BnsItemApi.prototype.bnsItemRegionsGet = function (options) {
+        return BnsItemApiFp(this.configuration).bnsItemRegionsGet(options)(this.fetch, this.basePath);
+    };
     /**
      *
      * @param {string} region
@@ -1220,208 +1270,11 @@ var ItemDownloadClient = /** @class */ (function () {
     return ItemDownloadClient;
 }());
 
-function ItemMainInfo(item) {
-    if (item.mainInfo != null)
-        return React.createElement("div", { dangerouslySetInnerHTML: { __html: item.mainInfo } });
-    return null;
-}
-
-function ItemSubInfo(item) {
-    if (item.subInfo != null)
-        return (React.createElement("div", { className: "ItemTooltip_subInfo", dangerouslySetInnerHTML: {
-                __html: ReplaceIconsInHtmlString(item.subInfo),
-            } }));
-    return null;
-}
-
-function ItemSkillTitles(_a) {
-    var item = _a.item, itemCombats = _a.itemCombats, jobstyle = _a.jobstyle;
-    if (item.skills == null || item.skills.length == 0)
-        return null;
-    var computedSkills = item.skills;
-    if (itemCombats) {
-        computedSkills = computedSkills.filter(function (x) { return x.jobstyle === jobstyle; });
-    }
-    computedSkills = computedSkills.filter(function (x) { return x.title != null; });
-    return (React.createElement("div", null, computedSkills.map(function (itemSkill, i) { return (React.createElement("div", { key: itemSkill.title + "_" + i, dangerouslySetInnerHTML: { __html: itemSkill.title } })); })));
-}
-
-function ItemCooldowns(item) {
-    return (React.createElement(React.Fragment, null,
-        item.cooldownInMs != 0 ? (React.createElement("div", { className: "ItemTooltip_cooldown" },
-            "Cooldown: ",
-            GetCooldownString(item.cooldownInMs))) : null,
-        item.bgCooldownInMs != 0 ? (React.createElement("div", { className: "ItemTooltip_cooldown" },
-            "Battleground Reset Time: ",
-            GetCooldownString(item.bgCooldownInMs))) : null));
-}
-function GetCooldownString(cooldownInMs) {
-    var cooldownInS = cooldownInMs / 1000;
-    if (cooldownInS >= 60) {
-        var cooldownMins = Math.floor(cooldownInS / 60);
-        var cooldownSecs = cooldownInS - cooldownMins * 60;
-        var result = "";
-        if (cooldownMins > 60) {
-            var cooldownHs = Math.floor(cooldownMins / 60);
-            cooldownMins = cooldownMins - cooldownHs * 60;
-            result += "".concat(cooldownHs, " hr. ");
-        }
-        if (cooldownMins > 0) {
-            result += "".concat(cooldownMins, " min. ");
-        }
-        if (cooldownSecs > 0) {
-            result += "".concat(cooldownSecs, " sec. ");
-        }
-        result = result.trim();
-        return result;
-    }
-    else {
-        return "".concat(cooldownInS, " sec.");
-    }
-}
-
-function removeDuplicates(stats) {
-    return stats.filter(function (value, index, self) {
-        return index === self.findIndex(function (t) { return t.name === value.name; });
-    });
-}
-function ItemStats(item) {
-    return (React.createElement("div", { className: "ItemTooltip_stats" },
-        removeDuplicates(item.stats)
-            .filter(function (x) { return x.isMainStat; })
-            .map(function (mainStat, i) {
-            if (mainStat.name.includes("-min"))
-                return;
-            var statValue = mainStat.value;
-            //minmax
-            if (mainStat.name.includes("-max")) {
-                var minVal = item.stats.find(function (x) { return x.name === mainStat.name.replace("-max", "-min"); }).value;
-                statValue = (mainStat.value + minVal) / 2;
-            }
-            return (React.createElement("div", { key: mainStat.name + "_" + i, className: "ItemTooltip_stats_mainstat" },
-                GetStatDisplayValue(statValue, mainStat.isPercentage),
-                "\u00A0",
-                ReplaceBossAndPvpAp(mainStat.name).replace("Max.", "").trim()));
-        }),
-        removeDuplicates(item.stats)
-            .filter(function (x) { return !x.isMainStat; })
-            .map(function (subStat, i) {
-            if (subStat.name.includes("-min"))
-                return;
-            var statValue = subStat.value;
-            //minmax
-            if (subStat.name.includes("-max")) {
-                var minVal = item.stats.find(function (x) { return x.name === subStat.name.replace("-max", "-min"); }).value;
-                statValue = (subStat.value + minVal) / 2;
-            }
-            return (React.createElement("div", { key: subStat.name + "_" + i, className: "ItemTooltip_stats_substat" },
-                GetStatDisplayValue(statValue, subStat.isPercentage),
-                "\u00A0",
-                ReplaceBossAndPvpAp(subStat.name).replace("Max.", "").trim()));
-        })));
-}
-
-function ItemRandomStats(item) {
-    return (React.createElement("div", { className: "ItemTooltip_stats" }, item.randomStats.map(function (randomStat, i) {
-        return (React.createElement("div", { key: randomStat.name + "_" + i, className: randomStat.isMainStat
-                ? "ItemTooltip_stats_mainstat"
-                : "ItemTooltip_stats_substat" },
-            GetStatDisplayValue(randomStat.min, randomStat.isPercentage),
-            "~",
-            GetStatDisplayValue(randomStat.max, randomStat.isPercentage),
-            "\u00A0",
-            ReplaceBossAndPvpAp(randomStat.name),
-            React.createElement("img", { alt: "", className: "ItemTooltip_itemIconInline ItemTooltip_itemIconRandom", src: BuildIconPath("00015590/Tag_Random") })));
-    })));
-}
-
-function GearScore(item) {
-    return (React.createElement("div", null,
-        "debug-gs: ",
-        item.gearScore,
-        React.createElement("br", null),
-        "debug-is: ",
-        item.itemScore,
-        React.createElement("br", null),
-        "debug-fs: ",
-        item.fusionScore));
-}
-
-function TopText(item) {
-    return (React.createElement("div", { className: "ItemTooltip_toptext", dangerouslySetInnerHTML: { __html: item.topText } }));
-}
-
-function ItemSkillDescriptions(_a) {
-    var item = _a.item, itemCombats = _a.itemCombats, jobstyle = _a.jobstyle;
-    if (item.skills == null || item.skills.length == 0)
-        return null;
-    var computedSkills = item.skills;
-    if (itemCombats) {
-        computedSkills = computedSkills.filter(function (x) { return x.jobstyle === jobstyle; });
-    }
-    computedSkills = computedSkills.filter(function (x) { return x.description != null; });
-    return (React.createElement("div", { className: "ItemTooltip_skilldescs 00008130.UI.Label_Green03_12" }, computedSkills.map(function (skill, i) { return (React.createElement("div", { key: skill.title + "_" + i, dangerouslySetInnerHTML: { __html: skill.description } })); })));
-}
-
-function SkillModifierGroup(props) {
-    var modifierGroup = props.modifierGroup;
-    return (React.createElement(React.Fragment, null, modifierGroup.modifiers.map(function (modifier, i) { return (React.createElement("div", { key: "modifier_" + i },
-        modifier.skills.map(function (skill, i2) { return (React.createElement(React.Fragment, { key: skill.item2 + "_" + i + "_" + i2 },
-            React.createElement("span", { className: "00008130.UI.Vital_LightBlue", dangerouslySetInnerHTML: { __html: skill.item2 } }),
-            i2 != modifier.skills.length - 1 ? React.createElement(React.Fragment, null, ",\u00A0") : null)); }),
-        "\u00A0",
-        GetTextForVerb(modifier.verb),
-        "\u00A0",
-        Math.abs(modifier.value) / 10,
-        "%")); })));
-}
-function GetTextForVerb(verb) {
-    if (verb === "percentDamage")
-        return "Damage increases by";
-    if (verb === "percentCD")
-        return "Cooldown decreases by";
-    return "";
-}
-
-function SkillModifiers(props) {
-    var modifierGroups = props.skillModifierGroups;
-    if (props.isSetBonus) {
-        modifierGroups = modifierGroups.filter(function (x) { return x.jobstyle === props.jobstyle; });
-    }
-    return (React.createElement("div", { className: "ItemTooltip_skilldescs 00008130.UI.Label_Green03_12" }, modifierGroups.map(function (skillModifierGroup, i) { return (React.createElement(SkillModifierGroup, { key: "skillModifierGroup_" + i, modifierGroup: skillModifierGroup })); })));
-}
-
-function SetBonusItems(setBonus) {
-    var items = setBonus.setItems;
-    if (items.length >= 8)
-        return null;
-    return (React.createElement("div", { className: "ItemTooltip_setItemsContainer" },
-        React.createElement("div", { className: "ItemTooltip_setItemsSubContainer" }, items.map(function (item, i) {
-            return (React.createElement("div", { key: item.itemName + "_" + i, className: "ItemTooltip_setItemIconNameDiv" },
-                item.itemIcon != null ? (React.createElement("img", { alt: "", className: "ItemTooltip_itemIconSmall", src: BuildIconPath(item.itemIcon.iconPath) })) : null,
-                React.createElement("span", { dangerouslySetInnerHTML: { __html: item.itemName } })));
-        }))));
-}
-
-function SetBonus(props) {
-    var item = props.item, jobstyle = props.jobstyle;
-    return (React.createElement("div", { className: "ItemTooltip_setBonus" },
-        React.createElement("div", null,
-            item.setBonus.setName != "" ? (React.createElement("div", { className: "00008130.UI.Vital_LightBlue", dangerouslySetInnerHTML: { __html: item.setBonus.setName } })) : null,
-            React.createElement(SetBonusItems, __assign({}, item.setBonus)),
-            React.createElement("div", { className: "ItemTooltip_setContainer" }, item.setBonus.setBonusStages
-                .sort(function (a, b) { return a.setNumber - b.setNumber; })
-                .map(function (setStage) { return (React.createElement("div", { key: setStage.setNumber, className: "ItemTooltip_setStageContainer" },
-                React.createElement("div", null,
-                    React.createElement("div", { className: "ItemTooltip_setStageNumber" },
-                        React.createElement("span", null, setStage.setNumber))),
-                React.createElement("div", { className: "ItemTooltip_setStageContent 00008130.UI.Label_Green03_12" },
-                    setStage.effects.map(function (effect, i) { return (React.createElement("div", { key: i, dangerouslySetInnerHTML: { __html: effect.description } })); }),
-                    React.createElement(SkillModifiers, { jobstyle: jobstyle, isSetBonus: true, skillModifierGroups: setStage.skillModifiers })))); })))));
-}
+var css_248z$7 = ".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$7);
 
-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 css_248z$6 = "";
+styleInject(css_248z$6);
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1579,33 +1432,36 @@ 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;
 
-  return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
+  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,
+    height: rect.height / scaleY,
     top: rect.top / scaleY,
     right: rect.right / scaleX,
     bottom: rect.bottom / scaleY,
@@ -1720,6 +1576,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 +1616,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 +1754,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 +1770,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 +1811,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 +1831,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 +1851,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 +1876,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 +2135,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 +2652,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 +2669,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 +2697,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 +2767,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 +2780,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 +2799,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) {
@@ -5545,13 +5447,216 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 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}";
+var css_248z$5 = ".ItemImproveTooltip_option {\n  margin: .2rem 0; }\n\n.ItemImproveTooltip_moneyContainer {\n  padding: 0 0 0.15rem 0.33rem; }\n";
+styleInject(css_248z$5);
+
+function ItemMainInfo(item) {
+    if (item.mainInfo != null)
+        return React.createElement("div", { dangerouslySetInnerHTML: { __html: item.mainInfo } });
+    return null;
+}
+
+function ItemSubInfo(item) {
+    if (item.subInfo != null)
+        return (React.createElement("div", { className: "ItemTooltip_subInfo", dangerouslySetInnerHTML: {
+                __html: ReplaceIconsInHtmlString(item.subInfo),
+            } }));
+    return null;
+}
+
+function ItemSkillTitles(_a) {
+    var item = _a.item, itemCombats = _a.itemCombats, jobstyle = _a.jobstyle;
+    if (item.skills == null || item.skills.length == 0)
+        return null;
+    var computedSkills = item.skills;
+    if (itemCombats) {
+        computedSkills = computedSkills.filter(function (x) { return x.jobstyle === jobstyle; });
+    }
+    computedSkills = computedSkills.filter(function (x) { return x.title != null; });
+    return (React.createElement("div", null, computedSkills.map(function (itemSkill, i) { return (React.createElement("div", { key: itemSkill.title + "_" + i, dangerouslySetInnerHTML: { __html: itemSkill.title } })); })));
+}
+
+function ItemCooldowns(item) {
+    return (React.createElement(React.Fragment, null,
+        item.cooldownInMs != 0 ? (React.createElement("div", { className: "ItemTooltip_cooldown" },
+            "Cooldown: ",
+            GetCooldownString(item.cooldownInMs))) : null,
+        item.bgCooldownInMs != 0 ? (React.createElement("div", { className: "ItemTooltip_cooldown" },
+            "Battleground Reset Time: ",
+            GetCooldownString(item.bgCooldownInMs))) : null));
+}
+function GetCooldownString(cooldownInMs) {
+    var cooldownInS = cooldownInMs / 1000;
+    if (cooldownInS >= 60) {
+        var cooldownMins = Math.floor(cooldownInS / 60);
+        var cooldownSecs = cooldownInS - cooldownMins * 60;
+        var result = "";
+        if (cooldownMins > 60) {
+            var cooldownHs = Math.floor(cooldownMins / 60);
+            cooldownMins = cooldownMins - cooldownHs * 60;
+            result += "".concat(cooldownHs, " hr. ");
+        }
+        if (cooldownMins > 0) {
+            result += "".concat(cooldownMins, " min. ");
+        }
+        if (cooldownSecs > 0) {
+            result += "".concat(cooldownSecs, " sec. ");
+        }
+        result = result.trim();
+        return result;
+    }
+    else {
+        return "".concat(cooldownInS, " sec.");
+    }
+}
+
+function removeDuplicates(stats) {
+    return stats.filter(function (value, index, self) {
+        return index === self.findIndex(function (t) { return t.name === value.name; });
+    });
+}
+function ItemStats(item) {
+    return (React.createElement("div", { className: "ItemTooltip_stats" },
+        removeDuplicates(item.stats)
+            .filter(function (x) { return x.isMainStat; })
+            .map(function (mainStat, i) {
+            if (mainStat.name.includes("-min"))
+                return;
+            var statValue = mainStat.value;
+            //minmax
+            if (mainStat.name.includes("-max")) {
+                var minVal = item.stats.find(function (x) { return x.name === mainStat.name.replace("-max", "-min"); }).value;
+                statValue = (mainStat.value + minVal) / 2;
+            }
+            return (React.createElement("div", { key: mainStat.name + "_" + i, className: "ItemTooltip_stats_mainstat" },
+                GetStatDisplayValue(statValue, mainStat.isPercentage),
+                "\u00A0",
+                ReplaceBossAndPvpAp(mainStat.name).replace("Max.", "").trim()));
+        }),
+        removeDuplicates(item.stats)
+            .filter(function (x) { return !x.isMainStat; })
+            .map(function (subStat, i) {
+            if (subStat.name.includes("-min"))
+                return;
+            var statValue = subStat.value;
+            //minmax
+            if (subStat.name.includes("-max")) {
+                var minVal = item.stats.find(function (x) { return x.name === subStat.name.replace("-max", "-min"); }).value;
+                statValue = (subStat.value + minVal) / 2;
+            }
+            return (React.createElement("div", { key: subStat.name + "_" + i, className: "ItemTooltip_stats_substat" },
+                GetStatDisplayValue(statValue, subStat.isPercentage),
+                "\u00A0",
+                ReplaceBossAndPvpAp(subStat.name).replace("Max.", "").trim()));
+        })));
+}
+
+function ItemRandomStats(item) {
+    return (React.createElement("div", { className: "ItemTooltip_stats" }, item.randomStats.map(function (randomStat, i) {
+        return (React.createElement("div", { key: randomStat.name + "_" + i, className: randomStat.isMainStat
+                ? "ItemTooltip_stats_mainstat"
+                : "ItemTooltip_stats_substat" },
+            GetStatDisplayValue(randomStat.min, randomStat.isPercentage),
+            "~",
+            GetStatDisplayValue(randomStat.max, randomStat.isPercentage),
+            "\u00A0",
+            ReplaceBossAndPvpAp(randomStat.name),
+            React.createElement("img", { alt: "", className: "ItemTooltip_itemIconInline ItemTooltip_itemIconRandom", src: BuildIconPath("00015590/Tag_Random") })));
+    })));
+}
+
+function GearScore(item) {
+    return (React.createElement("div", null,
+        "debug-gs: ",
+        item.gearScore,
+        React.createElement("br", null),
+        "debug-is: ",
+        item.itemScore,
+        React.createElement("br", null),
+        "debug-fs: ",
+        item.fusionScore));
+}
+
+function TopText(item) {
+    return (React.createElement("div", { className: "ItemTooltip_toptext", dangerouslySetInnerHTML: { __html: item.topText } }));
+}
+
+function ItemSkillDescriptions(_a) {
+    var item = _a.item, itemCombats = _a.itemCombats, jobstyle = _a.jobstyle;
+    if (item.skills == null || item.skills.length == 0)
+        return null;
+    var computedSkills = item.skills;
+    if (itemCombats) {
+        computedSkills = computedSkills.filter(function (x) { return x.jobstyle === jobstyle; });
+    }
+    computedSkills = computedSkills.filter(function (x) { return x.description != null; });
+    return (React.createElement("div", { className: "ItemTooltip_skilldescs 00008130.UI.Label_Green03_12" }, computedSkills.map(function (skill, i) { return (React.createElement("div", { key: skill.title + "_" + i, dangerouslySetInnerHTML: { __html: skill.description } })); })));
+}
+
+function SkillModifierGroup(props) {
+    var modifierGroup = props.modifierGroup;
+    return (React.createElement(React.Fragment, null, modifierGroup.modifiers.map(function (modifier, i) { return (React.createElement("div", { key: "modifier_" + i },
+        modifier.skills.map(function (skill, i2) { return (React.createElement(React.Fragment, { key: skill.item2 + "_" + i + "_" + i2 },
+            React.createElement("span", { className: "00008130.UI.Vital_LightBlue", dangerouslySetInnerHTML: { __html: skill.item2 } }),
+            i2 != modifier.skills.length - 1 ? React.createElement(React.Fragment, null, ",\u00A0") : null)); }),
+        "\u00A0",
+        GetTextForVerb(modifier.verb),
+        "\u00A0",
+        Math.abs(modifier.value) / 10,
+        "%")); })));
+}
+function GetTextForVerb(verb) {
+    if (verb === "percentDamage")
+        return "Damage increases by";
+    if (verb === "percentCD")
+        return "Cooldown decreases by";
+    return "";
+}
+
+function SkillModifiers(props) {
+    var modifierGroups = props.skillModifierGroups;
+    if (props.isSetBonus) {
+        modifierGroups = modifierGroups.filter(function (x) { return x.jobstyle === props.jobstyle; });
+    }
+    return (React.createElement("div", { className: "ItemTooltip_skilldescs 00008130.UI.Label_Green03_12" }, modifierGroups.map(function (skillModifierGroup, i) { return (React.createElement(SkillModifierGroup, { key: "skillModifierGroup_" + i, modifierGroup: skillModifierGroup })); })));
+}
+
+function SetBonusItems(setBonus) {
+    var items = setBonus.setItems;
+    if (items.length >= 8)
+        return null;
+    return (React.createElement("div", { className: "ItemTooltip_setItemsContainer" },
+        React.createElement("div", { className: "ItemTooltip_setItemsSubContainer" }, items.map(function (item, i) {
+            return (React.createElement("div", { key: item.itemName + "_" + i, className: "ItemTooltip_setItemIconNameDiv" },
+                item.itemIcon != null ? (React.createElement("img", { alt: "", className: "ItemTooltip_itemIconSmall", src: BuildIconPath(item.itemIcon.iconPath) })) : null,
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: item.itemName } })));
+        }))));
+}
+
+function SetBonus(props) {
+    var item = props.item, jobstyle = props.jobstyle;
+    return (React.createElement("div", { className: "ItemTooltip_setBonus" },
+        React.createElement("div", null,
+            item.setBonus.setName != "" ? (React.createElement("div", { className: "00008130.UI.Vital_LightBlue", dangerouslySetInnerHTML: { __html: item.setBonus.setName } })) : null,
+            React.createElement(SetBonusItems, __assign({}, item.setBonus)),
+            React.createElement("div", { className: "ItemTooltip_setContainer" }, item.setBonus.setBonusStages
+                .sort(function (a, b) { return a.setNumber - b.setNumber; })
+                .map(function (setStage) { return (React.createElement("div", { key: setStage.setNumber, className: "ItemTooltip_setStageContainer" },
+                React.createElement("div", null,
+                    React.createElement("div", { className: "ItemTooltip_setStageNumber" },
+                        React.createElement("span", null, setStage.setNumber))),
+                React.createElement("div", { className: "ItemTooltip_setStageContent 00008130.UI.Label_Green03_12" },
+                    setStage.effects.map(function (effect, i) { return (React.createElement("div", { key: i, dangerouslySetInnerHTML: { __html: effect.description } })); }),
+                    React.createElement(SkillModifiers, { jobstyle: jobstyle, isSetBonus: true, skillModifierGroups: setStage.skillModifiers })))); })))));
+}
+
+var css_248z$4 = ".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$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 data = _a.data, region = _a.region, children = _a.children, client = _a.client, _b = _a.showUpgrade, showUpgrade = _b === void 0 ? false : _b, _c = _a.offline, offline = _c === void 0 ? false : _c, _d = _a.interactive, interactive = _d === void 0 ? true : _d, _e = _a.placement, placement = _e === void 0 ? "right" : _e, _f = _a.debug, debug = _f === void 0 ? false : _f, jobstyleOverride = _a.jobstyleOverride, _g = _a.followCursor, followCursor$1 = _g === void 0 ? false : _g, _h = _a.trigger, trigger = _h === void 0 ? "mouseenter focus" : _h, _j = _a.showArrow, showArrow = _j === void 0 ? true : _j;
     var spanRef = useRef(null);
-    var _j = useState(null), childRef = _j[0], setChildRef = _j[1];
+    var _k = useState(null), childRef = _k[0], setChildRef = _k[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -5562,16 +5667,16 @@ var ItemTooltipWrapper = function (_a) {
         }
         return function () { return setChildRef(null); };
     }, []);
-    var _k = useState(true), isOffline = _k[0], setIsOffline = _k[1];
+    var _l = useState(true), isOffline = _l[0], setIsOffline = _l[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" } }))));
+        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, showUpgrade: showUpgrade, debug: debug }), theme: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 };
 
 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 item = _a.item, region = _a.region, client = _a.client, _c = _a.showRandomIcon, showRandomIcon = _c === void 0 ? false : _c, trigger = _a.trigger, interactive = _a.interactive, showUpgrade = _a.showUpgrade;
     var _d = useState(), itemData = _d[0], setItemData = _d[1];
     useEffect(function () {
         if (client)
@@ -5592,7 +5697,7 @@ function ItemIconNameDiv(_a) {
     if (itemData) {
         if (itemData.grade != 0)
             return (React.createElement("div", { className: "ItemTooltip_itemiconnamediv" },
-                React.createElement(ItemTooltipWrapper, { region: region, client: client, data: itemData },
+                React.createElement(ItemTooltipWrapper, { showUpgrade: showUpgrade, region: region, client: client, data: itemData, trigger: trigger, interactive: interactive },
                     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 } }),
@@ -5621,7 +5726,7 @@ function DecomposeResults(props) {
             .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 }),
+                React.createElement(ItemIconNameDiv, { showUpgrade: props.showUpgrade, 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)))))));
@@ -5674,7 +5779,7 @@ function SealingResult(_a) {
     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 }),
+        React.createElement(ItemIconNameDiv, { showUpgrade: false, region: region, item: consumeItem, client: client }),
         "\u00A0",
         GetRangeString(consumeItem.min))); })));
 }
@@ -5683,7 +5788,7 @@ 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 }),
+            React.createElement(ItemIconNameDiv, { showUpgrade: false, region: region, client: client, item: consumeItem }),
             "\u00A0",
             GetRangeString(consumeItem.min))); }),
         item.accountTransfer.moneyCost != null &&
@@ -5692,12 +5797,131 @@ function AccountTransfer(_a) {
             "\u00A0copper")) : null));
 }
 
+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 ItemImproveTooltip(_a) {
+    var _this = this;
+    var data = _a.data, region = _a.region; _a.debug; var _c = _a.offline, offline = _c === void 0 ? false : _c, clientProp = _a.client, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d;
+    var _e = useState(), client = _e[0], setClient = _e[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]);
+    var tooltipBaseProps = {
+        title: "Item Upgrade",
+        grade: 4,
+        id: "item_upgrade_info",
+        icon: "",
+        subtitle: "Info",
+        mainInfos: [],
+        subInfoGroups: [],
+        fullHeight: fullHeight,
+    };
+    if (!offline) {
+        if (data.itemResult != null) {
+            // if (data.useMileageSave != null && data.useMileageSave === true)
+            //   tooltipBaseProps.mainInfos.push(
+            //     <div>The upgrade change is 100% when the mileage meter is filled.</div>
+            //   );
+            tooltipBaseProps.subInfoGroups.push({
+                title: "Next Upgrade:",
+                texts: [
+                    React.createElement(ItemIconNameDiv, { showUpgrade: true, client: client, region: region, item: data.itemResult, interactive: true })
+                ]
+            });
+            var costGroup = {
+                title: "Upgrade Cost:",
+                texts: []
+            };
+            if (data.itemCost != null && data.itemCost.length > 0)
+                costGroup.texts.push(React.createElement(DecomposeResults, { showUpgrade: false, client: client, region: region, items: data.itemCost }));
+            if (data.moneyCost != null && data.moneyCost > 0) {
+                costGroup.texts.push(React.createElement("div", { className: "TooltipBase_flex ItemImproveTooltip_moneyContainer" },
+                    React.createElement("span", { className: "TooltipBase_grade-6" }, "Money:\u00A0"),
+                    React.createElement(Money, { money: data.moneyCost })));
+            }
+            tooltipBaseProps.subInfoGroups.push(costGroup);
+        }
+    }
+    if (data.options != null && data.options.length > 0) {
+        tooltipBaseProps.mainInfos.push(React.createElement("div", null, "Random effects can be obtained when upgrading."));
+        var subInfoGroupStats_1 = {
+            title: "Possible Stats:",
+            texts: []
+        };
+        var subInfoGroupEffects_1 = {
+            title: "Possible Effects:",
+            texts: []
+        };
+        data.options.forEach(function (option) {
+            if (option.isEffect) {
+                subInfoGroupEffects_1.texts.push(React.createElement("div", { className: "ItemImproveTooltip_option", dangerouslySetInnerHTML: { __html: option.effectDescription } }));
+            }
+            else {
+                subInfoGroupStats_1.texts.push(React.createElement("div", { className: "ItemImproveTooltip_option 00008130.Program.Fontset_Chatting_Color_19" },
+                    option.statValue,
+                    "\u00A0",
+                    React.createElement("span", { dangerouslySetInnerHTML: { __html: option.statName } })));
+            }
+        });
+        tooltipBaseProps.subInfoGroups.push(subInfoGroupStats_1);
+        tooltipBaseProps.subInfoGroups.push(subInfoGroupEffects_1);
+    }
+    return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
+}
+
+var ItemImproveTooltipWrapper = 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, _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(ItemImproveTooltip, { region: region, data: data, offline: isOffline, client: client, debug: debug }), theme: "grade8", reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+};
+
 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];
+    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.showUpgrade, showUpgrade = _g === void 0 ? false : _g, _h = _a.fullHeight, fullHeight = _h === void 0 ? false : _h;
+    var _j = useState("advanced-1"), jobstyle = _j[0], setJobstyle = _j[1];
+    var _k = useState(), client = _k[0], setClient = _k[1];
     useEffect(function () {
         if (offline)
             return;
@@ -5770,6 +5994,8 @@ function ItemTooltip(_a) {
     AddJobstyleToggles(setHasSkillModifiers, tooltipBaseProps.subInfoGroups, jobstyles, jobstyle, setJobstyle);
     AddTopText(tooltipBaseProps.subInfoGroups, item);
     AddSkillDescriptions(tooltipBaseProps.subInfoGroups, item, itemCombats, jobstyle);
+    if (showUpgrade)
+        AddItemImprove(tooltipBaseProps.subInfoGroups, item, region, client, offline, debug);
     AddSkillModifiers(tooltipBaseProps.subInfoGroups, item, false, jobstyle);
     AddSetBonus(tooltipBaseProps.subInfoGroups, item, jobstyle);
     if (!offline) {
@@ -5876,21 +6102,21 @@ function AddDecomposeResults(subInfoGroups, item, client, region) {
         subInfoGroups.push({
             title: "Guaranteed/Salvage:",
             texts: [
-                React.createElement(DecomposeResults, { region: region, items: fixedItems, client: client }),
+                React.createElement(DecomposeResults, { showUpgrade: false, region: region, items: fixedItems, client: client }),
             ],
         });
     if (randomItems.length > 0)
         subInfoGroups.push({
             title: "Random:",
             texts: [
-                React.createElement(DecomposeResults, { region: region, items: randomItems, client: client }),
+                React.createElement(DecomposeResults, { showUpgrade: false, region: region, items: randomItems, client: client }),
             ],
         });
     if (selectItems.length > 0)
         subInfoGroups.push({
             title: "Select:",
             texts: [
-                React.createElement(DecomposeResults, { region: region, items: selectItems, client: client }),
+                React.createElement(DecomposeResults, { showUpgrade: false, region: region, items: selectItems, client: client }),
             ],
         });
 }
@@ -6007,6 +6233,19 @@ function AddUnityPoints(subInfoGroups, item) {
                 item.refinementPoints),
         ],
     });
+}
+function AddItemImprove(subInfoGroups, item, region, client, offline, debug) {
+    if (item.itemImprove == null)
+        return;
+    var subInfoGroup = {
+        title: "Upgrade Options:",
+        texts: [
+            React.createElement("div", { className: "ItemTooltip_optionPadding" },
+                React.createElement(ItemImproveTooltipWrapper, { data: item.itemImprove, region: region, trigger: "click", interactive: true, offline: offline, client: client, debug: debug },
+                    React.createElement("span", { className: "ItemTooltip_showButton" }, "Click to open")))
+        ]
+    };
+    subInfoGroups.push(subInfoGroup);
 }
 
 var css_248z$3 = "";
@@ -6342,7 +6581,7 @@ var SkillTooltipWrapper = function (_a) {
     }, []);
     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" } }))));
+        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", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 };
 
 var ServerRegion;
@@ -6413,23 +6652,6 @@ function GetStringForBuyLimitReset(reset) {
     }
 }
 
-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;
@@ -6534,11 +6756,13 @@ function NpcTooltip(_a) {
         subInfoGroups: [],
     };
     //no top part
-    AddStoreToggles(tooltipBaseProps.subInfoGroups, npc.Stores, activeTab, setActiveTab);
-    AddStores(tooltipBaseProps.subInfoGroups, npc.Stores, activeTab, client);
+    AddStoreToggles(tooltipBaseProps.subInfoGroups, activeTab, setActiveTab, npc.Stores);
+    AddStores(tooltipBaseProps.subInfoGroups, activeTab, client, npc.Stores);
     return React.createElement(TooltipBase, __assign({}, tooltipBaseProps));
 }
-function AddStoreToggles(subInfoGroups, Stores, activeTab, setActiveTab) {
+function AddStoreToggles(subInfoGroups, activeTab, setActiveTab, Stores) {
+    if (Stores == null || Stores.length <= 0)
+        return;
     subInfoGroups.push({
         title: "",
         texts: [
@@ -6546,7 +6770,9 @@ function AddStoreToggles(subInfoGroups, Stores, activeTab, setActiveTab) {
         ],
     });
 }
-function AddStores(subInfoGroups, Stores, activeTab, client) {
+function AddStores(subInfoGroups, activeTab, client, Stores) {
+    if (Stores == null || Stores.length <= 0)
+        return;
     subInfoGroups.push({
         title: "",
         texts: [
@@ -6555,5 +6781,5 @@ function AddStores(subInfoGroups, Stores, activeTab, client) {
     });
 }
 
-export { GetCooldownString, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
+export { GetCooldownString, ItemImproveTooltip, ItemImproveTooltipWrapper, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
 //# sourceMappingURL=index.es.js.map