@copart/ops-tool-kit 1.11.1 → 1.11.2-alpha.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.11.1";
+const version$5 = "1.11.2-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -2906,7 +2906,7 @@ var DEFAULT_BREADCRUMBS_CONTEXT = {
   error: 'You tried to use Breadcrumbs outside of its context.'
 };
 
-var css_248z$o = ".utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Breadcrumbs {\r\n  /* height: 36px;\r\n  background: #3c4656; */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--crumbs {\r\n  display: flex;\r\n}\r\n\r\n#notCrumbs {\r\n  height: 100%;\r\n  margin-right: 12px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb {\r\n  cursor: pointer;\r\n  height: 100%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  letter-spacing: 0;\r\n  /* transition: all 0.2s; */\r\n  position: relative;\r\n  top: -2px;\r\n  color: rgba(255, 255, 255, 0.8);\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  margin-left: 5px;\r\n  opacity: 1;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-6px);\r\n            transform: translateX(-6px);\r\n    /* transform: scale(0.9); */\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0px);\r\n            transform: translateX(0px);\r\n    /* transform: scale(1); */\r\n  }\r\n}\r\n\r\n@keyframes utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-6px);\r\n            transform: translateX(-6px);\r\n    /* transform: scale(0.9); */\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0px);\r\n            transform: translateX(0px);\r\n    /* transform: scale(1); */\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb {\r\n  -webkit-animation-name: utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn;\r\n          animation-name: utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn;\r\n  -webkit-animation-duration: 0.2s;\r\n          animation-duration: 0.2s;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb::before {\r\n  content: '\\f054';\r\n  color: rgba(255, 255, 255, 0.4);\r\n  display: inline-block;\r\n  font-family: 'Font Awesome 6 Pro';\r\n  font-size: 16px;\r\n  margin: 0 6px;\r\n  position: relative;\r\n  top: 2px;\r\n}\r\n\r\n/* .Crumb:first-of-type {\r\n  margin-left: 12px;\r\n  font-weight: 400;\r\n} */\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:hover {\r\n  /* background: rgba(0, 0, 0, 0.15); */\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:not(:last-of-type):not(:hover) {\r\n  /* opacity: 0.75; */\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:last-of-type {\r\n  font-weight: 700;\r\n  opacity: 1;\r\n  color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:last-of-type::before {\r\n  font-weight: 400;\r\n  /* opacity: 0.8; */\r\n}\r\n\r\n/* .crumbSpacer {} */\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--crumbs {\r\n  /* margin: 10px; */\r\n  flex-grow: 2;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--notCrumbs {\r\n  height: 100%;\r\n  display: flex;\r\n  margin-right: 0px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--entityIndicator {\r\n  height: 100%;\r\n  display: flex;\r\n  margin-right: 0px !important;\r\n}";
+var css_248z$o = ".utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Breadcrumbs {\r\n  /* height: 36px;\r\n  background: #3c4656; */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--crumbs {\r\n  display: flex;\r\n}\r\n\r\n#notCrumbs {\r\n  height: 100%;\r\n  margin-right: 12px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb {\r\n  cursor: pointer;\r\n  height: 100%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 16px;\r\n  font-weight: 300;\r\n  letter-spacing: 0;\r\n  /* transition: all 0.2s; */\r\n  position: relative;\r\n  top: -2px;\r\n  color: rgba(255, 255, 255, 0.8);\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  margin-left: 5px;\r\n  opacity: 1;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-6px);\r\n            transform: translateX(-6px);\r\n    /* transform: scale(0.9); */\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0px);\r\n            transform: translateX(0px);\r\n    /* transform: scale(1); */\r\n  }\r\n}\r\n\r\n@keyframes utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-6px);\r\n            transform: translateX(-6px);\r\n    /* transform: scale(0.9); */\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0px);\r\n            transform: translateX(0px);\r\n    /* transform: scale(1); */\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb {\r\n  -webkit-animation-name: utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn;\r\n          animation-name: utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--fadeIn;\r\n  -webkit-animation-duration: 0.2s;\r\n          animation-duration: 0.2s;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb::before {\r\n  content: '\\f054';\r\n  color: rgba(255, 255, 255, 0.4);\r\n  display: inline-block;\r\n  font-family: 'Font Awesome 6 Pro';\r\n  font-size: 16px;\r\n  margin: 0 6px;\r\n  position: relative;\r\n  top: 2px;\r\n}\r\n\r\n/* .Crumb:first-of-type {\r\n  margin-left: 12px;\r\n  font-weight: 400;\r\n} */\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:hover {\r\n  /* background: rgba(0, 0, 0, 0.15); */\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:not(:last-of-type):not(:hover) {\r\n  /* opacity: 0.75; */\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:last-of-type {\r\n  font-weight: 700;\r\n  opacity: 1;\r\n  color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--Crumb:last-of-type::before {\r\n  font-weight: 300;\r\n  /* opacity: 0.8; */\r\n}\r\n\r\n/* .crumbSpacer {} */\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--crumbs {\r\n  /* margin: 10px; */\r\n  flex-grow: 2;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--notCrumbs {\r\n  height: 100%;\r\n  display: flex;\r\n  margin-right: 0px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Breadcrumbs_styles_Breadcrumbs--entityIndicator {\r\n  height: 100%;\r\n  display: flex;\r\n  margin-right: 0px !important;\r\n}";
 styleInject(css_248z$o);
 
 var Context = createContext(DEFAULT_BREADCRUMBS_CONTEXT);
@@ -23822,7 +23822,7 @@ FeedbackDialog.defaultProps = {
   }
 };
 
