@copart/ops-tool-kit 1.11.1-alpha.2 → 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-alpha.2";
+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 = [
@@ -860,13 +860,13 @@ var b$1 = "function" === typeof Symbol && Symbol.for,
   m = b$1 ? Symbol.for("react.concurrent_mode") : 60111,
   n = b$1 ? Symbol.for("react.forward_ref") : 60112,
   p = b$1 ? Symbol.for("react.suspense") : 60113,
-  q$1 = b$1 ? Symbol.for("react.suspense_list") : 60120,
+  q = b$1 ? Symbol.for("react.suspense_list") : 60120,
   r = b$1 ? Symbol.for("react.memo") : 60115,
   t = b$1 ? Symbol.for("react.lazy") : 60116,
   v = b$1 ? Symbol.for("react.block") : 60121,
   w$1 = b$1 ? Symbol.for("react.fundamental") : 60117,
   x$1 = b$1 ? Symbol.for("react.responder") : 60118,
-  y$1 = b$1 ? Symbol.for("react.scope") : 60119;
+  y = b$1 ? Symbol.for("react.scope") : 60119;
 function z$1(a) {
   if ("object" === typeof a && null !== a) {
     var u = a.$$typeof;
@@ -951,7 +951,7 @@ var isSuspense = function (a) {
   return z$1(a) === p;
 };
 var isValidElementType = function (a) {
-  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f || a === p || a === q$1 || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y$1 || a.$$typeof === v);
+  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y || a.$$typeof === v);
 };
 var typeOf = z$1;
 
@@ -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  color: rgba(242, 247, 255, 1);\r\n  font-weight: 400;\r\n  letter-spacing: 0;\r\n  margin-left: 3px;\r\n  /* transition: all 0.2s; */\r\n  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);\r\n  opacity: 0.8;\r\n  position: relative;\r\n  top: -2px;\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.70196);\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}\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);
@@ -3667,12 +3667,12 @@ function nonStandardBrowserEnv() {
 
 // btoa polyfill for IE<10 courtesy https://github.com/davidchambers/Base64.js
 var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
-function E$1() {
+function E() {
   this.message = 'String contains an invalid character';
 }
-E$1.prototype = new Error();
-E$1.prototype.code = 5;
-E$1.prototype.name = 'InvalidCharacterError';
+E.prototype = new Error();
+E.prototype.code = 5;
+E.prototype.name = 'InvalidCharacterError';
 function btoa$2(input) {
   var str = String(input);
   var output = '';
@@ -3687,7 +3687,7 @@ function btoa$2(input) {
   output += map.charAt(63 & block >> 8 - idx % 1 * 8)) {
     charCode = str.charCodeAt(idx += 3 / 4);
     if (charCode > 0xFF) {
-      throw new E$1();
+      throw new E();
     }
     block = block << 8 | charCode;
   }
@@ -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-left: 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: 6px;\r\n  gap: 6px;\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);
         }
@@ -50551,42 +50528,42 @@ var classnames = createCommonjsModule(function (module) {
 * @copyright ReactTooltip Team
 * @license MIT
 */
-const y = "react-tooltip-core-styles",
-  h = "react-tooltip-base-styles",
-  w = {
+const h = "react-tooltip-core-styles",
+  w = "react-tooltip-base-styles",
+  b = {
     core: !1,
     base: !1
   };
-function b({
+function S({
   css: e,
-  id: t = h,
-  type: r = "base",
-  ref: o
+  id: t = w,
+  type: o = "base",
+  ref: l
 }) {
-  var n, l;
-  if (!e || "undefined" == typeof document || w[r]) return;
-  if ("core" === r && "undefined" != typeof process && (null === (n = null === process || void 0 === process ? void 0 : process.env) || void 0 === n ? void 0 : n.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
-  if ("base" !== r && "undefined" != typeof process && (null === (l = null === process || void 0 === process ? void 0 : process.env) || void 0 === l ? void 0 : l.REACT_TOOLTIP_DISABLE_BASE_STYLES)) return;
-  "core" === r && (t = y), o || (o = {});
+  var r, n;
+  if (!e || "undefined" == typeof document || b[o]) return;
+  if ("core" === o && "undefined" != typeof process && (null === (r = null === process || void 0 === process ? void 0 : process.env) || void 0 === r ? void 0 : r.REACT_TOOLTIP_DISABLE_CORE_STYLES)) return;
+  if ("base" !== o && "undefined" != typeof process && (null === (n = null === process || void 0 === process ? void 0 : process.env) || void 0 === n ? void 0 : n.REACT_TOOLTIP_DISABLE_BASE_STYLES)) return;
+  "core" === o && (t = h), l || (l = {});
   const {
-    insertAt: i
-  } = o;
+    insertAt: c
+  } = l;
   if (document.getElementById(t)) return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);
-  const c = document.head || document.getElementsByTagName("head")[0],
+  const i = document.head || document.getElementsByTagName("head")[0],
     s = document.createElement("style");
-  s.id = t, s.type = "text/css", "top" === i && c.firstChild ? c.insertBefore(s, c.firstChild) : c.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), w[r] = !0;
+  s.id = t, s.type = "text/css", "top" === c && i.firstChild ? i.insertBefore(s, i.firstChild) : i.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), b[o] = !0;
 }
-const E = (e, t, r) => {
-    let o = null;
-    return function (...n) {
-      const l = () => {
-        o = null, r || e.apply(this, n);
+const g = (e, t, o) => {
+    let l = null;
+    return function (...r) {
+      const n = () => {
+        l = null, o || e.apply(this, r);
       };
-      r && !o && (e.apply(this, n), o = setTimeout(l, t)), r || (o && clearTimeout(o), o = setTimeout(l, t));
+      o && !l && (e.apply(this, r), l = setTimeout(n, t)), o || (l && clearTimeout(l), l = setTimeout(n, t));
     };
   },
-  g = "DEFAULT_TOOLTIP_ID",
-  _ = {
+  _ = "DEFAULT_TOOLTIP_ID",
+  A = {
     anchorRefs: new Set(),
     activeAnchor: {
       current: null
@@ -50595,130 +50572,133 @@ const E = (e, t, r) => {
     detach: () => {},
     setActiveAnchor: () => {}
   },
-  A = React.createContext({
-    getTooltipData: () => _
+  O = React.createContext({
+    getTooltipData: () => A
   });
-function O(e = g) {
-  return React.useContext(A).getTooltipData(e);
+function k(e = _) {
+  return React.useContext(O).getTooltipData(e);
 }
-const R = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
-  C = e => {
+const C = "undefined" != typeof window ? React.useLayoutEffect : React.useEffect,
+  R = e => {
     if (!(e instanceof HTMLElement || e instanceof SVGElement)) return !1;
     const t = getComputedStyle(e);
     return ["overflow", "overflow-x", "overflow-y"].some(e => {
-      const r = t.getPropertyValue(e);
-      return "auto" === r || "scroll" === r;
+      const o = t.getPropertyValue(e);
+      return "auto" === o || "scroll" === o;
     });
   },
-  N = e => {
+  x = e => {
     if (!e) return null;
     let t = e.parentElement;
     for (; t;) {
-      if (C(t)) return t;
+      if (R(t)) return t;
       t = t.parentElement;
     }
     return document.scrollingElement || document.documentElement;
   },
-  k = async ({
+  N = async ({
     elementReference: e = null,
     tooltipReference: t = null,
-    tooltipArrowReference: r = null,
-    place: o = "top",
-    offset: n = 10,
-    strategy: l = "absolute",
-    middlewares: i = [offset(Number(n)), flip(), shift({
+    tooltipArrowReference: o = null,
+    place: l = "top",
+    offset: r = 10,
+    strategy: n = "absolute",
+    middlewares: c = [offset(Number(r)), flip(), shift({
       padding: 5
     })],
-    border: c
+    border: i
   }) => {
     if (!e) return {
       tooltipStyles: {},
       tooltipArrowStyles: {},
-      place: o
+      place: l
     };
     if (null === t) return {
       tooltipStyles: {},
       tooltipArrowStyles: {},
-      place: o
+      place: l
     };
-    const s = i;
-    return r ? (s.push(arrow({
-      element: r,
+    const s = c;
+    return o ? (s.push(arrow({
+      element: o,
       padding: 5
     })), computePosition(e, t, {
-      placement: o,
-      strategy: l,
+      placement: l,
+      strategy: n,
       middleware: s
     }).then(({
       x: e,
       y: t,
-      placement: r,
-      middlewareData: o
+      placement: o,
+      middlewareData: l
     }) => {
-      var n, l;
-      const i = {
+      var r, n;
+      const c = {
           left: `${e}px`,
           top: `${t}px`,
-          border: c
+          border: i
         },
         {
           x: s,
           y: a
-        } = null !== (n = o.arrow) && void 0 !== n ? n : {
+        } = null !== (r = l.arrow) && void 0 !== r ? r : {
           x: 0,
           y: 0
         },
-        u = null !== (l = {
+        d = null !== (n = {
           top: "bottom",
           right: "left",
           bottom: "top",
           left: "right"
-        }[r.split("-")[0]]) && void 0 !== l ? l : "bottom",
-        d = c && {
-          borderBottom: c,
-          borderRight: c
+        }[o.split("-")[0]]) && void 0 !== n ? n : "bottom",
+        u = i && {
+          borderBottom: i,
+          borderRight: i
         };
       let p = 0;
-      if (c) {
-        const e = `${c}`.match(/(\d+)px/);
+      if (i) {
+        const e = `${i}`.match(/(\d+)px/);
         p = (null == e ? void 0 : e[1]) ? Number(e[1]) : 1;
       }
       return {
-        tooltipStyles: i,
+        tooltipStyles: c,
         tooltipArrowStyles: {
           left: null != s ? `${s}px` : "",
           top: null != a ? `${a}px` : "",
           right: "",
           bottom: "",
-          ...d,
-          [u]: `-${4 + p}px`
+          ...u,
+          [d]: `-${4 + p}px`
         },
-        place: r
+        place: o
       };
     })) : computePosition(e, t, {
       placement: "bottom",
-      strategy: l,
+      strategy: n,
       middleware: s
     }).then(({
       x: e,
       y: t,
-      placement: r
+      placement: o
     }) => ({
       tooltipStyles: {
         left: `${e}px`,
         top: `${t}px`
       },
       tooltipArrowStyles: {},
-      place: r
+      place: o
     }));
   };
-var x = "core-styles-module_tooltip__3vRRp",
-  $ = "core-styles-module_fixed__pcSol",
-  I = "core-styles-module_arrow__cvMwQ",
-  j = "core-styles-module_noArrow__xock6",
-  B = "core-styles-module_clickable__ZuTTB",
-  D = "core-styles-module_show__Nt9eE",
-  H = {
+var $ = {
+    tooltip: "core-styles-module_tooltip__3vRRp",
+    fixed: "core-styles-module_fixed__pcSol",
+    arrow: "core-styles-module_arrow__cvMwQ",
+    noArrow: "core-styles-module_noArrow__xock6",
+    clickable: "core-styles-module_clickable__ZuTTB",
+    show: "core-styles-module_show__Nt9eE",
+    closing: "core-styles-module_closing__sGnxF"
+  },
+  j = {
     tooltip: "styles-module_tooltip__mnnfp",
     arrow: "styles-module_arrow__K0L3T",
     dark: "styles-module_dark__xNqje",
@@ -50728,352 +50708,434 @@ var x = "core-styles-module_tooltip__3vRRp",
     error: "styles-module_error__JvumD",
     info: "styles-module_info__BWdHW"
   };
-const q = ({
-    id: t,
+const I = ({
+    forwardRef: t,
+    id: r,
     className: n,
-    classNameArrow: l,
-    variant: s = "dark",
-    anchorId: a,
-    anchorSelect: u,
-    place: d = "top",
-    offset: p = 10,
-    events: v = ["hover"],
-    openOnClick: y = !1,
-    positionStrategy: h = "absolute",
-    middlewares: w,
-    wrapper: b,
-    delayShow: S = 0,
-    delayHide: g = 0,
-    float: _ = !1,
-    hidden: A = !1,
-    noArrow: T = !1,
-    clickable: L = !1,
-    closeOnEsc: C = !1,
-    closeOnScroll: q = !1,
+    classNameArrow: s,
+    variant: d = "dark",
+    anchorId: u,
+    anchorSelect: p,
+    place: v = "top",
+    offset: m = 10,
+    events: h = ["hover"],
+    openOnClick: w = !1,
+    positionStrategy: b = "absolute",
+    middlewares: S,
+    wrapper: E,
+    delayShow: _ = 0,
+    delayHide: A = 0,
+    float: O = !1,
+    hidden: T = !1,
+    noArrow: L = !1,
+    clickable: R = !1,
+    closeOnEsc: I = !1,
+    closeOnScroll: B = !1,
     closeOnResize: z = !1,
-    style: M,
-    position: W,
-    afterShow: P,
-    afterHide: F,
-    content: K,
-    contentWrapperRef: U,
-    isOpen: X,
-    setIsOpen: Y,
+    openEvents: D,
+    closeEvents: q,
+    globalCloseEvents: H,
+    imperativeModeOnly: M,
+    style: W,
+    position: P,
+    afterShow: F,
+    afterHide: K,
+    content: U,
+    contentWrapperRef: X,
+    isOpen: Y,
+    setIsOpen: G,
     activeAnchor: V,
     setActiveAnchor: Z,
-    border: G,
-    opacity: J,
-    arrowColor: Q
+    border: J,
+    opacity: Q,
+    arrowColor: ee,
+    role: te = "tooltip"
   }) => {
-    const ee = React.useRef(null),
-      te = React.useRef(null),
+    var oe;
+    const le = React.useRef(null),
       re = React.useRef(null),
-      oe = React.useRef(null),
-      [ne, le] = React.useState(d),
-      [ie, ce] = React.useState({}),
-      [se, ae] = React.useState({}),
-      [ue, de] = React.useState(!1),
-      [pe, ve] = React.useState(!1),
-      me = React.useRef(!1),
-      fe = React.useRef(null),
+      ne = 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: ye,
-        setActiveAnchor: he
-      } = O(t),
-      we = React.useRef(!1),
-      [be, Se] = React.useState([]),
-      Ee = React.useRef(!1),
-      ge = y || v.includes("click");
-    R(() => (Ee.current = !0, () => {
-      Ee.current = !1;
-    }), []), React.useEffect(() => {
-      if (!ue) {
-        const e = setTimeout(() => {
-          ve(!1);
-        }, 150);
-        return () => {
-          clearTimeout(e);
-        };
-      }
-      return () => null;
-    }, [ue]);
-    const _e = e => {
-      Ee.current && (e && ve(!0), setTimeout(() => {
-        Ee.current && (null == Y || Y(e), void 0 === X && de(e));
+        anchorRefs: Ee,
+        setActiveAnchor: ge
+      } = k(r),
+      _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,
+        focus: !0,
+        click: !1,
+        dblclick: !1,
+        mousedown: !1
+      };
+    !D && ke && Object.assign(Ce, {
+      mouseenter: !1,
+      focus: !1,
+      click: !0
+    });
+    const Re = q ? {
+      ...q
+    } : {
+      mouseleave: !0,
+      blur: !0,
+      click: !1,
+      dblclick: !1,
+      mouseup: !1
+    };
+    !q && ke && Object.assign(Re, {
+      mouseleave: !1,
+      blur: !1
+    });
+    const xe = H ? {
+      ...H
+    } : {
+      escape: I || !1,
+      scroll: B || !1,
+      resize: z || !1,
+      clickOutsideAnchor: Le || !1
+    };
+    M && (Object.assign(Ce, {
+      mouseenter: !1,
+      focus: !1,
+      click: !1,
+      dblclick: !1,
+      mousedown: !1
+    }), Object.assign(Re, {
+      mouseleave: !1,
+      blur: !1,
+      click: !1,
+      dblclick: !1,
+      mouseup: !1
+    }), Object.assign(xe, {
+      escape: !1,
+      scroll: !1,
+      resize: !1,
+      clickOutsideAnchor: !1
+    })), C(() => (Te.current = !0, () => {
+      Te.current = !1;
+    }), []);
+    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 === X) return () => null;
-      X && ve(!0);
+      if (void 0 === Y) return () => null;
+      Y && ye(!0);
       const e = setTimeout(() => {
-        de(X);
+        me(Y);
       }, 10);
       return () => {
         clearTimeout(e);
       };
-    }, [X]), React.useEffect(() => {
-      ue !== me.current && (me.current = ue, ue ? null == P || P() : null == F || F());
-    }, [ue]);
-    const Ae = (e = g) => {
-        oe.current && clearTimeout(oe.current), oe.current = setTimeout(() => {
-          we.current || _e(!1);
+    }, [Y]), React.useEffect(() => {
+      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);
       },
-      Te = e => {
+      je = (e = A) => {
+        ce.current && clearTimeout(ce.current), ce.current = setTimeout(() => {
+          _e.current || Ne(!1);
+        }, e);
+      },
+      Ie = e => {
         var t;
         if (!e) return;
-        const r = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
-        if (!(null == r ? void 0 : r.isConnected)) return Z(null), void he({
+        const o = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
+        if (!(null == o ? void 0 : o.isConnected)) return Z(null), void ge({
           current: null
         });
-        S ? (re.current && clearTimeout(re.current), re.current = setTimeout(() => {
-          _e(!0);
-        }, S)) : _e(!0), Z(r), he({
-          current: r
-        }), oe.current && clearTimeout(oe.current);
+        _ ? $e() : Ne(!0), Z(o), ge({
+          current: o
+        }), ce.current && clearTimeout(ce.current);
       },
-      Oe = () => {
-        L ? Ae(g || 100) : g ? Ae() : _e(!1), re.current && clearTimeout(re.current);
+      Be = () => {
+        R ? je(A || 100) : A ? je() : Ne(!1), ne.current && clearTimeout(ne.current);
       },
-      Le = ({
+      ze = ({
         x: e,
         y: t
       }) => {
-        k({
-          place: d,
-          offset: p,
-          elementReference: {
-            getBoundingClientRect: () => ({
-              x: e,
-              y: t,
-              width: 0,
-              height: 0,
-              top: t,
-              left: e,
-              right: e,
-              bottom: t
-            })
-          },
-          tooltipReference: ee.current,
-          tooltipArrowReference: te.current,
-          strategy: h,
-          middlewares: w,
-          border: G
+        var o;
+        const l = {
+          getBoundingClientRect: () => ({
+            x: e,
+            y: t,
+            width: 0,
+            height: 0,
+            top: t,
+            left: e,
+            right: e,
+            bottom: t
+          })
+        };
+        N({
+          place: null !== (o = null == he ? void 0 : he.place) && void 0 !== o ? o : v,
+          offset: m,
+          elementReference: l,
+          tooltipReference: le.current,
+          tooltipArrowReference: re.current,
+          strategy: b,
+          middlewares: S,
+          border: J
         }).then(e => {
-          Object.keys(e.tooltipStyles).length && ce(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ae(e.tooltipArrowStyles), le(e.place);
+          Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place);
         });
       },
-      Re = e => {
+      De = e => {
         if (!e) return;
         const t = e,
-          r = {
+          o = {
             x: t.clientX,
             y: t.clientY
           };
-        Le(r), fe.current = r;
-      },
-      Ce = e => {
-        Te(e), g && Ae();
+        ze(o), Se.current = o;
       },
-      Ne = e => {
+      qe = e => {
         var t;
-        [document.querySelector(`[id='${a}']`), ...be].some(t => null == t ? void 0 : t.contains(e.target)) || (null === (t = ee.current) || void 0 === t ? void 0 : t.contains(e.target)) || (_e(!1), re.current && clearTimeout(re.current));
+        if (!ve) return;
+        const o = e.target;
+        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));
       },
-      ke = E(Te, 50, !0),
-      xe = E(Oe, 50, !0),
-      $e = React.useCallback(() => {
-        W ? Le(W) : _ ? fe.current && Le(fe.current) : (null == V ? void 0 : V.isConnected) && k({
-          place: d,
-          offset: p,
+      He = g(Ie, 50, !0),
+      Me = g(Be, 50, !0),
+      We = React.useCallback(() => {
+        var e, t;
+        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: ee.current,
-          tooltipArrowReference: te.current,
-          strategy: h,
-          middlewares: w,
-          border: G
+          tooltipReference: le.current,
+          tooltipArrowReference: re.current,
+          strategy: b,
+          middlewares: S,
+          border: J
         }).then(e => {
-          Ee.current && (Object.keys(e.tooltipStyles).length && ce(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && ae(e.tooltipArrowStyles), le(e.place));
+          Te.current && (Object.keys(e.tooltipStyles).length && de(e.tooltipStyles), Object.keys(e.tooltipArrowStyles).length && pe(e.tooltipArrowStyles), se(e.place));
         });
-      }, [ue, V, K, M, d, p, h, W, _]);
+      }, [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 r = new Set(ye);
-      be.forEach(e => {
-        r.add({
+      const o = new Set(Ee);
+      Ae.forEach(e => {
+        o.add({
           current: e
         });
       });
-      const o = document.querySelector(`[id='${a}']`);
-      o && r.add({
-        current: o
+      const l = document.querySelector(`[id='${u}']`);
+      l && o.add({
+        current: l
       });
-      const n = () => {
-          _e(!1);
+      const r = () => {
+          Ne(!1);
         },
-        l = N(V),
-        i = N(ee.current);
-      q && (window.addEventListener("scroll", n), null == l || l.addEventListener("scroll", n), null == i || i.addEventListener("scroll", n));
-      let c = null;
-      z ? window.addEventListener("resize", n) : V && ee.current && (c = autoUpdate(V, ee.current, $e, {
+        n = x(V),
+        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;
+      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 && _e(!1);
+        "Escape" === e.key && Ne(!1);
       };
-      C && window.addEventListener("keydown", s);
-      const u = [];
-      ge ? (window.addEventListener("click", Ne), u.push({
-        event: "click",
-        listener: Ce
-      })) : (u.push({
-        event: "mouseenter",
-        listener: ke
-      }, {
-        event: "mouseleave",
-        listener: xe
-      }, {
-        event: "focus",
-        listener: ke
-      }, {
-        event: "blur",
-        listener: xe
-      }), _ && u.push({
-        event: "mousemove",
-        listener: Re
-      }));
-      const d = () => {
-          we.current = !0;
+      xe.escape && window.addEventListener("keydown", s), xe.clickOutsideAnchor && window.addEventListener("click", qe);
+      const a = [],
+        d = e => {
+          ve || Ie(e);
         },
         p = () => {
-          we.current = !1, Oe();
+          ve && Be();
+        },
+        v = ["mouseenter", "mouseleave", "focus", "blur"],
+        m = ["click", "dblclick", "mousedown", "mouseup"];
+      Object.entries(Ce).forEach(([e, t]) => {
+        t && (v.includes(e) ? a.push({
+          event: e,
+          listener: He
+        }) : m.includes(e) && a.push({
+          event: e,
+          listener: d
+        }));
+      }), Object.entries(Re).forEach(([e, t]) => {
+        t && (v.includes(e) ? a.push({
+          event: e,
+          listener: Me
+        }) : m.includes(e) && a.push({
+          event: e,
+          listener: p
+        }));
+      }), O && a.push({
+        event: "mousemove",
+        listener: De
+      });
+      const y = () => {
+          _e.current = !0;
+        },
+        h = () => {
+          _e.current = !1, Be();
         };
-      return L && !ge && (null === (e = ee.current) || void 0 === e || e.addEventListener("mouseenter", d), null === (t = ee.current) || void 0 === t || t.addEventListener("mouseleave", p)), u.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
       }) => {
-        r.forEach(r => {
-          var o;
-          null === (o = r.current) || void 0 === o || o.addEventListener(e, t);
+        o.forEach(o => {
+          var l;
+          null === (l = o.current) || void 0 === l || l.addEventListener(e, t);
         });
       }), () => {
         var e, t;
-        q && (window.removeEventListener("scroll", n), null == l || l.removeEventListener("scroll", n), null == i || i.removeEventListener("scroll", n)), z ? window.removeEventListener("resize", n) : null == c || c(), ge && window.removeEventListener("click", Ne), C && window.removeEventListener("keydown", s), L && !ge && (null === (e = ee.current) || void 0 === e || e.removeEventListener("mouseenter", d), null === (t = ee.current) || void 0 === t || t.removeEventListener("mouseleave", p)), u.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
         }) => {
-          r.forEach(r => {
-            var o;
-            null === (o = r.current) || void 0 === o || o.removeEventListener(e, t);
+          o.forEach(o => {
+            var l;
+            null === (l = o.current) || void 0 === l || l.removeEventListener(e, t);
           });
         });
       };
-    }, [V, $e, pe, ye, be, C, v]), React.useEffect(() => {
-      let e = null != u ? u : "";
-      !e && t && (e = `[data-tooltip-id='${t}']`);
-      const r = new MutationObserver(r => {
-        const o = [],
-          n = [];
-        r.forEach(r => {
-          if ("attributes" === r.type && "data-tooltip-id" === r.attributeName) {
-            r.target.getAttribute("data-tooltip-id") === t && o.push(r.target);
+    }, [V, We, fe, Ee, Ae, D, q, H, ke]), React.useEffect(() => {
+      var e, 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 = [],
+          l = [];
+        e.forEach(e => {
+          if ("attributes" === e.type && "data-tooltip-id" === e.attributeName) {
+            e.target.getAttribute("data-tooltip-id") === r && t.push(e.target);
           }
-          if ("childList" === r.type) {
+          if ("childList" === e.type) {
             if (V) {
-              const t = [...r.removedNodes].filter(e => 1 === e.nodeType);
-              if (e) try {
-                n.push(...t.filter(t => t.matches(e))), n.push(...t.flatMap(t => [...t.querySelectorAll(e)]));
+              const t = [...e.removedNodes].filter(e => 1 === e.nodeType);
+              if (o) try {
+                l.push(...t.filter(e => e.matches(o))), l.push(...t.flatMap(e => [...e.querySelectorAll(o)]));
               } 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)) && (ve(!1), _e(!1), Z(null), re.current && clearTimeout(re.current), oe.current && clearTimeout(oe.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 (e) try {
-              const t = [...r.addedNodes].filter(e => 1 === e.nodeType);
-              o.push(...t.filter(t => t.matches(e))), o.push(...t.flatMap(t => [...t.querySelectorAll(e)]));
+            if (o) try {
+              const l = [...e.addedNodes].filter(e => 1 === e.nodeType);
+              t.push(...l.filter(e => e.matches(o))), t.push(...l.flatMap(e => [...e.querySelectorAll(o)]));
             } catch (e) {}
           }
-        }), (o.length || n.length) && Se(e => [...e.filter(e => n.includes(e)), ...o]);
+        }), (t.length || l.length) && Oe(e => [...e.filter(e => !l.includes(e)), ...t]);
       });
-      return r.observe(document.body, {
+      return l.observe(document.body, {
         childList: !0,
         subtree: !0,
         attributes: !0,
         attributeFilter: ["data-tooltip-id"]
       }), () => {
-        r.disconnect();
+        l.disconnect();
       };
-    }, [t, u, V]), React.useEffect(() => {
-      $e();
-    }, [$e]), React.useEffect(() => {
-      if (!(null == U ? void 0 : U.current)) return () => null;
+    }, [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(() => {
-        $e();
+        We();
       });
-      return e.observe(U.current), () => {
+      return e.observe(X.current), () => {
         e.disconnect();
       };
-    }, [K, null == U ? void 0 : U.current]), React.useEffect(() => {
+    }, [U, null == X ? void 0 : X.current]), React.useEffect(() => {
       var e;
-      const t = document.querySelector(`[id='${a}']`),
-        r = [...be, t];
-      V && r.includes(V) || Z(null !== (e = be[0]) && void 0 !== e ? e : t);
-    }, [a, be, V]), React.useEffect(() => () => {
-      re.current && clearTimeout(re.current), oe.current && clearTimeout(oe.current);
+      const t = document.querySelector(`[id='${u}']`),
+        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(() => {
-      let e = u;
-      if (!e && t && (e = `[data-tooltip-id='${t}']`), e) try {
-        const t = Array.from(document.querySelectorAll(e));
-        Se(t);
+      var e;
+      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));
+        Oe(e);
       } catch (e) {
-        Se([]);
-      }
-    }, [t, u]);
-    const Ie = !A && K && ue && Object.keys(ie).length > 0;
-    return pe ? React__default["default"].createElement(b, {
-      id: t,
-      role: "tooltip",
-      className: classnames("react-tooltip", x, H.tooltip, H[s], n, `react-tooltip__place-${ne}`, {
-        "react-tooltip__show": Ie,
-        [D]: Ie,
-        [$]: "fixed" === h,
-        [B]: L
-      }),
+        Oe([]);
+      }
+    }, [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 {
+          document.querySelector(e.anchorSelect);
+        } catch (t) {
+          return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`);
+        }
+        we(null != e ? e : null), (null == e ? void 0 : e.delay) ? $e(e.delay) : Ne(!0);
+      },
+      close: e => {
+        (null == e ? void 0 : e.delay) ? je(e.delay) : Ne(!1);
+      },
+      activeAnchor: V,
+      place: ie,
+      isOpen: Boolean(fe && !T && Pe && Fe)
+    })), fe && !T && Pe ? React__default["default"].createElement(E, {
+      id: r,
+      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 => {
+        ve || "opacity" !== e.propertyName || (ye(!1), we(null), null == K || K());
+      },
       style: {
-        ...M,
-        ...ie,
-        opacity: void 0 !== J && Ie ? J : void 0
+        ...W,
+        ...ae,
+        opacity: void 0 !== Q && Fe ? Q : void 0
       },
-      ref: ee
-    }, K, React__default["default"].createElement(b, {
-      className: classnames("react-tooltip-arrow", I, H.arrow, l, {
-        [j]: T
-      }),
+      ref: le
+    }, Pe, React__default["default"].createElement(E, {
+      className: classnames("react-tooltip-arrow", $.arrow, j.arrow, s, L && $.noArrow),
       style: {
-        ...se,
-        background: Q ? `linear-gradient(to right bottom, transparent 50%, ${Q} 50%)` : void 0
+        ...ue,
+        background: ee ? `linear-gradient(to right bottom, transparent 50%, ${ee} 50%)` : void 0
       },
-      ref: te
+      ref: re
     })) : null;
   },
-  z = ({
+  B = ({
     content: t
   }) => React__default["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: t
     }
   }),
-  M = ({
+  z = (e, t) => !("CSS" in window && "supports" in window.CSS) || window.CSS.supports(e, t),
+  D = React__default["default"].forwardRef(({
     id: t,
-    anchorId: o,
-    anchorSelect: n,
-    content: l,
+    anchorId: l,
+    anchorSelect: r,
+    content: n,
     html: s,
     render: a,
-    className: u,
-    classNameArrow: d,
+    className: d,
+    classNameArrow: u,
     variant: p = "dark",
     place: v = "top",
     offset: m = 10,
@@ -51087,149 +51149,154 @@ const q = ({
     delayHide: g = 0,
     float: _ = !1,
     hidden: A = !1,
-    noArrow: T = !1,
-    clickable: L = !1,
-    closeOnEsc: R = !1,
+    noArrow: O = !1,
+    clickable: T = !1,
+    closeOnEsc: L = !1,
     closeOnScroll: C = !1,
-    closeOnResize: N = !1,
-    style: k,
-    position: x,
-    isOpen: $,
-    disableStyleInjection: I = !1,
-    border: j,
-    opacity: B,
-    arrowColor: D,
-    setIsOpen: H,
-    afterShow: M,
-    afterHide: W
-  }) => {
-    const [P, F] = React.useState(l),
-      [K, U] = React.useState(s),
-      [X, Y] = React.useState(v),
-      [V, Z] = React.useState(p),
-      [G, J] = React.useState(m),
-      [Q, ee] = React.useState(E),
-      [te, re] = React.useState(g),
-      [oe, ne] = React.useState(_),
-      [le, ie] = React.useState(A),
-      [ce, se] = React.useState(f),
-      [ae, ue] = React.useState(h),
-      [de, pe] = React.useState(b),
-      [ve, me] = React.useState(null),
-      fe = React.useRef(I),
+    closeOnResize: R = !1,
+    openEvents: x,
+    closeEvents: N,
+    globalCloseEvents: $,
+    imperativeModeOnly: j = !1,
+    style: D,
+    position: q,
+    isOpen: H,
+    disableStyleInjection: M = !1,
+    border: W,
+    opacity: P,
+    arrowColor: F,
+    setIsOpen: K,
+    afterShow: U,
+    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: ye,
-        activeAnchor: he
-      } = O(t),
-      we = e => null == e ? void 0 : e.getAttributeNames().reduce((t, r) => {
-        var o;
-        if (r.startsWith("data-tooltip-")) {
-          t[r.replace(/^data-tooltip-/, "")] = null !== (o = null == e ? void 0 : e.getAttribute(r)) && void 0 !== o ? o : null;
+        anchorRefs: _e,
+        activeAnchor: Ae
+      } = k(t),
+      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;
       }, {}),
-      be = e => {
+      Te = e => {
         const t = {
           place: e => {
             var t;
-            Y(null !== (t = e) && void 0 !== t ? t : v);
+            te(null !== (t = e) && void 0 !== t ? t : v);
           },
           content: e => {
-            F(null != e ? e : l);
+            Z(null != e ? e : n);
           },
           html: e => {
-            U(null != e ? e : s);
+            Q(null != e ? e : s);
           },
           variant: e => {
             var t;
-            Z(null !== (t = e) && void 0 !== t ? t : p);
+            le(null !== (t = e) && void 0 !== t ? t : p);
           },
           offset: e => {
-            J(null === e ? m : Number(e));
+            ne(null === e ? m : Number(e));
           },
           wrapper: e => {
             var t;
-            se(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(" ");
-            ue(null != t ? t : h);
+            he(null != t ? t : h);
           },
           "position-strategy": e => {
             var t;
-            pe(null !== (t = e) && void 0 !== t ? t : b);
+            be(null !== (t = e) && void 0 !== t ? t : b);
           },
           "delay-show": e => {
-            ee(null === e ? E : Number(e));
+            ie(null === e ? E : Number(e));
           },
           "delay-hide": e => {
-            re(null === e ? g : Number(e));
+            ae(null === e ? g : Number(e));
           },
           float: e => {
-            ne(null === e ? _ : "true" === e);
+            ue(null === e ? _ : "true" === e);
           },
           hidden: e => {
-            ie(null === e ? A : "true" === e);
+            ve(null === e ? A : "true" === e);
           }
         };
-        Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, r]) => {
-          var o;
-          null === (o = t[e]) || void 0 === o || o.call(t, r);
+        Object.values(t).forEach(e => e(null)), Object.entries(e).forEach(([e, o]) => {
+          var l;
+          null === (l = t[e]) || void 0 === l || l.call(t, o);
         });
       };
     React.useEffect(() => {
-      F(l);
-    }, [l]), React.useEffect(() => {
-      U(s);
+      Z(n);
+    }, [n]), React.useEffect(() => {
+      Q(s);
     }, [s]), React.useEffect(() => {
-      Y(v);
+      te(v);
     }, [v]), React.useEffect(() => {
-      Z(p);
+      le(p);
     }, [p]), React.useEffect(() => {
-      J(m);
+      ne(m);
     }, [m]), React.useEffect(() => {
-      ee(E);
+      ie(E);
     }, [E]), React.useEffect(() => {
-      re(g);
+      ae(g);
     }, [g]), React.useEffect(() => {
-      ne(_);
+      ue(_);
     }, [_]), React.useEffect(() => {
-      ie(A);
+      ve(A);
     }, [A]), React.useEffect(() => {
-      pe(b);
+      be(b);
     }, [b]), React.useEffect(() => {
-      fe.current !== I && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
-    }, [I]), React.useEffect(() => {
+      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: {
-          disableCore: "core" === I,
-          disableBase: I
+          disableCore: "core" === M,
+          disableBase: M
         }
       }));
     }, []), React.useEffect(() => {
       var e;
-      const r = new Set(ye);
-      let l = n;
-      if (!l && t && (l = `[data-tooltip-id='${t}']`), l) try {
-        document.querySelectorAll(l).forEach(e => {
-          r.add({
+      const o = new Set(_e);
+      let n = r;
+      if (!n && t && (n = `[data-tooltip-id='${t}']`), n) try {
+        document.querySelectorAll(n).forEach(e => {
+          o.add({
             current: e
           });
         });
       } catch (e) {
-        console.warn(`[react-tooltip] "${l}" is not a valid CSS selector`);
+        console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`);
       }
-      const i = document.querySelector(`[id='${o}']`);
-      if (i && r.add({
-        current: i
-      }), !r.size) return () => null;
-      const c = null !== (e = null != ve ? ve : i) && void 0 !== e ? e : he.current,
+      const c = document.querySelector(`[id='${l}']`);
+      if (c && o.add({
+        current: c
+      }), !o.size) return () => null;
+      const i = null !== (e = null != Se ? Se : c) && void 0 !== e ? e : Ae.current,
         s = new MutationObserver(e => {
           e.forEach(e => {
             var t;
-            if (!c || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
-            const r = we(c);
-            be(r);
+            if (!i || "attributes" !== e.type || !(null === (t = e.attributeName) || void 0 === t ? void 0 : t.startsWith("data-tooltip-"))) return;
+            const o = Oe(i);
+            Te(o);
           });
         }),
         a = {
@@ -51237,77 +51304,83 @@ const q = ({
           childList: !1,
           subtree: !1
         };
-      if (c) {
-        const e = we(c);
-        be(e), s.observe(c, a);
+      if (i) {
+        const e = Oe(i);
+        Te(e), s.observe(i, a);
       }
       return () => {
         s.disconnect();
       };
-    }, [ye, he, ve, o, n]), React.useEffect(() => {
-      (null == k ? void 0 : k.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), j && !CSS.supports("border", `${j}`) && console.warn(`[react-tooltip] "${j}" is not a valid \`border\`.`), (null == k ? void 0 : k.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), B && !CSS.supports("opacity", `${B}`) && console.warn(`[react-tooltip] "${B}" is not a valid \`opacity\`.`);
+    }, [_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 Se = y;
-    const Ee = React.useRef(null);
+    let ke = y;
+    const Le = React.useRef(null);
     if (a) {
       const t = a({
-        content: null != P ? P : null,
-        activeAnchor: ve
+        content: null != V ? V : null,
+        activeAnchor: Se
       });
-      Se = t ? React__default["default"].createElement("div", {
-        ref: Ee,
+      ke = t ? React__default["default"].createElement("div", {
+        ref: Le,
         className: "react-tooltip-content-wrapper"
       }, t) : null;
-    } else P && (Se = P);
-    K && (Se = React__default["default"].createElement(z, {
-      content: K
+    } else V && (ke = V);
+    J && (ke = React__default["default"].createElement(B, {
+      content: J
     }));
-    const ge = {
+    const Ce = {
+      forwardRef: G,
       id: t,
-      anchorId: o,
-      anchorSelect: n,
-      className: u,
-      classNameArrow: d,
-      content: Se,
-      contentWrapperRef: Ee,
-      place: X,
-      variant: V,
-      offset: G,
-      wrapper: ce,
-      events: ae,
+      anchorId: l,
+      anchorSelect: r,
+      className: d,
+      classNameArrow: u,
+      content: ke,
+      contentWrapperRef: Le,
+      place: ee,
+      variant: oe,
+      offset: re,
+      wrapper: me,
+      events: ye,
       openOnClick: w,
-      positionStrategy: de,
+      positionStrategy: we,
       middlewares: S,
-      delayShow: Q,
-      delayHide: te,
-      float: oe,
-      hidden: le,
-      noArrow: T,
-      clickable: L,
-      closeOnEsc: R,
+      delayShow: ce,
+      delayHide: se,
+      float: de,
+      hidden: pe,
+      noArrow: O,
+      clickable: T,
+      closeOnEsc: L,
       closeOnScroll: C,
-      closeOnResize: N,
-      style: k,
-      position: x,
-      isOpen: $,
-      border: j,
-      opacity: B,
-      arrowColor: D,
-      setIsOpen: H,
-      afterShow: M,
-      afterHide: W,
-      activeAnchor: ve,
-      setActiveAnchor: e => me(e)
+      closeOnResize: R,
+      openEvents: x,
+      closeEvents: N,
+      globalCloseEvents: $,
+      imperativeModeOnly: j,
+      style: D,
+      position: q,
+      isOpen: H,
+      border: W,
+      opacity: P,
+      arrowColor: F,
+      setIsOpen: K,
+      afterShow: U,
+      afterHide: X,
+      activeAnchor: Se,
+      setActiveAnchor: e => Ee(e),
+      role: Y
     };
-    return React__default["default"].createElement(q, {
-      ...ge
+    return React__default["default"].createElement(I, {
+      ...Ce
     });
-  };
+  });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", e => {
-  e.detail.disableCore || b({
-    css: `:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9}.core-styles-module_tooltip__3vRRp{visibility:hidden;position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity 0.3s ease-out;will-change:opacity,visibility}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{visibility:visible;opacity:var(--rt-opacity)}`,
+  e.detail.disableCore || S({
+    css: `:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,
     type: "core"
-  }), e.detail.disableBase || b({
+  }), e.detail.disableBase || S({
     css: `
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,
     type: "base"
@@ -51404,7 +51477,7 @@ function ContextualHelp(_ref) {
       color: "#1d5ab9",
       fontSize: "22px"
     }
-  })), /*#__PURE__*/React__default["default"].createElement(M, {
+  })), /*#__PURE__*/React__default["default"].createElement(D, {
     anchorSelect: "#helpSnippet1",
     clickable: true,
     className: "utilities_ContextualHelp_ContextualHelp--snippet",