bnstooltips 1.7.4 → 1.8.0

package/build/index.es.js

@@ -30,12 +30,12 @@ function styleInject(css, ref) {
   }
 }
 
-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);
+var css_248z$d = "*[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.TooltipBase_downgradeBlue {\n  color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n  color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n  .TooltipBase_container {\n    width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n  .TooltipBase_container {\n    background-color: rgba(0, 0, 0, 0.95); }\n  .TooltipBase_container-loading {\n    background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n  background-color: rgba(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$d);
 
 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;
-    return (React.createElement("div", { "data-contentid": id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", className: "TooltipBase_container TooltipBase_border-grade-".concat(grade, " ").concat(fullHeight ? "TooltipBase_containerFullHeight" : "") },
+    var title = _a.title, category = _a.subtitle, grade = _a.grade, _b = _a.icon, icon = _b === void 0 ? "" : _b, _c = _a.mainInfos, mainTexts = _c === void 0 ? [] : _c, _d = _a.subInfoGroups, subTexts = _d === void 0 ? [] : _d, id = _a.id, _e = _a.fullHeight, fullHeight = _e === void 0 ? false : _e, widthOverride = _a.widthOverride;
+    return (React.createElement("div", { "data-contentid": id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", style: widthOverride != null ? { width: widthOverride } : {}, className: "TooltipBase_container TooltipBase_border-grade-".concat(grade, " ").concat(fullHeight ? "TooltipBase_containerFullHeight" : "") },
         (title != null && title != "") ||
             (category != null && category != "") ? (React.createElement("div", { className: "TooltipBase_titlesubtitle" },
             React.createElement("div", { className: "TooltipBase_title" },
@@ -133,8 +133,8 @@ function __generator(thisArg, body) {
     }
 }
 
-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);
+var css_248z$c = ".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$c);
 
 function BuildIconPath(iconPath, iconIndex) {
     if (iconPath == null)
@@ -396,6 +396,43 @@ var BnsItemApiFetchParamCreator = function (configuration) {
                 options: localVarRequestOptions,
             };
         },
+        /**
+         *
+         * @param {number} [itemId]
+         * @param {number} [itemLevel]
+         * @param {string} [region]
+         * @param {string} [patch]
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bnsItemAllUpgradesForItemGet: function (itemId, itemLevel, region, patch, options) {
+            if (options === void 0) { options = {}; }
+            var localVarPath = "/BnsItem/AllUpgradesForItem";
+            var localVarUrlObj = url.parse(localVarPath, true);
+            var localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+            var localVarHeaderParameter = {};
+            var localVarQueryParameter = {};
+            if (itemId !== undefined) {
+                localVarQueryParameter['itemId'] = itemId;
+            }
+            if (itemLevel !== undefined) {
+                localVarQueryParameter['itemLevel'] = itemLevel;
+            }
+            if (region !== undefined) {
+                localVarQueryParameter['region'] = region;
+            }
+            if (patch !== undefined) {
+                localVarQueryParameter['patch'] = patch;
+            }
+            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} idLevel
@@ -814,6 +851,30 @@ var BnsItemApiFp = function (configuration) {
                 });
             };
         },
+        /**
+         *
+         * @param {number} [itemId]
+         * @param {number} [itemLevel]
+         * @param {string} [region]
+         * @param {string} [patch]
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        bnsItemAllUpgradesForItemGet: function (itemId, itemLevel, region, patch, options) {
+            var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemAllUpgradesForItemGet(itemId, itemLevel, region, patch, 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} idLevel
@@ -1069,6 +1130,19 @@ var BnsItemApi = /** @class */ (function (_super) {
     BnsItemApi.prototype.bnsItemAddedOrModifiedItemsGet = function (added, modified, region, patch, options) {
         return BnsItemApiFp(this.configuration).bnsItemAddedOrModifiedItemsGet(added, modified, region, patch, options)(this.fetch, this.basePath);
     };
+    /**
+     *
+     * @param {number} [itemId]
+     * @param {number} [itemLevel]
+     * @param {string} [region]
+     * @param {string} [patch]
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof BnsItemApi
+     */
+    BnsItemApi.prototype.bnsItemAllUpgradesForItemGet = function (itemId, itemLevel, region, patch, options) {
+        return BnsItemApiFp(this.configuration).bnsItemAllUpgradesForItemGet(itemId, itemLevel, region, patch, options)(this.fetch, this.basePath);
+    };
     /**
      *
      * @param {string} idLevel
@@ -1266,15 +1340,41 @@ var ItemDownloadClient = /** @class */ (function () {
             });
         });
     };
+    ItemDownloadClient.prototype.GetItemUpgrades = function (item) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.instance.bnsItemAllUpgradesForItemGet(item.id, item.level, this.region, this.patch)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, result];
+                }
+            });
+        });
+    };
+    ItemDownloadClient.prototype.GetItemUpgradesByIdLevel = function (id, level) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.instance.bnsItemAllUpgradesForItemGet(id, level, this.region, this.patch)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, result];
+                }
+            });
+        });
+    };
     ItemDownloadClient.urlBase = "https://bnsitemstoragewebapi.azurewebsites.net";
     return ItemDownloadClient;
 }());
 
-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$b = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
+styleInject(css_248z$b);
 
