bnstooltips 1.11.0 → 1.12.0

package/build/index.js

@@ -58,7 +58,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n  color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n  color: #46bee1 !important;\n  font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n  color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n  color: #58ff77; }\n\n.TooltipBase_grade-none {\n  color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n  color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n  border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n  color: #6c6c6c !important;\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n  color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n  border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n  border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n  color: #ffffff !important;\n  border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n  color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n  border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n  border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n  color: #58ff77 !important;\n  border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n  color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n  border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n  border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n  color: #46bee1 !important;\n  border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n  color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n  border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n  border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n  color: #d739ff !important;\n  border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n  color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n  border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n  border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n  color: #f1b248 !important;\n  border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n  color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n  border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n  border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n  color: #ff770a !important;\n  border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n  color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n  border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n  border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n  color: #ff0084 !important;\n  border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n  box-sizing: border-box;\n  font-family: \"Montserrat\", sans-serif !important;\n  scroll-behavior: smooth;\n  touch-action: manipulation;\n  -webkit-overflow-scrolling: touch;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  background-color: rgba(3, 3, 3, 0.93);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem;\n  border: 1px solid;\n  border-color: #6c6c6c;\n  font-weight: 500;\n  font-size: 16px;\n  text-decoration: none;\n  color: #fff;\n  width: 380px;\n  max-height: calc(100vh - 50px);\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  border-radius: 3px;\n  text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n  height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n  display: none; }\n\n.TooltipBase_downgradeBlue {\n  color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n  color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n  .TooltipBase_container {\n    width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n  .TooltipBase_container {\n    background-color: rgba(0, 0, 0, 0.95); }\n  .TooltipBase_container-loading {\n    background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n  background-color: rgba(3, 3, 3, 0.93);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem; }\n\n.TooltipBase_title {\n  flex: 1;\n  overflow: hidden;\n  padding-right: 1rem; }\n\n.TooltipBase_title_text {\n  font-size: 18px;\n  text-shadow: black 1px 1px 0;\n  font-weight: 500; }\n\n.TooltipBase_subtitle {\n  text-align: end;\n  font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n  display: flex;\n  margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n  margin-right: 0.5rem;\n  margin-bottom: 0.25rem;\n  float: left;\n  position: relative; }\n\n.TooltipBase_iconBg {\n  width: 64px;\n  height: 64px;\n  background-origin: content-box !important; }\n\n.TooltipBase_icon {\n  width: calc(64px - (0px * 2));\n  height: calc(64px - (0px * 2));\n  padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n  font-size: 16px;\n  font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n  margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n  line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n  margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n  font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n  margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n  display: flex;\n  align-items: center; }\n\n.TooltipBase_flex-col {\n  display: flex;\n  justify-content: center;\n  flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n  font-weight: 500; }\n";
+var css_248z$d = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n  color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n  color: #46bee1 !important;\n  font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n  color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_Chatting_Color_19\"] {\n  color: #58ff77; }\n\n.TooltipBase_grade-none {\n  color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n  color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n  border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n  color: #6c6c6c !important;\n  border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n  color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n  border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n  border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n  color: #ffffff !important;\n  border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n  color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n  border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n  border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n  color: #58ff77 !important;\n  border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n  color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n  border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n  border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n  color: #46bee1 !important;\n  border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n  color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n  border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n  border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n  color: #d739ff !important;\n  border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n  color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n  border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n  border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n  color: #f1b248 !important;\n  border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n  color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n  border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n  border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n  color: #ff770a !important;\n  border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n  color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n  border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n  border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n  color: #ff0084 !important;\n  border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-9 {\n  background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_9.png\") no-repeat; }\n\n.TooltipBase_container {\n  box-sizing: border-box;\n  font-family: \"Montserrat\", sans-serif !important;\n  scroll-behavior: smooth;\n  touch-action: manipulation;\n  -webkit-overflow-scrolling: touch;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  background-color: rgba(8, 8, 8, 0.93);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem;\n  border: 1px solid;\n  border-color: #6c6c6c;\n  font-weight: 500;\n  font-size: 16px;\n  text-decoration: none;\n  color: #fff;\n  width: 380px;\n  max-height: calc(100vh - 50px);\n  overflow-y: auto;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  border-radius: 3px;\n  text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n  height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n  display: none; }\n\n.TooltipBase_downgradeBlue {\n  color: #28A9F0; }\n\n.TooltipBase_upgradeRed {\n  color: #FF2818; }\n\n@media only screen and (max-width: 380px) {\n  .TooltipBase_container {\n    width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n  .TooltipBase_container {\n    background-color: rgba(0, 0, 0, 0.95); }\n  .TooltipBase_container-loading {\n    background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n  background-color: rgba(8, 8, 8, 0.93);\n  backdrop-filter: brightness(1.5) blur(5px);\n  -webkit-backdrop-filter: brightness(1.5) blur(5px);\n  padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem; }\n\n.TooltipBase_title {\n  flex: 1;\n  overflow: hidden;\n  padding-right: 1rem; }\n\n.TooltipBase_title_text {\n  font-size: 18px;\n  text-shadow: black 1px 1px 0;\n  font-weight: 500; }\n\n.TooltipBase_subtitle {\n  text-align: end;\n  font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n  display: flex;\n  margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n  margin-right: 0.5rem;\n  margin-bottom: 0.25rem;\n  float: left;\n  position: relative; }\n\n.TooltipBase_iconBg {\n  width: 64px;\n  height: 64px;\n  background-origin: content-box !important; }\n\n.TooltipBase_icon {\n  width: calc(64px - (0px * 2));\n  height: calc(64px - (0px * 2));\n  padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n  font-size: 16px;\n  font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n  margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n  line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n  margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n  font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n  margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n  display: flex;\n  align-items: center; }\n\n.TooltipBase_flex-col {\n  display: flex;\n  justify-content: center;\n  flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n  font-weight: 500; }\n";
 styleInject(css_248z$d);
 
 function TooltipBase(_a) {
@@ -161,7 +161,7 @@ function __generator(thisArg, body) {
     }
 }
 
