@copart/ops-tool-kit 1.12.0-alpha.14 → 1.12.0-alpha.16

package/dist/ops-tool-kit.js

@@ -32,7 +32,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$7 = "1.12.0-alpha.14";
+const version$7 = "1.12.0-alpha.16";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -21424,7 +21424,7 @@ FeedbackDialog.defaultProps = {
   }
 };
 
-var css_248z$k = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\n  background-color: var(--blue);\n  background-color: var(--blue);\n  height: 48px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\n  width: 100%;\n  display: flex;\n  justify-content: start;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\n  margin: 0 12px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  margin-left: 5px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\n  display: flex;\n  flex-direction: column;\n  margin: 3px 0 0 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\n  color: white;\n  font-size: 11px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\n  color: white;\n  cursor: pointer;\n  font-size: 18px;\n  display: flex;\n  justify-content: center;\n  margin: 8px !important;\n  position: relative;\n  width: 25px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--logout {\n  margin-right: 24px !important;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\n  color: #fff;\n  font-size: 20px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon i {\n  color: #ffff00;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--language {\n  width: auto;\n  grid-gap: 4px;\n  grid-gap: 5px;\n  gap: 5px;\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard {\n  width: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  color: #1D5AB9;\n  font-weight: 600;\n  border-radius: 4px;\n  font-size: 14px;\n  grid-gap: 8px;\n  grid-gap: 8px;\n  gap: 8px;\n  padding: 2px 8px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard span i {\n  color: #1D5AB9;\n  font-size: 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard .utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\n  display: flex;\n  color: white;\n  font-size: 13px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\n  color: white;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\n  width: 6rem;\n  margin-top: 0rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\n  margin-top: 0.6rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\n  margin-top: 0.4rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\n  margin-top: -0.2rem;\n  margin-left: 2rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\n  display: inline;\n  display: initial;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  font-style: italic;\n  font-weight: 600;\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\n    format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n  font-style: italic;\n  font-size: 14px;\n  position: relative;\n  left: 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\n  display: flex;\n  color: white;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon {\n  /* margin-left: 10px;\n  margin-right: 7px; */\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  color: #1D5AB9;\n  font-weight: 600;\n  border-radius: 4px;\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);\n  font-size: 14px;\n  grid-gap: 8px;\n  gap: 8px;\n  margin: 0 8px;\n  padding: 6px 20px 7px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span {\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span i {\n  font-size: 18px;\n  color: #1D5AB9;\n}\n\n/* .searchIcon > div {\n  margin-left: 7px;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\n  color: #fff;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\n  color: white;\n  cursor: default;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\n  background-color: white;\n  border-radius: 20px;\n  margin: 5px;\n  padding: 0px 10px;\n  height: 25px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\n  border: 1px solid #1d5ab9;\n  justify-content: flex-start;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\n  color: black;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\n  background-color: white;\n  border-radius: 20px;\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\n  color: green;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\n  color: green;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\n  color: red;\n  margin: 5px 0px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\n  margin-right: 5px;\n  margin-left: 5px;\n  width: 24px;\n  height: 24px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\n  margin-left: 5px;\n  display: inline-flex;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\n  font-size: 16px;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\n  line-height: unset;\n  font-size: 16px;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\n  color: green;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\n  margin-right: 5px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\n  color: red;\n}\n\n/* .userMenu {\n  margin-left: 10px !important;\n  margin-right: 5px !important;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\n  margin-left: 10px !important;\n  margin-right: 10px !important;\n  display: flex;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\n  margin-left: 7px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\n  margin: 0 !important;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\n  width: 100%;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\n  cursor: pointer;\n  position: relative;\n  top: -2px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\n  color: #fff;\n  font-size: 22px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\n  background-color: #ef5350;\n  border-radius: 50%;\n  position: absolute;\n  top: 3px;\n  left: 13px;\n  width: 10px;\n  height: 10px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\n  position: absolute;\n  background: #fff;\n  padding: 8px;\n  right: 30px;\n  top: -2px;\n  border-radius: 2px;\n  font-weight: 400;\n  font-size: 12px;\n  cursor: auto;\n  color: #000;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  margin-top: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent transparent #fff;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\n  color: #000;\n  font-size: 12px;\n  margin-left: 5px;\n  position: relative;\n  top: 1px;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\n  position: absolute;\n  display: flex;\n  height: calc(100vh - 48px);\n  width: 100vw;\n  bottom: 0;\n  z-index: 10000;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 2px;\n  right: 358px;\n  height: 38px;\n  width: 38px;\n  background-color: white;\n  z-index: 11000;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\n  padding: 5px 7px;\n  background: #fff;\n  border-radius: 50%;\n  font-weight: 600;\n  color: #1d5ab9;\n  font-size: 12px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\n  background: rgba(255, 255, 255, 0.40);\n  -webkit-backdrop-filter: blur(20px);\n          backdrop-filter: blur(20px);\n  position: absolute;\n  top: 50px;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 999;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\n  position: absolute;\n  z-index: 10000;\n  height: 100vh;\n  top: 48px;\n  width: 100vw;\n  background-color: rgba(0,0,0,.5);\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\n  width: 400px;\n  max-width: 400px;\n  position: absolute;\n  right: 0;\n  height: calc(100vh - 48px);\n  /* padding: 15px; */\n  background-color: white;\n  overflow-y: auto;\n}\n\n@media only screen and (max-width: 1024px) {\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\n    margin-right: 2px;\n  }\n\n  /* .searchIcon {\n    margin-left: 5px;\n    margin-right: 2px;\n  }\n\n  .searchIcon > div {\n    margin-left: 2px;\n  } */\n\n  /* .userMenu {\n    margin-left: 3px !important;\n    margin-right: 3px !important;\n  } */\n\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\n    margin-left: 3px !important;\n    margin-right: 3px !important;\n  }\n\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\n    margin-left: 2px;\n  }\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\n{\n  position: absolute;\n  z-index: 10000;\n  height: 100vh;\n  top: 48px;\n  width: 100vw;\n  background-color: rgba(0,0,0,.5);\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\n{\n  width: 400px;\n  max-width: 400px;\n  position: absolute;\n  right: 0;\n  height: 100%;\n  padding: 15px;\n  background-color: white;\n  overflow-y: auto;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\n  font-size: 18px;\n  font-weight: 600;\n  padding-bottom: 10px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\n  display: flex;\n  flex-direction: column;\n  grid-gap: 5px;\n  gap: 5px;\n  justify-content: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\n  background-color: #ef5350;\n  color: white;\n  font-size: 12px;\n  width: 1rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -5px;\n  left: 11px;\n  height: 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\n  width: 1.3rem;\n  height: 1.3rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\n  cursor: pointer;\n  margin-left: 12px;\n  position: relative;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\n  width: 0px;\n  height: 0px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 11px solid white;\n  position: absolute;\n  bottom: -13px;\n  right: 5px;\n}\n\n/* .arrowTipContainer.ideaNoteArrow {\n  right: 16px;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\n  right: 3px;\n  bottom: -9px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\n  bottom: -12px;\n  right: 8px;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 10px solid white;\n}\n\n@media (max-width: 768px) {\n  .utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv {\n    width: 85%;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\n    left: 12px;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\n    right: 5px;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer iframe {\n    width: 85% !important;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\n    display: none;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\n    width: 85%;\n  }\n}";
+var css_248z$k = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\n  background-color: var(--blue);\n  background-color: var(--blue);\n  height: 48px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\n  width: 100%;\n  display: flex;\n  justify-content: start;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\n  margin: 0 12px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  margin-left: 5px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\n  display: flex;\n  flex-direction: column;\n  margin: 3px 0 0 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\n  color: white;\n  font-size: 11px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\n  color: white;\n  cursor: pointer;\n  font-size: 18px;\n  display: flex;\n  justify-content: center;\n  margin: 8px !important;\n  position: relative;\n  width: 25px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--logout {\n  margin-right: 24px !important;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\n  color: #fff;\n  font-size: 20px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon i {\n  color: #ffff00;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--language {\n  width: auto;\n  grid-gap: 4px;\n  grid-gap: 5px;\n  gap: 5px;\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard {\n  width: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  color: #1D5AB9;\n  font-weight: 600;\n  border-radius: 4px;\n  font-size: 14px;\n  grid-gap: 8px;\n  grid-gap: 8px;\n  gap: 8px;\n  padding: 2px 8px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard span i {\n  color: #1D5AB9;\n  font-size: 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard .utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\n  display: flex;\n  color: white;\n  font-size: 13px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\n  color: white;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\n  width: 6rem;\n  margin-top: 0rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\n  margin-top: 0.6rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\n  margin-top: 0.4rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\n  margin-top: -0.2rem;\n  margin-left: 2rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\n  display: inline;\n  display: initial;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  font-style: italic;\n  font-weight: 600;\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\n    format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n  font-style: italic;\n  font-size: 14px;\n  position: relative;\n  left: 16px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\n  display: flex;\n  color: white;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon {\n  /* margin-left: 10px;\n  margin-right: 7px; */\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  color: #1D5AB9;\n  font-weight: 600;\n  border-radius: 4px;\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);\n  font-size: 14px;\n  grid-gap: 8px;\n  gap: 8px;\n  margin: 0 8px;\n  padding: 6px 20px 7px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span {\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span i {\n  font-size: 18px;\n  color: #1D5AB9;\n}\n\n/* .searchIcon > div {\n  margin-left: 7px;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\n  color: #fff;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\n  color: white;\n  cursor: default;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\n  background-color: white;\n  border-radius: 20px;\n  margin: 5px;\n  padding: 0px 10px;\n  height: 25px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\n  border: 1px solid #1d5ab9;\n  justify-content: flex-start;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\n  color: black;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\n  background-color: white;\n  border-radius: 20px;\n  display: flex;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\n  color: green;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\n  color: green;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\n  color: red;\n  margin: 5px 0px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\n  margin-right: 5px;\n  margin-left: 5px;\n  width: 24px;\n  height: 24px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\n  margin-left: 5px;\n  display: inline-flex;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\n  font-size: 16px;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\n  line-height: unset;\n  font-size: 16px;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\n  color: green;\n}\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\n  margin-right: 5px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\n  color: red;\n}\n\n/* .userMenu {\n  margin-left: 10px !important;\n  margin-right: 5px !important;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\n  margin: 8px;\n  display: flex;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\n  margin-left: 7px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\n  margin: 0 !important;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\n  width: 100%;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\n  cursor: pointer;\n  position: relative;\n  top: -2px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\n  color: #fff;\n  font-size: 22px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\n  background-color: #ef5350;\n  border-radius: 50%;\n  position: absolute;\n  top: 3px;\n  left: 13px;\n  width: 10px;\n  height: 10px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\n  position: absolute;\n  background: #fff;\n  padding: 8px;\n  right: 30px;\n  top: -2px;\n  border-radius: 2px;\n  font-weight: 400;\n  font-size: 12px;\n  cursor: auto;\n  color: #000;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  margin-top: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent transparent #fff;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\n  color: #000;\n  font-size: 12px;\n  margin-left: 5px;\n  position: relative;\n  top: 1px;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\n  position: absolute;\n  display: flex;\n  height: calc(100vh - 48px);\n  width: 100vw;\n  bottom: 0;\n  z-index: 10000;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 2px;\n  right: 358px;\n  height: 38px;\n  width: 38px;\n  background-color: white;\n  z-index: 11000;\n  cursor: pointer;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\n  padding: 5px 7px;\n  background: #fff;\n  border-radius: 50%;\n  font-weight: 600;\n  color: #1d5ab9;\n  font-size: 12px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\n  background: rgba(255, 255, 255, 0.40);\n  -webkit-backdrop-filter: blur(20px);\n          backdrop-filter: blur(20px);\n  position: absolute;\n  top: 50px;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 999;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\n  position: absolute;\n  z-index: 10000;\n  height: 100vh;\n  top: 48px;\n  width: 100vw;\n  background-color: rgba(0,0,0,.5);\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\n  width: 400px;\n  max-width: 400px;\n  position: absolute;\n  right: 0;\n  height: calc(100vh - 48px);\n  /* padding: 15px; */\n  background-color: white;\n  overflow-y: auto;\n}\n\n@media only screen and (max-width: 1024px) {\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\n    margin-right: 2px;\n  }\n\n  /* .searchIcon {\n    margin-left: 5px;\n    margin-right: 2px;\n  }\n\n  .searchIcon > div {\n    margin-left: 2px;\n  } */\n\n  /* .userMenu {\n    margin-left: 3px !important;\n    margin-right: 3px !important;\n  } */\n\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\n    margin-left: 3px !important;\n    margin-right: 3px !important;\n  }\n\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\n    margin-left: 2px;\n  }\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\n{\n  position: absolute;\n  z-index: 10000;\n  height: 100vh;\n  top: 48px;\n  width: 100vw;\n  background-color: rgba(0,0,0,.5);\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\n{\n  width: 400px;\n  max-width: 400px;\n  position: absolute;\n  right: 0;\n  height: 100%;\n  padding: 15px;\n  background-color: white;\n  overflow-y: auto;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\n  font-size: 18px;\n  font-weight: 600;\n  padding-bottom: 10px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\n  display: flex;\n  flex-direction: column;\n  grid-gap: 5px;\n  gap: 5px;\n  justify-content: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\n  background-color: #ef5350;\n  color: white;\n  font-size: 12px;\n  width: 1rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -5px;\n  left: 11px;\n  height: 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\n  width: 1.3rem;\n  height: 1.3rem;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\n  cursor: pointer;\n  margin-left: 12px;\n  position: relative;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\n  width: 0px;\n  height: 0px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 11px solid white;\n  position: absolute;\n  bottom: -13px;\n  right: 5px;\n}\n\n/* .arrowTipContainer.ideaNoteArrow {\n  right: 16px;\n} */\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\n  right: 3px;\n  bottom: -9px;\n}\n\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\n  bottom: -12px;\n  right: 8px;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 10px solid white;\n}\n\n@media (max-width: 768px) {\n  .utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv {\n    width: 85%;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\n    left: 12px;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\n    right: 5px;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer iframe {\n    width: 85% !important;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\n    display: none;\n  }\n  .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\n    width: 85%;\n  }\n}";
 styleInject(css_248z$k);
 
 var LogOutMenu = function LogOutMenu(_ref) {
@@ -23088,6 +23088,37 @@ var FeedbackButton = function FeedbackButton(props) {
   }));
 };
 