-var css_248z$j = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\r\n  background-color: var(--blue);\r\n  background-color: var(--blue);\r\n  height: 48px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: start;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\r\n  margin: 0 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  margin-left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 3px 0 0 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\r\n  color: white;\r\n  font-size: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\r\n  color: white;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  display: flex;\r\n  justify-content: center;\r\n  margin: 0;\r\n  position: relative;\r\n  width: 48px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\r\n  color: #fff;\r\n  font-size: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\r\n  color: white;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  width: 6rem;\r\n  margin-top: 0rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\r\n  margin-top: 0.6rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\r\n  margin-top: 0.4rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\r\n  margin-top: -0.2rem;\r\n  margin-left: 2rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Open Sans';\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\r\n    format('woff2');\r\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\r\n  color: #fff;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-size: 14px;\r\n  position: relative;\r\n  left: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\r\n  /* margin-left: 10px;\r\n  margin-right: 7px; */\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.4), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13), 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10);\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin: 0 8px;\r\n  padding: 4px 20px 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber span i {\r\n  font-size: 22px;\r\n  color: #1D5AB9;\r\n}\r\n\r\n/* .yardNumber > div {\r\n  margin-left: 7px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\r\n  color: white;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  margin: 5px;\r\n  padding: 0px 10px;\r\n  height: 25px;\r\n  font-weight: bold;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\r\n  border: 1px solid #1d5ab9;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\r\n  color: red;\r\n  margin: 5px 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\r\n  margin-right: 5px;\r\n  margin-left: 5px;\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\r\n  margin-left: 5px;\r\n  display: inline-flex;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\r\n  line-height: unset;\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\r\n  color: green;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  color: red;\r\n}\r\n\r\n/* .userMenu {\r\n  margin-left: 10px !important;\r\n  margin-right: 5px !important;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n  margin-left: 10px !important;\r\n  margin-right: 10px !important;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n  margin-left: 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\r\n  margin: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  /* position: relative;\r\n  top: 2px; */\r\n  /* margin-left: 10px; */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\r\n  color: #fff;\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\r\n  background-color: #ef5350;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 13px;\r\n  width: 10px;\r\n  height: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\r\n  position: absolute;\r\n  background: #fff;\r\n  padding: 8px;\r\n  right: 30px;\r\n  top: -2px;\r\n  border-radius: 2px;\r\n  font-weight: 400;\r\n  font-size: 12px;\r\n  cursor: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  margin-top: -5px;\r\n  border-width: 5px;\r\n  border-style: solid;\r\n  border-color: transparent transparent transparent #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\r\n  color: #000;\r\n  font-size: 12px;\r\n  margin-left: 5px;\r\n  position: relative;\r\n  top: 1px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\r\n  position: absolute;\r\n  display: flex;\r\n  height: calc(100vh - 48px);\r\n  width: 100vw;\r\n  bottom: 0;\r\n  z-index: 10000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\r\n  background-color: rgba(0,0,0,.5);\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 402px;\r\n  height: 38px;\r\n  width: 38px;\r\n  background-color: white;\r\n  z-index: 11000;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\r\n  padding: 5px 7px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  font-weight: 600;\r\n  color: #1d5ab9;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\r\n  background: rgba(255, 255, 255, 0.40);\r\n  -webkit-backdrop-filter: blur(20px);\r\n          backdrop-filter: blur(20px);\r\n  position: absolute;\r\n  top: 50px;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 50px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n  width: 40vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n@media only screen and (max-width: 1024px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  /* .yardNumber {\r\n    margin-left: 5px;\r\n    margin-right: 2px;\r\n  }\r\n\r\n  .yardNumber > div {\r\n    margin-left: 2px;\r\n  } */\r\n\r\n  /* .userMenu {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  } */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n    margin-left: 2px;\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\r\n{\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,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\r\n{\r\n  width: 50vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: 100%;\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n  background-color: #ef5350;\r\n  color: white;\r\n  font-size: 12px;\r\n  width: 1rem;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: -5px;\r\n  left: 22px;\r\n  height: 1rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\r\n  width: 1.1rem;\r\n  height: 1.1rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\r\n  width: 1.3rem;\r\n  height: 1.3rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\r\n  cursor: pointer;\r\n  margin-left: 12px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--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: 11px solid white;\r\n  position: absolute;\r\n  bottom: -13px;\r\n  right: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--ideaNoteArrow {\r\n  right: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\r\n  right: 3px;\r\n  bottom: -9px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\r\n  bottom: -12px;\r\n  right: 8px;\r\n  border-left: 7px solid transparent;\r\n  border-right: 7px solid transparent;\r\n  border-bottom: 10px solid white;\r\n}\r\n";
+var css_248z$j = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\r\n  background-color: var(--blue);\r\n  background-color: var(--blue);\r\n  height: 48px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: start;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\r\n  margin: 0 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  margin-left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 3px 0 0 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\r\n  color: white;\r\n  font-size: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\r\n  color: white;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  display: flex;\r\n  justify-content: center;\r\n  margin: 0;\r\n  position: relative;\r\n  width: 48px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\r\n  color: #fff;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon i {\r\n  color: #ffff00;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard {\r\n  width: 60px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard .utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\r\n  color: white;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  width: 6rem;\r\n  margin-top: 0rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\r\n  margin-top: 0.6rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\r\n  margin-top: 0.4rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\r\n  margin-top: -0.2rem;\r\n  margin-left: 2rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Open Sans';\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\r\n    format('woff2');\r\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\r\n  color: #fff;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-size: 14px;\r\n  position: relative;\r\n  left: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon {\r\n  /* margin-left: 10px;\r\n  margin-right: 7px; */\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.4), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13), 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10);\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin: 0 8px;\r\n  padding: 6px 20px 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span i {\r\n  font-size: 18px;\r\n  color: #1D5AB9;\r\n}\r\n\r\n/* .searchIcon > div {\r\n  margin-left: 7px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\r\n  color: white;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  margin: 5px;\r\n  padding: 0px 10px;\r\n  height: 25px;\r\n  font-weight: bold;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\r\n  border: 1px solid #1d5ab9;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\r\n  color: red;\r\n  margin: 5px 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\r\n  margin-right: 5px;\r\n  margin-left: 5px;\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\r\n  margin-left: 5px;\r\n  display: inline-flex;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\r\n  line-height: unset;\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\r\n  color: green;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  color: red;\r\n}\r\n\r\n/* .userMenu {\r\n  margin-left: 10px !important;\r\n  margin-right: 5px !important;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n  margin-left: 10px !important;\r\n  margin-right: 10px !important;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n  margin-left: 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\r\n  margin: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  /* position: relative;\r\n  top: 2px; */\r\n  /* margin-left: 10px; */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\r\n  color: #fff;\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\r\n  background-color: #ef5350;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 13px;\r\n  width: 10px;\r\n  height: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\r\n  position: absolute;\r\n  background: #fff;\r\n  padding: 8px;\r\n  right: 30px;\r\n  top: -2px;\r\n  border-radius: 2px;\r\n  font-weight: 400;\r\n  font-size: 12px;\r\n  cursor: auto;\r\n  color: #000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  margin-top: -5px;\r\n  border-width: 5px;\r\n  border-style: solid;\r\n  border-color: transparent transparent transparent #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\r\n  color: #000;\r\n  font-size: 12px;\r\n  margin-left: 5px;\r\n  position: relative;\r\n  top: 1px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\r\n  position: absolute;\r\n  display: flex;\r\n  height: calc(100vh - 48px);\r\n  width: 100vw;\r\n  bottom: 0;\r\n  z-index: 10000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\r\n  background-color: rgba(0,0,0,.5);\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 402px;\r\n  height: 38px;\r\n  width: 38px;\r\n  background-color: white;\r\n  z-index: 11000;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\r\n  padding: 5px 7px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  font-weight: 600;\r\n  color: #1d5ab9;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\r\n  background: rgba(255, 255, 255, 0.40);\r\n  -webkit-backdrop-filter: blur(20px);\r\n          backdrop-filter: blur(20px);\r\n  position: absolute;\r\n  top: 50px;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 50px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n  width: 40vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n@media only screen and (max-width: 1024px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  /* .searchIcon {\r\n    margin-left: 5px;\r\n    margin-right: 2px;\r\n  }\r\n\r\n  .searchIcon > div {\r\n    margin-left: 2px;\r\n  } */\r\n\r\n  /* .userMenu {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  } */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n    margin-left: 2px;\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\r\n{\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,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\r\n{\r\n  width: 50vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: 100%;\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n  background-color: #ef5350;\r\n  color: white;\r\n  font-size: 12px;\r\n  width: 1rem;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: -5px;\r\n  left: 22px;\r\n  height: 1rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\r\n  width: 1.1rem;\r\n  height: 1.1rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\r\n  width: 1.3rem;\r\n  height: 1.3rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\r\n  cursor: pointer;\r\n  margin-left: 12px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--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: 11px solid white;\r\n  position: absolute;\r\n  bottom: -13px;\r\n  right: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--ideaNoteArrow {\r\n  right: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\r\n  right: 3px;\r\n  bottom: -9px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\r\n  bottom: -12px;\r\n  right: 8px;\r\n  border-left: 7px solid transparent;\r\n  border-right: 7px solid transparent;\r\n  border-bottom: 10px solid white;\r\n}\r\n";
 styleInject(css_248z$j);
 
 var LogOutMenu = function LogOutMenu(_ref) {
@@ -25427,7 +25427,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
   }))));
 };
 
