@commercetools-frontend/application-shell 22.8.3 → 22.8.4

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

@@ -28,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-4a75865e.cjs.prod.js');
-var useApplicationsMenu = require('./use-applications-menu-b3754808.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');
@@ -46,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-a9f36ac3.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');
@@ -340,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  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/* 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  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",
+  "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",
@@ -403,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
@@ -457,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",
@@ -467,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", {
@@ -487,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;
@@ -504,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",
@@ -791,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  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/* 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  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",
+  "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",
@@ -878,7 +882,7 @@ const ApplicationMenu$1 = props => {
       setIsSubmenuAboveMenuItem(false);
       setSubmenuVerticalPosition(props.isMenuOpen ? menuItemTop : menuItemBottom);
     }
-  }, []);
+  }, [menuItemIdentifier, props.isMenuOpen]);
   const observerRef = react.useRef(null);
   react.useLayoutEffect(() => {
     observerRef.current = new IntersectionObserver(callbackFn, {
@@ -889,7 +893,7 @@ const ApplicationMenu$1 = props => {
       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;
     const observer = observerRef.current;
@@ -944,7 +948,7 @@ const ApplicationMenu$1 = props => {
           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,