@copart/ops-tool-kit 1.10.0 → 1.10.1

package/dist/ops-tool-kit.js

@@ -33,7 +33,7 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$f = "@copart/ops-tool-kit";
-const version$5 = "1.10.0";
+const version$5 = "1.10.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -11126,6 +11126,12 @@ var dateDiffInDays = function dateDiffInDays(date1, date2) {
   var millisecondsPerDay = 24 * 60 * 60 * 1000;
   return Math.floor(diffInMilliseconds / millisecondsPerDay);
 };
+var isChrome = function isChrome() {
+  var userAgent = window.navigator.userAgent;
+  var isChromium = userAgent.indexOf('Chrome/') > -1;
+  var isEdge = userAgent.indexOf('Edg/') > -1;
+  return isChromium && !isEdge;
+};
 
 var css_248z$m = ".utilities_ops-app-frame_ConfigFetcher_ConfigFetcher--ConfigFetcher {\r\n}\r\n\r\n.utilities_ops-app-frame_ConfigFetcher_ConfigFetcher--spinner {\r\n  margin: 80px 0 40px;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_ConfigFetcher_ConfigFetcher--spinner * {\r\n  width: 60px;\r\n  height: 60px;\r\n}\r\n";
 styleInject(css_248z$m);
@@ -26739,7 +26745,7 @@ var unEscapeChars = function unEscapeChars(str) {
   }) : null;
 };
 