+var FLAG_URL_PREFIX = '/images/flag_icons/flag_';
+var HEIGHT_22PX = {
+  height: '22px'
+};
+var HEIGHT_30PX = {
+  height: '30px'
+};
+var COUNTRY_CODES = {
+  ca: 'canada'
+};
+
+var code = function code(countryCode) {
+  return COUNTRY_CODES[countryCode] || countryCode;
+};
+var flagUrl = function flagUrl(countryCode) {
+  return "".concat(FLAG_URL_PREFIX).concat((code(countryCode) || 'us').toLowerCase(), ".png");
+};
+var heightStyle = function heightStyle(type) {
+  return type !== 'cas' ? HEIGHT_22PX : HEIGHT_30PX;
+};
+
+var Flag$1 = function Flag(props) {
+  return /*#__PURE__*/React__namespace.createElement("img", {
+    "data-testid": "flag",
+    alt: "Flag",
+    src: flagUrl(props.countryCode),
+    style: heightStyle(props.type),
+    "data-e2e": "cc-Flag"
+  });
+};
+
 var onRenderItem = function onRenderItem(item) {
   return item.render();
 };
@@ -31543,6 +31574,18 @@ var Notifications = function Notifications(_ref) {
   }) : null);
 };
 
+var capitalizeAndReplaceUnderscores = function capitalizeAndReplaceUnderscores(role) {
+  return role.split('_').filter(Boolean).map(function (word) {
+    return word[0].toUpperCase() + word.substr(1);
+  }).join(' ');
+};
+var formatUK = function formatUK(role) {
+  return role.startsWith('uk') ? "UK".concat(role.substr(2)) : role;
+};
+var formatRole = function formatRole(role) {
+  return capitalizeAndReplaceUnderscores(formatUK(role));
+};
+
 var _styleModuleImportMap$2 = {
   "./AppBar.css": {
     "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
@@ -31667,15 +31710,15 @@ var overflowIconStyles = {
 };
 var generateAppBarElements = function generateAppBarElements(props, showCallout) {
   var _window$toolkitEnv2;
-  props.countryCode;
-    props.role;
-    var yardNumber = props.yardNumber;
+  var countryCode = props.countryCode,
+    role = props.role,
+    yardNumber = props.yardNumber;
     props.phoneNumber;
     props.phoneStatusObject;
     props.togglePhoneAvailability;
-    var handleHelpClick = props.handleHelpClick;
-    props.type;
-    var config = props.config,
+    var handleHelpClick = props.handleHelpClick,
+    type = props.type,
+    config = props.config,
     _props$navigateTo = props.navigateTo,
     navigateTo = _props$navigateTo === void 0 ? function (url) {} : _props$navigateTo;
     props.isMihelpEnabled;
@@ -31910,6 +31953,37 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         variant: "regular"
       }), ' ', /*#__PURE__*/React__default["default"].createElement("span", null, getLanguage(storage$1.activeLanguage)));
     }
+  }, {
+    key: 'roleAndFlag',
+    name: formatRole(role),
+    onRender: function onRender(_, dismissMenu) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        onClick: function onClick() {
+          navigateTo('/settings');
+          dismissMenu();
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(OverFlowIcon, {
+        name: "supervised_user_circle"
+      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
+        text: formatRole(role)
+      })));
+    },
+    renderIf: config.includes('role') || config.includes('flag'),
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: "roleItem",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--item utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag",
+        onClick: showSettingsInAppbar ? function () {
+          return handleIconClick(ICONS.SETTINGS);
+        } : navigateTo('/settings')
+      }, config.includes('flag') ? /*#__PURE__*/React__default["default"].createElement(Flag$1, {
+        countryCode: countryCode,
+        type: type
+      }) : null, config.includes('role') ? /*#__PURE__*/React__default["default"].createElement("div", {
+        "data-testid": "role"
+      }, formatRole(role)) : null);
+    }
   }, {
     key: 'facility',
     name: yardNumber,