@commercetools-frontend/application-shell 22.8.2 → 22.8.4

package/dist/{navbar-6fce9b59.cjs.prod.js → navbar-86da110e.cjs.prod.js}

@@ -17,6 +17,7 @@ var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-arr
 var react = require('react');
 var react$1 = require('@emotion/react');
 var classnames = require('classnames');
+var snakeCase = require('lodash/snakeCase');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
@@ -27,8 +28,8 @@ var constants$1 = require('./constants-0da1db32.cjs.prod.js');
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
 var sentry = require('@commercetools-frontend/sentry');
-var dist_commercetoolsFrontendApplicationShell = require('./index-2e0da8c9.cjs.prod.js');
-var useApplicationsMenu = require('./use-applications-menu-9120b8e3.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-78d3ae73.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-f0048898.cjs.prod.js');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -45,7 +46,7 @@ var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var designSystem = require('@commercetools-uikit/design-system');
 var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var applicationComponents = require('@commercetools-frontend/application-components');
-require('./configure-apollo-ee3f0777.cjs.prod.js');
+require('./configure-apollo-c401b506.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 require('@babel/runtime-corejs3/core-js-stable/object/entries');
 require('@babel/runtime-corejs3/core-js-stable/reflect/has');
@@ -118,6 +119,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
 var LogoSVG__default = /*#__PURE__*/_interopDefault(LogoSVG);
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
@@ -338,7 +340,7 @@ const _excluded$1 = ["icon"];
 function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$4(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const compiledStyles$4 = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___ifOIc {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___op7AX {\n  display: grid;\n  width: 80px;\n  background: var(--color-primary);\n  height: 100%;\n  grid-template-rows: 56px 1fr;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk {\n  background-color: var(--color-accent-10);\n  color: var(--color-surface);\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  padding: var(--spacing-30);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__title___aTo0V {\n  font-weight: 600;\n  margin-left: var(--spacing-20);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___pouHY {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.navbar-mod__list-item___y7qYe {\n  min-height: 48px;\n  background: var(--color-primary);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___6U2c1 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  padding: var(--spacing-25);\n  width: 48px;\n  position: relative;\n  display: block;\n}\n\n.navbar-mod__item-link-no-submenu___EPy3b {\n  width: 100%;\n  height: 100%;\n}\n\n.body__menu-open .navbar-mod__item-link___6U2c1 {\n  width: 100%;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__icon___21inq {\n  /* 1.16 is roughly the ratio of icon-size-hover to --icon-size */\n  transform: scale(1.2);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  flex: 1;\n  font-weight: 600;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  opacity: 0;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  text-align: left;\n  text-decoration: none;\n  z-index: 1;\n}\n\n.navbar-mod__expander___blASx {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: linear-gradient(\n    180deg,\n    var(--color-primary) 0%,\n    var(--color-primary-25) 100%\n  );\n  padding: var(--spacing-30) var(--spacing-25);\n}\n\n/* divider */\n\n.navbar-mod__expander___blASx::before {\n  content: '';\n  position: absolute;\n  top: 56px;\n  height: 1px;\n  background: rgba(255, 255, 255, 0.5);\n  width: calc(100% - 2 * var(--spacing-30));\n}\n\n.navbar-mod__expand-icon___3A2Dk {\n  height: 40px;\n  width: 40px;\n  border-radius: var(--border-radius-4);\n  padding: var(--spacing-20);\n  background: rgba(255, 255, 255, 0.2);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__expand-icon___3A2Dk:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.navbar-mod__item--bottom___Pygdy {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item_menu__active___j515K):hover {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___NnkVM {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___1s4K0 .navbar-mod__item-link___6U2c1 {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  box-shadow: var(--shadow-for-navbar);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe {\n  height: auto;\n  min-height: 48px;\n  overflow: hidden;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  opacity: 1;\n  margin-left: var(--spacing-25);\n  color: var(--color-surface);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__title___aTo0V {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__item__active___SEPWP {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___tMZy4 {\n  padding: var(--spacing-30);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  left: 72px;\n  z-index: -1;\n  list-style: none;\n  position: fixed;\n  display: none;\n}\n\n/* This pseudo-element is required to enable smooth coursor movement from the main menu item to submenu items with the gap in between */\n\n.navbar-mod__sublist-expanded__active___XyUuS::before,\n.navbar-mod__sublist-collapsed__active___yWHea::before,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: calc(253px + var(--spacing-20));\n  height: 48px;\n  left: calc(-1 * var(--spacing-20));\n}\n\n.navbar-mod__sublist__inactive___5-OgH {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___ZZbsF {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  transition: padding-left 150ms ease-out;\n}\n\n.navbar-mod__sublist-item__active___O2-c- {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___ZZbsF:not(.navbar-mod__sublist-item__active___O2-c-):hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  border-radius: var(--border-radius-4);\n  background: var(--color-primary-95);\n  padding-left: var(--spacing-20);\n}\n\n.navbar-mod__text___3TpQt {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  width: 100%;\n  height: 100%;\n}\n\n.navbar-mod__text-link___TcEn2 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  display: flex;\n  padding: var(--spacing-25);\n  align-items: center;\n  justify-content: center;\n}\n\n.body__menu-open .navbar-mod__text-link___TcEn2 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___RQinz {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___V0-tf {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  color: var(--color-solid);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  text-decoration: none;\n  flex: 1;\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    var(--spacing-30);\n}\n\n.navbar-mod__navlink-clickable-content___o-emf {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___SEPWP,\n.navbar-mod__item_menu__active___j515K {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___QYEJM .navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___bkf5Q {\n  padding: 0 var(--spacing-30) var(--spacing-20) var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___gTiaE {\n  position: absolute;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: 48px;\n  visibility: visible;\n}\n\n.navbar-mod__tooltip___3PSlF {\n  padding: var(--spacing-10) calc(var(--spacing-20) + var(--spacing-10));\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-10);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  color: var(--color-surface);\n  max-height: 48px;\n  visibility: inherit;\n}\n\n.navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca {\n  opacity: 1;\n  display: none;\n  text-align: left;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar-when-active);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__item-link-no-submenu___EPy3b:hover .navbar-mod__sublist-collapsed__active___yWHea {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--color-surface);\n  /* TODO: add design tokens instead hard-coded values */\n  min-height: 50px;\n  width: 253px;\n  border-radius: var(--border-radius-8);\n  /* z-index value must be higher than AppBar's z-index */\n  z-index: 20001;\n  box-shadow: -2px 4px 25px 0 rgba(89, 89, 89, 0.5);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link-no-submenu___EPy3b:hover\n  .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___06BoS,\n.navbar-mod__highlighted___06BoS .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___-s7eh {\n  display: none;\n}\n\n.navbar-mod__divider___GBOn1 {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___B7sPh {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___I9ci7 {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  padding: var(--spacing-30) var(--spacing-30) 48px;\n  width: 80px;\n  box-sizing: border-box;\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-primary-40) transparent;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___I9ci7 {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___QYEJM {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___QYEJM {\n  width: 256px;\n}\n",
+  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___ifOIc {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___op7AX {\n  display: grid;\n  width: 80px;\n  background: var(--color-primary);\n  height: 100%;\n  grid-template-rows: 56px 1fr;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk {\n  background-color: var(--color-accent-10);\n  color: var(--color-surface);\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  padding: var(--spacing-30);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__title___aTo0V {\n  font-weight: 600;\n  margin-left: var(--spacing-20);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___pouHY {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.navbar-mod__list-item___y7qYe {\n  min-height: 48px;\n  background: var(--color-primary);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___6U2c1 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  width: 48px;\n  position: relative;\n  display: block;\n}\n\n.body__menu-open .navbar-mod__item-link___6U2c1 {\n  width: 100%;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__icon___21inq {\n  /* 1.16 is roughly the ratio of icon-size-hover to --icon-size */\n  transform: scale(1.2);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  flex: 1;\n  font-weight: 600;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  opacity: 0;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  text-align: left;\n  text-decoration: none;\n  z-index: 1;\n}\n\n.navbar-mod__expander___blASx {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: linear-gradient(\n    180deg,\n    var(--color-primary) 0%,\n    var(--color-primary-25) 100%\n  );\n  padding: var(--spacing-30) var(--spacing-25);\n}\n\n.navbar-mod__expander___blASx:hover {\n  background-color: var(--color-primary-40);\n}\n\n/* divider */\n\n.navbar-mod__expander___blASx::before {\n  content: '';\n  position: absolute;\n  top: 56px;\n  height: 1px;\n  background: rgba(255, 255, 255, 0.5);\n  width: calc(100% - 2 * var(--spacing-30));\n}\n\n.navbar-mod__expand-icon___3A2Dk {\n  height: 40px;\n  width: 40px;\n  border-radius: var(--border-radius-4);\n  padding: var(--spacing-20);\n  background: rgba(255, 255, 255, 0.2);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__expand-icon___3A2Dk:hover {\n  background: rgba(255, 255, 255, 0.3);\n  cursor: pointer;\n}\n\n.navbar-mod__item--bottom___Pygdy {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item_menu__active___j515K):hover {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___NnkVM {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___1s4K0 .navbar-mod__item-link___6U2c1 {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  box-shadow: var(--shadow-for-navbar);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe {\n  height: auto;\n  min-height: 48px;\n  overflow: hidden;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  opacity: 1;\n  margin-left: var(--spacing-25);\n  color: var(--color-surface);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__title___aTo0V {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__item__active___SEPWP {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___tMZy4 {\n  padding: var(--spacing-30);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  left: 72px;\n  z-index: -1;\n  list-style: none;\n  position: fixed;\n  display: none;\n}\n\n/* This pseudo-element is required to enable smooth coursor movement from the main menu item to submenu items with the gap in between */\n\n.navbar-mod__sublist-expanded__active___XyUuS::before,\n.navbar-mod__sublist-collapsed__active___yWHea::before,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: calc(253px + var(--spacing-20));\n  height: 48px;\n  left: calc(-1 * var(--spacing-20));\n}\n\n.navbar-mod__sublist__inactive___5-OgH {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___ZZbsF {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  transition: padding-left 150ms ease-out;\n}\n\n.navbar-mod__sublist-item__active___O2-c- {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___ZZbsF:not(.navbar-mod__sublist-item__active___O2-c-):hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  border-radius: var(--border-radius-4);\n  background: var(--color-primary-95);\n  padding-left: var(--spacing-20);\n}\n\n.navbar-mod__text___3TpQt {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  width: 100%;\n  height: 100%;\n}\n\n.navbar-mod__text-link___TcEn2 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  display: flex;\n  padding: var(--spacing-25);\n  align-items: center;\n  justify-content: center;\n}\n\n.body__menu-open .navbar-mod__text-link___TcEn2 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___RQinz {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___V0-tf {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  color: var(--color-solid);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  text-decoration: none;\n  flex: 1;\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    var(--spacing-30);\n}\n\n.navbar-mod__navlink-clickable-content___o-emf {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___SEPWP,\n.navbar-mod__item_menu__active___j515K {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___QYEJM .navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___bkf5Q {\n  padding: 0 var(--spacing-30) var(--spacing-20) var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___gTiaE {\n  position: absolute;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: 48px;\n  visibility: visible;\n}\n\n.navbar-mod__tooltip___3PSlF {\n  padding: var(--spacing-10) calc(var(--spacing-20) + var(--spacing-10));\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-10);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  color: var(--color-surface);\n  max-height: 48px;\n  visibility: inherit;\n}\n\n.navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca {\n  opacity: 1;\n  display: none;\n  text-align: left;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar-when-active);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--color-surface);\n  /* TODO: add design tokens instead hard-coded values */\n  min-height: 50px;\n  width: 253px;\n  border-radius: var(--border-radius-8);\n  /* z-index value must be higher than AppBar's z-index */\n  z-index: 20001;\n  box-shadow: -2px 4px 25px 0 rgba(89, 89, 89, 0.5);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca.navbar-mod__sublist-collapsed__empty___mXa6R {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___06BoS,\n.navbar-mod__highlighted___06BoS .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___-s7eh {\n  display: none;\n}\n\n.navbar-mod__divider___GBOn1 {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___B7sPh {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___I9ci7 {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  padding: var(--spacing-30) var(--spacing-30) 48px;\n  width: 80px;\n  box-sizing: border-box;\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-primary-40) transparent;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___I9ci7 {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___QYEJM {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___QYEJM {\n  width: 256px;\n}\n",
   "jsonMap": {
     "left-navigation": "navbar-mod__left-navigation___op7AX",
     "navigation-header": "navbar-mod__navigation-header___vaIOk",
@@ -349,7 +351,6 @@ const compiledStyles$4 = {
     "list": "navbar-mod__list___pouHY",
     "list-item": "navbar-mod__list-item___y7qYe",
     "item-link": "navbar-mod__item-link___6U2c1",
-    "item-link-no-submenu": "navbar-mod__item-link-no-submenu___EPy3b",
     "item-icon-text": "navbar-mod__item-icon-text___3ZFtB",
     "expander": "navbar-mod__expander___blASx",
     "expand-icon": "navbar-mod__expand-icon___3A2Dk",
@@ -402,9 +403,9 @@ const ListWithSearchIcon$1 = /*#__PURE__*/react.lazy(() => Promise.resolve().the
 // For backwards compatibility purposes, we still support the legacy "icon name",
 // which we then map to one of the pre-defined icons.
 // Eventually, we want to get rid of this "switch" logic.
-const IconSwitcher$1 = _ref3 => {
-  let icon = _ref3.icon,
-    iconProps = _objectWithoutProperties(_ref3, _excluded$1);
+const IconSwitcher$1 = _ref4 => {
+  let icon = _ref4.icon,
+    iconProps = _objectWithoutProperties(_ref4, _excluded$1);
   if (_includesInstanceProperty__default["default"](icon).call(icon, '<svg')) {
     return jsxRuntime.jsx(InlineSvg__default["default"], _objectSpread$4({
       data: icon
@@ -456,8 +457,8 @@ const IconSwitcher$1 = _ref3 => {
 };
 IconSwitcher$1.propTypes = {};
 IconSwitcher$1.displayName = 'IconSwitcher';
-const getIcon = _ref4 => {
-  let isMenuOpen = _ref4.isMenuOpen;
+const getIcon = _ref5 => {
+  let isMenuOpen = _ref5.isMenuOpen;
   const Icon = isMenuOpen ? icons.SidebarCollapseIcon : icons.SidebarExpandIcon;
   return jsxRuntime.jsx(Icon, {
     color: "surface",
@@ -466,7 +467,7 @@ const getIcon = _ref4 => {
 };
 const MenuExpander$1 = props => {
   return jsxRuntime.jsx("li", {
-    className: classnames__default["default"](styles$4['list-item'], styles$4.expander, {
+    className: classnames__default["default"](styles$4.expander, {
       [styles$4.hidden]: !props.isVisible
     }),
     children: jsxRuntime.jsx("div", {
@@ -486,15 +487,19 @@ const Faded$1 = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "position:absolute;top:-32px;height:32px;width:100%;background:linear-gradient(180deg, rgba(0, 153, 135, 0) 0%, #00b39e 100%);z-index:1"
 } );
 const getSubmenuPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, submenuVerticalPosition) => /*#__PURE__*/react$1.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":", submenuVerticalPosition, "px;" + ("" ), "" );
-var _ref = {
+var _ref2 = {
   name: "abcix4",
   styles: "top:0"
 } ;
-var _ref2 = {
+var _ref3 = {
   name: "8tapst",
   styles: "bottom:0"
 } ;
-const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react$1.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", constants$1.DIMENSIONS.navMenuItemHeight, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref2, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref];
+const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react$1.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", constants$1.DIMENSIONS.navMenuItemHeight, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref3, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref2];
+var _ref = {
+  name: "6dhm9o",
+  styles: "visibility:hidden"
+} ;
 const MenuGroup$1 = /*#__PURE__*/react.forwardRef((props, ref) => {
   if (props.isExpanded && (props.level === 2 && !props.hasSubmenu || props.level === 2 && !props.isActive)) {
     return null;
@@ -503,7 +508,7 @@ const MenuGroup$1 = /*#__PURE__*/react.forwardRef((props, ref) => {
   const isSublistActiveWhileIsMenuCollapsed = props.level === 2 && props.isActive && !props.isExpanded;
   return jsxRuntime.jsx("ul", {
     ref: ref && props.level === 2 ? ref : null,
-    css: /*#__PURE__*/react$1.css(getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), ";::before{", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" ),
+    css: /*#__PURE__*/react$1.css(getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), ";", props.submenuVerticalPosition === 0 && _ref, "::before{", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" ),
     id: "group-".concat(props.id),
     "data-testid": "group-".concat(props.id),
     role: "menu",
@@ -527,7 +532,7 @@ const MenuGroup$1 = /*#__PURE__*/react.forwardRef((props, ref) => {
   });
 });
 MenuGroup$1.displayName = 'MenuGroup';
-const MenuItem$2 = /*#__PURE__*/react.forwardRef((props, ref) => {
+const MenuItem$2 = props => {
   var _props$isMainMenuRout;
   return jsxRuntime.jsx("li", {
     role: "menuitem",
@@ -539,13 +544,14 @@ const MenuItem$2 = /*#__PURE__*/react.forwardRef((props, ref) => {
     onClick: props.onClick,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
+    "data-menuitem": props.identifier,
     children: jsxRuntime.jsx("div", {
-      ref: ref,
-      className: props.hasSubmenu ? styles$4['item-link'] : styles$4['item-link-no-submenu'],
+      className: styles$4['item-link'],
       children: props.children
     })
   });
-});
+};
+MenuItem$2.propTypes = {};
 MenuItem$2.displayName = 'MenuItem';
 const menuItemLinkDefaultProps$1 = {
   exactMatch: false
@@ -789,7 +795,7 @@ NavBarSkeleton.displayName = 'NavBarSkeleton';
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context9, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys$3(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys$3(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const compiledStyles$3 = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___ifOIc {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___op7AX {\n  display: grid;\n  width: 80px;\n  background: var(--color-primary);\n  height: 100%;\n  grid-template-rows: 56px 1fr;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk {\n  background-color: var(--color-accent-10);\n  color: var(--color-surface);\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  padding: var(--spacing-30);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__title___aTo0V {\n  font-weight: 600;\n  margin-left: var(--spacing-20);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___pouHY {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.navbar-mod__list-item___y7qYe {\n  min-height: 48px;\n  background: var(--color-primary);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___6U2c1 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  padding: var(--spacing-25);\n  width: 48px;\n  position: relative;\n  display: block;\n}\n\n.navbar-mod__item-link-no-submenu___EPy3b {\n  width: 100%;\n  height: 100%;\n}\n\n.body__menu-open .navbar-mod__item-link___6U2c1 {\n  width: 100%;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__icon___21inq {\n  /* 1.16 is roughly the ratio of icon-size-hover to --icon-size */\n  transform: scale(1.2);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  flex: 1;\n  font-weight: 600;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  opacity: 0;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  text-align: left;\n  text-decoration: none;\n  z-index: 1;\n}\n\n.navbar-mod__expander___blASx {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: linear-gradient(\n    180deg,\n    var(--color-primary) 0%,\n    var(--color-primary-25) 100%\n  );\n  padding: var(--spacing-30) var(--spacing-25);\n}\n\n/* divider */\n\n.navbar-mod__expander___blASx::before {\n  content: '';\n  position: absolute;\n  top: 56px;\n  height: 1px;\n  background: rgba(255, 255, 255, 0.5);\n  width: calc(100% - 2 * var(--spacing-30));\n}\n\n.navbar-mod__expand-icon___3A2Dk {\n  height: 40px;\n  width: 40px;\n  border-radius: var(--border-radius-4);\n  padding: var(--spacing-20);\n  background: rgba(255, 255, 255, 0.2);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__expand-icon___3A2Dk:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.navbar-mod__item--bottom___Pygdy {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item_menu__active___j515K):hover {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___NnkVM {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___1s4K0 .navbar-mod__item-link___6U2c1 {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  box-shadow: var(--shadow-for-navbar);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe {\n  height: auto;\n  min-height: 48px;\n  overflow: hidden;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  opacity: 1;\n  margin-left: var(--spacing-25);\n  color: var(--color-surface);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__title___aTo0V {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__item__active___SEPWP {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___tMZy4 {\n  padding: var(--spacing-30);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  left: 72px;\n  z-index: -1;\n  list-style: none;\n  position: fixed;\n  display: none;\n}\n\n/* This pseudo-element is required to enable smooth coursor movement from the main menu item to submenu items with the gap in between */\n\n.navbar-mod__sublist-expanded__active___XyUuS::before,\n.navbar-mod__sublist-collapsed__active___yWHea::before,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: calc(253px + var(--spacing-20));\n  height: 48px;\n  left: calc(-1 * var(--spacing-20));\n}\n\n.navbar-mod__sublist__inactive___5-OgH {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___ZZbsF {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  transition: padding-left 150ms ease-out;\n}\n\n.navbar-mod__sublist-item__active___O2-c- {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___ZZbsF:not(.navbar-mod__sublist-item__active___O2-c-):hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  border-radius: var(--border-radius-4);\n  background: var(--color-primary-95);\n  padding-left: var(--spacing-20);\n}\n\n.navbar-mod__text___3TpQt {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  width: 100%;\n  height: 100%;\n}\n\n.navbar-mod__text-link___TcEn2 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  display: flex;\n  padding: var(--spacing-25);\n  align-items: center;\n  justify-content: center;\n}\n\n.body__menu-open .navbar-mod__text-link___TcEn2 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___RQinz {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___V0-tf {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  color: var(--color-solid);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  text-decoration: none;\n  flex: 1;\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    var(--spacing-30);\n}\n\n.navbar-mod__navlink-clickable-content___o-emf {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___SEPWP,\n.navbar-mod__item_menu__active___j515K {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___QYEJM .navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___bkf5Q {\n  padding: 0 var(--spacing-30) var(--spacing-20) var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___gTiaE {\n  position: absolute;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: 48px;\n  visibility: visible;\n}\n\n.navbar-mod__tooltip___3PSlF {\n  padding: var(--spacing-10) calc(var(--spacing-20) + var(--spacing-10));\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-10);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  color: var(--color-surface);\n  max-height: 48px;\n  visibility: inherit;\n}\n\n.navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca {\n  opacity: 1;\n  display: none;\n  text-align: left;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar-when-active);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__item-link-no-submenu___EPy3b:hover .navbar-mod__sublist-collapsed__active___yWHea {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--color-surface);\n  /* TODO: add design tokens instead hard-coded values */\n  min-height: 50px;\n  width: 253px;\n  border-radius: var(--border-radius-8);\n  /* z-index value must be higher than AppBar's z-index */\n  z-index: 20001;\n  box-shadow: -2px 4px 25px 0 rgba(89, 89, 89, 0.5);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link-no-submenu___EPy3b:hover\n  .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___06BoS,\n.navbar-mod__highlighted___06BoS .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___-s7eh {\n  display: none;\n}\n\n.navbar-mod__divider___GBOn1 {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___B7sPh {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___I9ci7 {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  padding: var(--spacing-30) var(--spacing-30) 48px;\n  width: 80px;\n  box-sizing: border-box;\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-primary-40) transparent;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___I9ci7 {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___QYEJM {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___QYEJM {\n  width: 256px;\n}\n",
+  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___ifOIc {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___op7AX {\n  display: grid;\n  width: 80px;\n  background: var(--color-primary);\n  height: 100%;\n  grid-template-rows: 56px 1fr;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk {\n  background-color: var(--color-accent-10);\n  color: var(--color-surface);\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  padding: var(--spacing-30);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__title___aTo0V {\n  font-weight: 600;\n  margin-left: var(--spacing-20);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___vaIOk .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___pouHY {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.navbar-mod__list-item___y7qYe {\n  min-height: 48px;\n  background: var(--color-primary);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___6U2c1 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  width: 48px;\n  position: relative;\n  display: block;\n}\n\n.body__menu-open .navbar-mod__item-link___6U2c1 {\n  width: 100%;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__icon___21inq {\n  /* 1.16 is roughly the ratio of icon-size-hover to --icon-size */\n  transform: scale(1.2);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  flex: 1;\n  font-weight: 600;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  opacity: 0;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  text-align: left;\n  text-decoration: none;\n  z-index: 1;\n}\n\n.navbar-mod__expander___blASx {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: linear-gradient(\n    180deg,\n    var(--color-primary) 0%,\n    var(--color-primary-25) 100%\n  );\n  padding: var(--spacing-30) var(--spacing-25);\n}\n\n.navbar-mod__expander___blASx:hover {\n  background-color: var(--color-primary-40);\n}\n\n/* divider */\n\n.navbar-mod__expander___blASx::before {\n  content: '';\n  position: absolute;\n  top: 56px;\n  height: 1px;\n  background: rgba(255, 255, 255, 0.5);\n  width: calc(100% - 2 * var(--spacing-30));\n}\n\n.navbar-mod__expand-icon___3A2Dk {\n  height: 40px;\n  width: 40px;\n  border-radius: var(--border-radius-4);\n  padding: var(--spacing-20);\n  background: rgba(255, 255, 255, 0.2);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__expand-icon___3A2Dk:hover {\n  background: rgba(255, 255, 255, 0.3);\n  cursor: pointer;\n}\n\n.navbar-mod__item--bottom___Pygdy {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item_menu__active___j515K):hover {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___NnkVM {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___1s4K0 .navbar-mod__item-link___6U2c1 {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  box-shadow: var(--shadow-for-navbar);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe {\n  height: auto;\n  min-height: 48px;\n  overflow: hidden;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___op7AX {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe .navbar-mod__title___aTo0V {\n  opacity: 1;\n  margin-left: var(--spacing-25);\n  color: var(--color-surface);\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n  animation: navbar-mod__visible___ifOIc 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___y7qYe:hover .navbar-mod__title___aTo0V {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__icon___21inq > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___y7qYe:not(.navbar-mod__item__active___SEPWP):hover .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__item__active___SEPWP {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___tMZy4 {\n  padding: var(--spacing-30);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  left: 72px;\n  z-index: -1;\n  list-style: none;\n  position: fixed;\n  display: none;\n}\n\n/* This pseudo-element is required to enable smooth coursor movement from the main menu item to submenu items with the gap in between */\n\n.navbar-mod__sublist-expanded__active___XyUuS::before,\n.navbar-mod__sublist-collapsed__active___yWHea::before,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: calc(253px + var(--spacing-20));\n  height: 48px;\n  left: calc(-1 * var(--spacing-20));\n}\n\n.navbar-mod__sublist__inactive___5-OgH {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___ZZbsF {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  transition: padding-left 150ms ease-out;\n}\n\n.navbar-mod__sublist-item__active___O2-c- {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___ZZbsF:not(.navbar-mod__sublist-item__active___O2-c-):hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  border-radius: var(--border-radius-4);\n  background: var(--color-primary-95);\n  padding-left: var(--spacing-20);\n}\n\n.navbar-mod__text___3TpQt {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  width: 100%;\n  height: 100%;\n}\n\n.navbar-mod__text-link___TcEn2 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  display: flex;\n  padding: var(--spacing-25);\n  align-items: center;\n  justify-content: center;\n}\n\n.body__menu-open .navbar-mod__text-link___TcEn2 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___RQinz {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___V0-tf {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  color: var(--color-solid);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n  text-decoration: none;\n  flex: 1;\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    var(--spacing-30);\n}\n\n.navbar-mod__navlink-clickable-content___o-emf {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___SEPWP,\n.navbar-mod__item_menu__active___j515K {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___y7qYe .navbar-mod__icon-container___hAbPn {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___QYEJM .navbar-mod__list-item___y7qYe .navbar-mod__item-icon-text___3ZFtB {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___bkf5Q {\n  padding: 0 var(--spacing-30) var(--spacing-20) var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___y7qYe.navbar-mod__item__active___SEPWP .navbar-mod__item-icon-text___3ZFtB {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___gTiaE {\n  position: absolute;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: 48px;\n  visibility: visible;\n}\n\n.navbar-mod__tooltip___3PSlF {\n  padding: var(--spacing-10) calc(var(--spacing-20) + var(--spacing-10));\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-10);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  color: var(--color-surface);\n  max-height: 48px;\n  visibility: inherit;\n}\n\n.navbar-mod__sublist-expanded__active___XyUuS,\n.navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__sublist-collapsed__active__above___-7-Ca {\n  opacity: 1;\n  display: none;\n  text-align: left;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar-when-active);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--color-surface);\n  /* TODO: add design tokens instead hard-coded values */\n  min-height: 50px;\n  width: 253px;\n  border-radius: var(--border-radius-8);\n  /* z-index value must be higher than AppBar's z-index */\n  z-index: 20001;\n  box-shadow: -2px 4px 25px 0 rgba(89, 89, 89, 0.5);\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active___yWHea.navbar-mod__sublist-collapsed__empty___mXa6R,\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-collapsed__active__above___-7-Ca.navbar-mod__sublist-collapsed__empty___mXa6R {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___6U2c1:hover .navbar-mod__sublist-expanded__active___XyUuS {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___06BoS,\n.navbar-mod__highlighted___06BoS .navbar-mod__title___aTo0V {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___-s7eh {\n  display: none;\n}\n\n.navbar-mod__divider___GBOn1 {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___B7sPh {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___I9ci7 {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  padding: var(--spacing-30) var(--spacing-30) 48px;\n  width: 80px;\n  box-sizing: border-box;\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-primary-40) transparent;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___I9ci7 {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___I9ci7::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___QYEJM {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___QYEJM {\n  width: 256px;\n}\n",
   "jsonMap": {
     "left-navigation": "navbar-mod__left-navigation___op7AX",
     "navigation-header": "navbar-mod__navigation-header___vaIOk",
@@ -800,7 +806,6 @@ const compiledStyles$3 = {
     "list": "navbar-mod__list___pouHY",
     "list-item": "navbar-mod__list-item___y7qYe",
     "item-link": "navbar-mod__item-link___6U2c1",
-    "item-link-no-submenu": "navbar-mod__item-link-no-submenu___EPy3b",
     "item-icon-text": "navbar-mod__item-icon-text___3ZFtB",
     "expander": "navbar-mod__expander___blASx",
     "expand-icon": "navbar-mod__expand-icon___3A2Dk",
@@ -848,7 +853,7 @@ const getIsSubmenuRouteActive = (uriPath, props) => {
   }));
 };
 const ApplicationMenu$1 = props => {
-  var _menuItemRef$current, _context4, _props$menu$featureTo, _props$menu$actionRig, _props$menu$dataFence, _context5, _context6;
+  var _context4, _props$menu$featureTo, _props$menu$actionRig, _props$menu$dataFence, _context5, _context6;
   const _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     submenuVerticalPosition = _useState2[0],
@@ -857,13 +862,14 @@ const ApplicationMenu$1 = props => {
     _useState4 = _slicedToArray(_useState3, 2),
     isSubmenuAboveMenuItem = _useState4[0],
     setIsSubmenuAboveMenuItem = _useState4[1];
-  const menuItemRef = react.useRef(null);
   const submenuRef = react.useRef(null);
   const hasSubmenu = _Array$isArray__default["default"](props.menu.submenu) && props.menu.submenu.length > 0;
-  const menuItemBoundingClientRect = (_menuItemRef$current = menuItemRef.current) === null || _menuItemRef$current === void 0 ? void 0 : _menuItemRef$current.getBoundingClientRect();
-  const menuItemTop = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.top) || 0;
-  const menuItemBottom = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.bottom) || 0;
+  const menuItemIdentifier = snakeCase__default["default"](props.menu.key);
   const callbackFn = react.useCallback(entries => {
+    var _document$querySelect;
+    const menuItemBoundingClientRect = (_document$querySelect = document.querySelector("[data-menuitem=\"".concat(menuItemIdentifier, "\"]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+    const menuItemTop = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.top) || 0;
+    const menuItemBottom = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.bottom) || 0;
     const _entries = _slicedToArray(entries, 1),
       entry = _entries[0];
     const doesSubmenuFitWithinViewportBelowMenuItem = entry.boundingClientRect.height + (props.isMenuOpen ? menuItemTop : menuItemBottom) > window.innerHeight;
@@ -876,22 +882,27 @@ const ApplicationMenu$1 = props => {
       setIsSubmenuAboveMenuItem(false);
       setSubmenuVerticalPosition(props.isMenuOpen ? menuItemTop : menuItemBottom);
     }
-  }, [menuItemBottom, menuItemTop, props.isMenuOpen]);
+  }, [menuItemIdentifier, props.isMenuOpen]);
+  const observerRef = react.useRef(null);
   react.useLayoutEffect(() => {
-    const observer = new IntersectionObserver(callbackFn, {
+    observerRef.current = new IntersectionObserver(callbackFn, {
       rootMargin: '-100% 0px 0px 0px' // we want to observe if the submenu crosses the bottom line of the viewport - therefore we set the root element top margin to -100% of the viewport height
     });
 
+    return () => {
+      var _observerRef$current;
+      return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
+    };
+  }, [callbackFn, props.isMenuOpen]);
+  react.useLayoutEffect(() => {
     const currentSubmenuRef = submenuRef.current;
-    if (currentSubmenuRef) {
+    const observer = observerRef.current;
+    if (!currentSubmenuRef) return;
+    if (observer && currentSubmenuRef) {
       observer.observe(currentSubmenuRef);
     }
-    return () => {
-      if (currentSubmenuRef) {
-        observer.unobserve(currentSubmenuRef);
-      }
-    };
-  }, [menuItemBottom, menuItemTop, props.isMenuOpen, props.handleToggleItem, callbackFn]);
+    return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
+  }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
     path: _concatInstanceProperty__default["default"](_context4 = "/".concat(props.projectKey, "/")).call(_context4, props.menu.uriPath),
     exact: false,
@@ -917,7 +928,6 @@ const ApplicationMenu$1 = props => {
     menuVisibilities: props.menuVisibilities,
     namesOfMenuVisibilities: namesOfMenuVisibilitiesOfAllSubmenus,
     children: jsxRuntime.jsxs(MenuItem$2, {
-      ref: menuItemRef,
       hasSubmenu: hasSubmenu,
       isActive: props.isActive,
       isMainMenuRouteActive: isMainMenuRouteActive,
@@ -925,7 +935,8 @@ const ApplicationMenu$1 = props => {
       onClick: props.handleToggleItem,
       onMouseEnter: props.handleToggleItem,
       onMouseLeave: props.shouldCloseMenuFly,
-      children: [!hasSubmenu ? jsxRuntime.jsx(MenuItemLink$1, {
+      identifier: menuItemIdentifier,
+      children: [jsxRuntime.jsx(MenuItemLink$1, {
         linkTo: _concatInstanceProperty__default["default"](_context5 = "/".concat(props.projectKey, "/")).call(_context5, props.menu.uriPath),
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
@@ -936,14 +947,8 @@ const ApplicationMenu$1 = props => {
           icon: props.menu.icon,
           isMenuOpen: props.isMenuOpen
         })
-      }) : jsxRuntime.jsx(ItemContainer, {
-        labelAllLocales: props.menu.labelAllLocales,
-        defaultLabel: props.menu.defaultLabel,
-        applicationLocale: props.applicationLocale,
-        icon: props.menu.icon,
-        isMenuOpen: props.isMenuOpen
       }), jsxRuntime.jsxs(MenuGroup$1, {
-        id: props.menu.key,
+        id: "group-".concat(props.menu.key),
         level: 2,
         isActive: props.isActive,
         isExpanded: props.isMenuOpen,