-var css_248z$g = ".utilities_ops-app-frame_Help_Help--backdrop {\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 64px;\r\n  width: 100vw;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n  width: 50vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 64px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n  color: #323130;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--title {\r\n  font-weight: 600;\r\n  font-size: 28px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header {\r\n  margin-bottom: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close i,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle .utilities_ops-app-frame_Help_Help--back {\r\n  color: #1d5ab9;\r\n  margin-right: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -5px;\r\n  left: 3px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper {\r\n  margin-top: 20px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3 i {\r\n  color: #1d5ab9;\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -8px;\r\n  cursor: pointer;\r\n  left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul {\r\n  list-style: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  margin: 6px 0;\r\n  display: flex;\r\n  cursor: pointer;\r\n  width: -webkit-fit-content;\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li:hover,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li img,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li img {\r\n  width: 17px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper .utilities_ops-app-frame_Help_Help--viewMore {\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper {\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper span {\r\n  position: absolute;\r\n  width: 29px;\r\n  height: 29px;\r\n  background: #f3f2f1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  bottom: 1.5px;\r\n  right: 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--mihelpSearch {\r\n  width: 100%;\r\n  margin-top: 15px;\r\n  padding: 0px 10px;\r\n  height: 32px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult {\r\n  width: 100%;\r\n  margin-top: 20px;\r\n  border-bottom: 1px solid #dcdcdc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult p {\r\n  margin-top: 13px;\r\n  margin-bottom: 30px;\r\n  text-overflow: ellipsis;\r\n  width: 100%;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper {\r\n  position: absolute;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper svg {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--overFlowHidden {\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--nonInteractive {\r\n  opacity: 0.3;\r\n  pointer-events: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitlewrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeswrapper {\r\n  color: #cbcbcb;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like {\r\n  margin-left: 10px;\r\n  font-size: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like i {\r\n  font-size: 14px;\r\n  margin-right: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle img {\r\n  width: 18px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span {\r\n  font-weight: 600;\r\n  font-size: 18px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper {\r\n  width: 100%;\r\n  margin-top: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper h3 {\r\n  font-weight: 300;\r\n  font-size: 34px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--faqsList {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category h3 {\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  font-size: 24px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian {\r\n  border-top: 1px solid #dcdcdc;\r\n  padding-top: 13px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question {\r\n  font-weight: 400;\r\n  font-size: 20px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question span {\r\n  transition: all 0.2s ease-out;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--answer {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  height: auto;\r\n  max-height: 0;\r\n  transition: max-height 0.2s ease-out;\r\n  overflow: hidden;\r\n  margin-top: 13px;\r\n  white-space: normal;\r\n}\r\n\r\n/* .accordian .answer span {\r\n    white-space: break-spaces;\r\n  } */\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote .utilities_ops-app-frame_Help_Help--releaseNoteContent {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle .utilities_ops-app-frame_Help_Help--helpArticleWrapper {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--articleFooter {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 30px;\r\n  padding-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--likeTxt {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  margin-right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--thanksText {\r\n  color: rgb(45, 206, 137);\r\n  font-weight: bold;\r\n  font-size: 16px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper textarea {\r\n  width: 300px;\r\n  height: 100px;\r\n  resize: none;\r\n  display: block;\r\n  margin-bottom: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper h5 {\r\n  font-size: 18px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper span {\r\n  background-color: rgb(29, 90, 185);\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  color: #2dce89;\r\n  margin-right: 6px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg {\r\n  border: 1px solid #2dce89 !important;\r\n  padding: 5px;\r\n  height: 30px;\r\n  width: 30px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover {\r\n  background-color: #2dce89;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg path,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover path {\r\n  fill: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike {\r\n  color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike svg {\r\n  border: 1px solid #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--dislike svg:hover {\r\n  background-color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper {\r\n  font-style: italic;\r\n  /* font-weight: 700; */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper b {\r\n  font-weight: 700;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper span {\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper {\r\n  width: 100%;\r\n  border-top: 1px solid #edebe9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper {\r\n  width: 100%;\r\n  border: 1px solid #dcdcdc;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin-top: 50px;\r\n  position: relative;\r\n  text-align: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper.utilities_ops-app-frame_Help_Help--noFlex {\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h2 {\r\n  font-size: 34px !important;\r\n  margin-bottom: 6px !important;\r\n  margin-top: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p {\r\n  font-size: 14px !important;\r\n  margin-bottom: 3px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p img {\r\n  position: relative;\r\n  top: 2px;\r\n  margin-left: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn {\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  margin-top: 7px;\r\n  border-radius: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn.utilities_ops-app-frame_Help_Help--disable {\r\n  pointer-events: none;\r\n  cursor: default;\r\n  background-color: #ccc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: absolute;\r\n  top: 0px;\r\n  right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h3 {\r\n  font-weight: 800 !important;\r\n  font-size: 20px !important;\r\n  line-height: 27px !important;\r\n  color: #1d5ab9 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper label,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper label {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #000100;\r\n  margin: 10px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper textarea {\r\n  resize: none;\r\n  height: 125px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--highlightRed {\r\n  font-weight: 600;\r\n  color: #f5365c;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--successMsg {\r\n  color: #1d5ab9;\r\n  font-size: 20px !important;\r\n  margin-top: 12px;\r\n  margin-bottom: 20px !important;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent {\r\n  max-width: 700px;\r\n  min-width: 600px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background: #edebe9;\r\n  padding: 10px 20px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogBody {\r\n  padding: 20px 20px 30px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader h3 {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  -webkit-text-decoration-line: underline;\r\n          text-decoration-line: underline;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -6px;\r\n  right: -1px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive {\r\n  padding: 22px;\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  font-size: 32px !important;\r\n  width: 100% !important;\r\n  border-radius: 10px;\r\n  align-items: center !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive:hover{\r\n  color: #fff !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive img {\r\n  width: 65px !important;\r\n  margin-right: 25px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--releaseTitle {\r\n  flex: 1;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--checkNow {\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  align-self: end;\r\n}\r\n";
+var css_248z$g = ".utilities_ops-app-frame_Help_Help--backdrop {\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 64px;\r\n  width: 100vw;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n  width: 50vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 64px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  color: #323130;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--title {\r\n  font-weight: 600;\r\n  font-size: 28px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header {\r\n  margin-bottom: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close i,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle .utilities_ops-app-frame_Help_Help--back {\r\n  color: #1d5ab9;\r\n  margin-right: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -5px;\r\n  left: 3px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper {\r\n  margin-top: 20px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3 i {\r\n  color: #1d5ab9;\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -8px;\r\n  cursor: pointer;\r\n  left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul {\r\n  list-style: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  margin: 6px 0;\r\n  display: flex;\r\n  cursor: pointer;\r\n  width: -webkit-fit-content;\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li:hover,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li img,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li img {\r\n  width: 17px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper .utilities_ops-app-frame_Help_Help--viewMore {\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper {\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper span {\r\n  position: absolute;\r\n  width: 29px;\r\n  height: 29px;\r\n  background: #f3f2f1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  bottom: 1.5px;\r\n  right: 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--mihelpSearch {\r\n  width: 100%;\r\n  margin-top: 15px;\r\n  padding: 0px 10px;\r\n  height: 32px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult {\r\n  width: 100%;\r\n  margin-top: 20px;\r\n  border-bottom: 1px solid #dcdcdc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult p {\r\n  margin-top: 13px;\r\n  margin-bottom: 30px;\r\n  text-overflow: ellipsis;\r\n  width: 100%;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper {\r\n  position: absolute;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper svg {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--overFlowHidden {\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--nonInteractive {\r\n  opacity: 0.3;\r\n  pointer-events: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitlewrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeswrapper {\r\n  color: #cbcbcb;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like {\r\n  margin-left: 10px;\r\n  font-size: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like i {\r\n  font-size: 14px;\r\n  margin-right: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle img {\r\n  width: 18px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span {\r\n  font-weight: 600;\r\n  font-size: 18px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper {\r\n  width: 100%;\r\n  margin-top: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper h3 {\r\n  font-weight: 300;\r\n  font-size: 34px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--faqsList {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category h3 {\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  font-size: 24px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian {\r\n  border-top: 1px solid #dcdcdc;\r\n  padding-top: 13px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question {\r\n  font-weight: 400;\r\n  font-size: 20px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question span {\r\n  transition: all 0.2s ease-out;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--answer {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  height: auto;\r\n  max-height: 0;\r\n  transition: max-height 0.2s ease-out;\r\n  overflow: hidden;\r\n  margin-top: 13px;\r\n  white-space: normal;\r\n}\r\n\r\n/* .accordian .answer span {\r\n    white-space: break-spaces;\r\n  } */\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote .utilities_ops-app-frame_Help_Help--releaseNoteContent {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle .utilities_ops-app-frame_Help_Help--helpArticleWrapper {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--articleFooter {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 30px;\r\n  padding-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--likeTxt {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  margin-right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--thanksText {\r\n  color: rgb(45, 206, 137);\r\n  font-weight: bold;\r\n  font-size: 16px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper textarea {\r\n  width: 300px;\r\n  height: 100px;\r\n  resize: none;\r\n  display: block;\r\n  margin-bottom: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper h5 {\r\n  font-size: 18px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper span {\r\n  background-color: rgb(29, 90, 185);\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  color: #2dce89;\r\n  margin-right: 6px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg {\r\n  border: 1px solid #2dce89 !important;\r\n  padding: 5px;\r\n  height: 30px;\r\n  width: 30px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover {\r\n  background-color: #2dce89;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg path,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover path {\r\n  fill: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike {\r\n  color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike svg {\r\n  border: 1px solid #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--dislike svg:hover {\r\n  background-color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper {\r\n  font-style: italic;\r\n  /* font-weight: 700; */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper b {\r\n  font-weight: 700;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper span {\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper {\r\n  width: 100%;\r\n  border-top: 1px solid #edebe9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper {\r\n  width: 100%;\r\n  border: 1px solid #dcdcdc;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin-top: 50px;\r\n  position: relative;\r\n  text-align: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper.utilities_ops-app-frame_Help_Help--noFlex {\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h2 {\r\n  font-size: 34px !important;\r\n  margin-bottom: 6px !important;\r\n  margin-top: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p {\r\n  font-size: 14px !important;\r\n  margin-bottom: 3px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p img {\r\n  position: relative;\r\n  top: 2px;\r\n  margin-left: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn {\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  margin-top: 7px;\r\n  border-radius: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn.utilities_ops-app-frame_Help_Help--disable {\r\n  pointer-events: none;\r\n  cursor: default;\r\n  background-color: #ccc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: absolute;\r\n  top: 0px;\r\n  right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h3 {\r\n  font-weight: 800 !important;\r\n  font-size: 20px !important;\r\n  line-height: 27px !important;\r\n  color: #1d5ab9 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper label,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper label {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #000100;\r\n  margin: 10px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper textarea {\r\n  resize: none;\r\n  height: 125px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--highlightRed {\r\n  font-weight: 600;\r\n  color: #f5365c;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--successMsg {\r\n  color: #1d5ab9;\r\n  font-size: 20px !important;\r\n  margin-top: 12px;\r\n  margin-bottom: 20px !important;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent {\r\n  max-width: 700px;\r\n  min-width: 600px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background: #edebe9;\r\n  padding: 10px 20px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogBody {\r\n  padding: 20px 20px 30px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader h3 {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  -webkit-text-decoration-line: underline;\r\n          text-decoration-line: underline;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -6px;\r\n  right: -1px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive {\r\n  padding: 22px;\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  font-size: 32px !important;\r\n  width: 100% !important;\r\n  border-radius: 10px;\r\n  align-items: center !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive:hover{\r\n  color: #fff !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive img {\r\n  width: 65px !important;\r\n  margin-right: 25px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--releaseTitle {\r\n  flex: 1;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--checkNow {\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  align-self: end;\r\n}\r\n";
 styleInject(css_248z$g);
 
 var _styleModuleImportMap$6 = {
@@ -27238,13 +27244,20 @@ var HelpArticle = function HelpArticle(_ref) {
     className: "utilities_ops-app-frame_Help_Help--highlightRed"
   }, "innovation idea"), " or a", ' ', React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--highlightRed"