-var css_248z$c = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex; }\n\n.ItemTooltip_optionPadding {\n  margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_showButton:hover {\n    background-color: rgba(255, 255, 255, 0.3);\n    opacity: 1; }\n  .ItemTooltip_showButton-active {\n    background-color: rgba(255, 255, 255, 0.4) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_jobstyleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .ItemTooltip_jobstyleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px; }\n\n.ItemTooltip_subInfo {\n  font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n  font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative; }\n\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem; }\n\n.ItemTooltip_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";
+var css_248z$c = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0; }\n\n.ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex; }\n\n.ItemTooltip_optionPadding {\n  margin: .2rem 0 .5rem 0; }\n\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_showButton:hover {\n    background-color: rgba(255, 255, 255, 0.3);\n    opacity: 1; }\n  .ItemTooltip_showButton-active {\n    background-color: rgba(255, 255, 255, 0.4) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s; }\n  .ItemTooltip_jobstyleButton:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    opacity: 1; }\n  .ItemTooltip_jobstyleButton-active {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    color: #fff;\n    opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px; }\n\n.ItemTooltip_subInfo {\n  font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n  font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative; }\n\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem; }\n\n.ItemTooltip_itemIconSlate {\n  width: 24px !important;\n  height: 24px !important;\n  margin-right: 0.11rem; }\n\n.ItemTooltip_setBonus {\n  margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n  padding-left: 0.33rem;\n  padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n  display: flex;\n  margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n  margin-top: 0.2rem;\n  padding-top: 0.1rem;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  max-height: 16px;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: rgba(88, 255, 119, 0.8);\n  border: 1px solid rgba(88, 255, 119, 0.9);\n  border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n  padding-top: 0.2rem;\n  flex-grow: 2;\n  padding-left: 0.55rem;\n  max-width: 90%;\n  color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n  display: flex;\n  align-items: center;\n  padding: 0.15rem 0 0.15rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_slateIconNameStatsDiv {\n  display: flex;\n  justify-content: space-between;\n  padding: .15rem 0;\n  border-bottom: solid 1px rgba(233, 233, 233, 0.3); }\n\n.ItemTooltip_slateIconNameDiv {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  flex: 1; }\n\n.ItemTooltip_slateItemNameSmall {\n  font-size: 14px; }\n\n.ItemTooltip_slateStatsDiv {\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  justify-content: center;\n  flex: 1; }\n\n.ItemTooltip_setItemIconNameDiv {\n  display: flex;\n  align-items: center;\n  padding: 0.11rem 0 0.11rem 0.33rem;\n  line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n  display: flex;\n  font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n  flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n  display: flex;\n  align-items: center; }\n\n@media only screen and (max-width: 380px) {\n  .ItemTooltip_jobstyleButton {\n    padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n  position: relative;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  top: 0; }\n\n.dot-elastic::before {\n  left: -15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n  left: 15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1.5); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 1.5); }\n  75% {\n    transform: scale(1, 1); }\n  100% {\n    transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n  0% {\n    transform: scale(1, 1); }\n  25% {\n    transform: scale(1, 1); }\n  50% {\n    transform: scale(1, 0.67); }\n  75% {\n    transform: scale(1, 1.5); }\n  100% {\n    transform: scale(1, 1); } }\n";
 styleInject(css_248z$c);
 
 function BuildIconPath(iconPath, iconIndex) {
@@ -424,6 +424,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}
+         */
+        bnsItemAllStagesForItemGet: function (itemId, itemLevel, region, patch, options) {
+            if (options === void 0) { options = {}; }
+            var localVarPath = "/BnsItem/AllStagesForItem";
+            var localVarUrlObj = url__namespace.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__namespace.format(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          *
          * @param {number} [itemId]
@@ -879,6 +916,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}
+         */
+        bnsItemAllStagesForItemGet: function (itemId, itemLevel, region, patch, options) {
+            var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemAllStagesForItemGet(itemId, itemLevel, region, patch, options);
+            return function (fetch, basePath) {
+                if (fetch === void 0) { fetch = isomorphicFetch__namespace; }
+                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 {number} [itemId]
@@ -1158,6 +1219,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.bnsItemAllStagesForItemGet = function (itemId, itemLevel, region, patch, options) {
+        return BnsItemApiFp(this.configuration).bnsItemAllStagesForItemGet(itemId, itemLevel, region, patch, options)(this.fetch, this.basePath);
+    };
     /**
      *
      * @param {number} [itemId]
@@ -6426,6 +6500,39 @@ function AccountTransfer(_a) {
             "\u00A0copper")) : null));
 }
 
+function EtchingStones(_a) {
+    var stones = _a.stones;
+    var _b = React.useState(false), expanded = _b[0], setExpanded = _b[1];
+    return (React__default["default"].createElement("div", null,
+        GetStoneList().map(function (stone, index) {
+            return (React__default["default"].createElement("div", { className: "ItemTooltip_slateIconNameStatsDiv", key: "slateStone_" + index },
+                React__default["default"].createElement("div", { className: "ItemTooltip_slateIconNameDiv" },
+                    React__default["default"].createElement("img", { alt: "", className: "ItemTooltip_itemIconSlate", src: BuildIconPath(stone.icon.iconPath) }),
+                    React__default["default"].createElement("span", { className: "ItemTooltip_slateItemNameSmall TooltipBase_grade-" + stone.grade, dangerouslySetInnerHTML: { __html: stone.name } })),
+                React__default["default"].createElement("div", { className: "ItemTooltip_slateStatsDiv ItemTooltip_slateItemNameSmall 00008130.UI.Label_Green03_12" }, stone.stats.map(function (stat, index2) {
+                    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement("span", { className: "ItemTooltip_slateStatName", key: "slateStone_" + index + "_stat_" + index2 },
+                            stat.name,
+                            "\u00A0",
+                            stat.value)));
+                }))));
+        }),
+        React__default["default"].createElement("div", { className: "ItemTooltip_showButton", style: { textAlign: "center" }, onClick: function () { return setExpanded(!expanded); } }, expanded ? "Show less" : "Show more")));
+    function GetStoneList() {
+        if (expanded) {
+            return stones.sort(function (a, b) { return b.grade - a.grade; });
+        }
+        else {
+            return FilterStones(stones).sort(function (a, b) { return b.grade - a.grade; });
+        }
+    }
+}
+function FilterStones(stones) {
+    var highestGrade = Math.max.apply(Math, stones.map(function (o) { return o.grade; }));
+    stones = stones.filter(function (o) { return o.grade == highestGrade; }).slice(0, 10);
+    return stones;
+}
+
 function ItemTooltip(_a) {
     var _this = this;
     var _b, _c, _d;
@@ -6505,6 +6612,7 @@ function ItemTooltip(_a) {
     AddTopText(tooltipBaseProps.subInfoGroups, item);
     AddSkillDescriptions(tooltipBaseProps.subInfoGroups, item, itemCombats, jobstyle);
     AddSkillModifiers(tooltipBaseProps.subInfoGroups, item, false, jobstyle);
+    AddEtchingStones(tooltipBaseProps.subInfoGroups, item);
     AddSetBonus(tooltipBaseProps.subInfoGroups, item, jobstyle);
     if (showUpgrade)
         AddItemImprove(tooltipBaseProps.subInfoGroups, item, region, client, offline, debug);
@@ -6756,6 +6864,16 @@ function AddItemImprove(subInfoGroups, item, region, client, offline, debug) {
         ]
     };
     subInfoGroups.push(subInfoGroup);
+}
+function AddEtchingStones(subInfoGroups, item) {
+    if (item.slateStones == null || item.slateStones.length == 0)
+        return;
+    subInfoGroups.push({
+        title: "Max. amount based on possible Ability and Potential",
+        texts: [
+            React__default["default"].createElement(EtchingStones, { stones: item.slateStones }),
+        ]
+    });
 }
 
 var css_248z$5 = "";
@@ -7200,9 +7318,9 @@ var css_248z$3 = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818; }\n\n.T
 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;
+    var data = _a.data, children = _a.children, _b = _a.interactive, interactive = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? "right" : _c, _d = _a.followCursor, followCursor$1 = _d === void 0 ? false : _d, _e = _a.trigger, trigger = _e === void 0 ? "mouseenter focus" : _e, _f = _a.showArrow, showArrow = _f === void 0 ? true : _f, _g = _a.debug, debug = _g === void 0 ? false : _g;
     var spanRef = React.useRef(null);
-    var _g = React.useState(null), childRef = _g[0], setChildRef = _g[1];
+    var _h = React.useState(null), childRef = _h[0], setChildRef = _h[1];
     /**
      * Mount the temporary span element.
      * retrieve and store the target element's reference.
@@ -7215,7 +7333,7 @@ var SkillTooltipWrapper = function (_a) {
     }, []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         children,
-        childRef ? (React__default["default"].createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React__default["default"].createElement(SkillTooltip, { data: data, debug: false }), theme: "grade" + 4, reference: childRef })) : (React__default["default"].createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
+        childRef ? (React__default["default"].createElement(Tippy, { arrow: showArrow, trigger: trigger, plugins: [followCursor], followCursor: followCursor$1 && !interactive, appendTo: document.body, placement: placement, animation: "fade", interactive: interactive, content: React__default["default"].createElement(SkillTooltip, { data: data, debug: debug }), theme: "grade" + 4, reference: childRef })) : (React__default["default"].createElement("span", { "data-testid": "TooltipWrapper", ref: spanRef, style: { display: "none" } }))));
 };
 
 exports.ServerRegion = void 0;