-var css_248z$c = ".utilities_ops-app-frame_AppBarComponent_FeedbackDialog_FeedbackButton_FeedbackButton--FeedbackButton {\r\n  /* TODO: Perfect the AppBar spacing. */\r\n  margin-left: 7px !important;\r\n  position: relative !important;\r\n  top: 1px;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.utilities_ops-app-frame_AppBarComponent_FeedbackDialog_FeedbackButton_FeedbackButton--FeedbackButton[type='button'] {\r\n  /* materia-ui hack. */\r\n  padding: 0 !important;\r\n}\r\n";
+var css_248z$c = ".utilities_ops-app-frame_AppBarComponent_FeedbackDialog_FeedbackButton_FeedbackButton--FeedbackButton {\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.utilities_ops-app-frame_AppBarComponent_FeedbackDialog_FeedbackButton_FeedbackButton--FeedbackButton[type='button'] {\r\n  /* materia-ui hack. */\r\n  padding: 0 !important;\r\n}\r\n";
 styleInject(css_248z$c);
 
 var FeedbackButton = function FeedbackButton(props) {
@@ -25451,6 +25451,9 @@ var _styleModuleImportMap$3 = {
     "moduleName": "utilities_ops-app-frame_AppBarComponent_AppBar--moduleName",
     "flex-grid": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid",
     "flex-grid-items": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+    "lightBulbIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
+    "yard": "utilities_ops-app-frame_AppBarComponent_AppBar--yard",
+    "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
     "col": "utilities_ops-app-frame_AppBarComponent_AppBar--col",
     "logo": "utilities_ops-app-frame_AppBarComponent_AppBar--logo",
     "text": "utilities_ops-app-frame_AppBarComponent_AppBar--text",
@@ -25460,7 +25463,7 @@ var _styleModuleImportMap$3 = {
     "appBarLeft": "utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft",
     "appTitle": "utilities_ops-app-frame_AppBarComponent_AppBar--appTitle",
     "item": "utilities_ops-app-frame_AppBarComponent_AppBar--item",
-    "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
+    "searchIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon",
     "searchWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper",
     "phoneDefault": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault",
     "phoneAvailable": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable",
@@ -34327,6 +34330,9 @@ var _styleModuleImportMap$2 = {
     "moduleName": "utilities_ops-app-frame_AppBarComponent_AppBar--moduleName",
     "flex-grid": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid",
     "flex-grid-items": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+    "lightBulbIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
+    "yard": "utilities_ops-app-frame_AppBarComponent_AppBar--yard",
+    "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
     "col": "utilities_ops-app-frame_AppBarComponent_AppBar--col",
     "logo": "utilities_ops-app-frame_AppBarComponent_AppBar--logo",
     "text": "utilities_ops-app-frame_AppBarComponent_AppBar--text",
@@ -34336,7 +34342,7 @@ var _styleModuleImportMap$2 = {
     "appBarLeft": "utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft",
     "appTitle": "utilities_ops-app-frame_AppBarComponent_AppBar--appTitle",
     "item": "utilities_ops-app-frame_AppBarComponent_AppBar--item",
-    "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
+    "searchIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon",
     "searchWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper",
     "phoneDefault": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault",
     "phoneAvailable": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable",
@@ -34511,37 +34517,32 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
       }
     }, text);
   };
-  var items = [
-  // {
-  //   key: 'roleAndFlag',
-  //   name: formatRole(role),
-  //   onRender: (_, dismissMenu) => (
-  //     <>
-  //       <div
-  //         styleName="flex-grid-items"
-  //         onClick={() => {
-  //           navigateTo('/settings')
-  //           dismissMenu()
-  //         }}
-  //       >
-  //         <OverFlowIcon name="supervised_user_circle" />
-  //         <OverFlowText text={formatRole(role)} />
-  //       </div>
-  //     </>
-  //   ),
-  //   renderIf: config.includes('role') || config.includes('flag'),
-  //   render: () => (
-  //     <div id="roleItem" styleName="item roleAndFlag" onClick={showSettingsInAppbar ? () => showCallout('roleItem') : navigateTo('/settings')}>
-  //       <If condition={config.includes('flag')}>
-  //         <Flag countryCode={countryCode} type={type} />
-  //       </If>
-  //       <If condition={config.includes('role')}>
-  //         <div data-testid="role">{formatRole(role)}</div>
-  //       </If>
-  //     </div>
-  //   )
-  // },
-  {
+  var items = [{
+    key: 'search',
+    name: 'Search',
+    onRender: function onRender() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        onClick: handleHelpClick
+      }, /*#__PURE__*/React__default["default"].createElement(OverFlowIcon, {
+        name: "search"
+      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
+        text: "search"
+      }));
+    },
+    renderIf: renderSearch,
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon",
+        onClick: function onClick() {
+          return handleIconClick(ICONS.SEARCH);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "magnifying-glass",
+        variant: "solid"
+      }), /*#__PURE__*/React__default["default"].createElement("div", null, "Search"));
+    }
+  }, {
     key: 'facility',
     name: yardNumber,
     renderIf: config.includes('yard'),
@@ -34561,45 +34562,21 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         id: "yardItem",
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--item utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--yard",
         onClick: showSettingsInAppbar ? function () {
           return showCallout('yardItem');
         } : navigateTo('/settings')
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
         name: "buildings",
-        variant: "regular"
+        variant: "solid"
       }), /*#__PURE__*/React__default["default"].createElement("div", {
-        "data-testid": "yardNumber"
-      }, "Yard ", yardNumber));
+        "data-testid": "yardNumber",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber"
+      }, yardNumber));
     }
   },
   // add margin 0 12px to all icons in the right
   {
-    key: 'search',
-    name: 'Search',
-    onRender: function onRender() {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
-        onClick: handleHelpClick
-      }, /*#__PURE__*/React__default["default"].createElement(OverFlowIcon, {
-        name: "search"
-      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
-        text: "search"
-      }));
-    },
-    renderIf: renderSearch,
-    render: function render() {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
-        onClick: function onClick() {
-          return handleIconClick(ICONS.SEARCH);
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-        name: "magnifying-glass",
-        variant: "solid"
-      }));
-    }
-  }, {
     key: 'phoneStatus',
     name: phoneNumber,
     onRender: function onRender(_, dismissMenu) {
@@ -34703,7 +34680,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     renderIf: isIdeaNoteEnabled,
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
         onClick: function onClick() {
           return handleIconClick(ICONS.IDEANOTE);
         }
@@ -50771,31 +50748,32 @@ const I = ({
     setActiveAnchor: Z,
     border: J,
     opacity: Q,
-    arrowColor: ee
+    arrowColor: ee,
+    role: te = "tooltip"
   }) => {
-    var te;
-    const oe = React.useRef(null),
-      le = React.useRef(null),
+    var oe;
+    const le = React.useRef(null),
       re = React.useRef(null),
       ne = React.useRef(null),
-      [ce, ie] = React.useState(v),
-      [se, ae] = React.useState({}),
-      [de, ue] = React.useState({}),
-      [pe, ve] = React.useState(!1),
-      [me, fe] = React.useState(!1),
-      [ye, he] = React.useState(null),
-      we = React.useRef(!1),
-      be = React.useRef(null),
+      ce = React.useRef(null),
+      [ie, se] = React.useState(v),
+      [ae, de] = React.useState({}),
+      [ue, pe] = React.useState({}),
+      [ve, me] = React.useState(!1),
+      [fe, ye] = React.useState(!1),
+      [he, we] = React.useState(null),
+      be = React.useRef(!1),
+      Se = React.useRef(null),
       {
-        anchorRefs: Se,
-        setActiveAnchor: Ee
+        anchorRefs: Ee,
+        setActiveAnchor: ge
       } = k(r),
-      ge = React.useRef(!1),
-      [_e, Ae] = React.useState([]),
-      Oe = React.useRef(!1),
-      Te = w || h.includes("click"),
-      ke = Te || (null == D ? void 0 : D.click) || (null == D ? void 0 : D.dblclick) || (null == D ? void 0 : D.mousedown),
-      Le = D ? {
+      _e = React.useRef(!1),
+      [Ae, Oe] = React.useState([]),
+      Te = React.useRef(!1),
+      ke = w || h.includes("click"),
+      Le = ke || (null == D ? void 0 : D.click) || (null == D ? void 0 : D.dblclick) || (null == D ? void 0 : D.mousedown),
+      Ce = D ? {
         ...D
       } : {
         mouseenter: !0,
@@ -50804,12 +50782,12 @@ const I = ({
         dblclick: !1,
         mousedown: !1
       };
-    !D && Te && Object.assign(Le, {
+    !D && ke && Object.assign(Ce, {
       mouseenter: !1,
       focus: !1,
       click: !0
     });
-    const Ce = q ? {
+    const Re = q ? {
       ...q
     } : {
       mouseleave: !0,
@@ -50818,80 +50796,80 @@ const I = ({
       dblclick: !1,
       mouseup: !1
     };
-    !q && Te && Object.assign(Ce, {
+    !q && ke && Object.assign(Re, {
       mouseleave: !1,
       blur: !1
     });
-    const Re = H ? {
+    const xe = H ? {
       ...H
     } : {
       escape: I || !1,
       scroll: B || !1,
       resize: z || !1,
-      clickOutsideAnchor: ke || !1
+      clickOutsideAnchor: Le || !1
     };
-    M && (Object.assign(Le, {
+    M && (Object.assign(Ce, {
       mouseenter: !1,
       focus: !1,
       click: !1,
       dblclick: !1,
       mousedown: !1
-    }), Object.assign(Ce, {
+    }), Object.assign(Re, {
       mouseleave: !1,
       blur: !1,
       click: !1,
       dblclick: !1,
       mouseup: !1
-    }), Object.assign(Re, {
+    }), Object.assign(xe, {
       escape: !1,
       scroll: !1,
       resize: !1,
       clickOutsideAnchor: !1
-    })), C(() => (Oe.current = !0, () => {
-      Oe.current = !1;
+    })), C(() => (Te.current = !0, () => {
+      Te.current = !1;
     }), []);
-    const xe = e => {
-      Oe.current && (e && fe(!0), setTimeout(() => {
-        Oe.current && (null == G || G(e), void 0 === Y && ve(e));
+    const Ne = e => {
+      Te.current && (e && ye(!0), setTimeout(() => {
+        Te.current && (null == G || G(e), void 0 === Y && me(e));
       }, 10));
     };
     React.useEffect(() => {
       if (void 0 === Y) return () => null;
-      Y && fe(!0);
+      Y && ye(!0);
       const e = setTimeout(() => {
-        ve(Y);
+        me(Y);
       }, 10);
       return () => {
         clearTimeout(e);
       };
     }, [Y]), React.useEffect(() => {
-      pe !== we.current && (we.current = pe, pe && (null == F || F()));
-    }, [pe]);
-    const Ne = (e = _) => {
-        re.current && clearTimeout(re.current), re.current = setTimeout(() => {
-          xe(!0);
+      ve !== be.current && (be.current = ve, ve && (null == F || F()));
+    }, [ve]);
+    const $e = (e = _) => {
+        ne.current && clearTimeout(ne.current), ne.current = setTimeout(() => {
+          Ne(!0);
         }, e);
       },
-      $e = (e = A) => {
-        ne.current && clearTimeout(ne.current), ne.current = setTimeout(() => {
-          ge.current || xe(!1);
+      je = (e = A) => {
+        ce.current && clearTimeout(ce.current), ce.current = setTimeout(() => {
+          _e.current || Ne(!1);
         }, e);
       },
-      je = e => {
+      Ie = e => {
         var t;
         if (!e) return;
         const o = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
-        if (!(null == o ? void 0 : o.isConnected)) return Z(null), void Ee({
+        if (!(null == o ? void 0 : o.isConnected)) return Z(null), void ge({
           current: null
         });
-        _ ? Ne() : xe(!0), Z(o), Ee({
+        _ ? $e() : Ne(!0), Z(o), ge({
           current: o
-        }), ne.current && clearTimeout(ne.current);
+        }), ce.current && clearTimeout(ce.current);
       },
-      Ie = () => {
-        R ? $e(A || 100) : A ? $e() : xe(!1), re.current && clearTimeout(re.current);
+      Be = () => {
+        R ? je(A || 100) : A ? je() : Ne(!1), ne.current && clearTimeout(ne.current);
       },
-      Be = ({
+      ze = ({
         x: e,
         y: t
       }) => {
@@ -50909,56 +50887,56 @@ const I = ({
           })
         };
         N({
-          place: null !== (o = null == ye ? void 0 : ye.place) && void 0 !== o ? o : v,
+          place: null !== (o = null == he ? void 0 : he.place) && void 0 !== o ? o : v,
           offset: m,
           elementReference: l,
-          tooltipReference: oe.current,
-          tooltipArrowReference: le.current,
+          tooltipReference: le.current,
+          tooltipArrowReference: re.current,
           strategy: b,
           middlewares: S,
           border: J
         }).then(e => {
-          Object.keys(e.tooltipStyles).length && ae(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ue(e.tooltipArrowStyles), ie(e.place);
+          Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place);
         });
       },
-      ze = e => {
+      De = e => {
         if (!e) return;
         const t = e,
           o = {
             x: t.clientX,
             y: t.clientY
           };
-        Be(o), be.current = o;
+        ze(o), Se.current = o;
       },
-      De = e => {
+      qe = e => {
         var t;
-        if (!pe) return;
+        if (!ve) return;
         const o = e.target;
-        if (null === (t = oe.current) || void 0 === t ? void 0 : t.contains(o)) return;
-        [document.querySelector(`[id='${u}']`), ..._e].some(e => null == e ? void 0 : e.contains(o)) || (xe(!1), re.current && clearTimeout(re.current));
+        if (null === (t = le.current) || void 0 === t ? void 0 : t.contains(o)) return;
+        [document.querySelector(`[id='${u}']`), ...Ae].some(e => null == e ? void 0 : e.contains(o)) || (Ne(!1), ne.current && clearTimeout(ne.current));
       },
-      qe = g(je, 50, !0),
       He = g(Ie, 50, !0),
-      Me = React.useCallback(() => {
+      Me = g(Be, 50, !0),
+      We = React.useCallback(() => {
         var e, t;
-        const o = null !== (e = null == ye ? void 0 : ye.position) && void 0 !== e ? e : P;
-        o ? Be(o) : O ? be.current && Be(be.current) : (null == V ? void 0 : V.isConnected) && N({
-          place: null !== (t = null == ye ? void 0 : ye.place) && void 0 !== t ? t : v,
+        const o = null !== (e = null == he ? void 0 : he.position) && void 0 !== e ? e : P;
+        o ? ze(o) : O ? Se.current && ze(Se.current) : (null == V ? void 0 : V.isConnected) && N({
+          place: null !== (t = null == he ? void 0 : he.place) && void 0 !== t ? t : v,
           offset: m,
           elementReference: V,
-          tooltipReference: oe.current,
-          tooltipArrowReference: le.current,
+          tooltipReference: le.current,
+          tooltipArrowReference: re.current,
           strategy: b,
           middlewares: S,
           border: J
         }).then(e => {
-          Oe.current && (Object.keys(e.tooltipStyles).length && ae(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ue(e.tooltipArrowStyles), ie(e.place));
+          Te.current && (Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place));
         });
-      }, [pe, V, U, W, v, null == ye ? void 0 : ye.place, m, b, P, null == ye ? void 0 : ye.position, O]);
+      }, [ve, V, U, W, v, null == he ? void 0 : he.place, m, b, P, null == he ? void 0 : he.position, O]);
     React.useEffect(() => {
       var e, t;
-      const o = new Set(Se);
-      _e.forEach(e => {
+      const o = new Set(Ee);
+      Ae.forEach(e => {
         o.add({
           current: e
         });
@@ -50968,57 +50946,57 @@ const I = ({
         current: l
       });
       const r = () => {
-          xe(!1);
+          Ne(!1);
         },
         n = x(V),
-        c = x(oe.current);
-      Re.scroll && (window.addEventListener("scroll", r), null == n || n.addEventListener("scroll", r), null == c || c.addEventListener("scroll", r));
+        c = x(le.current);
+      xe.scroll && (window.addEventListener("scroll", r), null == n || n.addEventListener("scroll", r), null == c || c.addEventListener("scroll", r));
       let i = null;
-      Re.resize ? window.addEventListener("resize", r) : V && oe.current && (i = autoUpdate(V, oe.current, Me, {
+      xe.resize ? window.addEventListener("resize", r) : V && le.current && (i = autoUpdate(V, le.current, We, {
         ancestorResize: !0,
         elementResize: !0,
         layoutShift: !0
       }));
       const s = e => {
-        "Escape" === e.key && xe(!1);
+        "Escape" === e.key && Ne(!1);
       };
-      Re.escape && window.addEventListener("keydown", s), Re.clickOutsideAnchor && window.addEventListener("click", De);
+      xe.escape && window.addEventListener("keydown", s), xe.clickOutsideAnchor && window.addEventListener("click", qe);
       const a = [],
         d = e => {
-          pe || je(e);
+          ve || Ie(e);
         },
         p = () => {
-          pe && Ie();
+          ve && Be();
         },
         v = ["mouseenter", "mouseleave", "focus", "blur"],
         m = ["click", "dblclick", "mousedown", "mouseup"];
-      Object.entries(Le).forEach(([e, t]) => {
+      Object.entries(Ce).forEach(([e, t]) => {
         t && (v.includes(e) ? a.push({
           event: e,
-          listener: qe
+          listener: He
         }) : m.includes(e) && a.push({
           event: e,
           listener: d
         }));
-      }), Object.entries(Ce).forEach(([e, t]) => {
+      }), Object.entries(Re).forEach(([e, t]) => {
         t && (v.includes(e) ? a.push({
           event: e,
-          listener: He
+          listener: Me
         }) : m.includes(e) && a.push({
           event: e,
           listener: p
         }));
       }), O && a.push({
         event: "mousemove",
-        listener: ze
+        listener: De
       });
       const y = () => {
-          ge.current = !0;
+          _e.current = !0;
         },
         h = () => {
-          ge.current = !1, Ie();
+          _e.current = !1, Be();
         };
-      return R && !ke && (null === (e = oe.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = oe.current) || void 0 === t || t.addEventListener("mouseleave", h)), a.forEach(({
+      return R && !Le && (null === (e = le.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = le.current) || void 0 === t || t.addEventListener("mouseleave", h)), a.forEach(({
         event: e,
         listener: t
       }) => {
@@ -51028,7 +51006,7 @@ const I = ({
         });
       }), () => {
         var e, t;
-        Re.scroll && (window.removeEventListener("scroll", r), null == n || n.removeEventListener("scroll", r), null == c || c.removeEventListener("scroll", r)), Re.resize ? window.removeEventListener("resize", r) : null == i || i(), Re.clickOutsideAnchor && window.removeEventListener("click", De), Re.escape && window.removeEventListener("keydown", s), R && !ke && (null === (e = oe.current) || void 0 === e || e.removeEventListener("mouseenter", y), null === (t = oe.current) || void 0 === t || t.removeEventListener("mouseleave", h)), a.forEach(({
+        xe.scroll && (window.removeEventListener("scroll", r), null == n || n.removeEventListener("scroll", r), null == c || c.removeEventListener("scroll", r)), xe.resize ? window.removeEventListener("resize", r) : null == i || i(), xe.clickOutsideAnchor && window.removeEventListener("click", qe), xe.escape && window.removeEventListener("keydown", s), R && !Le && (null === (e = le.current) || void 0 === e || e.removeEventListener("mouseenter", y), null === (t = le.current) || void 0 === t || t.removeEventListener("mouseleave", h)), a.forEach(({
           event: e,
           listener: t
         }) => {
@@ -51038,9 +51016,9 @@ const I = ({
           });
         });
       };
-    }, [V, Me, me, Se, _e, D, q, H, Te]), React.useEffect(() => {
+    }, [V, We, fe, Ee, Ae, D, q, H, ke]), React.useEffect(() => {
       var e, t;
-      let o = null !== (t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
+      let o = null !== (t = null !== (e = null == he ? void 0 : he.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
       !o && r && (o = `[data-tooltip-id='${r}']`);
       const l = new MutationObserver(e => {
         const t = [],
@@ -51057,7 +51035,7 @@ const I = ({
               } catch (e) {}
               t.some(e => {
                 var t;
-                return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (fe(!1), xe(!1), Z(null), re.current && clearTimeout(re.current), ne.current && clearTimeout(ne.current), !0);
+                return !!(null === (t = null == e ? void 0 : e.contains) || void 0 === t ? void 0 : t.call(e, V)) && (ye(!1), Ne(!1), Z(null), ne.current && clearTimeout(ne.current), ce.current && clearTimeout(ce.current), !0);
               });
             }
             if (o) try {
@@ -51065,7 +51043,7 @@ const I = ({
               t.push(...l.filter(e => e.matches(o))), t.push(...l.flatMap(e => [...e.querySelectorAll(o)]));
             } catch (e) {}
           }
-        }), (t.length || l.length) && Ae(e => [...e.filter(e => !l.includes(e)), ...t]);
+        }), (t.length || l.length) && Oe(e => [...e.filter(e => !l.includes(e)), ...t]);
       });
       return l.observe(document.body, {
         childList: !0,
@@ -51075,12 +51053,12 @@ const I = ({
       }), () => {
         l.disconnect();
       };
-    }, [r, p, null == ye ? void 0 : ye.anchorSelect, V]), React.useEffect(() => {
-      Me();
-    }, [Me]), React.useEffect(() => {
+    }, [r, p, null == he ? void 0 : he.anchorSelect, V]), React.useEffect(() => {
+      We();
+    }, [We]), React.useEffect(() => {
       if (!(null == X ? void 0 : X.current)) return () => null;
       const e = new ResizeObserver(() => {
-        Me();
+        We();
       });
       return e.observe(X.current), () => {
         e.disconnect();
@@ -51088,22 +51066,22 @@ const I = ({
     }, [U, null == X ? void 0 : X.current]), React.useEffect(() => {
       var e;
       const t = document.querySelector(`[id='${u}']`),
-        o = [..._e, t];
-      V && o.includes(V) || Z(null !== (e = _e[0]) && void 0 !== e ? e : t);
-    }, [u, _e, V]), React.useEffect(() => () => {
-      re.current && clearTimeout(re.current), ne.current && clearTimeout(ne.current);
+        o = [...Ae, t];
+      V && o.includes(V) || Z(null !== (e = Ae[0]) && void 0 !== e ? e : t);
+    }, [u, Ae, V]), React.useEffect(() => () => {
+      ne.current && clearTimeout(ne.current), ce.current && clearTimeout(ce.current);
     }, []), React.useEffect(() => {
       var e;
-      let t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p;
+      let t = null !== (e = null == he ? void 0 : he.anchorSelect) && void 0 !== e ? e : p;
       if (!t && r && (t = `[data-tooltip-id='${r}']`), t) try {
         const e = Array.from(document.querySelectorAll(t));
-        Ae(e);
+        Oe(e);
       } catch (e) {
-        Ae([]);
+        Oe([]);
       }
-    }, [r, p, null == ye ? void 0 : ye.anchorSelect]);
-    const We = null !== (te = null == ye ? void 0 : ye.content) && void 0 !== te ? te : U,
-      Pe = pe && Object.keys(se).length > 0;
+    }, [r, p, null == he ? void 0 : he.anchorSelect]);
+    const Pe = null !== (oe = null == he ? void 0 : he.content) && void 0 !== oe ? oe : U,
+      Fe = ve && Object.keys(ae).length > 0;
     return React.useImperativeHandle(t, () => ({
       open: e => {
         if (null == e ? void 0 : e.anchorSelect) try {
@@ -51111,34 +51089,34 @@ const I = ({
         } catch (t) {
           return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`);
         }
-        he(null != e ? e : null), (null == e ? void 0 : e.delay) ? Ne(e.delay) : xe(!0);
+        we(null != e ? e : null), (null == e ? void 0 : e.delay) ? $e(e.delay) : Ne(!0);
       },
       close: e => {
-        (null == e ? void 0 : e.delay) ? $e(e.delay) : xe(!1);
+        (null == e ? void 0 : e.delay) ? je(e.delay) : Ne(!1);
       },
       activeAnchor: V,
-      place: ce,
-      isOpen: Boolean(me && !T && We && Pe)
-    })), me && !T && We ? React__default["default"].createElement(E, {
+      place: ie,
+      isOpen: Boolean(fe && !T && Pe && Fe)
+    })), fe && !T && Pe ? React__default["default"].createElement(E, {
       id: r,
-      role: "tooltip",
-      className: classnames("react-tooltip", $.tooltip, j.tooltip, j[d], n, `react-tooltip__place-${ce}`, $[Pe ? "show" : "closing"], Pe ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && $.fixed, R && $.clickable),
+      role: te,
+      className: classnames("react-tooltip", $.tooltip, j.tooltip, j[d], n, `react-tooltip__place-${ie}`, $[Fe ? "show" : "closing"], Fe ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && $.fixed, R && $.clickable),
       onTransitionEnd: e => {
-        pe || "opacity" !== e.propertyName || (fe(!1), he(null), null == K || K());
+        ve || "opacity" !== e.propertyName || (ye(!1), we(null), null == K || K());
       },
       style: {
         ...W,
-        ...se,
-        opacity: void 0 !== Q && Pe ? Q : void 0
+        ...ae,
+        opacity: void 0 !== Q && Fe ? Q : void 0
       },
-      ref: oe
-    }, We, React__default["default"].createElement(E, {
+      ref: le
+    }, Pe, React__default["default"].createElement(E, {
       className: classnames("react-tooltip-arrow", $.arrow, j.arrow, s, L && $.noArrow),
       style: {
-        ...de,
+        ...ue,
         background: ee ? `linear-gradient(to right bottom, transparent 50%, ${ee} 50%)` : void 0
       },
-      ref: le
+      ref: re
     })) : null;
   },
   B = ({
@@ -51189,75 +51167,76 @@ const I = ({
     arrowColor: F,
     setIsOpen: K,
     afterShow: U,
-    afterHide: X
-  }, Y) => {
-    const [G, V] = React.useState(n),
-      [Z, J] = React.useState(s),
-      [Q, ee] = React.useState(v),
-      [te, oe] = React.useState(p),
-      [le, re] = React.useState(m),
-      [ne, ce] = React.useState(E),
-      [ie, se] = React.useState(g),
-      [ae, de] = React.useState(_),
-      [ue, pe] = React.useState(A),
-      [ve, me] = React.useState(f),
-      [fe, ye] = React.useState(h),
-      [he, we] = React.useState(b),
-      [be, Se] = React.useState(null),
-      Ee = React.useRef(M),
+    afterHide: X,
+    role: Y = "tooltip"
+  }, G) => {
+    const [V, Z] = React.useState(n),
+      [J, Q] = React.useState(s),
+      [ee, te] = React.useState(v),
+      [oe, le] = React.useState(p),
+      [re, ne] = React.useState(m),
+      [ce, ie] = React.useState(E),
+      [se, ae] = React.useState(g),
+      [de, ue] = React.useState(_),
+      [pe, ve] = React.useState(A),
+      [me, fe] = React.useState(f),
+      [ye, he] = React.useState(h),
+      [we, be] = React.useState(b),
+      [Se, Ee] = React.useState(null),
+      ge = React.useRef(M),
       {
-        anchorRefs: ge,
-        activeAnchor: _e
+        anchorRefs: _e,
+        activeAnchor: Ae
       } = k(t),
-      Ae = e => null == e ? void 0 : e.getAttributeNames().reduce((t, o) => {
+      Oe = e => null == e ? void 0 : e.getAttributeNames().reduce((t, o) => {
         var l;
         if (o.startsWith("data-tooltip-")) {
           t[o.replace(/^data-tooltip-/, "")] = null !== (l = null == e ? void 0 : e.getAttribute(o)) && void 0 !== l ? l : null;
         }
         return t;
       }, {}),
-      Oe = e => {
+      Te = e => {
         const t = {
           place: e => {
             var t;
-            ee(null !== (t = e) && void 0 !== t ? t : v);
+            te(null !== (t = e) && void 0 !== t ? t : v);
           },
           content: e => {
-            V(null != e ? e : n);
+            Z(null != e ? e : n);
           },
           html: e => {
-            J(null != e ? e : s);
+            Q(null != e ? e : s);
           },
           variant: e => {
             var t;
-            oe(null !== (t = e) && void 0 !== t ? t : p);
+            le(null !== (t = e) && void 0 !== t ? t : p);
           },
           offset: e => {
-            re(null === e ? m : Number(e));
+            ne(null === e ? m : Number(e));
           },
           wrapper: e => {
             var t;
-            me(null !== (t = e) && void 0 !== t ? t : f);
+            fe(null !== (t = e) && void 0 !== t ? t : f);
           },
           events: e => {
             const t = null == e ? void 0 : e.split(" ");
-            ye(null != t ? t : h);
+            he(null != t ? t : h);
           },
           "position-strategy": e => {
             var t;
-            we(null !== (t = e) && void 0 !== t ? t : b);
+            be(null !== (t = e) && void 0 !== t ? t : b);
           },
           "delay-show": e => {
-            ce(null === e ? E : Number(e));
+            ie(null === e ? E : Number(e));
           },
           "delay-hide": e => {
-            se(null === e ? g : Number(e));
+            ae(null === e ? g : Number(e));
           },
           float: e => {
-            de(null === e ? _ : "true" === e);
+            ue(null === e ? _ : "true" === e);
           },
           hidden: e => {
-            pe(null === e ? A : "true" === e);
+            ve(null === e ? A : "true" === e);
           }
         };
         Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, o]) => {
@@ -51266,27 +51245,27 @@ const I = ({
         });
       };
     React.useEffect(() => {
-      V(n);
+      Z(n);
     }, [n]), React.useEffect(() => {
-      J(s);
+      Q(s);
     }, [s]), React.useEffect(() => {
-      ee(v);
+      te(v);
     }, [v]), React.useEffect(() => {
-      oe(p);
+      le(p);
     }, [p]), React.useEffect(() => {
-      re(m);
+      ne(m);
     }, [m]), React.useEffect(() => {
-      ce(E);
+      ie(E);
     }, [E]), React.useEffect(() => {
-      se(g);
+      ae(g);
     }, [g]), React.useEffect(() => {
-      de(_);
+      ue(_);
     }, [_]), React.useEffect(() => {
-      pe(A);
+      ve(A);
     }, [A]), React.useEffect(() => {
-      we(b);
+      be(b);
     }, [b]), React.useEffect(() => {
-      Ee.current !== M && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
+      ge.current !== M && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
     }, [M]), React.useEffect(() => {
       "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", {
         detail: {
@@ -51296,7 +51275,7 @@ const I = ({
       }));
     }, []), React.useEffect(() => {
       var e;
-      const o = new Set(ge);
+      const o = new Set(_e);
       let n = r;
       if (!n && t && (n = `[data-tooltip-id='${t}']`), n) try {
         document.querySelectorAll(n).forEach(e => {
@@ -51311,13 +51290,13 @@ const I = ({
       if (c && o.add({
         current: c
       }), !o.size) return () => null;
-      const i = null !== (e = null != be ? be : c) && void 0 !== e ? e : _e.current,
+      const i = null !== (e = null != Se ? Se : c) && void 0 !== e ? e : Ae.current,
         s = new MutationObserver(e => {
           e.forEach(e => {
             var t;
             if (!i || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
-            const o = Ae(i);
-            Oe(o);
+            const o = Oe(i);
+            Te(o);
           });
         }),
         a = {
@@ -51326,51 +51305,51 @@ const I = ({
           subtree: !1
         };
       if (i) {
-        const e = Ae(i);
-        Oe(e), s.observe(i, a);
+        const e = Oe(i);
+        Te(e), s.observe(i, a);
       }
       return () => {
         s.disconnect();
       };
-    }, [ge, _e, be, l, r]), React.useEffect(() => {
+    }, [_e, Ae, Se, l, r]), React.useEffect(() => {
       (null == D ? void 0 : D.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), W && !z("border", `${W}`) && console.warn(`[react-tooltip] "${W}" is not a valid \`border\`.`), (null == D ? void 0 : D.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), P && !z("opacity", `${P}`) && console.warn(`[react-tooltip] "${P}" is not a valid \`opacity\`.`);
     }, []);
-    let Te = y;
-    const ke = React.useRef(null);
+    let ke = y;
+    const Le = React.useRef(null);
     if (a) {
       const t = a({
-        content: null != G ? G : null,
-        activeAnchor: be
+        content: null != V ? V : null,
+        activeAnchor: Se
       });
-      Te = t ? React__default["default"].createElement("div", {
-        ref: ke,
+      ke = t ? React__default["default"].createElement("div", {
+        ref: Le,
         className: "react-tooltip-content-wrapper"
       }, t) : null;
-    } else G && (Te = G);
-    Z && (Te = React__default["default"].createElement(B, {
-      content: Z
+    } else V && (ke = V);
+    J && (ke = React__default["default"].createElement(B, {
+      content: J
     }));
-    const Le = {
-      forwardRef: Y,
+    const Ce = {
+      forwardRef: G,
       id: t,
       anchorId: l,
       anchorSelect: r,
       className: d,
       classNameArrow: u,
-      content: Te,
-      contentWrapperRef: ke,
-      place: Q,
-      variant: te,
-      offset: le,
-      wrapper: ve,
-      events: fe,
+      content: ke,
+      contentWrapperRef: Le,
+      place: ee,
+      variant: oe,
+      offset: re,
+      wrapper: me,
+      events: ye,
       openOnClick: w,
-      positionStrategy: he,
+      positionStrategy: we,
       middlewares: S,
-      delayShow: ne,
-      delayHide: ie,
-      float: ae,
-      hidden: ue,
+      delayShow: ce,
+      delayHide: se,
+      float: de,
+      hidden: pe,
       noArrow: O,
       clickable: T,
       closeOnEsc: L,
@@ -51389,11 +51368,12 @@ const I = ({
       setIsOpen: K,
       afterShow: U,
       afterHide: X,
-      activeAnchor: be,
-      setActiveAnchor: e => Se(e)
+      activeAnchor: Se,
+      setActiveAnchor: e => Ee(e),
+      role: Y
     };
     return React__default["default"].createElement(I, {
-      ...Le
+      ...Ce
     });
   });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", e => {