-var css_248z$6 = "";
-styleInject(css_248z$6);
+var css_248z$a = "";
+styleInject(css_248z$a);
 
 var top = 'top';
 var bottom = 'bottom';
@@ -5447,8 +5547,501 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-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);
+var css_248z$9 = ".ItemImproveTooltip_PrevCurNext {\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .ItemImproveTooltip_PrevCurNext_container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 90%; }\n    .ItemImproveTooltip_PrevCurNext_container > div {\n      margin: 0 .5rem;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChild {\n      flex: 3; }\n    .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n      flex: 3.5; }\n      .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n        display: flex;\n        justify-content: center;\n        align-items: center; }\n        .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n          border: solid 1px rgba(233, 233, 233, 0.5);\n          border-radius: 3px;\n          padding: 1rem 0;\n          cursor: pointer;\n          opacity: .8; }\n          .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n            opacity: 1;\n            filter: brightness(1.5); }\n    .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n      flex: 1; }\n      .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n        cursor: pointer;\n        opacity: .8; }\n        .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n          opacity: 1;\n          filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center; }\n  .ItemImproveTooltip_ItemWithText_icon {\n    width: 56px;\n    height: 56px; }\n  .ItemImproveTooltip_ItemWithText_iconSmall {\n    width: 40px;\n    height: 40px; }\n  .ItemImproveTooltip_ItemWithText_iconPad {\n    border-width: 2px;\n    border-color: rgba(233, 233, 233, 0.5);\n    border-style: solid;\n    border-radius: 3px;\n    padding: 1px;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .ItemImproveTooltip_ItemWithText_name {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center; }\n\n.ItemImproveUpgradeCost {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin-top: 2rem;\n  margin-bottom: 1rem; }\n  .ItemImproveUpgradeCost_title {\n    text-align: center;\n    font-size: 24px;\n    padding: 1rem; }\n  .ItemImproveUpgradeCost > div {\n    width: 100%; }\n\n.SubCostSelector {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-top: .33rem;\n  margin-bottom: .5rem; }\n  .SubCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 2; }\n\n.MainCostSelector {\n  margin: .33rem 0 .5rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n  .MainCostSelector > div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex: 2; }\n  .MainCostSelector_or {\n    flex: .2 !important;\n    padding: 0 .33rem;\n    font-size: 18px; }\n  .MainCostSelector_container {\n    display: flex;\n    flex-direction: column; }\n";
+styleInject(css_248z$9);
+
+var css_248z$8 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
+styleInject(css_248z$8);
+
+var ItemTooltipWrapper = function (_a) {
+    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 _k = useState(null), childRef = _k[0], setChildRef = _k[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 _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, showUpgrade: showUpgrade, debug: debug }), theme: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+};
+
+function ItemWithText(_a) {
+    var _this = this;
+    var _b, _c;
+    var borderClass = _a.borderClass, itemProp = _a.item, itemLevel = _a.itemLevel, itemId = _a.itemId, client = _a.client, region = _a.region, tooltip = _a.tooltip, _d = _a.small, small = _d === void 0 ? false : _d;
+    var _e = useState(), item = _e[0], setItem = _e[1];
+    useEffect(function () {
+        if (itemProp == null) {
+            (function () { return __awaiter(_this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = setItem;
+                            return [4 /*yield*/, client.GetItem(itemId, itemLevel)];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }
+        else {
+            setItem(itemProp);
+        }
+    }, [itemProp, itemId, itemLevel]);
+    if (item == null)
+        return null;
+    return (React.createElement("div", { className: "ItemImproveTooltip_ItemWithText" },
+        tooltip ?
+            React.createElement(ItemTooltipWrapper, { data: item, client: client, region: region },
+                React.createElement("div", { className: "ItemImproveTooltip_ItemWithText_iconPad " + borderClass },
+                    React.createElement("img", { className: (small ? "ItemImproveTooltip_ItemWithText_iconSmall" : "ItemImproveTooltip_ItemWithText_icon") + " TooltipBase_iconbg-grade-" + item.grade, alt: "", src: BuildIconPath((_b = item.icon) === null || _b === void 0 ? void 0 : _b.iconPath) })))
+            :
+                React.createElement("div", { className: "ItemImproveTooltip_ItemWithText_iconPad " + borderClass },
+                    React.createElement("img", { className: (small ? "ItemImproveTooltip_ItemWithText_iconSmall" : "ItemImproveTooltip_ItemWithText_icon") + " TooltipBase_iconbg-grade-" + item.grade, alt: "", src: BuildIconPath((_c = item.icon) === null || _c === void 0 ? void 0 : _c.iconPath) })),
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: item.name }, className: "TooltipBase_grade-" + item.grade + " ItemImproveTooltip_ItemWithText_name" })));
+}
+
+var css_248z$7 = "";
+styleInject(css_248z$7);
+
+var css_248z$6 = ".ItemImproveEffectsTooltip_entry {\n  padding: 0.1rem 0 0 .5rem; }\n";
+styleInject(css_248z$6);
+
+function ItemImproveEffectsTooltip(_a) {
+    var effectsForName = _a.effectsForName;
+    var tooltipBaseProps = {
+        title: "Upgrade Effects",
+        grade: 3,
+        id: "item_upgrade_info",
+        icon: "",
+        subtitle: "Info",
+        mainInfos: [],
+        subInfoGroups: [],
+        fullHeight: false
+    };
+    tooltipBaseProps.mainInfos.push(React.createElement("div", null, "Random effects can be obtained when upgrading."));
+    effectsForName.forEach(function (itemName) {
+        var subGroupTexts = [];
+        itemName.effects.forEach(function (effect) {
+            if (effect.isEffect) {
+                subGroupTexts.push(React.createElement("div", { className: "ItemImproveEffectsTooltip_entry", dangerouslySetInnerHTML: { __html: effect.effectDescription } }));
+            }
+            else {
+                subGroupTexts.push(React.createElement("div", { className: "ItemImproveEffectsTooltip_entry 00008130.UI.Label_Green03_12" },
+                    React.createElement("span", null, effect.statValue),
+                    "\u00A0",
+                    React.createElement("span", { dangerouslySetInnerHTML: { __html: effect.statName } })));
+            }
+        });
+        var subGroup = {
+            title: itemName.name,
+            texts: subGroupTexts
+        };
+        tooltipBaseProps.subInfoGroups.push(subGroup);
+    });
+    return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
+}
+
+var ItemImproveEffectsTooltipWrapper = function (_a) {
+    var effectsForName = _a.effectsForName, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f;
+    var spanRef = useRef(null);
+    var _g = useState(null), childRef = _g[0], setChildRef = _g[1];
+    /**
+     * Mount the temporary span element.
+     * retrieve and store the target element's reference.
+     */
+    useEffect(function () {
+        if (spanRef.current) {
+            setChildRef(spanRef.current.previousElementSibling);
+        }
+        return function () { return setChildRef(null); };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        children,
+        childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemImproveEffectsTooltip, { effectsForName: effectsForName }), theme: "grade" + 3, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+};
+
+function PrevCurNext(_a) {
+    var item = _a.item, client = _a.client, region = _a.region, nextItem = _a.nextItem, prevItem = _a.prevItem, steps = _a.steps; _a.allPossibleUpgrades; _a.SetCustomStage; var NavigateTo = _a.NavigateTo;
+    return (React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext" },
+        React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container" },
+            React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChild" }, prevItem != null ?
+                React.createElement(ItemWithText, { tooltip: true, small: true, item: prevItem, client: client, region: region })
+                : null),
+            React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_arrowChild" }, prevItem != null ?
+                React.createElement("div", null,
+                    React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton", onClick: function () {
+                            if (prevItem.itemImprove != null)
+                                NavigateTo(prevItem);
+                        } },
+                        React.createElement("span", { style: { fontSize: 32 }, className: "TooltipBase_downgradeBlue material-symbols-outlined" }, "keyboard_arrow_down")))
+                : null),
+            React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChild" },
+                React.createElement(ItemWithText, { tooltip: true, borderClass: "TooltipBase_border-grade-4", item: item, client: client, region: region })),
+            React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_arrowChild" }, nextItem != null ?
+                React.createElement("div", { style: { display: "flex" } },
+                    React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton", onClick: function () {
+                            if (nextItem.itemImprove != null)
+                                NavigateTo(nextItem);
+                        } },
+                        React.createElement("span", { style: { fontSize: 32 }, className: "TooltipBase_upgradeRed material-symbols-outlined" }, "keyboard_arrow_up")),
+                    GetUpgradeEffects(item, steps, nextItem).length > 0
+                        ?
+                            React.createElement("div", { style: { cursor: "default" } },
+                                React.createElement(ItemImproveEffectsTooltipWrapper, { effectsForName: GetUpgradeEffects(item, steps, nextItem) },
+                                    React.createElement("span", { style: { fontSize: 16 }, className: "00008130.UI.Label_Green03_12 material-symbols-outlined" }, "help")))
+                        : null)
+                : null),
+            React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChild" }, nextItem != null ?
+                React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container" },
+                    React.createElement(ItemWithText, { tooltip: true, small: true, item: nextItem, client: client, region: region }))
+                : null))));
+}
+function GetUpgradeEffects(item, steps, nextItem) {
+    var result = [];
+    if (steps == null || steps.length == 0) {
+        if (nextItem == null)
+            return result;
+        if (item.itemImprove != null && item.itemImprove.bonusEffectOptions != null && item.itemImprove.bonusEffectOptions.length > 0) {
+            result.push({
+                name: nextItem.name,
+                effects: item.itemImprove.bonusEffectOptions
+            });
+        }
+    }
+    else {
+        if (item.itemImprove != null && item.itemImprove.bonusEffectOptions != null && item.itemImprove.bonusEffectOptions.length > 0) {
+            result.push({
+                name: steps[0].name,
+                effects: item.itemImprove.bonusEffectOptions
+            });
+        }
+        steps.forEach(function (stepItem, i, list) {
+            if (stepItem.itemImprove != null && stepItem.itemImprove.bonusEffectOptions != null && stepItem.itemImprove.bonusEffectOptions.length > 0) {
+                var name = "";
+                if (i == list.length - 1) {
+                    name = nextItem.name;
+                }
+                else {
+                    name = list[i + 1].name;
+                }
+                result.push({
+                    name: name,
+                    effects: stepItem.itemImprove.bonusEffectOptions
+                });
+            }
+        });
+    }
+    return result;
+}
+
+function Money(_a) {
+    var money = _a.money, _b = _a.center, center = _b === void 0 ? false : _b;
+    var bnsmoney = getMoneyObj(money);
+    if (bnsmoney == null)
+        return null;
+    return (React.createElement("div", { className: "NpcTooltip_moneyContainer " + (center ? "NpcTooltip_moneyContainer_center" : "") },
+        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 MainCostSelector(_a) {
+    var options = _a.options, client = _a.client, region = _a.region, selectOption = _a.selectOption, selectedOption = _a.selectedOption;
+    return (React.createElement("div", { className: "MainCostSelector" }, options.map(function (option, i) {
+        return (React.createElement(React.Fragment, { key: i },
+            React.createElement("div", { className: "MainCostSelector_container" },
+                React.createElement("div", { onClick: function () {
+                        selectOption(i);
+                    } },
+                    React.createElement(ItemWithText, { tooltip: false, borderClass: i == selectedOption ? "TooltipBase_border-grade-4" : "", itemId: option.mainItemCost.itemId, item: null, itemLevel: option.mainItemCost.itemLevel, client: client, region: region })),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        "x",
+                        option.mainItemCost.max))),
+            i < options.length - 1 ? React.createElement("div", { className: "MainCostSelector_or" }, "or") : null));
+    })));
+}
+
+function SubCosts(_a) {
+    var options = _a.options, client = _a.client, region = _a.region, selectedOption = _a.selectedOption;
+    if (options[selectedOption].subItemCost == null || options[selectedOption].subItemCost.length == 0)
+        return null;
+    return (React.createElement("div", { className: "SubCostSelector" }, options[selectedOption].subItemCost.map(function (subItem, i) {
+        return (React.createElement(React.Fragment, { key: i },
+            React.createElement("div", { className: "MainCostSelector_container" },
+                React.createElement("div", null,
+                    React.createElement(ItemWithText, { tooltip: false, small: true, itemId: subItem.itemId, item: null, itemLevel: subItem.itemLevel, client: client, region: region })),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        "x",
+                        subItem.max))),
+            i < options[selectedOption].subItemCost.length - 1 ? React.createElement("div", { className: "MainCostSelector_or" }, "and") : null));
+    })));
+}
+
+function ItemImproveUpgradeCost(_a) {
+    var item = _a.item, nextItem = _a.nextItem, steps = _a.steps, client = _a.client, region = _a.region;
+    var _b = useState([]), accumulatedCost = _b[0], setAccumulatedCost = _b[1];
+    var _c = useState(0), selectedOption = _c[0], setSelectedOption = _c[1];
+    useEffect(function () {
+        setAccumulatedCost(GetAccumulatedUpgradeCost(item, steps));
+    }, [item, nextItem, steps]);
+    function selectOption(option) {
+        setSelectedOption(option);
+    }
+    if (accumulatedCost == null || accumulatedCost.length == 0)
+        return null;
+    return (React.createElement("div", { className: "ItemImproveUpgradeCost" },
+        React.createElement("div", { className: "ItemImproveUpgradeCost_title 00008130.UI.Label_LightYellow_12" }, "Upgrade Cost"),
+        React.createElement(MainCostSelector, { options: accumulatedCost, client: client, region: region, selectOption: selectOption, selectedOption: selectedOption }),
+        React.createElement(SubCosts, { options: accumulatedCost, client: client, region: region, selectedOption: selectedOption }),
+        React.createElement(Money, { center: true, money: accumulatedCost[selectedOption].moneyCost })));
+}
+function GetAccumulatedUpgradeCost(item, steps) {
+    var result = [];
+    if (steps == null || steps.length == 0) {
+        result = item.itemImprove.upgradeOptions;
+    }
+    else {
+        var mainCost = item.itemImprove.upgradeOptions[0].mainItemCost;
+        var subCosts = item.itemImprove.upgradeOptions[0].subItemCost;
+        var moneyCost = item.itemImprove.upgradeOptions[0].moneyCost;
+        steps.forEach(function (step) {
+            var option0 = step.itemImprove.upgradeOptions[0];
+            if (mainCost.itemId == option0.mainItemCost.itemId && mainCost.itemLevel == option0.mainItemCost.itemLevel) {
+                mainCost.min += option0.mainItemCost.min;
+                mainCost.max += option0.mainItemCost.max;
+            }
+            else {
+                var foundIndex = subCosts.findIndex(function (x) { return x.itemId == mainCost.itemId && x.itemLevel == mainCost.itemLevel; });
+                if (foundIndex > -1) {
+                    subCosts[foundIndex].min += mainCost.min;
+                    subCosts[foundIndex].max += mainCost.max;
+                }
+                else {
+                    subCosts.push(mainCost);
+                }
+                mainCost = option0.mainItemCost;
+            }
+            moneyCost += option0.moneyCost;
+            option0.subItemCost.forEach(function (subItem) {
+                var foundIndex = subCosts.findIndex(function (x) { return x.itemId == subItem.itemId && x.itemLevel == subItem.itemLevel; });
+                if (foundIndex > -1) {
+                    subCosts[foundIndex].min += subItem.min;
+                    subCosts[foundIndex].max += subItem.max;
+                }
+                else {
+                    subCosts.push(subItem);
+                }
+            });
+        });
+        result.push({
+            isRandom: item.itemImprove.upgradeOptions[0].isRandom,
+            mainItemCost: mainCost,
+            subItemCost: subCosts,
+            moneyCost: moneyCost
+        });
+    }
+    return result;
+}
+
+function ItemImproveTooltip(_a) {
+    var _this = this;
+    var dataProp = _a.data, region = _a.region, _b = _a.debug, debug = _b === void 0 ? false : _b, _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];
+    var _f = useState(), data = _f[0], setData = _f[1];
+    var _g = useState(), nextData = _g[0], setNextData = _g[1];
+    var _h = useState(), prevItem = _h[0], setPrevItem = _h[1];
+    var _j = useState(), nextItem = _j[0], setNextItem = _j[1];
+    var _k = useState([]), steps = _k[0], setSteps = _k[1];
+    var _l = useState([]), allPossibleUpgrades = _l[0], setAllPossibleUpgrades = _l[1];
+    useEffect(function () {
+        if (data == null || client == null)
+            return;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var existing, _a, existing, _b, foundIndex, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (!(data.itemImprove.itemPrev != null)) return [3 /*break*/, 4];
+                        if (!(allPossibleUpgrades != null && allPossibleUpgrades.find(function (x) { return x.id === data.itemImprove.itemPrev.itemId && x.level === data.itemImprove.itemPrev.itemLevel; }) != null)) return [3 /*break*/, 1];
+                        existing = allPossibleUpgrades.find(function (x) { return x.id === data.itemImprove.itemPrev.itemId && x.level === data.itemImprove.itemPrev.itemLevel; });
+                        setPrevItem(existing);
+                        return [3 /*break*/, 3];
+                    case 1:
+                        _a = setPrevItem;
+                        return [4 /*yield*/, client.GetItem(data.itemImprove.itemPrev.itemId, data.itemImprove.itemPrev.itemLevel)];
+                    case 2:
+                        _a.apply(void 0, [_d.sent()]);
+                        _d.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        setPrevItem(undefined);
+                        _d.label = 5;
+                    case 5:
+                        if (!(data.itemImprove.itemNext != null)) return [3 /*break*/, 9];
+                        if (!(allPossibleUpgrades != null && allPossibleUpgrades.find(function (x) { return x.id === data.itemImprove.itemNext.itemId && x.level === data.itemImprove.itemNext.itemLevel; }) != null)) return [3 /*break*/, 6];
+                        existing = allPossibleUpgrades.find(function (x) { return x.id === data.itemImprove.itemNext.itemId && x.level === data.itemImprove.itemNext.itemLevel; });
+                        setNextItem(existing);
+                        return [3 /*break*/, 8];
+                    case 6:
+                        _b = setNextItem;
+                        return [4 /*yield*/, client.GetItem(data.itemImprove.itemNext.itemId, data.itemImprove.itemNext.itemLevel)];
+                    case 7:
+                        _b.apply(void 0, [_d.sent()]);
+                        _d.label = 8;
+                    case 8: return [3 /*break*/, 10];
+                    case 9:
+                        setNextItem(undefined);
+                        _d.label = 10;
+                    case 10:
+                        setSteps([]);
+                        if (!(allPossibleUpgrades != null && allPossibleUpgrades.find(function (x) { return x.id === data.id && x.level === data.level; }) != null)) return [3 /*break*/, 11];
+                        foundIndex = allPossibleUpgrades.findIndex(function (x) { return x.id === data.id && x.level === data.level; });
+                        setAllPossibleUpgrades(allPossibleUpgrades.slice(foundIndex + 1));
+                        return [3 /*break*/, 13];
+                    case 11:
+                        _c = setAllPossibleUpgrades;
+                        return [4 /*yield*/, GetAllNextStages(data, client)];
+                    case 12:
+                        _c.apply(void 0, [_d.sent()]);
+                        _d.label = 13;
+                    case 13: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [data, client, region]);
+    function SetCustomStage(nextStage) {
+        setSteps(GetStepsInBetween(nextStage, allPossibleUpgrades));
+        setNextItem(nextStage);
+    }
+    useEffect(function () {
+        setData(dataProp);
+    }, [dataProp]);
+    useEffect(function () {
+        if (offline)
+            return;
+        if (clientProp == undefined) {
+            (function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    setClient(new ItemDownloadClient(region));
+                    return [2 /*return*/];
+                });
+            }); })();
+        }
+        else {
+            setClient(clientProp);
+        }
+    }, [offline]);
+    useEffect(function () {
+        if (data == null && nextData != null) {
+            if (debug) {
+                console.log(nextData);
+            }
+            setData(nextData);
+            setNextData(null);
+        }
+    }, [data]);
+    if (data == null)
+        return null;
+    function NavigateTo(itemData) {
+        if (itemData != null) {
+            setNextData(itemData);
+            setData(null);
+        }
+    }
+    var tooltipBaseProps = {
+        title: "Item Upgrade",
+        grade: data.grade,
+        id: "item_upgrade_info",
+        icon: "",
+        subtitle: "Info",
+        mainInfos: [],
+        subInfoGroups: [],
+        fullHeight: fullHeight,
+        widthOverride: "600px"
+    };
+    if (debug) {
+        tooltipBaseProps.subtitle = data.name;
+    }
+    AddPrevCurNext(tooltipBaseProps.subInfoGroups, data, nextItem, prevItem, steps, allPossibleUpgrades, SetCustomStage, NavigateTo, client, region);
+    AddUpgradeCost(tooltipBaseProps.subInfoGroups, data, nextItem, steps, client, region);
+    return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
+}
+function AddPrevCurNext(subInfoGroups, item, nextItem, prevItem, steps, allPossibleUpgrades, SetCustomStage, NavigateTo, client, region) {
+    if (item.itemImprove == null)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [React.createElement(PrevCurNext, { item: item, nextItem: nextItem, prevItem: prevItem, steps: steps, allPossibleUpgrades: allPossibleUpgrades, SetCustomStage: SetCustomStage, NavigateTo: NavigateTo, client: client, region: region })]
+    });
+}
+function GetStepsInBetween(nextStage, allPossibleUpgrades) {
+    var maxIndex = allPossibleUpgrades.findIndex(function (x) { return x == nextStage; });
+    var result = [];
+    for (var index = 0; index < maxIndex; index++) {
+        var element = allPossibleUpgrades[index];
+        result.push(element);
+    }
+    return result;
+}
+function GetAllNextStages(item, client) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, client.GetItemUpgrades(item)];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
+}
+function AddUpgradeCost(subInfoGroups, item, nextItem, steps, client, region) {
+    if (item.itemImprove == null)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [
+            React.createElement(ItemImproveUpgradeCost, { item: item, nextItem: nextItem, steps: steps, client: client, region: region })
+        ]
+    });
+}
+
+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; _a.showArrow;
+    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: false, 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: "grade" + data.grade, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+};
 
 function ItemMainInfo(item) {
     if (item.mainInfo != null)
@@ -5650,35 +6243,16 @@ function SetBonus(props) {
                     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.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 _k = useState(null), childRef = _k[0], setChildRef = _k[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 _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, 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, trigger = _a.trigger, interactive = _a.interactive, showUpgrade = _a.showUpgrade;
-    var _d = useState(), itemData = _d[0], setItemData = _d[1];
+    var _b, _c;
+    var item = _a.item, region = _a.region, client = _a.client, _d = _a.showRandomIcon, showRandomIcon = _d === void 0 ? false : _d, trigger = _a.trigger, interactive = _a.interactive, showUpgrade = _a.showUpgrade, _e = _a.tooltip, tooltip = _e === void 0 ? true : _e, _f = _a.itemData, itemDataProp = _f === void 0 ? null : _f;
+    var _g = useState(), itemData = _g[0], setItemData = _g[1];
     useEffect(function () {
+        if (itemDataProp != null && item == null) {
+            setItemData(itemDataProp);
+            return;
+        }
         if (client)
             (function () { return __awaiter(_this, void 0, void 0, function () {
                 var _a;
@@ -5693,12 +6267,15 @@ function ItemIconNameDiv(_a) {
                     }
                 });
             }); })();
-    }, [item, client]);
+    }, [item, client, itemDataProp]);
     if (itemData) {
         if (itemData.grade != 0)
             return (React.createElement("div", { className: "ItemTooltip_itemiconnamediv" },
-                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) })),
+                tooltip ?
+                    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("img", { className: "ItemTooltip_itemIconSmall", alt: "", src: BuildIconPath((_c = itemData.icon) === null || _c === void 0 ? void 0 : _c.iconPath) }),
                 React.createElement("div", { className: "ItemTooltip_itemNameRandomDiv" },
                     React.createElement("span", { className: "TooltipBase_grade-" + itemData.grade, dangerouslySetInnerHTML: { __html: itemData.name } }),
                     showRandomIcon ? (React.createElement(React.Fragment, null,
@@ -5797,143 +6374,6 @@ 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.itemNext != null && data.upgradeOptions != null && data.upgradeOptions.length > 0) {
-            if (data.useMileageSave != null && data.useMileageSave === true && data.upgradeOptions.find(function (x) { return x.isRandom; }) != null)
-                tooltipBaseProps.mainInfos.push(React.createElement("div", null, "The upgrade chance is 100% when the pity meter is filled."));
-            // if (data.itemPrev != null) {
-            //   tooltipBaseProps.subInfoGroups.push({
-            //     title: "Previous Upgrade:",
-            //     texts: [
-            //       <ItemIconNameDiv showUpgrade={true} client={client} region={region} item={data.itemPrev} interactive={true} />
-            //     ]
-            //   });
-            // }
-            tooltipBaseProps.subInfoGroups.push({
-                title: "Next Upgrade:",
-                texts: [
-                    React.createElement(ItemIconNameDiv, { showUpgrade: true, client: client, region: region, item: data.itemNext, interactive: true })
-                ]
-            });
-            data.upgradeOptions.forEach(function (upgradeOption, i, _) {
-                var costGroup = {
-                    title: "Upgrade option " + (i + 1) + ":",
-                    texts: []
-                };
-                if (upgradeOption.isRandom != null && upgradeOption.isRandom === true) {
-                    costGroup.texts.push(React.createElement("div", { className: "TooltipBase_flex ItemImproveTooltip_moneyContainer" },
-                        React.createElement("span", { className: "TooltipBase_grade-8" }, "This option has a chance to fail!")));
-                }
-                if (upgradeOption.mainItemCost != null) {
-                    var mainItems = [];
-                    mainItems.push(upgradeOption.mainItemCost);
-                    costGroup.texts.push(React.createElement(DecomposeResults, { client: client, region: region, showUpgrade: false, items: mainItems }));
-                }
-                if (upgradeOption.subItemCost != null && upgradeOption.subItemCost.length > 0) {
-                    costGroup.texts.push(React.createElement(DecomposeResults, { client: client, region: region, showUpgrade: false, items: upgradeOption.subItemCost }));
-                }
-                if (upgradeOption.moneyCost != null && upgradeOption.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: upgradeOption.moneyCost })));
-                }
-                tooltipBaseProps.subInfoGroups.push(costGroup);
-            });
-        }
-    }
-    if (data.bonusEffectOptions != null && data.bonusEffectOptions.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.bonusEffectOptions.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: "grade4", reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
-};
-
 function ItemTooltip(_a) {
     var _this = this;
     var _b, _c, _d;
@@ -6012,10 +6452,10 @@ 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 (showUpgrade)
+        AddItemImprove(tooltipBaseProps.subInfoGroups, item, region, client, offline, debug);
     if (!offline) {
         AddDecomposeResults(tooltipBaseProps.subInfoGroups, item, client, region);
     }
@@ -6259,15 +6699,15 @@ function AddItemImprove(subInfoGroups, item, region, client, offline, debug) {
         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(ItemImproveTooltipWrapper, { data: item, 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 = "";
-styleInject(css_248z$3);
+var css_248z$5 = "";
+styleInject(css_248z$5);
 
 function JsonTooltip(props) {
     var tooltipProps = {
@@ -6303,8 +6743,8 @@ function JsonArrayToJsxArray(stringArray) {
     return jsxArray;
 }
 
-var css_248z$2 = ".SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
-styleInject(css_248z$2);
+var css_248z$4 = ".SkillTooltip_skillIconContainer {\n  width: 60px;\n  height: 60px;\n  padding: 0;\n  float: left;\n  position: relative; }\n\n.SkillTooltip_skillIcon {\n  width: 60px;\n  height: 60px; }\n\n.SkillTooltip_buttonIcon {\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  height: 18px;\n  opacity: 0.9; }\n\n.SkillTooltip_buttonIconMouse {\n  background-color: rgba(0, 0, 0, 0.8); }\n\n.SkillTooltip_mainText {\n  font-weight: 500; }\n\n.SkillTooltip_smallText {\n  font-size: 12px; }\n\n.SkillTooltip_subTextMargin {\n  margin-bottom: 0.3rem; }\n\n.SkillTooltip_boundaryContainer {\n  display: flex;\n  width: 100%;\n  margin-bottom: 0.5rem;\n  line-height: 17px; }\n\n.SkillTooltip_boundary {\n  flex: 1;\n  flex-basis: 0px;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: black;\n  margin: 0.15rem; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 3px 0 0 0; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryHead {\n  border-radius: 0 3px 0 0; }\n\n.SkillTooltip_boundary:first-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 0 3px; }\n\n.SkillTooltip_boundary:last-of-type > .SkillTooltip_boundaryBody {\n  border-radius: 0 0 3px 0; }\n\n.SkillTooltip_boundaryHead {\n  color: white;\n  font-weight: 500;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding: 0.3rem;\n  text-align: center;\n  flex: 1;\n  min-height: 26px;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBody {\n  color: white;\n  padding: 0.5rem 0.3rem;\n  margin-top: 0.15rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  flex: 2;\n  background-color: rgba(127, 127, 127, 0.4); }\n\n.SkillTooltip_boundaryBodyModifier {\n  min-height: 33px !important; }\n\n.SkillTooltip_boundaryHasIcon {\n  min-height: 50px !important; }\n\n.SkillTooltip_conditionRow {\n  display: flex;\n  align-items: center;\n  font-size: 12px; }\n\n.SkillTooltip_conditionRow:not(:last-of-type) {\n  margin-bottom: 0.1rem; }\n\n.SkillTooltip_conditionIcon {\n  width: 20px;\n  height: 20px;\n  margin-right: 0.33rem; }\n\n.SkillTooltip_conditionIconSmall {\n  width: 12px;\n  height: 12px;\n  margin-right: 0.22rem; }\n\n.tooltipArg {\n  color: #46bee1;\n  font-weight: 600; }\n\n.target-360 {\n  background-image: url(\"./360.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  background-size: auto 64px; }\n\n.target-front-180 {\n  background-image: url(\"./180.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 70%;\n  background-size: auto 64px; }\n\n.laser {\n  background-image: url(\"./laser.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: auto 64px; }\n";
+styleInject(css_248z$4);
 
 function getButtonIconPath(button) {
     var _a;
@@ -6580,8 +7020,8 @@ function AddIds(subInfoGroups, skill) {
     });
 }
 
-var css_248z$1 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: black 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
-styleInject(css_248z$1);
+var css_248z$3 = ".tippy-box {\n  max-width: none !important;\n  background-color: transparent !important;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n  .tippy-box:hover {\n    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n  padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n  border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n  border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n  border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n  border-right-color: #ff0084 !important; }\n";
+styleInject(css_248z$3);
 
 var SkillTooltipWrapper = function (_a) {
     var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f;
@@ -6609,8 +7049,8 @@ var ServerRegion;
     ServerRegion["KoreaTest"] = "KoreaTest";
 })(ServerRegion || (ServerRegion = {}));
 
-var css_248z = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
-styleInject(css_248z);
+var css_248z$2 = ".NpcTooltip_toggleBarContainer {\n  display: flex; }\n\n.NpcTooltip_toggleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .NpcTooltip_toggleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .NpcTooltip_toggleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.NpcTooltip_storeEntry {\n  display: flex;\n  align-items: stretch;\n  background-color: rgba(233, 233, 233, 0.1);\n  padding: 0.33rem;\n  font-size: 14px; }\n  .NpcTooltip_storeEntry:not(:last-child) {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_storeEntryItemNameLimit {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n\n.NpcTooltip_storeEntryItemLimit {\n  font-size: 12px; }\n\n.NpcTooltip_storeEntryItemName {\n  flex: 1;\n  display: flex;\n  align-items: center; }\n\n.NpcTooltip_storeEntryItemIconName {\n  display: flex;\n  align-items: center; }\n  .NpcTooltip_storeEntryItemIconName img {\n    width: 48px;\n    height: 48px;\n    margin-right: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntriesContainer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: flex-end;\n  justify-content: center;\n  padding-left: 2rem; }\n\n.NpcTooltip_itemBuyPriceEntries {\n  display: flex; }\n  .NpcTooltip_itemBuyPriceEntries-moneyMargin {\n    margin-bottom: 0.2rem; }\n\n.NpcTooltip_itemBuyPriceEntry:not(:first-child) {\n  margin-left: 0.33rem; }\n\n.NpcTooltip_itemBuyPriceEntryContainer {\n  position: relative;\n  height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer img {\n    width: 32px;\n    height: 32px; }\n  .NpcTooltip_itemBuyPriceEntryContainer-shadow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-shadow: inset 0 0 2px 0px #000000; }\n\n.NpcTooltip_itemBuyPriceEntryCount {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: #ffffff;\n  background-color: rgba(0, 0, 0, 0.4);\n  width: 32px;\n  line-height: 12px;\n  text-align: center; }\n\n.NpcTooltip_moneyContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; }\n  .NpcTooltip_moneyContainer_center {\n    justify-content: center; }\n  .NpcTooltip_moneyContainer > span {\n    display: flex;\n    align-items: center; }\n    .NpcTooltip_moneyContainer > span:not(:first-child) {\n      margin-left: 0.1rem; }\n    .NpcTooltip_moneyContainer > span > img {\n      width: 16px;\n      height: 16px; }\n";
+styleInject(css_248z$2);
 
 function StoreToggle(_a) {
     var store = _a.store, isActive = _a.isActive, setActive = _a.setActive;
@@ -6799,5 +7239,57 @@ function AddStores(subInfoGroups, activeTab, client, Stores) {
     });
 }
 
-export { GetCooldownString, ItemImproveTooltip, ItemImproveTooltipWrapper, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
+var css_248z$1 = ".ItemImproveSelectStageTooltip_item {\n  cursor: pointer;\n  border: solid 1px transparent; }\n  .ItemImproveSelectStageTooltip_item:hover {\n    border: solid 1px #ffffff; }\n";
+styleInject(css_248z$1);
+
+function ItemImproveSelectStageTooltip(_a) {
+    var items = _a.items, onClick = _a.onClick;
+    var tooltipBaseProps = {
+        title: "",
+        grade: 2,
+        id: "item_upgrade_info",
+        icon: "",
+        subtitle: "",
+        mainInfos: [],
+        subInfoGroups: [],
+        fullHeight: false
+    };
+    var texts = [];
+    items.forEach(function (item) {
+        texts.push(React.createElement("div", { className: "ItemImproveSelectStageTooltip_item", onClick: function () {
+                if (onClick != undefined)
+                    onClick(item);
+            } },
+            React.createElement(ItemIconNameDiv, { itemData: item, client: null, region: null, showUpgrade: false, item: null, tooltip: false })));
+    });
+    tooltipBaseProps.subInfoGroups.push({
+        title: "",
+        texts: texts
+    });
+    return (React.createElement(TooltipBase, __assign({}, tooltipBaseProps)));
+}
+
+var css_248z = "";
+styleInject(css_248z);
+
+var ItemImproveSelectStageTooltipWrapper = function (_a) {
+    var items = _a.items, onClick = _a.onClick, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f;
+    var spanRef = useRef(null);
+    var _g = useState(null), childRef = _g[0], setChildRef = _g[1];
+    /**
+     * Mount the temporary span element.
+     * retrieve and store the target element's reference.
+     */
+    useEffect(function () {
+        if (spanRef.current) {
+            setChildRef(spanRef.current.previousElementSibling);
+        }
+        return function () { return setChildRef(null); };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        children,
+        childRef ? (React.createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React.createElement(ItemImproveSelectStageTooltip, { items: items, onClick: onClick }), theme: "grade" + 2, reference: childRef })) : (React.createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+};
+
+export { GetCooldownString, ItemImproveEffectsTooltip, ItemImproveEffectsTooltipWrapper, ItemImproveSelectStageTooltip, ItemImproveSelectStageTooltipWrapper, ItemImproveTooltip, ItemImproveTooltipWrapper, ItemTooltip, ItemTooltipWrapper, JsonTooltip, NpcTooltip, ServerRegion, SkillTooltip, SkillTooltipWrapper, TooltipBase };
 //# sourceMappingURL=index.es.js.map