@copart/ops-tool-kit 1.12.18-alpha.2 → 1.12.18-alpha.4

package/dist/ops-tool-kit.js

@@ -47,7 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$1 = "@copart/ops-tool-kit";
-const version$3 = "1.12.18-alpha.2";
+const version$3 = "1.12.18-alpha.4";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -21496,7 +21496,7 @@ var MobileMenu = function MobileMenu(props) {
 var css_248z$j = ".utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo {\r\n  max-width: 80px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew {\r\n  max-width: 120px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--logoLink {\r\n  line-height: 0;\r\n}\r\n";
 styleInject(css_248z$j);
 
-var _styleModuleImportMap$8 = {
+var _styleModuleImportMap$9 = {
   "./CopartLogo.css": {
     "CopartLogo": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo",
     "CopartLogoNew": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew",
@@ -21512,7 +21512,7 @@ var CopartLogo = function CopartLogo() {
     href: "/"
   }, /*#__PURE__*/React__namespace.createElement("img", {
     src: imageSrc,
-    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$8, {
+    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$9, {
       "handleMissingStyleName": "warn"
     })
   }));
@@ -21717,7 +21717,7 @@ var unEscapeChars = function unEscapeChars(str) {
 var css_248z$i = ".utilities_ops-app-frame_Help_Help--backdrop {\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 48px;\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: 425px;\r\n  max-width: 425px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 48px);\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--miHelpSideBar::-webkit-scrollbar {\r\n  width: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar::-webkit-scrollbar-track {\r\n  background: #f1f1f1;\r\n  border-radius: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar::-webkit-scrollbar-thumb {\r\n  background-color: #888;\r\n  border-radius: 10px;\r\n  border: 3px solid #f1f1f1;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar::-webkit-scrollbar-thumb:hover {\r\n  background-color: #555;\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\r\n@media (max-width: 1366px) {\r\n  .utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n    width: 400px;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n    width: 85%;\r\n  }\r\n}\r\n";
 styleInject(css_248z$i);
 
-var _styleModuleImportMap$7 = {
+var _styleModuleImportMap$8 = {
   "../Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -21804,7 +21804,7 @@ var ArticleSection = function ArticleSection(_ref) {
       onClick: function onClick() {
         return clickhandler(viewMapper[articleDetails.type], article);
       },
-      className: _getClassName(highlightRelease ? 'releaseNoteActive' : '', _styleModuleImportMap$7, {
+      className: _getClassName(highlightRelease ? 'releaseNoteActive' : '', _styleModuleImportMap$8, {
         "handleMissingStyleName": "warn"
       })
     }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -21927,7 +21927,7 @@ styleInject(css_248z$f);
 var css_248z$e = "/**\n * Colors\n */\n/**\n * Breakpoints & Media Queries\n */\n/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Dimensions.\n */\n/**\n * Shadows.\n */\n/**\n * Editor widths.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n/**\n*  Converts a hex value into the rgb equivalent.\n*\n* @param {string} hex - the hexadecimal value to convert\n* @return {string} comma separated rgb values\n*/\n/**\n * Breakpoint mixins\n */\n/**\n * Long content fade mixin\n *\n * Creates a fading overlay to signify that the content is longer\n * than the space allows.\n */\n/**\n * Focus styles.\n */\n/**\n * Applies editor left position to the selector passed as argument\n */\n/**\n * Styles that are reused verbatim in a few places\n */\n/**\n * Allows users to opt-out of animations via OS-level preferences.\n */\n/**\n * Reset default styles for JavaScript UI based pages.\n * This is a WP-admin agnostic reset\n */\n/**\n * Reset the WP Admin page styles for Gutenberg-like pages.\n */\n#start-resizable-editor-section {\n  display: none;\n}\n\n.wp-block-audio figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-audio figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-code {\n  font-family: Menlo, Consolas, monaco, monospace;\n  color: #1e1e1e;\n  padding: 0.8em 1em;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.wp-block-embed figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-embed figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.blocks-gallery-caption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .blocks-gallery-caption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-image figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-image figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-pullquote {\n  border-top: 4px solid currentColor;\n  border-bottom: 4px solid currentColor;\n  margin-bottom: 1.75em;\n  color: currentColor;\n}\n.wp-block-pullquote cite,\n.wp-block-pullquote footer, .wp-block-pullquote__citation {\n  color: currentColor;\n  text-transform: uppercase;\n  font-size: 0.8125em;\n  font-style: normal;\n}\n\n.wp-block-quote {\n  border-left: 0.25em solid currentColor;\n  margin: 0 0 1.75em 0;\n  padding-left: 1em;\n}\n.wp-block-quote cite,\n.wp-block-quote footer {\n  color: currentColor;\n  font-size: 0.8125em;\n  position: relative;\n  font-style: normal;\n}\n.wp-block-quote.has-text-align-right {\n  border-left: none;\n  border-right: 0.25em solid currentColor;\n  padding-left: 0;\n  padding-right: 1em;\n}\n.wp-block-quote.has-text-align-center {\n  border: none;\n  padding-left: 0;\n}\n.wp-block-quote.is-style-large, .wp-block-quote.is-large {\n  border: none;\n}\n\n.wp-block-search .wp-block-search__label {\n  font-weight: bold;\n}\n\n.wp-block-group.has-background {\n  padding: 1.25em 2.375em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.wp-block-separator {\n  border: none;\n  border-bottom: 2px solid currentColor;\n  margin-left: auto;\n  margin-right: auto;\n  opacity: 0.4;\n}\n.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {\n  width: 100px;\n}\n.wp-block-separator.has-background:not(.is-style-dots) {\n  border-bottom: none;\n  height: 1px;\n}\n.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {\n  height: 2px;\n}\n\n.wp-block-table thead {\n  border-bottom: 3px solid;\n}\n.wp-block-table tfoot {\n  border-top: 3px solid;\n}\n.wp-block-table td,\n.wp-block-table th {\n  padding: 0.5em;\n  border: 1px solid;\n  word-break: normal;\n}\n.wp-block-table figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-table figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-video figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-video figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-template-part.has-background {\n  padding: 1.25em 2.375em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n#end-resizable-editor-section {\n  display: none;\n}";
 styleInject(css_248z$e);
 
-var _styleModuleImportMap$6 = {
+var _styleModuleImportMap$7 = {
   "../wordpressStyles.css": {
     "helpArticleContent": "utilities_ops-app-frame_Help_wordpressStyles--helpArticleContent",
     "sr-only": "utilities_ops-app-frame_Help_wordpressStyles--sr-only",
@@ -21960,7 +21960,7 @@ function HelpArticleContent(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_wordpressStyles--helpArticleContent"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "elementor-kit-38 " + _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$6, {
+    className: "elementor-kit-38 " + _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$7, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22012,7 +22012,7 @@ var Dislike = function Dislike() {
   }));
 };
 
-var _styleModuleImportMap$5 = {
+var _styleModuleImportMap$6 = {
   "../Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -22113,7 +22113,7 @@ var HelpArticle = function HelpArticle(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_Help--helpArticle"
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
-    className: _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$5, {
+    className: _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, currentArticle.title), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22122,7 +22122,7 @@ var HelpArticle = function HelpArticle(_ref) {
     article: currentArticle,
     showQuestionSection: showQuestionSection
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("articleFooter ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("articleFooter ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -22130,7 +22130,7 @@ var HelpArticle = function HelpArticle(_ref) {
   }, !currentArticle.showFeedback ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !currentArticle.showThanksText ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--likeTxt"
   }, "Was this useful?") : null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: _getClassName("likebtnWrapper ".concat(currentArticle.liked ? 'active' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("likebtnWrapper ".concat(currentArticle.liked ? 'active' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -22138,7 +22138,7 @@ var HelpArticle = function HelpArticle(_ref) {
       return likeHandler(currentArticle);
     }
   }, /*#__PURE__*/React__default["default"].createElement(Like, null)), /*#__PURE__*/React__default["default"].createElement("span", null, currentArticle.likes)), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: _getClassName("likebtnWrapper dislike ".concat(currentArticle.disliked ? 'active' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("likebtnWrapper dislike ".concat(currentArticle.disliked ? 'active' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -22166,7 +22166,7 @@ var HelpArticle = function HelpArticle(_ref) {
   }, "Skip")))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--dateWrapper"
   }, /*#__PURE__*/React__default["default"].createElement("b", null, "Last updated on:"), ' ', /*#__PURE__*/React__default["default"].createElement("span", null, currentArticle.updatedDate ? formatPublishDate(currentArticle.updatedDate) : null))), currentArticle.relatedHelpResources && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("relatedResourcesWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("relatedResourcesWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("h3", null, "Related Help Resources"), /*#__PURE__*/React__default["default"].createElement("ul", null, currentArticle.relatedHelpResources.map(function (article) {
@@ -22179,7 +22179,7 @@ var HelpArticle = function HelpArticle(_ref) {
     }), article.post_title);
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: questionSectionRef,
-    className: _getClassName("submitQuestionWrapper ".concat(showQuestionSection && !showSuccessSection ? 'noFlex' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("submitQuestionWrapper ".concat(showQuestionSection && !showSuccessSection ? 'noFlex' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, !showQuestionSection ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h2", null, "Got more questions?"), /*#__PURE__*/React__default["default"].createElement("p", null, "If these resources are not enough to satisfy your queries then"), /*#__PURE__*/React__default["default"].createElement("p", null, /*#__PURE__*/React__default["default"].createElement("b", null, "Feel free to submit your question here.")), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -22238,7 +22238,7 @@ var HelpArticle = function HelpArticle(_ref) {
     }
   })), /*#__PURE__*/React__default["default"].createElement("span", {
     onClick: questionSubmitHandler,
-    className: _getClassName("submitBtn ".concat(!question.length || category === 'selectCategory' ? 'disable' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("submitBtn ".concat(!question.length || category === 'selectCategory' ? 'disable' : ''), _styleModuleImportMap$6, {
       "handleMissingStyleName": "warn"
     })
   }, "Submit")) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -22372,7 +22372,7 @@ var ReleaseNote = function ReleaseNote(_ref) {
   })));
 };
 
-var _styleModuleImportMap$4 = {
+var _styleModuleImportMap$5 = {
   "./Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -22987,7 +22987,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
       height: "calc(100dvh - ".concat(notifications !== null && notifications !== void 0 && notifications.length ? sideBarTopValue : 48, "px)")
     },
     ref: mihelpRef,
-    className: _getClassName("miHelpSideBar ".concat(!helpContent || isChrome() && overFlowHidden || !isChrome() && showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$4, {
+    className: _getClassName("miHelpSideBar ".concat(!helpContent || isChrome() && overFlowHidden || !isChrome() && showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$5, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23029,7 +23029,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
     name: "open_in_new",
     variant: "material"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("searchWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$4, {
+    className: _getClassName("searchWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$5, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("input", {
@@ -25486,7 +25486,7 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
   }]);
 }(React__default["default"].Component);
 
-var css_248z$9 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 10px 10px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 20px;\r\n  gap: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  color: white;\r\n  width: 26px;\r\n  min-height: 26px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201f1e;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox * {\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a {\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  padding: 5px 5px;\r\n  min-height: 20px;\r\n  padding: 4px 5px 3px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i {\r\n  font-size: 20px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n  font-size: 12px;\r\n  align-items: center;\r\n  padding: 0px 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i {\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationCountContainer {\r\n  width: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n  /* padding-top: env(safe-area-inset-top, 0px);\r\n  position: sticky;\r\n  top: 0; */\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar.utilities_ops-announcements_Banner--notificationContainer {\r\n  padding: 8px 6px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  color: white;\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationInfoBox {\r\n  color: white;\r\n  width: 20px;\r\n  height: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-right: 6px;\r\n}\r\n.utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: auto;\r\n  min-height: auto;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer i {\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn i {\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 0px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar i {\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-right: 10px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n  margin-top: 5px;\r\n  max-width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-left: 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n\r\n@media (max-width: 1760px) {\r\n  .utilities_ops-announcements_Banner--notificationBarContent input {\r\n    width: 331px !important;\r\n  }\r\n}\r\n";
+var css_248z$9 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 10px 10px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 20px;\r\n  gap: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  color: white;\r\n  width: 26px;\r\n  min-height: 26px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201f1e;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox * {\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a {\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  padding: 5px 5px;\r\n  min-height: 20px;\r\n  padding: 4px 5px 3px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i {\r\n  font-size: 20px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n  font-size: 12px;\r\n  align-items: center;\r\n  padding: 0px 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i {\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationCountContainer {\r\n  width: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n  /* padding-top: env(safe-area-inset-top, 0px);\r\n  position: sticky;\r\n  top: 0; */\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar.utilities_ops-announcements_Banner--notificationContainer {\r\n  padding: 8px 6px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  color: white;\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationInfoBox {\r\n  color: white;\r\n  width: 20px;\r\n  height: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-right: 6px;\r\n}\r\n.utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: auto;\r\n  min-height: auto;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer i {\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn i {\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 0px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar i {\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-right: 10px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n  margin-top: 5px;\r\n  max-width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-left: 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroup {\r\n  border: 1px solid #e1dfdd;\r\n  border-radius: 8px;\r\n  padding: 12px;\r\n  margin-bottom: 12px;\r\n  background-color: #ffffff;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-bottom: 10px;\r\n  min-height: 28px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupHeaderWithBack {\r\n  position: relative;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupHeaderTitle {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationBackBtn {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  -webkit-transform: translateY(-50%);\r\n          transform: translateY(-50%);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0;\r\n  margin: 0;\r\n  border: none;\r\n  background: none;\r\n  color: #3261bd;\r\n  cursor: pointer;\r\n  width: 28px;\r\n  height: 28px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationBackBtn i {\r\n  font-size: 18px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupAppIcon {\r\n  width: 20px;\r\n  height: 20px;\r\n  -o-object-fit: contain;\r\n     object-fit: contain;\r\n  -webkit-filter: invert(24%) sepia(100%) saturate(1350%) hue-rotate(201deg) brightness(96%) contrast(93%);\r\n          filter: invert(24%) sepia(100%) saturate(1350%) hue-rotate(201deg) brightness(96%) contrast(93%);\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupAppIconPlaceholder {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 4px;\r\n  background-color: #deecf9;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupAppName {\r\n  color: #3261bd;\r\n  color: var(--Type-Copart-Neue-Rest, #3261bd);\r\n  font-family: 'Segoe UI', SegoeUI, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, sans-serif;\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  line-height: 20px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationGroupList {\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRow {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  padding: 8px 10px;\r\n  border-radius: 4px;\r\n  min-height: 36px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowIcon {\r\n  color: white;\r\n  width: 20px;\r\n  height: 20px;\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-top: 1px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowContent {\r\n  flex: 1;\r\n  min-width: 0;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: #201f1e;\r\n  line-height: 1.35;\r\n  word-break: break-word;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowContent * {\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowMeta {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowLink {\r\n  text-decoration: none;\r\n  line-height: 1;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowLink i {\r\n  font-size: 16px;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationRowTime {\r\n  font-size: 11px;\r\n  color: #605e5c;\r\n  font-weight: 400;\r\n  white-space: nowrap;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationViewAll {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  width: 100%;\r\n  margin-top: 10px;\r\n  padding: 0;\r\n  border: none;\r\n  background: none;\r\n  color: #0f4cab;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationViewAll i {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-size: 16px;\r\n  line-height: 1;\r\n}\r\n\r\n@media (max-width: 1760px) {\r\n  .utilities_ops-announcements_Banner--notificationBarContent input {\r\n    width: 331px !important;\r\n  }\r\n}\r\n";
 styleInject(css_248z$9);
 
 function getViewedNotifications() {
@@ -25662,6 +25662,50 @@ function getPriorityCode(category) {
     information: 1
   }[category.toLowerCase()];
 }
+var MAX_NOTIFICATIONS_PER_APP_GROUP = 5;
+function getAppTileIcon(sourceApplication) {
+  var _storage$getLocalItem;
+  if (!sourceApplication) return null;
+  var tiles = ((_storage$getLocalItem = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.tiles) || [];
+  var normalized = sourceApplication.trim().toLowerCase();
+  var tile = tiles.find(function (t) {
+    return (t.title || '').trim().toLowerCase() === normalized || (t.appName || '').trim().toLowerCase() === normalized;
+  });
+  return tile ? tile.faIconUrl || tile.iconUrl : null;
+}
+function groupNotificationsByApp(notifications) {
+  var maxPerGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_NOTIFICATIONS_PER_APP_GROUP;
+  var groupMap = new Map();
+  var groupOrder = [];
+  notifications.forEach(function (notification) {
+    var appName = notification.sourceApplication || 'Other';
+    if (!groupMap.has(appName)) {
+      groupMap.set(appName, []);
+      groupOrder.push(appName);
+    }
+    groupMap.get(appName).push(notification);
+  });
+  return groupOrder.map(function (appName) {
+    var all = groupMap.get(appName);
+    return {
+      appName: appName,
+      totalCount: all.length,
+      notifications: all.slice(0, maxPerGroup),
+      hasMore: all.length > maxPerGroup
+    };
+  });
+}
+function getExpandedAppGroup(notifications, appName) {
+  var appNotifications = notifications.filter(function (notification) {
+    return (notification.sourceApplication || 'Other') === appName;
+  });
+  return {
+    appName: appName,
+    totalCount: appNotifications.length,
+    notifications: appNotifications,
+    hasMore: false
+  };
+}
 function sortNotifications(notifications) {
   try {
     return _toConsumableArray(notifications).map(function (n) {
@@ -25819,6 +25863,7 @@ var Banner = function Banner(props) {
     startsAt = notification.startsAt,
     timeZoneType = notification.timeZoneType,
     showSideBar = notification.showSideBar,
+    isGroupedSideBar = notification.isGroupedSideBar,
     action = notification.action,
     content = notification.content,
     sourceApplication = notification.sourceApplication,
@@ -25929,16 +25974,62 @@ var Banner = function Banner(props) {
       variant: "material"
     }))));
   };
-  var sideNotificationBar = function sideNotificationBar() {
+  var categoryKey = categoryDescription.toLowerCase();
+  var categoryColor = alertInfoColorMapping[categoryKey];
+  var categoryBackground = alertBackgroundColorMapping[categoryKey];
+  var groupedSideNotificationRow = function groupedSideNotificationRow() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--sideNotificationRow",
+      style: {
+        backgroundColor: categoryBackground
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--sideNotificationRowIcon",
+      style: {
+        backgroundColor: categoryColor
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+      name: alertToIconMapping[categoryKey],
+      style: {
+        fontSize: '11px'
+      }
+    })), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--sideNotificationRowContent"
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: SanitizeNotificationContent(content)
+      }
+    }), action && ActionComponent && /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        marginTop: '4px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ActionComponent, {
+      notification: notification,
+      saveActionComponentState: saveActionComponentState
+    }))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--sideNotificationRowMeta"
+    }, (feedUrl || link) && /*#__PURE__*/React__default["default"].createElement("a", {
+      href: feedUrl || link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "utilities_ops-announcements_Banner--sideNotificationRowLink"
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
+      name: "open_in_new",
+      variant: "material"
+    })), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "utilities_ops-announcements_Banner--sideNotificationRowTime"
+    }, timeDiff)));
+  };
+  var sideNotificationBar = function sideNotificationBar() {
+    return isGroupedSideBar ? groupedSideNotificationRow() : /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--notificationContainer utilities_ops-announcements_Banner--sideBar",
       style: {
-        backgroundColor: alertBackgroundColorMapping[categoryDescription.toLowerCase()]
+        backgroundColor: categoryBackground
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--appBarContentWrapper",
       style: {
-        borderLeft: "2px solid ".concat(alertInfoColorMapping[categoryDescription.toLowerCase()])
+        borderLeft: "2px solid ".concat(categoryColor)
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -25947,10 +26038,10 @@ var Banner = function Banner(props) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--sideNotificationInfoBox",
       style: {
-        backgroundColor: alertInfoColorMapping[categoryDescription.toLowerCase()]
+        backgroundColor: categoryColor
       }
     }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-      name: alertToIconMapping[categoryDescription.toLowerCase()],
+      name: alertToIconMapping[categoryKey],
       style: {
         fontSize: '12px'
       }
@@ -26080,13 +26171,112 @@ var Banner = function Banner(props) {
   return mainNotificationBar();
 };
 
+var _styleModuleImportMap$4 = {
+  "./Banner.css": {
+    "appBarContentBox": "utilities_ops-announcements_Banner--appBarContentBox",
+    "notificationBarContent": "utilities_ops-announcements_Banner--notificationBarContent",
+    "tabNotificationInfoBar": "utilities_ops-announcements_Banner--tabNotificationInfoBar",
+    "tabNotificationInfoBox": "utilities_ops-announcements_Banner--tabNotificationInfoBox",
+    "notificationBarContentBox": "utilities_ops-announcements_Banner--notificationBarContentBox",
+    "tabNotificationBarContentBox": "utilities_ops-announcements_Banner--tabNotificationBarContentBox",
+    "notificationInfoBox": "utilities_ops-announcements_Banner--notificationInfoBox",
+    "notificationBtnContainer": "utilities_ops-announcements_Banner--notificationBtnContainer",
+    "notificationLeftBtn": "utilities_ops-announcements_Banner--notificationLeftBtn",
+    "notificationCountContainer": "utilities_ops-announcements_Banner--notificationCountContainer",
+    "notificationContainer": "utilities_ops-announcements_Banner--notificationContainer",
+    "sideBar": "utilities_ops-announcements_Banner--sideBar",
+    "sideNotificationInfoBox": "utilities_ops-announcements_Banner--sideNotificationInfoBox",
+    "notificationBarBtn": "utilities_ops-announcements_Banner--notificationBarBtn",
+    "tabNotificationBar": "utilities_ops-announcements_Banner--tabNotificationBar",
+    "arrowTipContainer": "utilities_ops-announcements_Banner--arrowTipContainer",
+    "appBarContentWrapper": "utilities_ops-announcements_Banner--appBarContentWrapper",
+    "feedUrl": "utilities_ops-announcements_Banner--feedUrl",
+    "sideNotificationGroup": "utilities_ops-announcements_Banner--sideNotificationGroup",
+    "sideNotificationGroupHeader": "utilities_ops-announcements_Banner--sideNotificationGroupHeader",
+    "sideNotificationGroupHeaderWithBack": "utilities_ops-announcements_Banner--sideNotificationGroupHeaderWithBack",
+    "sideNotificationGroupHeaderTitle": "utilities_ops-announcements_Banner--sideNotificationGroupHeaderTitle",
+    "sideNotificationBackBtn": "utilities_ops-announcements_Banner--sideNotificationBackBtn",
+    "sideNotificationGroupAppIcon": "utilities_ops-announcements_Banner--sideNotificationGroupAppIcon",
+    "sideNotificationGroupAppIconPlaceholder": "utilities_ops-announcements_Banner--sideNotificationGroupAppIconPlaceholder",
+    "sideNotificationGroupAppName": "utilities_ops-announcements_Banner--sideNotificationGroupAppName",
+    "sideNotificationGroupList": "utilities_ops-announcements_Banner--sideNotificationGroupList",
+    "sideNotificationRow": "utilities_ops-announcements_Banner--sideNotificationRow",
+    "sideNotificationRowIcon": "utilities_ops-announcements_Banner--sideNotificationRowIcon",
+    "sideNotificationRowContent": "utilities_ops-announcements_Banner--sideNotificationRowContent",
+    "sideNotificationRowMeta": "utilities_ops-announcements_Banner--sideNotificationRowMeta",
+    "sideNotificationRowLink": "utilities_ops-announcements_Banner--sideNotificationRowLink",
+    "sideNotificationRowTime": "utilities_ops-announcements_Banner--sideNotificationRowTime",
+    "sideNotificationViewAll": "utilities_ops-announcements_Banner--sideNotificationViewAll"
+  }
+};
+var SideNotificationGroup = function SideNotificationGroup(_ref) {
+  var appName = _ref.appName,
+    totalCount = _ref.totalCount,
+    notifications = _ref.notifications,
+    hasMore = _ref.hasMore,
+    showBackButton = _ref.showBackButton,
+    onBack = _ref.onBack,
+    onViewAll = _ref.onViewAll,
+    _onDismiss = _ref.onDismiss,
+    ActionComponent = _ref.ActionComponent,
+    saveActionComponentState = _ref.saveActionComponentState;
+  var appIconUrl = getAppTileIcon(appName);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroup"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: _getClassName("sideNotificationGroupHeader".concat(showBackButton ? ' sideNotificationGroupHeaderWithBack' : ''), _styleModuleImportMap$4, {
+      "handleMissingStyleName": "warn"
+    })
+  }, showBackButton && /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "utilities_ops-announcements_Banner--sideNotificationBackBtn",
+    onClick: onBack,
+    "aria-label": "Back to all apps"
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    name: "angle-left"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroupHeaderTitle"
+  }, appIconUrl ? /*#__PURE__*/React__default["default"].createElement("img", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroupAppIcon",
+    src: appIconUrl,
+    alt: ""
+  }) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroupAppIconPlaceholder"
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroupAppName"
+  }, appName, " (", totalCount, ")"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-announcements_Banner--sideNotificationGroupList"
+  }, notifications.map(function (notification) {
+    return /*#__PURE__*/React__default["default"].createElement(Banner, _extends$1({
+      key: notification.notificationId
+    }, notification, {
+      showSideBar: true,
+      isGroupedSideBar: true,
+      onDismiss: function onDismiss() {
+        return _onDismiss(notification);
+      },
+      ActionComponent: ActionComponent,
+      saveActionComponentState: saveActionComponentState
+    }));
+  })), hasMore && /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "utilities_ops-announcements_Banner--sideNotificationViewAll",
+    onClick: onViewAll
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
+    name: "open_in_new",
+    variant: "material"
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "View all")));
+};
+
 var ESTIMATED_ITEM_HEIGHT = 80;
+var ESTIMATED_GROUP_HEIGHT = 320;
 var OVERSCAN = 3;
 function buildOffsets(count, itemHeights) {
+  var defaultHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ESTIMATED_ITEM_HEIGHT;
   var offsets = new Array(count + 1);
   offsets[0] = 0;
   for (var i = 0; i < count; i++) {
-    offsets[i + 1] = offsets[i] + (itemHeights[i] || ESTIMATED_ITEM_HEIGHT) + 6;
+    offsets[i + 1] = offsets[i] + (itemHeights[i] || defaultHeight) + 12;
   }
   return offsets;
 }
@@ -26110,6 +26300,7 @@ var Notifications = function Notifications(_ref) {
     _onDismiss = _ref.onDismiss;
     _ref.children;
     var showSideBar = _ref.showSideBar,
+    sidebarOpen = _ref.sidebarOpen,
     ActionComponent = _ref.ActionComponent,
     saveActionComponentState = _ref.saveActionComponentState,
     notificationsTopContainerRef = _ref.notificationsTopContainerRef,
@@ -26123,34 +26314,60 @@ var Notifications = function Notifications(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     last = _useState4[0],
     setLast = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    expandedAppName = _useState6[0],
+    setExpandedAppName = _useState6[1];
+  var scrollRef = React.useRef(null);
+  var itemHeightsRef = React.useRef({});
+  var _useState7 = React.useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    scrollTop = _useState8[0],
+    setScrollTop = _useState8[1];
   var onLeftButtonClick = function onLeftButtonClick() {
     return i === 0 ? setI(last) : setI(i - 1);
   };
   var onRightButtonClick = function onRightButtonClick() {
     return i === last ? setI(0) : setI(i + 1);
   };
+  var resetSidebarView = React.useCallback(function () {
+    setExpandedAppName(null);
+    itemHeightsRef.current = {};
+    setScrollTop(0);
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, []);
   React.useEffect(function () {
     if (notifications.length && notifications.length - 1 < i) {
       setI(notifications.length - 1);
     }
     setLast(notifications.length - 1);
+    itemHeightsRef.current = {};
+    if (expandedAppName) {
+      var stillHasApp = notifications.some(function (n) {
+        return (n.sourceApplication || 'Other') === expandedAppName;
+      });
+      if (!stillHasApp) {
+        setExpandedAppName(null);
+      }
+    }
   }, [notifications]);
+  React.useEffect(function () {
+    if (sidebarOpen === false) {
+      resetSidebarView();
+    }
+  }, [sidebarOpen, resetSidebarView]);
 
   // Virtualizer state for the sidebar list
-  var scrollRef = React.useRef(null);
-  var itemHeightsRef = React.useRef({});
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrollTop = _useState6[0],
-    setScrollTop = _useState6[1];
-  var _useState7 = React.useState(600),
-    _useState8 = _slicedToArray(_useState7, 2),
-    viewportHeight = _useState8[0],
-    setViewportHeight = _useState8[1];
-  var rafPendingRef = React.useRef(false);
-  var _useState9 = React.useState(0),
+  var _useState9 = React.useState(600),
     _useState0 = _slicedToArray(_useState9, 2),
-    forceUpdate = _useState0[1];
+    viewportHeight = _useState0[0],
+    setViewportHeight = _useState0[1];
+  var rafPendingRef = React.useRef(false);
+  var _useState1 = React.useState(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    forceUpdate = _useState10[1];
   React.useEffect(function () {
     var el = scrollRef.current;
     if (!el) return;
@@ -26201,13 +26418,27 @@ var Notifications = function Notifications(_ref) {
     };
   }, []);
   var count = notifications.length;
-  var offsets = buildOffsets(count, itemHeightsRef.current);
-  var totalHeight = offsets[count];
+  var notificationGroups = showSideBar ? expandedAppName ? [getExpandedAppGroup(notifications, expandedAppName)] : groupNotificationsByApp(notifications) : [];
+  var handleViewAll = function handleViewAll(appName) {
+    itemHeightsRef.current = {};
+    setExpandedAppName(appName);
+    setScrollTop(0);
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  };
+  var handleBackToAllApps = function handleBackToAllApps() {
+    resetSidebarView();
+  };
+  var virtualListCount = showSideBar ? notificationGroups.length : count;
+  var estimatedHeight = showSideBar ? ESTIMATED_GROUP_HEIGHT : ESTIMATED_ITEM_HEIGHT;
+  var offsets = buildOffsets(virtualListCount, itemHeightsRef.current, estimatedHeight);
+  var totalHeight = offsets[virtualListCount];
   var rawStart = findStartIndex(offsets, scrollTop);
   var startIdx = Math.max(0, rawStart - OVERSCAN);
   var endRaw = rawStart;
-  while (endRaw < count && offsets[endRaw] < scrollTop + viewportHeight) endRaw++;
-  var endIdx = Math.min(count - 1, endRaw + OVERSCAN);
+  while (endRaw < virtualListCount && offsets[endRaw] < scrollTop + viewportHeight) endRaw++;
+  var endIdx = Math.min(virtualListCount - 1, endRaw + OVERSCAN);
   var notification = notifications[i];
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isNil$1(notification) && !showSideBar ? /*#__PURE__*/React__default["default"].createElement(Banner, _extends$1({
     current: i + 1,
@@ -26242,8 +26473,9 @@ var Notifications = function Notifications(_ref) {
     length: endIdx - startIdx + 1
   }, function (_, rel) {
     var index = startIdx + rel;
+    var group = notificationGroups[index];
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: notifications[index].notificationId || index,
+      key: group.appName,
       ref: measureItem(index),
       style: {
         position: 'absolute',
@@ -26251,18 +26483,20 @@ var Notifications = function Notifications(_ref) {
         left: 0,
         width: '100%'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Banner, _extends$1({
-      current: i + 1,
-      count: notifications.length,
-      showNavButtons: false,
-      onDismiss: function onDismiss() {
-        return _onDismiss(notifications[index]);
-      }
-    }, notifications[index], {
-      showSideBar: showSideBar,
+    }, /*#__PURE__*/React__default["default"].createElement(SideNotificationGroup, {
+      appName: group.appName,
+      totalCount: group.totalCount,
+      notifications: group.notifications,
+      hasMore: group.hasMore,
+      showBackButton: Boolean(expandedAppName),
+      onBack: handleBackToAllApps,
+      onViewAll: function onViewAll() {
+        return handleViewAll(group.appName);
+      },
+      onDismiss: _onDismiss,
       ActionComponent: ActionComponent,
       saveActionComponentState: saveActionComponentState
-    })));
+    }));
   }))) : null);
 };
 
@@ -27295,6 +27529,7 @@ var AppBar$1 = function AppBar(props) {
     notifications: notifications || [],
     onDismiss: onDismiss,
     showSideBar: true,
+    sidebarOpen: notificationsVisible,
     ActionComponent: ActionComponent,
     saveActionComponentState: saveActionComponentState
   })))), showSearchContainer && /*#__PURE__*/React__default["default"].createElement("div", {