-  }, "suggestion"), ", click on the", ' ', React__default["default"].createElement("span", {
+  }, "suggestion"), ", ", React__default["default"].createElement("span", {
+    className: "utilities_ops-app-frame_Help_Help--highlightRed"
+  }, "click"), " on the", ' ', React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--highlightRed"
   }, "light bulb"), React__default["default"].createElement("img", {
     src: "/assets/images/mihelpIcons/icon-bulb.svg"
   }), " on top right of the G2 portal. For anything else, please proceed below."), React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_Help--CategoryWrapper"
-  }, React__default["default"].createElement("label", null, "Category"), React__default["default"].createElement("select", {
+  }, React__default["default"].createElement("label", null, "Category", React__default["default"].createElement("span", {
+    className: "utilities_ops-app-frame_Help_Help--highlightRed",
+    style: {
+      marginLeft: '1px'
+    }
+  }, "*")), React__default["default"].createElement("select", {
     value: category,
     onChange: function onChange(e) {
       return setCategory(e.target.value);
@@ -27257,7 +27270,12 @@ var HelpArticle = function HelpArticle(_ref) {
     }, option.value);
   }))), React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_Help--questionWrapper"
-  }, React__default["default"].createElement("label", null, "Your Question"), React__default["default"].createElement("textarea", {
+  }, React__default["default"].createElement("label", null, "Your Question", React__default["default"].createElement("span", {
+    className: "utilities_ops-app-frame_Help_Help--highlightRed",
+    style: {
+      marginLeft: '1px'
+    }
+  }, "*")), React__default["default"].createElement("textarea", {
     value: question,
     onChange: function onChange(e) {
       return setQuestion(e.target.value);
@@ -27274,11 +27292,11 @@ var HelpArticle = function HelpArticle(_ref) {
     }
   }), React__default["default"].createElement("p", {
     className: "utilities_ops-app-frame_Help_Help--successMsg"
-  }, "Thanks! Your question submitted successfully"), React__default["default"].createElement("span", {
+  }, "Thanks! Your question has been submitted successfully."), React__default["default"].createElement("span", {
     style: {
       marginBottom: '12px'
     }
-  }, "Due to Covid-19 Pandemic, 72 hours is the minimum response time for your question."), React__default["default"].createElement("span", {
+  }, "Please allow at least 72 hours for us to get back to you."), React__default["default"].createElement("span", {
     style: {
       marginBottom: '100px'
     }
@@ -27522,35 +27540,62 @@ var HelpSideBar = function HelpSideBar(_ref) {
 
   var _useState21 = React.useState(false),
       _useState22 = _slicedToArray(_useState21, 2),
-      showSuccessSection = _useState22[0],
-      setShowSuccessSection = _useState22[1];
+      overFlowHidden = _useState22[0],
+      setOverFlowHidden = _useState22[1];
 
   var _useState23 = React.useState(false),
       _useState24 = _slicedToArray(_useState23, 2),
-      backClicked = _useState24[0],
-      setBackClicked = _useState24[1];
+      showSuccessSection = _useState24[0],
+      setShowSuccessSection = _useState24[1];
 
-  var _useState25 = React.useState(null),
+  var _useState25 = React.useState(false),
       _useState26 = _slicedToArray(_useState25, 2),
-      faqs = _useState26[0],
-      setFaqs = _useState26[1];
+      backClicked = _useState26[0],
+      setBackClicked = _useState26[1];
 
   var _useState27 = React.useState(null),
       _useState28 = _slicedToArray(_useState27, 2),
-      selectedFaq = _useState28[0],
-      setSelectedFaq = _useState28[1];
+      faqs = _useState28[0],
+      setFaqs = _useState28[1];
+
+  var _useState29 = React.useState(null),
+      _useState30 = _slicedToArray(_useState29, 2),
+      selectedFaq = _useState30[0],
+      setSelectedFaq = _useState30[1];
 
   var spinnerRef = React.useRef();
   var questionSectionRef = React.useRef();
+  var isScrolling = null;
+
+  var handleScroll = function handleScroll() {
+    clearTimeout(isScrolling);
+    isScrolling = setTimeout(function () {
+      isScrolling = null;
+      mihelpRef.current.removeEventListener('scroll', handleScroll);
+      setOverFlowHidden(true);
+    }, 66);
+  };
+
   React.useEffect(function () {
     if (!showQuestionSection) {
       setShowSuccessSection(false);
+      setOverFlowHidden(false);
     } else {
       var offsetTop = questionSectionRef.current.offsetTop;
+
+      if (isChrome()) {
+        mihelpRef.current.addEventListener('scroll', handleScroll);
+      }
+
       mihelpRef.current.scroll({
         top: offsetTop - 50,
         behavior: 'smooth'
       });
+
+      if (isChrome() && Math.abs(mihelpRef.current.scrollHeight - mihelpRef.current.scrollTop - mihelpRef.current.clientHeight) <= 10) {
+        mihelpRef.current.removeEventListener('scroll', handleScroll);
+        setOverFlowHidden(true);
+      }
     }
   }, [showQuestionSection]);
   React.useEffect(function () {
@@ -28133,7 +28178,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
       width: getNotificationWrapperWidth()
     },
     ref: mihelpRef,
-    className: _getClassName("miHelpSideBar ".concat(!helpContent || showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$3, {
+    className: _getClassName("miHelpSideBar ".concat(!helpContent || isChrome() && overFlowHidden || !isChrome() && showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$3, {
       "handleMissingStyleName": "warn"
     })
   }, React__default["default"].createElement("div", {
@@ -41368,11 +41413,12 @@ function LatestReleaseDialog(_ref) {
   }, React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_Help--releaseDialogContent"
   }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_Help_Help--releaseDialogHeader",
+    className: "utilities_ops-app-frame_Help_Help--releaseDialogHeader"
+  }, React__default["default"].createElement("h3", null, release.title), React__default["default"].createElement("span", {
     onClick: function onClick() {
       return handleRedirect(redirectContants.RELEASE_NOTES, mihelpAppPath);
     }
-  }, React__default["default"].createElement("h3", null, release.title), React__default["default"].createElement("span", null, "All Release Notes", React__default["default"].createElement(coreComponents.Icon, {
+  }, "All Release Notes", React__default["default"].createElement(coreComponents.Icon, {
     name: "open_in_new",
     variant: "material"
   }))), React__default["default"].createElement("div", {
@@ -44724,8 +44770,8 @@ function b({
   } = o;
   if (document.getElementById(t)) return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);
   const c = document.head || document.getElementsByTagName("head")[0],
-        s = document.createElement("style");
-  s.id = t, s.type = "text/css", "top" === i && c.firstChild ? c.insertBefore(s, c.firstChild) : c.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), w[r] = !0;
+        a = document.createElement("style");
+  a.id = t, a.type = "text/css", "top" === i && c.firstChild ? c.insertBefore(a, c.firstChild) : c.appendChild(a), a.styleSheet ? a.styleSheet.cssText = e : a.appendChild(document.createTextNode(e)), w[r] = !0;
 }
 
 const E = (e, t, r) => {
@@ -44752,7 +44798,7 @@ const E = (e, t, r) => {
   getTooltipData: () => g
 });
 
-function L(e = _) {
+function O(e = _) {
   return React.useContext(A).getTooltipData(e);
 }
 
@@ -44765,7 +44811,7 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
     return "auto" === r || "scroll" === r;
   });
 },
-      x = e => {
+      k = e => {
   if (!e) return null;
   let t = e.parentElement;
 
@@ -44776,7 +44822,7 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
 
   return document.scrollingElement || document.documentElement;
 },
-      k = async ({
+      x = async ({
   elementReference: e = null,
   tooltipReference: t = null,
   tooltipArrowReference: r = null,
@@ -44798,14 +44844,14 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
     tooltipArrowStyles: {},
     place: o
   };
-  const s = i;
-  return r ? (s.push(arrow({
+  const a = i;
+  return r ? (a.push(arrow({
     element: r,
     padding: 5
   })), computePosition(e, t, {
     placement: o,
     strategy: l,
-    middleware: s
+    middleware: a
   }).then(({
     x: e,
     y: t,
@@ -44819,36 +44865,22 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
       border: c
     },
           {
-      x: s,
-      y: a
+      x: a,
+      y: s
     } = null !== (n = o.arrow) && void 0 !== n ? n : {
       x: 0,
       y: 0
     },
-          d = null !== (l = {
+          u = null !== (l = {
       top: "bottom",
       right: "left",
       bottom: "top",
       left: "right"
     }[r.split("-")[0]]) && void 0 !== l ? l : "bottom",
-          u = c && {
-      top: {
-        borderBottom: c,
-        borderRight: c
-      },
-      right: {
-        borderBottom: c,
-        borderLeft: c
-      },
-      bottom: {
-        borderTop: c,
-        borderLeft: c
-      },
-      left: {
-        borderTop: c,
-        borderRight: c
-      }
-    }[r.split("-")[0]];
+          d = c && {
+      borderBottom: c,
+      borderRight: c
+    };
     let p = 0;
 
     if (c) {
@@ -44859,19 +44891,19 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
     return {
       tooltipStyles: i,
       tooltipArrowStyles: {
-        left: null != s ? `${s}px` : "",
-        top: null != a ? `${a}px` : "",
+        left: null != a ? `${a}px` : "",
+        top: null != s ? `${s}px` : "",
         right: "",
         bottom: "",
-        ...u,
-        [d]: `-${4 + p}px`
+        ...d,
+        [u]: `-${4 + p}px`
       },
       place: r
     };
   })) : computePosition(e, t, {
     placement: "bottom",
     strategy: l,
-    middleware: s
+    middleware: a
   }).then(({
     x: e,
     y: t,
@@ -44886,11 +44918,11 @@ const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect
   }));
 };
 
-var $ = "core-styles-module_tooltip__3vRRp",
-    C = "core-styles-module_fixed__pcSol",
+var C = "core-styles-module_tooltip__3vRRp",
+    $ = "core-styles-module_fixed__pcSol",
     I = "core-styles-module_arrow__cvMwQ",
-    B = "core-styles-module_noArrow__xock6",
-    j = "core-styles-module_clickable__ZuTTB",
+    j = "core-styles-module_noArrow__xock6",
+    B = "core-styles-module_clickable__ZuTTB",
     D = "core-styles-module_show__Nt9eE",
     H = {
   tooltip: "styles-module_tooltip__mnnfp",
@@ -44907,10 +44939,10 @@ const z = ({
   id: t,
   className: n,
   classNameArrow: l,
-  variant: s = "dark",
-  anchorId: a,
-  anchorSelect: d,
-  place: u = "top",
+  variant: a = "dark",
+  anchorId: s,
+  anchorSelect: u,
+  place: d = "top",
   offset: p = 10,
   events: v = ["hover"],
   openOnClick: f = !1,
@@ -44922,7 +44954,7 @@ const z = ({
   float: g = !1,
   hidden: A = !1,
   noArrow: T = !1,
-  clickable: O = !1,
+  clickable: L = !1,
   closeOnEsc: N = !1,
   closeOnScroll: z = !1,
   closeOnResize: q = !1,
@@ -44937,33 +44969,35 @@ const z = ({
   activeAnchor: V,
   setActiveAnchor: Z,
   border: G,
-  opacity: J
+  opacity: J,
+  arrowColor: Q
 }) => {
-  const Q = React.useRef(null),
-        ee = React.useRef(null),
+  const ee = React.useRef(null),
         te = React.useRef(null),
         re = React.useRef(null),
-        [oe, ne] = React.useState(u),
-        [le, ie] = React.useState({}),
-        [ce, se] = React.useState({}),
-        [ae, de] = React.useState(!1),
-        [ue, pe] = React.useState(!1),
-        ve = React.useRef(!1),
-        me = React.useRef(null),
+        oe = React.useRef(null),
+        [ne, le] = React.useState(d),
+        [ie, ce] = React.useState({}),
+        [ae, se] = React.useState({}),
+        [ue, de] = React.useState(!1),
+        [pe, ve] = React.useState(!1),
+        me = React.useRef(!1),
+        ye = React.useRef(null),
         {
-    anchorRefs: ye,
-    setActiveAnchor: fe
-  } = L(t),
-        he = React.useRef(!1),
-        [we, be] = React.useState([]),
-        Se = React.useRef(!1),
-        Ee = f || v.includes("click");
-  R(() => (Se.current = !0, () => {
-    Se.current = !1;
+    anchorRefs: fe,
+    setActiveAnchor: he
+  } = O(t),
+        we = React.useRef(!1),
+        [be, Se] = React.useState([]),
+        Ee = React.useRef(!1),
+        _e = f || v.includes("click");
+
+  R(() => (Ee.current = !0, () => {
+    Ee.current = !1;
   }), []), React.useEffect(() => {
-    if (!ae) {
+    if (!ue) {
       const e = setTimeout(() => {
-        pe(!1);
+        ve(!1);
       }, 150);
       return () => {
         clearTimeout(e);
@@ -44971,17 +45005,17 @@ const z = ({
     }
 
     return () => null;
-  }, [ae]);
+  }, [ue]);
 
-  const _e = e => {
-    Se.current && (e && pe(!0), setTimeout(() => {
-      Se.current && (null == Y || Y(e), void 0 === X && de(e));
+  const ge = e => {
+    Ee.current && (e && ve(!0), setTimeout(() => {
+      Ee.current && (null == Y || Y(e), void 0 === X && de(e));
     }, 10));
   };
 
   React.useEffect(() => {
     if (void 0 === X) return () => null;
-    X && pe(!0);
+    X && ve(!0);
     const e = setTimeout(() => {
       de(X);
     }, 10);
@@ -44989,36 +45023,36 @@ const z = ({
       clearTimeout(e);
     };
   }, [X]), React.useEffect(() => {
-    ae !== ve.current && (ve.current = ae, ae ? null == P || P() : null == F || F());
-  }, [ae]);
+    ue !== me.current && (me.current = ue, ue ? null == P || P() : null == F || F());
+  }, [ue]);
 
-  const ge = (e = _) => {
-    re.current && clearTimeout(re.current), re.current = setTimeout(() => {
-      he.current || _e(!1);
+  const Ae = (e = _) => {
+    oe.current && clearTimeout(oe.current), oe.current = setTimeout(() => {
+      we.current || ge(!1);
     }, e);
   },
-        Ae = e => {
+        Te = e => {
     var t;
     if (!e) return;
     const r = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
-    if (!(null == r ? void 0 : r.isConnected)) return Z(null), void fe({
+    if (!(null == r ? void 0 : r.isConnected)) return Z(null), void he({
       current: null
     });
-    S ? (te.current && clearTimeout(te.current), te.current = setTimeout(() => {
-      _e(!0);
-    }, S)) : _e(!0), Z(r), fe({
+    S ? (re.current && clearTimeout(re.current), re.current = setTimeout(() => {
+      ge(!0);
+    }, S)) : ge(!0), Z(r), he({
       current: r
-    }), re.current && clearTimeout(re.current);
+    }), oe.current && clearTimeout(oe.current);
   },
-        Te = () => {
-    O ? ge(_ || 100) : _ ? ge() : _e(!1), te.current && clearTimeout(te.current);
+        Oe = () => {
+    L ? Ae(_ || 100) : _ ? Ae() : ge(!1), re.current && clearTimeout(re.current);
   },
         Le = ({
     x: e,
     y: t
   }) => {
-    k({
-      place: u,
+    x({
+      place: d,
       offset: p,
       elementReference: {
         getBoundingClientRect: () => ({
@@ -45032,109 +45066,109 @@ const z = ({
           bottom: t
         })
       },
-      tooltipReference: Q.current,
-      tooltipArrowReference: ee.current,
+      tooltipReference: ee.current,
+      tooltipArrowReference: te.current,
       strategy: h,
       middlewares: w,
       border: G
     }).then(e => {
-      Object.keys(e.tooltipStyles).length && ie(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), ne(e.place);
+      Object.keys(e.tooltipStyles).length && ce(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), le(e.place);
     });
   },
-        Oe = e => {
+        Re = e => {
     if (!e) return;
     const t = e,
           r = {
       x: t.clientX,
       y: t.clientY
     };
-    Le(r), me.current = r;
-  },
-        Re = e => {
-    Ae(e), _ && ge();
+    Le(r), ye.current = r;
   },
         Ne = e => {
+    Te(e), _ && Ae();
+  },
+        ke = e => {
     var t;
-    [document.querySelector(`[id='${a}']`), ...we].some(t => null == t ? void 0 : t.contains(e.target)) || (null === (t = Q.current) || void 0 === t ? void 0 : t.contains(e.target)) || (_e(!1), te.current && clearTimeout(te.current));
+    [document.querySelector(`[id='${s}']`), ...be].some(t => null == t ? void 0 : t.contains(e.target)) || (null === (t = ee.current) || void 0 === t ? void 0 : t.contains(e.target)) || (ge(!1), re.current && clearTimeout(re.current));
   },
-        xe = E(Ae, 50, !0),
-        ke = E(Te, 50, !0),
+        xe = E(Te, 50, !0),
+        Ce = E(Oe, 50, !0),
         $e = React.useCallback(() => {
-    M ? Le(M) : g ? me.current && Le(me.current) : k({
-      place: u,
+    M ? Le(M) : g ? ye.current && Le(ye.current) : x({
+      place: d,
       offset: p,
       elementReference: V,
-      tooltipReference: Q.current,
-      tooltipArrowReference: ee.current,
+      tooltipReference: ee.current,
+      tooltipArrowReference: te.current,
       strategy: h,
       middlewares: w,
       border: G
     }).then(e => {
-      Se.current && (Object.keys(e.tooltipStyles).length && ie(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), ne(e.place));
+      Ee.current && (Object.keys(e.tooltipStyles).length && ce(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && se(e.tooltipArrowStyles), le(e.place));
     });
-  }, [ae, V, K, W, u, p, h, M, g]);
+  }, [ue, V, K, W, d, p, h, M, g]);
 
   React.useEffect(() => {
     var e, t;
-    const r = new Set(ye);
-    we.forEach(e => {
+    const r = new Set(fe);
+    be.forEach(e => {
       r.add({
         current: e
       });
     });
-    const o = document.querySelector(`[id='${a}']`);
+    const o = document.querySelector(`[id='${s}']`);
     o && r.add({
       current: o
     });
 
     const n = () => {
-      _e(!1);
+      ge(!1);
     },
-          l = x(V),
-          i = x(Q.current);
+          l = k(V),
+          i = k(ee.current);
 
     z && (window.addEventListener("scroll", n), null == l || l.addEventListener("scroll", n), null == i || i.addEventListener("scroll", n));
     let c = null;
-    q ? window.addEventListener("resize", n) : V && Q.current && (c = autoUpdate(V, Q.current, $e, {
+    q ? window.addEventListener("resize", n) : V && ee.current && (c = autoUpdate(V, ee.current, $e, {
       ancestorResize: !0,
       elementResize: !0,
       layoutShift: !0
     }));
 
-    const s = e => {
-      "Escape" === e.key && _e(!1);
+    const a = e => {
+      "Escape" === e.key && ge(!1);
     };
 
-    N && window.addEventListener("keydown", s);
-    const d = [];
-    Ee ? (window.addEventListener("click", Ne), d.push({
+    N && window.addEventListener("keydown", a);
+    const u = [];
+    _e ? (window.addEventListener("click", ke), u.push({
       event: "click",
-      listener: Re
-    })) : (d.push({
+      listener: Ne
+    })) : (u.push({
       event: "mouseenter",
       listener: xe
     }, {
       event: "mouseleave",
-      listener: ke
+      listener: Ce
     }, {
       event: "focus",
       listener: xe
     }, {
       event: "blur",
-      listener: ke
-    }), g && d.push({
+      listener: Ce
+    }), g && u.push({
       event: "mousemove",
-      listener: Oe
+      listener: Re
     }));
 
-    const u = () => {
-      he.current = !0;
+    const d = () => {
+      we.current = !0;
     },
           p = () => {
-      he.current = !1, Te();
+      we.current = !1, Oe();
     };
 
-    return O && !Ee && (null === (e = Q.current) || void 0 === e || e.addEventListener("mouseenter", u), null === (t = Q.current) || void 0 === t || t.addEventListener("mouseleave", p)), d.forEach(({
+    return L && !_e && (null === (e = ee.current) || void 0 === e || e.addEventListener("mouseenter", d), null === (t = ee.current) || void 0 === t || t.addEventListener("mouseleave", p)), u.forEach(({
       event: e,
       listener: t
     }) => {
@@ -45144,7 +45178,7 @@ const z = ({
       });
     }), () => {
       var e, t;
-      z && (window.removeEventListener("scroll", n), null == l || l.removeEventListener("scroll", n), null == i || i.removeEventListener("scroll", n)), q ? window.removeEventListener("resize", n) : null == c || c(), Ee && window.removeEventListener("click", Ne), N && window.removeEventListener("keydown", s), O && !Ee && (null === (e = Q.current) || void 0 === e || e.removeEventListener("mouseenter", u), null === (t = Q.current) || void 0 === t || t.removeEventListener("mouseleave", p)), d.forEach(({
+      z && (window.removeEventListener("scroll", n), null == l || l.removeEventListener("scroll", n), null == i || i.removeEventListener("scroll", n)), q ? window.removeEventListener("resize", n) : null == c || c(), _e && window.removeEventListener("click", ke), N && window.removeEventListener("keydown", a), L && !_e && (null === (e = ee.current) || void 0 === e || e.removeEventListener("mouseenter", d), null === (t = ee.current) || void 0 === t || t.removeEventListener("mouseleave", p)), u.forEach(({
         event: e,
         listener: t
       }) => {
@@ -45154,8 +45188,8 @@ const z = ({
         });
       });
     };
-  }, [V, $e, ue, ye, we, N, v]), React.useEffect(() => {
-    let e = null != d ? d : "";
+  }, [V, $e, pe, fe, be, N, v]), React.useEffect(() => {
+    let e = null != u ? u : "";
     !e && t && (e = `[data-tooltip-id='${t}']`);
     const r = new MutationObserver(r => {
       const o = [];
@@ -45166,12 +45200,12 @@ const z = ({
 
         if ("childList" === r.type && (V && [...r.removedNodes].some(e => {
           var t;
-          return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (pe(!1), _e(!1), Z(null), te.current && clearTimeout(te.current), re.current && clearTimeout(re.current), !0);
+          return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (ve(!1), ge(!1), Z(null), re.current && clearTimeout(re.current), oe.current && clearTimeout(oe.current), !0);
         }), e)) try {
           const t = [...r.addedNodes].filter(e => 1 === e.nodeType);
           o.push(...t.filter(t => t.matches(e))), o.push(...t.flatMap(t => [...t.querySelectorAll(e)]));
         } catch (e) {}
-      }), o.length && be(e => [...e, ...o]);
+      }), o.length && Se(e => [...e, ...o]);
     });
     return r.observe(document.body, {
       childList: !0,
@@ -45181,7 +45215,7 @@ const z = ({
     }), () => {
       r.disconnect();
     };
-  }, [t, d, V]), React.useEffect(() => {
+  }, [t, u, V]), React.useEffect(() => {
     $e();
   }, [$e]), React.useEffect(() => {
     if (!(null == U ? void 0 : U.current)) return () => null;
@@ -45193,41 +45227,43 @@ const z = ({
     };
   }, [K, null == U ? void 0 : U.current]), React.useEffect(() => {
     var e;
-    const t = document.querySelector(`[id='${a}']`),
-          r = [...we, t];
-    V && r.includes(V) || Z(null !== (e = we[0]) && void 0 !== e ? e : t);
-  }, [a, we, V]), React.useEffect(() => () => {
-    te.current && clearTimeout(te.current), re.current && clearTimeout(re.current);
+    const t = document.querySelector(`[id='${s}']`),
+          r = [...be, t];
+    V && r.includes(V) || Z(null !== (e = be[0]) && void 0 !== e ? e : t);
+  }, [s, be, V]), React.useEffect(() => () => {
+    re.current && clearTimeout(re.current), oe.current && clearTimeout(oe.current);
   }, []), React.useEffect(() => {
-    let e = d;
+    let e = u;
     if (!e && t && (e = `[data-tooltip-id='${t}']`), e) try {
       const t = Array.from(document.querySelectorAll(e));
-      be(t);
+      Se(t);
     } catch (e) {
-      be([]);
+      Se([]);
     }
-  }, [t, d]);
-  const Ce = !A && K && ae && Object.keys(le).length > 0;
-  return ue ? React__default["default"].createElement(b, {
+  }, [t, u]);
+  const Ie = !A && K && ue && Object.keys(ie).length > 0;
+  return pe ? React__default["default"].createElement(b, {
     id: t,
     role: "tooltip",
-    className: classnames("react-tooltip", $, H.tooltip, H[s], n, `react-tooltip__place-${oe}`, {
-      "react-tooltip__show": Ce,
-      [D]: Ce,
-      [C]: "fixed" === h,
-      [j]: O
+    className: classnames("react-tooltip", C, H.tooltip, H[a], n, `react-tooltip__place-${ne}`, {
+      "react-tooltip__show": Ie,
+      [D]: Ie,
+      [$]: "fixed" === h,
+      [B]: L
     }),
     style: { ...W,
-      ...le,
-      opacity: void 0 !== J && Ce ? J : void 0
+      ...ie,
+      opacity: void 0 !== J && Ie ? J : void 0
     },
-    ref: Q
+    ref: ee
   }, K, React__default["default"].createElement(b, {
     className: classnames("react-tooltip-arrow", I, H.arrow, l, {
-      [B]: T
+      [j]: T
     }),
-    style: ce,
-    ref: ee
+    style: { ...ae,
+      background: Q ? `linear-gradient(to right bottom, transparent 50%, ${Q} 50%)` : void 0
+    },
+    ref: te
   })) : null;
 },
       q = ({
@@ -45242,10 +45278,10 @@ const z = ({
   anchorId: o,
   anchorSelect: n,
   content: l,
-  html: s,
-  render: a,
-  className: d,
-  classNameArrow: u,
+  html: a,
+  render: s,
+  className: u,
+  classNameArrow: d,
   variant: p = "dark",
   place: v = "top",
   offset: m = 10,
@@ -45260,39 +45296,40 @@ const z = ({
   float: g = !1,
   hidden: A = !1,
   noArrow: T = !1,
-  clickable: O = !1,
+  clickable: L = !1,
   closeOnEsc: R = !1,
   closeOnScroll: N = !1,
-  closeOnResize: x = !1,
-  style: k,
-  position: $,
-  isOpen: C,
+  closeOnResize: k = !1,
+  style: x,
+  position: C,
+  isOpen: $,
   disableStyleInjection: I = !1,
-  border: B,
-  opacity: j,
-  setIsOpen: D,
-  afterShow: H,
-  afterHide: W
+  border: j,
+  opacity: B,
+  arrowColor: D,
+  setIsOpen: H,
+  afterShow: W,
+  afterHide: M
 }) => {
-  const [M, P] = React.useState(l),
-        [F, K] = React.useState(s),
-        [U, X] = React.useState(v),
-        [Y, V] = React.useState(p),
-        [Z, G] = React.useState(m),
-        [J, Q] = React.useState(E),
-        [ee, te] = React.useState(_),
-        [re, oe] = React.useState(g),
-        [ne, le] = React.useState(A),
-        [ie, ce] = React.useState(y),
-        [se, ae] = React.useState(h),
-        [de, ue] = React.useState(b),
-        [pe, ve] = React.useState(null),
-        me = React.useRef(I),
+  const [P, F] = React.useState(l),
+        [K, U] = React.useState(a),
+        [X, Y] = React.useState(v),
+        [V, Z] = React.useState(p),
+        [G, J] = React.useState(m),
+        [Q, ee] = React.useState(E),
+        [te, re] = React.useState(_),
+        [oe, ne] = React.useState(g),
+        [le, ie] = React.useState(A),
+        [ce, ae] = React.useState(y),
+        [se, ue] = React.useState(h),
+        [de, pe] = React.useState(b),
+        [ve, me] = React.useState(null),
+        ye = React.useRef(I),
         {
-    anchorRefs: ye,
-    activeAnchor: fe
-  } = L(t),
-        he = e => null == e ? void 0 : e.getAttributeNames().reduce((t, r) => {
+    anchorRefs: fe,
+    activeAnchor: he
+  } = O(t),
+        we = e => null == e ? void 0 : e.getAttributeNames().reduce((t, r) => {
     var o;
 
     if (r.startsWith("data-tooltip-")) {
@@ -45301,48 +45338,48 @@ const z = ({
 
     return t;
   }, {}),
-        we = e => {
+        be = e => {
     const t = {
       place: e => {
         var t;
-        X(null !== (t = e) && void 0 !== t ? t : v);
+        Y(null !== (t = e) && void 0 !== t ? t : v);
       },
       content: e => {
-        P(null != e ? e : l);
+        F(null != e ? e : l);
       },
       html: e => {
-        K(null != e ? e : s);
+        U(null != e ? e : a);
       },
       variant: e => {
         var t;
-        V(null !== (t = e) && void 0 !== t ? t : p);
+        Z(null !== (t = e) && void 0 !== t ? t : p);
       },
       offset: e => {
-        G(null === e ? m : Number(e));
+        J(null === e ? m : Number(e));
       },
       wrapper: e => {
         var t;
-        ce(null !== (t = e) && void 0 !== t ? t : y);
+        ae(null !== (t = e) && void 0 !== t ? t : y);
       },
       events: e => {
         const t = null == e ? void 0 : e.split(" ");
-        ae(null != t ? t : h);
+        ue(null != t ? t : h);
       },
       "position-strategy": e => {
         var t;
-        ue(null !== (t = e) && void 0 !== t ? t : b);
+        pe(null !== (t = e) && void 0 !== t ? t : b);
       },
       "delay-show": e => {
-        Q(null === e ? E : Number(e));
+        ee(null === e ? E : Number(e));
       },
       "delay-hide": e => {
-        te(null === e ? _ : Number(e));
+        re(null === e ? _ : Number(e));
       },
       float: e => {
-        oe(null === e ? g : "true" === e);
+        ne(null === e ? g : "true" === e);
       },
       hidden: e => {
-        le(null === e ? A : "true" === e);
+        ie(null === e ? A : "true" === e);
       }
     };
     Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, r]) => {
@@ -45352,27 +45389,27 @@ const z = ({
   };
 
   React.useEffect(() => {
-    P(l);
+    F(l);
   }, [l]), React.useEffect(() => {
-    K(s);
-  }, [s]), React.useEffect(() => {
-    X(v);
+    U(a);
+  }, [a]), React.useEffect(() => {
+    Y(v);
   }, [v]), React.useEffect(() => {
-    V(p);
+    Z(p);
   }, [p]), React.useEffect(() => {
-    G(m);
+    J(m);
   }, [m]), React.useEffect(() => {
-    Q(E);
+    ee(E);
   }, [E]), React.useEffect(() => {
-    te(_);
+    re(_);
   }, [_]), React.useEffect(() => {
-    oe(g);
+    ne(g);
   }, [g]), React.useEffect(() => {
-    le(A);
+    ie(A);
   }, [A]), React.useEffect(() => {
-    ue(b);
+    pe(b);
   }, [b]), React.useEffect(() => {
-    me.current !== I && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
+    ye.current !== I && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
   }, [I]), React.useEffect(() => {
     "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", {
       detail: {
@@ -45382,7 +45419,7 @@ const z = ({
     }));
   }, []), React.useEffect(() => {
     var e;
-    const r = new Set(ye);
+    const r = new Set(fe);
     let l = n;
     if (!l && t && (l = `[data-tooltip-id='${t}']`), l) try {
       document.querySelectorAll(l).forEach(e => {
@@ -45397,86 +45434,87 @@ const z = ({
     if (i && r.add({
       current: i
     }), !r.size) return () => null;
-    const c = null !== (e = null != pe ? pe : i) && void 0 !== e ? e : fe.current,
-          s = new MutationObserver(e => {
+    const c = null !== (e = null != ve ? ve : i) && void 0 !== e ? e : he.current,
+          a = new MutationObserver(e => {
       e.forEach(e => {
         var t;
         if (!c || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
-        const r = he(c);
-        we(r);
+        const r = we(c);
+        be(r);
       });
     }),
-          a = {
+          s = {
       attributes: !0,
       childList: !1,
       subtree: !1
     };
 
     if (c) {
-      const e = he(c);
-      we(e), s.observe(c, a);
+      const e = we(c);
+      be(e), a.observe(c, s);
     }
 
     return () => {
-      s.disconnect();
+      a.disconnect();
     };
-  }, [ye, fe, pe, o, n]), React.useEffect(() => {
-    (null == k ? void 0 : k.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), B && !CSS.supports("border", `${B}`) && console.warn(`[react-tooltip] "${B}" is not a valid \`border\`.`), (null == k ? void 0 : k.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), j && !CSS.supports("opacity", `${j}`) && console.warn(`[react-tooltip] "${j}" is not a valid \`opacity\`.`);
+  }, [fe, he, ve, o, n]), React.useEffect(() => {
+    (null == x ? void 0 : x.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), j && !CSS.supports("border", `${j}`) && console.warn(`[react-tooltip] "${j}" is not a valid \`border\`.`), (null == x ? void 0 : x.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), B && !CSS.supports("opacity", `${B}`) && console.warn(`[react-tooltip] "${B}" is not a valid \`opacity\`.`);
   }, []);
-  let be = f;
-  const Se = React.useRef(null);
+  let Se = f;
+  const Ee = React.useRef(null);
 
-  if (a) {
-    const t = a({
-      content: null != M ? M : null,
-      activeAnchor: pe
+  if (s) {
+    const t = s({
+      content: null != P ? P : null,
+      activeAnchor: ve
     });
-    be = t ? React__default["default"].createElement("div", {
-      ref: Se,
+    Se = t ? React__default["default"].createElement("div", {
+      ref: Ee,
       className: "react-tooltip-content-wrapper"
     }, t) : null;
-  } else M && (be = M);
+  } else P && (Se = P);
 
-  F && (be = React__default["default"].createElement(q, {
-    content: F
+  K && (Se = React__default["default"].createElement(q, {
+    content: K
   }));
-  const Ee = {
+  const _e = {
     id: t,
     anchorId: o,
     anchorSelect: n,
-    className: d,
-    classNameArrow: u,
-    content: be,
-    contentWrapperRef: Se,
-    place: U,
-    variant: Y,
-    offset: Z,
-    wrapper: ie,
+    className: u,
+    classNameArrow: d,
+    content: Se,
+    contentWrapperRef: Ee,
+    place: X,
+    variant: V,
+    offset: G,
+    wrapper: ce,
     events: se,
     openOnClick: w,
     positionStrategy: de,
     middlewares: S,
-    delayShow: J,
-    delayHide: ee,
-    float: re,
-    hidden: ne,
+    delayShow: Q,
+    delayHide: te,
+    float: oe,
+    hidden: le,
     noArrow: T,
-    clickable: O,
+    clickable: L,
     closeOnEsc: R,
     closeOnScroll: N,
-    closeOnResize: x,
-    style: k,
-    position: $,
-    isOpen: C,
-    border: B,
-    opacity: j,
-    setIsOpen: D,
-    afterShow: H,
-    afterHide: W,
-    activeAnchor: pe,
-    setActiveAnchor: e => ve(e)
-  };
-  return React__default["default"].createElement(z, { ...Ee
+    closeOnResize: k,
+    style: x,
+    position: C,
+    isOpen: $,
+    border: j,
+    opacity: B,
+    arrowColor: D,
+    setIsOpen: H,
+    afterShow: W,
+    afterHide: M,
+    activeAnchor: ve,
+    setActiveAnchor: e => me(e)
+  };
+  return React__default["default"].createElement(z, { ..._e
   });
 };
 
@@ -45486,7 +45524,7 @@ const z = ({
     type: "core"
   }), e.detail.disableBase || b({
     css: `
-.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px;transform:rotate(45deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,
+.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,
     type: "base"
   });
 });