@commercetools-frontend/application-shell 22.17.0 → 22.17.2

package/dist/{navbar-d60f807a.cjs.prod.js → navbar-53abe300.cjs.prod.js}

@@ -14,9 +14,7 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var react = require('react');
-var react$1 = require('@emotion/react');
-var classnames = require('classnames');
+var react$1 = require('react');
 var snakeCase = require('lodash/snakeCase');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
@@ -25,21 +23,24 @@ var LogoSVG = require('@commercetools-frontend/assets/logos/commercetools_small-
 var constants = require('@commercetools-frontend/constants');
 var icons = require('@commercetools-uikit/icons');
 var Spacings = require('@commercetools-uikit/spacings');
-var oidc = require('./oidc-b070ff6c.cjs.prod.js');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var _styled = require('@emotion/styled/base');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var oidc = require('./oidc-cfa56c46.cjs.prod.js');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var reactBroadcast = require('@flopflip/react-broadcast');
+var classnames = require('classnames');
 var MissingImageSvg = require('@commercetools-frontend/assets/images/diagonal-line.svg');
 var permissions = require('@commercetools-frontend/permissions');
 var InlineSvg = require('@commercetools-uikit/icons/inline-svg');
 var useIsServedByProxy = require('./use-is-served-by-proxy-845cace5.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/keys');
-var designSystem = require('@commercetools-uikit/design-system');
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
@@ -62,7 +63,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
 var LogoSVG__default = /*#__PURE__*/_interopDefault(LogoSVG);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -71,6 +71,7 @@ var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesI
 var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var MissingImageSvg__default = /*#__PURE__*/_interopDefault(MissingImageSvg);
 var InlineSvg__default = /*#__PURE__*/_interopDefault(InlineSvg);
 var _keysInstanceProperty__default = /*#__PURE__*/_interopDefault(_keysInstanceProperty);
@@ -78,76 +79,151 @@ var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceP
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 
+const IconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj3"
+} )({
+  name: "ex9e0f",
+  styles: "width:auto;display:flex;justify-content:center"
+} );
+const Icon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj2"
+} )("width:", oidc.NAVBAR.iconSize, ";height:", oidc.NAVBAR.iconSize, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";>svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}" + ("" ));
+const ItemIconText = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj1"
+} )({
+  name: "192s9p1",
+  styles: "display:flex;flex-direction:row;justify-content:center;align-items:center"
+} );
+const Title = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1wv1pdj0"
+} )("flex:1;font-weight:600;font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorNeutral, ";opacity:0;transition:", oidc.NAVBAR.leftNavigationTransition, ";text-align:left;text-decoration:none;z-index:1;" + ("" ));
+
+const getSubmenuPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, submenuVerticalPosition) => /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":", submenuVerticalPosition, "px;" + ("" ), "" );
+var _ref4 = {
+  name: "abcix4",
+  styles: "top:0"
+} ;
+var _ref5 = {
+  name: "8tapst",
+  styles: "bottom:0"
+} ;
+const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref5, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref4];
+const Faded = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv8"
+} )({
+  name: "16qr508",
+  styles: "position:absolute;top:-32px;height:32px;width:100%;background:linear-gradient(180deg, rgba(0, 153, 135, 0) 0%, #00b39e 100%);z-index:1"
+} );
+var _ref3 = {
+  name: "eivff4",
+  styles: "display:none"
+} ;
+const Expander = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv7"
+} )("display:flex;align-items:center;justify-content:center;background:linear-gradient(\n    180deg,\n    ", designSystem.designTokens.colorPrimary, " 0%,\n    ", designSystem.designTokens.colorPrimary25, " 100%\n  );padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing25, ";", props => !props.isVisible && _ref3, "::before{content:'';position:absolute;top:", oidc.NAVBAR.itemHeight, ";height:1px;background:rgba(255, 255, 255, 0.5);width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");}:hover,:focus{background-color:", designSystem.designTokens.colorPrimary40, ";}" + ("" ));
+const ExpanderIcon = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv6"
+} )("height:", oidc.NAVBAR.expanderSize, ";width:", oidc.NAVBAR.expanderSize, ";border-radius:", designSystem.designTokens.borderRadius4, ";padding:", designSystem.designTokens.spacing20, ";background:rgba(255, 255, 255, 0.2);display:flex;justify-content:center;align-items:center;:hover,:focus{background:rgba(255, 255, 255, 0.3);cursor:pointer;}" + ("" ));
+const LeftNavigation = /*#__PURE__*/_styled__default["default"]("nav", {
+  target: "e1i568cv5"
+} )("display:grid;width:", oidc.NAVBAR.widthLeftNavigation, ";background:", designSystem.designTokens.colorPrimary, ";height:100%;grid-template-rows:56px 1fr;transition:", oidc.NAVBAR.leftNavigationTransition, ";" + ("" ));
+const TextLinkSublistWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv4"
+} )({
+  name: "khglpi",
+  styles: "display:flex;flex-direction:column;position:relative;min-height:0"
+} );
+const NavlinkClickableContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1i568cv3"
+} )({
+  name: "1kzq5ms",
+  styles: "height:100%;width:100%"
+} );
+const listStyles = {
+  name: "19z1op4",
+  styles: "margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 0"
+} ;
+const sublistStyles = /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing30, ";font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";background-color:", designSystem.designTokens.colorAccent10, ";left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";z-index:-1;list-style:none;position:fixed;display:none;" + ("" ), "" );
+var _ref2 = {
+  name: "6dhm9o",
+  styles: "visibility:hidden"
+} ;
+const MenuList = /*#__PURE__*/_styled__default["default"]("ul", {
+  target: "e1i568cv2"
+} )(props => [props.level === 1 && listStyles, getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), props.level === 2 && sublistStyles,
+// prevent glitchy behavior during the initial render when the submenu's vertical position is evaluated as 0
+props.submenuVerticalPosition === 0 && _ref2, (props.isSublistActiveWhileIsMenuExpanded || props.isSublistCollapsedAndActive || props.isSublistCollapsedAndActiveAndAbove) && /*#__PURE__*/react.css("opacity:1;display:none;text-align:left;background-color:", designSystem.designTokens.colorAccent20, ";::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + ", designSystem.designTokens.spacing20, ");height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * ", designSystem.designTokens.spacing20, ");", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.isSublistActiveWhileIsMenuExpanded, props.isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" )], " & .highlighted,& .highlighted ", Title, "{color:", designSystem.designTokens.colorSurface, "!important;font-weight:", designSystem.designTokens.fontWeight600, ";}" + ("" ));
+const SublistItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv1"
+} )("display:flex;align-items:center;align-self:stretch;", props => [props.isActive && /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorAccent30, ";" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover,:focus-within{color:", designSystem.designTokens.colorSurface, ";font-weight:", designSystem.designTokens.fontWeight600, ";border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorPrimary95, ";[data-link-level='text-link-sublist']{padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " calc(\n                ", designSystem.designTokens.spacing30, " + ", designSystem.designTokens.spacing20, "\n              );}}" + ("" ), "" )], ";" + ("" ));
+var _ref = {
+  name: "1azakc",
+  styles: "text-align:center"
+} ;
+const MenuListItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv0"
+} )("height:", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.itemSize, ";margin:0;background:", designSystem.designTokens.colorPrimary, ";list-style:none;cursor:pointer;", IconWrapper, "{width:auto;display:flex;justify-content:center;align-self:flex-start;}", props => [props.isRouteActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorAccent30, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ), "" ), !props.isRouteActive && /*#__PURE__*/react.css(":hover,:focus-within{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ), "" ), props.isActive && /*#__PURE__*/react.css(ItemIconText, "{justify-content:flex-start;}" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover ", Icon, ">svg *:not([fill='none']),:focus-within ", Icon, ">svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}:hover .", Title, ",:focus-within ", Title, "{color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), props.isCollapsed && _ref], " :hover ", Title, ",:focus-within ", Title, "{margin-left:calc(", designSystem.designTokens.spacing25, " + 2px);}:hover ", Icon, ",:focus-within ", Icon, "{transform:scale(1.2);}:hover ", MenuList, ".sublist-collapsed__active,:hover ", MenuList, ".sublist-collapsed__active__above,:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-collapsed__active,:focus-within ", MenuList, ".sublist-collapsed__active__above,:focus-within ", MenuList, ".sublist-expanded__active{display:flex;flex-direction:column;align-items:flex-start;background-color:", designSystem.designTokens.colorSurface, ";min-height:", oidc.NAVBAR.sublistItemMinHeight, ";width:", oidc.NAVBAR.sublistWidth, ";border-radius:", designSystem.designTokens.borderRadius8, ";z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}:hover ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:hover ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}" + ("" ));
+
+var _templateObject;
+const visible = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k9"
+} )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
+const ItemContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k8"
+} )("color:", designSystem.designTokens.colorNeutral, ";width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;" + ("" ));
+const ScrollableMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k7"
+} )("flex:1 1 0;overflow-x:hidden;overflow-y:hidden;padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing30, " ", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.widthLeftNavigation, ";box-sizing:border-box;:hover{overflow-y:scroll;}scrollbar-width:thin;scrollbar-color:", designSystem.designTokens.colorPrimary40, " transparent;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ));
+const leftNavigationOpenStyles = /*#__PURE__*/react.css(".body__menu-open ", LeftNavigation, "{transition:", oidc.NAVBAR.leftNavigationTransition, ";width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", ScrollableMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", FixedMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open [data-link-level='text-link']{justify-content:start;}.body__menu-open ", MenuListItem, "{height:auto;min-height:", oidc.NAVBAR.itemSize, ";width:calc(\n      ", oidc.NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n        ", designSystem.designTokens.spacing25, "\n    );&.active{max-height:500px;transition:max-height 0.25s ease-in;", ItemIconText, "{position:relative;width:auto;margin-left:0;}}", Title, "{opacity:1;margin-left:", designSystem.designTokens.spacing25, ";color:", designSystem.designTokens.colorSurface, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);}}.body__menu-open ", ItemContent, "{width:100%;}" + ("" ), "" );
+const NavigationHeader = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k6"
+} )("background-color:", designSystem.designTokens.colorAccent10, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;flex-direction:row;align-items:center;padding:", designSystem.designTokens.spacing30, ";" + ("" ));
+const HeaderTitle = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k5"
+} )("font-weight:600;margin-left:", designSystem.designTokens.spacing20, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);" + ("" ));
+const TooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k4"
+} )("position:absolute;left:0;display:flex;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";visibility:visible;", props => props.alignsAgainstBottom ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ));
+const Tooltip = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k3"
+} )("padding:", designSystem.designTokens.spacing10, " calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.spacing10, ");display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorAccent10, ";box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";font-weight:", designSystem.designTokens.fontWeight400, ";color:", designSystem.designTokens.colorSurface, ";max-height:", oidc.NAVBAR.itemSize, ";visibility:inherit;" + ("" ));
+const TextLink = /*#__PURE__*/_styled__default["default"]("a", {
+  target: "e1meml8k2"
+} )("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ));
+const SupportMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k1"
+} )("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";height:calc(", oidc.NAVBAR.itemSize, " + ", designSystem.designTokens.spacing20, ");" + ("" ));
+const Text = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k0"
+} )("font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";width:100%;height:100%;" + ("" ));
+const getMenuItemLinkStyles = isSubmenuLink => [isSubmenuLink && /*#__PURE__*/react.css("display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:", designSystem.designTokens.colorSolid, ";font-weight:", designSystem.designTokens.fontWeight600, ";text-decoration:none;flex:1;padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing30, ";transition:padding 150ms ease-out;" + ("" ), "" ), !isSubmenuLink && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ), "" )];
+
 const _excluded = ["icon"];
 function ownKeys$2(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$2(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$2(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$2(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const compiledStyles$1 = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___AKV1b {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\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___Z6fOr {\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___Z6fOr .navbar-mod__icon-container___w3FtA {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___Z6fOr .navbar-mod__title___eRWUj {\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___AKV1b 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___Z6fOr .navbar-mod__icon___bLsep {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___RCV3J {\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___MjK6t {\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___X2Ina {\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___X2Ina {\n  width: 100%;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__item-icon-text___a-8JY {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon___bLsep {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___MjK6t:hover .navbar-mod__icon___bLsep,\n.navbar-mod__list-item___MjK6t:focus-within .navbar-mod__icon___bLsep {\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___MjK6t .navbar-mod__icon___bLsep > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\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___jyAUi {\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___jyAUi:hover,\n.navbar-mod__expander___jyAUi:focus {\n  background-color: var(--color-primary-40);\n}\n\n/* divider */\n\n.navbar-mod__expander___jyAUi::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___BtmRa {\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___BtmRa:hover,\n.navbar-mod__expand-icon___BtmRa:focus {\n  background: rgba(255, 255, 255, 0.3);\n  cursor: pointer;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item_menu__active___5xFRw):hover,\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item_menu__active___5xFRw):focus-within {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\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___MjK6t {\n  height: auto;\n  min-height: 48px;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\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___AKV1b 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___MjK6t:hover .navbar-mod__title___eRWUj,\n.navbar-mod__list-item___MjK6t:focus-within .navbar-mod__title___eRWUj {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__icon___bLsep > svg *:not([fill='none']),\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):focus-within .navbar-mod__icon___bLsep > 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___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__title___eRWUj,\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):focus-within .navbar-mod__title___eRWUj {\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___lo1sr {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\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___240JK::before,\n.navbar-mod__sublist-collapsed__active___-9vYh::before,\n.navbar-mod__sublist-collapsed__active__above___BXCeM::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___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n}\n\n.navbar-mod__sublist-item__active___QC6pa {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):hover,\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):focus-within {\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}\n\n.navbar-mod__text___ccHEu {\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___dhtj6 {\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___dhtj6 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___1JN4x {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___AoIpU {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\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  transition: padding 150ms ease-out;\n}\n\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):hover .navbar-mod__text-link-sublist___AoIpU,\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):focus-within .navbar-mod__text-link-sublist___AoIpU {\n  /* additional left padding on hover and focus */\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    calc(var(--spacing-30) + var(--spacing-20));\n}\n\n.navbar-mod__navlink-clickable-content___bzddC {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr,\n.navbar-mod__item_menu__active___5xFRw,\n.navbar-mod__item_menu__active___5xFRw:focus-within .navbar-mod__list-item___MjK6t {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___42tD9 .navbar-mod__list-item___MjK6t .navbar-mod__item-icon-text___a-8JY {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___fi5Ka {\n  padding: var(--spacing-10) var(--spacing-30) var(--spacing-20)\n    var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___iJYyi {\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___1ID3j {\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___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__sublist-collapsed__active__above___BXCeM {\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___X2Ina:hover .navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-collapsed__active__above___BXCeM,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active__above___BXCeM,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-expanded__active___240JK {\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___X2Ina:hover .navbar-mod__sublist-collapsed__active___-9vYh.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-collapsed__active__above___BXCeM.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active___-9vYh.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:focus-within\n  .navbar-mod__sublist-collapsed__active__above___BXCeM.navbar-mod__sublist-collapsed__empty___FBUli {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-expanded__active___240JK {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___oJWkA,\n.navbar-mod__highlighted___oJWkA .navbar-mod__title___eRWUj {\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___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider___TpVzu {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\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___64pxJ {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___42tD9 {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___42tD9 {\n  width: 256px;\n}\n",
-  "jsonMap": {
-    "left-navigation": "navbar-mod__left-navigation___n7yUt",
-    "navigation-header": "navbar-mod__navigation-header___Z6fOr",
-    "icon-container": "navbar-mod__icon-container___w3FtA",
-    "title": "navbar-mod__title___eRWUj",
-    "visible": "navbar-mod__visible___AKV1b",
-    "icon": "navbar-mod__icon___bLsep",
-    "list": "navbar-mod__list___RCV3J",
-    "list-item": "navbar-mod__list-item___MjK6t",
-    "item-link": "navbar-mod__item-link___X2Ina",
-    "item-icon-text": "navbar-mod__item-icon-text___a-8JY",
-    "expander": "navbar-mod__expander___jyAUi",
-    "expand-icon": "navbar-mod__expand-icon___BtmRa",
-    "item--bottom": "navbar-mod__item--bottom___eW7nh",
-    "item_menu__active": "navbar-mod__item_menu__active___5xFRw",
-    "item_menu-open": "navbar-mod__item_menu-open___zk0zh",
-    "item_menu-collapsed": "navbar-mod__item_menu-collapsed___cluyY",
-    "item__active": "navbar-mod__item__active___lo1sr",
-    "sublist": "navbar-mod__sublist___os1s7",
-    "sublist-expanded__active": "navbar-mod__sublist-expanded__active___240JK",
-    "sublist-collapsed__active": "navbar-mod__sublist-collapsed__active___-9vYh",
-    "sublist-collapsed__active__above": "navbar-mod__sublist-collapsed__active__above___BXCeM",
-    "sublist__inactive": "navbar-mod__sublist__inactive___kJvf-",
-    "sublist-item": "navbar-mod__sublist-item___gafkS",
-    "sublist-item__active": "navbar-mod__sublist-item__active___QC6pa",
-    "text": "navbar-mod__text___ccHEu",
-    "text-link": "navbar-mod__text-link___dhtj6",
-    "text-link-sublist-wrapper": "navbar-mod__text-link-sublist-wrapper___1JN4x",
-    "text-link-sublist": "navbar-mod__text-link-sublist___AoIpU",
-    "navlink-clickable-content": "navbar-mod__navlink-clickable-content___bzddC",
-    "fixed-menu": "navbar-mod__fixed-menu___42tD9",
-    "support-menu": "navbar-mod__support-menu___fi5Ka",
-    "tooltip-container": "navbar-mod__tooltip-container___iJYyi",
-    "tooltip": "navbar-mod__tooltip___1ID3j",
-    "sublist-collapsed__empty": "navbar-mod__sublist-collapsed__empty___FBUli",
-    "highlighted": "navbar-mod__highlighted___oJWkA",
-    "hidden": "navbar-mod__hidden___TQLSs",
-    "divider": "navbar-mod__divider___TpVzu",
-    "loading-dot-container": "navbar-mod__loading-dot-container___G2LVb",
-    "scrollable-menu": "navbar-mod__scrollable-menu___64pxJ"
-  }
-};
-const styles$1 = compiledStyles$1.jsonMap;
-const HeartIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./heart-01f01038.cjs.prod.js'); }));
-const PaperclipIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./paperclip-fe72a70d.cjs.prod.js'); }));
-const PluginIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./plugin-81ae1044.cjs.prod.js'); }));
-const RocketIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./rocket-cb99be06.cjs.prod.js'); }));
-const StarIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./star-e4902bbb.cjs.prod.js'); }));
-const ConnectedSquareIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./connected-square-2d046cb8.cjs.prod.js'); }));
-const WorldIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./world-22189397.cjs.prod.js'); }));
-const TreeStructureIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tree-structure-3ec98cce.cjs.prod.js'); }));
-const UserFilledIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-filled-26f333b2.cjs.prod.js'); }));
-const SpeedometerIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./speedometer-26f52e73.cjs.prod.js'); }));
-const TagMultiIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tag-multi-1c065f61.cjs.prod.js'); }));
-const CartIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./cart-645074db.cjs.prod.js'); }));
-const BoxIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./box-09bf50e1.cjs.prod.js'); }));
-const GearIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./gear-4f7cde98.cjs.prod.js'); }));
-const ListWithSearchIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./list-with-search-6462447e.cjs.prod.js'); }));
+const HeartIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./heart-01f01038.cjs.prod.js'); }));
+const PaperclipIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./paperclip-fe72a70d.cjs.prod.js'); }));
+const PluginIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./plugin-81ae1044.cjs.prod.js'); }));
+const RocketIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./rocket-cb99be06.cjs.prod.js'); }));
+const StarIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./star-e4902bbb.cjs.prod.js'); }));
+const ConnectedSquareIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./connected-square-2d046cb8.cjs.prod.js'); }));
+const WorldIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./world-22189397.cjs.prod.js'); }));
+const TreeStructureIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./tree-structure-3ec98cce.cjs.prod.js'); }));
+const UserFilledIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./user-filled-26f333b2.cjs.prod.js'); }));
+const SpeedometerIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./speedometer-26f52e73.cjs.prod.js'); }));
+const TagMultiIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./tag-multi-1c065f61.cjs.prod.js'); }));
+const CartIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./cart-645074db.cjs.prod.js'); }));
+const BoxIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./box-09bf50e1.cjs.prod.js'); }));
+const GearIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./gear-4f7cde98.cjs.prod.js'); }));
+const ListWithSearchIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./list-with-search-6462447e.cjs.prod.js'); }));
 // The icon is expected to be the `svg` document as a string.
 // 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 = _ref4 => {
-  let icon = _ref4.icon,
-    iconProps = _objectWithoutProperties(_ref4, _excluded);
+const IconSwitcher = _ref => {
+  let icon = _ref.icon,
+    iconProps = _objectWithoutProperties(_ref, _excluded);
   if (_includesInstanceProperty__default["default"](icon).call(icon, '<svg')) {
     return jsxRuntime.jsx(InlineSvg__default["default"], _objectSpread$2({
       data: icon
@@ -199,8 +275,8 @@ const IconSwitcher = _ref4 => {
 };
 IconSwitcher.propTypes = {};
 IconSwitcher.displayName = 'IconSwitcher';
-const getIcon = _ref5 => {
-  let isMenuOpen = _ref5.isMenuOpen;
+const getIcon = _ref2 => {
+  let isMenuOpen = _ref2.isMenuOpen;
   const Icon = isMenuOpen ? icons.SidebarCollapseIcon : icons.SidebarExpandIcon;
   return jsxRuntime.jsx(Icon, {
     color: "surface",
@@ -208,11 +284,9 @@ const getIcon = _ref5 => {
   });
 };
 const MenuExpander = props => {
-  return jsxRuntime.jsx("li", {
-    className: classnames__default["default"](styles$1.expander, {
-      [styles$1.hidden]: !props.isVisible
-    }),
-    children: jsxRuntime.jsx("div", {
+  return jsxRuntime.jsx(Expander, {
+    isVisible: props.isVisible,
+    children: jsxRuntime.jsx(ExpanderIcon, {
       onClick: props.onClick,
       onKeyDown: e => {
         if (e.key === 'Enter') {
@@ -220,7 +294,6 @@ const MenuExpander = props => {
         }
       },
       tabIndex: 0,
-      className: styles$1['expand-icon'],
       "data-testid": "menu-expander",
       children: getIcon(props)
     })
@@ -228,75 +301,54 @@ const MenuExpander = props => {
 };
 MenuExpander.propTypes = {};
 MenuExpander.displayName = 'MenuExpander';
-const Faded = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "ekdrmmp0"
-} )({
-  name: "16qr508",
-  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 _ref2 = {
-  name: "abcix4",
-  styles: "top:0"
-} ;
-var _ref3 = {
-  name: "8tapst",
-  styles: "bottom:0"
-} ;
-const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react$1.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.DIMENSIONS.navMenuItemHeight, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref3, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref2];
-var _ref = {
-  name: "6dhm9o",
-  styles: "visibility:hidden"
-} ;
-const MenuGroup = /*#__PURE__*/react.forwardRef((props, ref) => {
+const MenuGroup = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   if (props.isExpanded && (props.level === 2 && !props.hasSubmenu || props.level === 2 && !props.isActive)) {
     return null;
   }
-  const isSublistActiveWhileIsMenuExpanded = props.level === 2 && props.isActive && props.isExpanded;
-  const isSublistActiveWhileIsMenuCollapsed = props.level === 2 && props.isActive && !props.isExpanded;
-  return jsxRuntime.jsx("ul", {
+  const isSublistActiveWhileIsMenuExpanded = Boolean(props.level === 2 && props.isActive && props.isExpanded);
+  const isSublistActiveWhileIsMenuCollapsed = Boolean(props.level === 2 && props.isActive && !props.isExpanded);
+  return jsxRuntime.jsx(MenuList, {
     ref: ref && props.level === 2 ? ref : null,
-    css: /*#__PURE__*/react$1.css(getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), ";", props.submenuVerticalPosition === 0 && _ref, "::before{", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" ),
+    level: props.level,
     id: "group-".concat(props.id),
     "data-testid": "group-".concat(props.id),
     role: "menu",
     "aria-expanded": isSublistActiveWhileIsMenuExpanded || isSublistActiveWhileIsMenuCollapsed,
     className: classnames__default["default"]({
-      [styles$1.list]: props.level === 1
-    }, {
-      [styles$1['sublist']]: props.level === 2
-    }, {
-      [styles$1['sublist-expanded__active']]: isSublistActiveWhileIsMenuExpanded
+      'sublist-expanded__active': isSublistActiveWhileIsMenuExpanded
     }, {
-      [styles$1['sublist-collapsed__empty']]: isSublistActiveWhileIsMenuCollapsed && !props.hasSubmenu
+      'sublist-collapsed__empty': isSublistActiveWhileIsMenuCollapsed && !props.hasSubmenu
     }, {
-      [styles$1['sublist-collapsed__active']]: isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem
+      'sublist-collapsed__active': isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem
     }, {
-      [styles$1['sublist-collapsed__active__above']]: isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem
-    }, {
-      [styles$1.sublist__inactive]: !isSublistActiveWhileIsMenuCollapsed
+      'sublist-collapsed__active__above': isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem
     }),
+    isSublistActiveWhileIsMenuExpanded: isSublistActiveWhileIsMenuExpanded,
+    isSublistActiveWhileIsMenuCollapsed: isSublistActiveWhileIsMenuCollapsed,
+    isSublistCollapsedAndActive: isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem,
+    isSublistCollapsedAndActiveAndAbove: Boolean(isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem),
+    isSubmenuAboveMenuItem: props.isSubmenuAboveMenuItem,
+    submenuVerticalPosition: props.submenuVerticalPosition,
     children: props.children
   });
 });
 MenuGroup.displayName = 'MenuGroup';
 const MenuItem$1 = props => {
-  var _props$isMainMenuRout;
-  return jsxRuntime.jsx("li", {
+  return jsxRuntime.jsx(MenuListItem, {
     role: "menuitem",
-    className: classnames__default["default"](styles$1['list-item'], {
-      [styles$1.item__active]: props.isActive,
-      [styles$1['item_menu__active']]: (_props$isMainMenuRout = props.isMainMenuRouteActive) !== null && _props$isMainMenuRout !== void 0 ? _props$isMainMenuRout : false,
-      [styles$1['item_menu-collapsed']]: !props.isMenuOpen
-    }),
     onClick: props.onClick,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
     onFocus: props.onMouseEnter,
     onBlur: props.onMouseLeave,
     "data-menuitem": props.identifier,
-    children: jsxRuntime.jsx("div", {
-      className: styles$1['item-link'],
+    className: classnames__default["default"]({
+      active: props.isActive
+    }),
+    isActive: props.isActive,
+    isRouteActive: Boolean(props.isMainMenuRouteActive),
+    isCollapsed: !props.isMenuOpen,
+    children: jsxRuntime.jsx(ItemContent, {
       children: props.children
     })
   });
@@ -307,25 +359,15 @@ const menuItemLinkDefaultProps = {
   exactMatch: false
 };
 const NavLinkWrapper = props => {
-  if (props.isSubmenuLink) {
-    return jsxRuntime.jsx("div", {
-      className: styles$1['text-link-sublist-wrapper'],
-      children: props.children
-    });
-  }
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+  const Wrapper = props.isSubmenuLink ? TextLinkSublistWrapper : react$1.Fragment;
+  return jsxRuntime.jsx(Wrapper, {
     children: props.children
   });
 };
 NavLinkWrapper.propTypes = {};
 const NavLinkClickableContentWrapper = props => {
-  if (props.isSubmenuLink) {
-    return jsxRuntime.jsx("div", {
-      className: styles$1['navlink-clickable-content'],
-      children: props.children
-    });
-  }
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+  const Wrapper = props.isSubmenuLink ? NavlinkClickableContent : react$1.Fragment;
+  return jsxRuntime.jsx(Wrapper, {
     children: props.children
   });
 };
@@ -338,9 +380,9 @@ const MenuItemLink = props => {
       children: jsxRuntime.jsx(reactRouterDom.NavLink, {
         to: props.linkTo,
         exact: props.exactMatch,
-        activeClassName: styles$1.highlighted,
-        className: styles$1[linkLevel],
+        activeClassName: "highlighted",
         "data-link-level": linkLevel,
+        css: getMenuItemLinkStyles(Boolean(props.isSubmenuLink)),
         onClick: event => {
           if (props.linkTo && props.useFullRedirectsForLinks) {
             event.preventDefault();
@@ -428,32 +470,27 @@ MenuLabel.propTypes = {
   defaultLabel: _pt__default["default"].string,
   applicationLocale: _pt__default["default"].string.isRequired
 };
-const NavBarLayout$1 = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [jsxRuntime.jsx(react$1.Global, {
-    styles: /*#__PURE__*/react$1.css(compiledStyles$1.global, ";" + ("" ), "" )
-  }), jsxRuntime.jsx("nav", {
+const NavBarLayout$1 = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [jsxRuntime.jsx(react.Global, {
+    styles: leftNavigationOpenStyles
+  }), jsxRuntime.jsx(LeftNavigation, {
     ref: ref,
-    className: styles$1['left-navigation'],
-    "data-test": "left-navigation",
     "data-testid": "left-navigation",
     children: props.children
   })]
 }));
 NavBarLayout$1.displayName = 'NavBarLayout';
 const ItemContainer = props => {
-  return jsxRuntime.jsxs("div", {
-    className: styles$1['item-icon-text'],
-    children: [jsxRuntime.jsx("div", {
-      className: styles$1['icon-container'],
-      children: jsxRuntime.jsx("div", {
-        className: styles$1.icon,
+  return jsxRuntime.jsxs(ItemIconText, {
+    children: [jsxRuntime.jsx(IconWrapper, {
+      children: jsxRuntime.jsx(Icon, {
+        className: "icon",
         children: jsxRuntime.jsx(IconSwitcher, {
           icon: props.icon,
           size: "scale"
         })
       })
-    }), props.isMenuOpen ? jsxRuntime.jsx("div", {
-      className: styles$1.title,
+    }), props.isMenuOpen ? jsxRuntime.jsx(Title, {
       children: jsxRuntime.jsx(MenuLabel, {
         labelAllLocales: props.labelAllLocales,
         defaultLabel: props.defaultLabel,
@@ -475,7 +512,7 @@ var messages = reactIntl.defineMessages({
 const NavBarLayout = props => {
   return jsxRuntime.jsx("nav", {
     "aria-busy": true,
-    css: /*#__PURE__*/react$1.css("display:flex;flex-direction:column;height:100%;width:", props.isExpanded ? '256px' : '80px', ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("display:flex;flex-direction:column;height:100%;width:", props.isExpanded ? '256px' : '80px', ";" + ("" ), "" ),
     children: props.children
   });
 };
@@ -607,7 +644,7 @@ const isFocusOutEventCalledBySubmenuItem = event => {
 };
 const useNavbarStateManager = props => {
   var _context, _context2, _context4, _context5;
-  const navBarNode = react.useRef(null);
+  const navBarNode = react$1.useRef(null);
   const applicationsNavBarMenuGroups = useApplicationsMenu.useApplicationsMenu('navBarGroups', {
     queryOptions: {
       onError: sentry.reportErrorToSentry
@@ -659,11 +696,11 @@ const useNavbarStateManager = props => {
   if (isNil__default["default"](cachedIsForcedMenuOpen)) {
     window.localStorage.setItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN, String(isForcedMenuOpen));
   }
-  const _useReducer = react.useReducer(reducer, getInitialState(isForcedMenuOpen)),
+  const _useReducer = react$1.useReducer(reducer, getInitialState(isForcedMenuOpen)),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  const checkSize = react.useCallback(throttle__default["default"](() => {
+  const checkSize = react$1.useCallback(throttle__default["default"](() => {
     const shouldOpen = window.innerWidth > oidc.WINDOW_SIZES.STANDARD;
     const canExpandMenu = window.innerWidth > oidc.WINDOW_SIZES.WIDE;
 
@@ -703,7 +740,7 @@ const useNavbarStateManager = props => {
       });
     }
   }, 100), [isForcedMenuOpen, state.isExpanderVisible, state.isMenuOpen]);
-  const shouldCloseMenuFly = react.useCallback(event => {
+  const shouldCloseMenuFly = react$1.useCallback(event => {
     var _navBarNode$current;
     if (!(navBarNode !== null && navBarNode !== void 0 && (_navBarNode$current = navBarNode.current) !== null && _navBarNode$current !== void 0 && _navBarNode$current.contains(event.target)) && !state.isMenuOpen) {
       dispatch({
@@ -719,7 +756,7 @@ const useNavbarStateManager = props => {
       });
     }
   }, [state.isMenuOpen]);
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     window.addEventListener('resize', checkSize);
     window.addEventListener('click', shouldCloseMenuFly, true);
     window.addEventListener('focusout', shouldCloseMenuFly, true);
@@ -729,22 +766,22 @@ const useNavbarStateManager = props => {
       window.removeEventListener('focusout', shouldCloseMenuFly, true);
     };
   }, [checkSize, shouldCloseMenuFly]);
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     checkSize();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // <-- run this only once!!
 
-  react.useLayoutEffect(() => {
+  react$1.useLayoutEffect(() => {
     if (state.isMenuOpen) document.body.classList.add('body__menu-open');
     if (!state.isMenuOpen) document.body.classList.remove('body__menu-open');
   }, [state.isMenuOpen]);
-  const handleToggleItem = react.useCallback(nextActiveItemIndex => {
+  const handleToggleItem = react$1.useCallback(nextActiveItemIndex => {
     if (state.activeItemIndex !== nextActiveItemIndex) dispatch({
       type: 'setActiveItemIndex',
       payload: nextActiveItemIndex
     });
   }, [state.activeItemIndex]);
-  const handleToggleMenu = react.useCallback(() => {
+  const handleToggleMenu = react$1.useCallback(() => {
     if (state.isMenuOpen && state.activeItemIndex) {
       dispatch({
         type: 'unsetActiveItemIndex'
@@ -771,51 +808,6 @@ const useNavbarStateManager = props => {
 
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t))).call(_context11, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const compiledStyles = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n@keyframes navbar-mod__visible___AKV1b {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\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___Z6fOr {\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___Z6fOr .navbar-mod__icon-container___w3FtA {\n  width: auto;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar-mod__navigation-header___Z6fOr .navbar-mod__title___eRWUj {\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___AKV1b 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__navigation-header___Z6fOr .navbar-mod__icon___bLsep {\n  width: 24px;\n  height: 24px;\n}\n\n.navbar-mod__list___RCV3J {\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___MjK6t {\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___X2Ina {\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___X2Ina {\n  width: 100%;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__item-icon-text___a-8JY {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon___bLsep {\n  width: 24px;\n  height: 24px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___MjK6t:hover .navbar-mod__icon___bLsep,\n.navbar-mod__list-item___MjK6t:focus-within .navbar-mod__icon___bLsep {\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___MjK6t .navbar-mod__icon___bLsep > svg *:not([fill='none']) {\n  fill: var(--color-surface);\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\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___jyAUi {\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___jyAUi:hover,\n.navbar-mod__expander___jyAUi:focus {\n  background-color: var(--color-primary-40);\n}\n\n/* divider */\n\n.navbar-mod__expander___jyAUi::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___BtmRa {\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___BtmRa:hover,\n.navbar-mod__expand-icon___BtmRa:focus {\n  background: rgba(255, 255, 255, 0.3);\n  cursor: pointer;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item_menu__active___5xFRw):hover,\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item_menu__active___5xFRw):focus-within {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\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___MjK6t {\n  height: auto;\n  min-height: 48px;\n  width: 100%;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\n  width: 256px;\n  transition: all 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\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___AKV1b 150ms cubic-bezier(1, 0, 0.58, 1);\n}\n\n.navbar-mod__list-item___MjK6t:hover .navbar-mod__title___eRWUj,\n.navbar-mod__list-item___MjK6t:focus-within .navbar-mod__title___eRWUj {\n  margin-left: calc(var(--spacing-25) + 2px);\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__icon___bLsep > svg *:not([fill='none']),\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):focus-within .navbar-mod__icon___bLsep > 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___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__title___eRWUj,\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):focus-within .navbar-mod__title___eRWUj {\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___lo1sr {\n  max-height: 500px;\n  transition: max-height 0.25s ease-in;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\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___240JK::before,\n.navbar-mod__sublist-collapsed__active___-9vYh::before,\n.navbar-mod__sublist-collapsed__active__above___BXCeM::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___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n}\n\n.navbar-mod__sublist-item__active___QC6pa {\n  border-radius: var(--border-radius-4);\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):hover,\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):focus-within {\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}\n\n.navbar-mod__text___ccHEu {\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___dhtj6 {\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___dhtj6 {\n  justify-content: start;\n}\n\n.navbar-mod__text-link-sublist-wrapper___1JN4x {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 0;\n}\n\n.navbar-mod__text-link-sublist___AoIpU {\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\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  transition: padding 150ms ease-out;\n}\n\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):hover .navbar-mod__text-link-sublist___AoIpU,\n.navbar-mod__sublist-item___gafkS:not(.navbar-mod__sublist-item__active___QC6pa):focus-within .navbar-mod__text-link-sublist___AoIpU {\n  /* additional left padding on hover and focus */\n  padding: var(--spacing-25) var(--spacing-25) var(--spacing-25)\n    calc(var(--spacing-30) + var(--spacing-20));\n}\n\n.navbar-mod__navlink-clickable-content___bzddC {\n  height: 100%;\n  width: 100%;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr,\n.navbar-mod__item_menu__active___5xFRw,\n.navbar-mod__item_menu__active___5xFRw:focus-within .navbar-mod__list-item___MjK6t {\n  background: var(--color-accent-30);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-self: flex-start;\n}\n\n.navbar-mod__fixed-menu___42tD9 .navbar-mod__list-item___MjK6t .navbar-mod__item-icon-text___a-8JY {\n  justify-content: center;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__support-menu___fi5Ka {\n  padding: var(--spacing-10) var(--spacing-30) var(--spacing-20)\n    var(--spacing-30);\n  height: calc(48px + var(--spacing-20));\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  position: relative;\n  width: auto;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  margin-left: 0;\n}\n\n.navbar-mod__tooltip-container___iJYyi {\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___1ID3j {\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___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__sublist-collapsed__active__above___BXCeM {\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___X2Ina:hover .navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-collapsed__active__above___BXCeM,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active___-9vYh,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active__above___BXCeM,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-expanded__active___240JK {\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___X2Ina:hover .navbar-mod__sublist-collapsed__active___-9vYh.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-collapsed__active__above___BXCeM.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-collapsed__active___-9vYh.navbar-mod__sublist-collapsed__empty___FBUli,\n.navbar-mod__item-link___X2Ina:focus-within\n  .navbar-mod__sublist-collapsed__active__above___BXCeM.navbar-mod__sublist-collapsed__empty___FBUli {\n  visibility: hidden;\n}\n\n.navbar-mod__item-link___X2Ina:hover .navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__item-link___X2Ina:focus-within .navbar-mod__sublist-expanded__active___240JK {\n  left: 248px;\n}\n\n.navbar-mod__highlighted___oJWkA,\n.navbar-mod__highlighted___oJWkA .navbar-mod__title___eRWUj {\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___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider___TpVzu {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\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___64pxJ {\n  width: 256px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ:hover {\n  overflow-y: scroll;\n  padding-right: 8px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar {\n  width: 8px;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navbar-mod__scrollable-menu___64pxJ::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary-40);\n  border-radius: var(--border-radius-8);\n}\n\n.navbar-mod__fixed-menu___42tD9 {\n  position: relative;\n  width: 80px;\n}\n\n.body__menu-open .navbar-mod__fixed-menu___42tD9 {\n  width: 256px;\n}\n",
-  "jsonMap": {
-    "left-navigation": "navbar-mod__left-navigation___n7yUt",
-    "navigation-header": "navbar-mod__navigation-header___Z6fOr",
-    "icon-container": "navbar-mod__icon-container___w3FtA",
-    "title": "navbar-mod__title___eRWUj",
-    "visible": "navbar-mod__visible___AKV1b",
-    "icon": "navbar-mod__icon___bLsep",
-    "list": "navbar-mod__list___RCV3J",
-    "list-item": "navbar-mod__list-item___MjK6t",
-    "item-link": "navbar-mod__item-link___X2Ina",
-    "item-icon-text": "navbar-mod__item-icon-text___a-8JY",
-    "expander": "navbar-mod__expander___jyAUi",
-    "expand-icon": "navbar-mod__expand-icon___BtmRa",
-    "item--bottom": "navbar-mod__item--bottom___eW7nh",
-    "item_menu__active": "navbar-mod__item_menu__active___5xFRw",
-    "item_menu-open": "navbar-mod__item_menu-open___zk0zh",
-    "item_menu-collapsed": "navbar-mod__item_menu-collapsed___cluyY",
-    "item__active": "navbar-mod__item__active___lo1sr",
-    "sublist": "navbar-mod__sublist___os1s7",
-    "sublist-expanded__active": "navbar-mod__sublist-expanded__active___240JK",
-    "sublist-collapsed__active": "navbar-mod__sublist-collapsed__active___-9vYh",
-    "sublist-collapsed__active__above": "navbar-mod__sublist-collapsed__active__above___BXCeM",
-    "sublist__inactive": "navbar-mod__sublist__inactive___kJvf-",
-    "sublist-item": "navbar-mod__sublist-item___gafkS",
-    "sublist-item__active": "navbar-mod__sublist-item__active___QC6pa",
-    "text": "navbar-mod__text___ccHEu",
-    "text-link": "navbar-mod__text-link___dhtj6",
-    "text-link-sublist-wrapper": "navbar-mod__text-link-sublist-wrapper___1JN4x",
-    "text-link-sublist": "navbar-mod__text-link-sublist___AoIpU",
-    "navlink-clickable-content": "navbar-mod__navlink-clickable-content___bzddC",
-    "fixed-menu": "navbar-mod__fixed-menu___42tD9",
-    "support-menu": "navbar-mod__support-menu___fi5Ka",
-    "tooltip-container": "navbar-mod__tooltip-container___iJYyi",
-    "tooltip": "navbar-mod__tooltip___1ID3j",
-    "sublist-collapsed__empty": "navbar-mod__sublist-collapsed__empty___FBUli",
-    "highlighted": "navbar-mod__highlighted___oJWkA",
-    "hidden": "navbar-mod__hidden___TQLSs",
-    "divider": "navbar-mod__divider___TpVzu",
-    "loading-dot-container": "navbar-mod__loading-dot-container___G2LVb",
-    "scrollable-menu": "navbar-mod__scrollable-menu___64pxJ"
-  }
-}; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
-const styles = compiledStyles.jsonMap;
 const getMenuVisibilitiesOfSubmenus = menu => {
   var _context, _context2;
   return _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = menu.submenu).call(_context2, submenu => submenu.menuVisibility)).call(_context, nonNullable);
@@ -831,18 +823,18 @@ const getIsSubmenuRouteActive = (uriPath, props) => {
 };
 const ApplicationMenu = props => {
   var _context4, _props$menu$featureTo, _props$menu$actionRig, _props$menu$dataFence, _context5, _context6;
-  const _useState = react.useState(0),
+  const _useState = react$1.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     submenuVerticalPosition = _useState2[0],
     setSubmenuVerticalPosition = _useState2[1];
-  const _useState3 = react.useState(false),
+  const _useState3 = react$1.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isSubmenuAboveMenuItem = _useState4[0],
     setIsSubmenuAboveMenuItem = _useState4[1];
-  const submenuRef = react.useRef(null);
+  const submenuRef = react$1.useRef(null);
   const hasSubmenu = _Array$isArray__default["default"](props.menu.submenu) && props.menu.submenu.length > 0;
   const menuItemIdentifier = snakeCase__default["default"](props.menu.key);
-  const callbackFn = react.useCallback(entries => {
+  const callbackFn = react$1.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;
@@ -860,8 +852,8 @@ const ApplicationMenu = props => {
       setSubmenuVerticalPosition(props.isMenuOpen ? menuItemTop : menuItemBottom);
     }
   }, [menuItemIdentifier, props.isMenuOpen]);
-  const observerRef = react.useRef(null);
-  react.useLayoutEffect(() => {
+  const observerRef = react$1.useRef(null);
+  react$1.useLayoutEffect(() => {
     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
     });
@@ -871,7 +863,7 @@ const ApplicationMenu = props => {
       return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
     };
   }, [callbackFn, props.isMenuOpen]);
-  react.useLayoutEffect(() => {
+  react$1.useLayoutEffect(() => {
     const currentSubmenuRef = submenuRef.current;
     const observer = observerRef.current;
     if (!currentSubmenuRef) return;
@@ -885,7 +877,7 @@ const ApplicationMenu = props => {
     exact: false,
     strict: false
   }));
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     // On first render, check which menu is active for the current application and expand
     // the submenu automatically unless the all navbar is collapsed or there are no submenu links.
     if (props.isMenuOpen && isMainMenuRouteActive && hasSubmenu) {
@@ -933,11 +925,9 @@ const ApplicationMenu = props => {
         submenuVerticalPosition: submenuVerticalPosition,
         isSubmenuAboveMenuItem: isSubmenuAboveMenuItem,
         ref: submenuRef,
-        children: [!props.isMenuOpen && jsxRuntime.jsx("div", {
-          className: styles['tooltip-container'],
-          css: /*#__PURE__*/react$1.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.DIMENSIONS.navMenuItemHeight, ";" + ("" ), "" ),
-          children: jsxRuntime.jsx("div", {
-            className: styles['tooltip'],
+        children: [!props.isMenuOpen && jsxRuntime.jsx(TooltipContainer, {
+          alignsAgainstBottom: isSubmenuAboveMenuItem,
+          children: jsxRuntime.jsx(Tooltip, {
             "aria-owns": "group-".concat(props.menu.key),
             children: jsxRuntime.jsx(MenuLabel, {
               labelAllLocales: props.menu.labelAllLocales,
@@ -956,12 +946,9 @@ const ApplicationMenu = props => {
             projectPermissions: props.projectPermissions,
             menuVisibilities: props.menuVisibilities,
             namesOfMenuVisibilities: submenu.menuVisibility ? [submenu.menuVisibility] : undefined,
-            children: jsxRuntime.jsx("li", {
-              className: classnames__default["default"](styles['sublist-item'], {
-                [styles['sublist-item__active']]: getIsSubmenuRouteActive(submenu.uriPath, props)
-              }),
-              children: jsxRuntime.jsx("div", {
-                className: styles.text,
+            children: jsxRuntime.jsx(SublistItem, {
+              isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
+              children: jsxRuntime.jsx(Text, {
                 children: jsxRuntime.jsx(MenuItemLink, {
                   linkTo: _concatInstanceProperty__default["default"](_context8 = "/".concat(props.projectKey, "/")).call(_context8, submenu.uriPath)
                   // We want to use an exact matching strategy to avoid multiple
@@ -1001,7 +988,7 @@ const NavBar = props => {
     allApplicationsNavbarMenuGroups = _useNavbarStateManage.allApplicationsNavbarMenuGroups;
   const useFullRedirectsForLinks = Boolean(props.environment.useFullRedirectsForLinks);
   const location = reactRouterDom.useLocation();
-  const projectPermissions = react.useMemo(() => {
+  const projectPermissions = react$1.useMemo(() => {
     var _props$project, _props$project2, _props$project3;
     return {
       permissions: applicationShellConnectors.normalizeAllAppliedPermissions((_props$project = props.project) === null || _props$project === void 0 ? void 0 : _props$project.allPermissionsForAllApplications.allAppliedPermissions),
@@ -1009,7 +996,7 @@ const NavBar = props => {
       dataFences: applicationShellConnectors.normalizeAllAppliedDataFences((_props$project3 = props.project) === null || _props$project3 === void 0 ? void 0 : _props$project3.allPermissionsForAllApplications.allAppliedDataFences)
     };
   }, [props.project]);
-  const menuVisibilities = react.useMemo(() => {
+  const menuVisibilities = react$1.useMemo(() => {
     var _props$project4;
     return applicationShellConnectors.normalizeAllAppliedMenuVisibilities((_props$project4 = props.project) === null || _props$project4 === void 0 ? void 0 : _props$project4.allPermissionsForAllApplications.allAppliedMenuVisibilities);
   }, [props.project]);
@@ -1024,27 +1011,22 @@ const NavBar = props => {
   }
   return jsxRuntime.jsxs(NavBarLayout$1, {
     ref: navBarNode,
-    children: [jsxRuntime.jsxs("div", {
-      className: styles['navigation-header'],
-      children: [jsxRuntime.jsx("div", {
-        className: styles['icon-container'],
-        children: jsxRuntime.jsx("div", {
-          className: styles['icon'],
+    children: [jsxRuntime.jsxs(NavigationHeader, {
+      children: [jsxRuntime.jsx(IconWrapper, {
+        children: jsxRuntime.jsx(Icon, {
           children: jsxRuntime.jsx("img", {
             src: LogoSVG__default["default"],
             width: "100%",
             alt: "Logo"
           })
         })
-      }), isMenuOpen ? jsxRuntime.jsx("div", {
-        className: styles['title'],
+      }), isMenuOpen ? jsxRuntime.jsx(HeaderTitle, {
         children: "Merchant Center"
       }) : null]
     }), jsxRuntime.jsxs(MenuGroup, {
       id: "main",
       level: 1,
-      children: [jsxRuntime.jsx("div", {
-        className: styles['scrollable-menu'],
+      children: [jsxRuntime.jsx(ScrollableMenu, {
         children: jsxRuntime.jsx(Spacings__default["default"].Stack, {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
@@ -1071,10 +1053,8 @@ const NavBar = props => {
             }, navbarMenuGroup.key);
           })
         })
-      }), jsxRuntime.jsxs("div", {
-        className: styles['fixed-menu'],
-        children: [jsxRuntime.jsx(Faded, {}), jsxRuntime.jsx("div", {
-          className: styles['support-menu'],
+      }), jsxRuntime.jsxs(FixedMenu, {
+        children: [jsxRuntime.jsx(Faded, {}), jsxRuntime.jsx(SupportMenu, {
           children: jsxRuntime.jsx(MenuItem$1, {
             hasSubmenu: false,
             isActive: false,
@@ -1084,23 +1064,19 @@ const NavBar = props => {
             },
             onMouseEnter: isMenuOpen ? undefined : () => handleToggleItem('fixed-support'),
             onMouseLeave: isMenuOpen ? undefined : shouldCloseMenuFly,
-            children: jsxRuntime.jsx("a", {
+            children: jsxRuntime.jsx(TextLink, {
               href: constants.SUPPORT_PORTAL_URL,
               rel: "noopener noreferrer",
               target: "_blank",
-              className: styles['text-link'],
-              children: jsxRuntime.jsxs("div", {
-                className: styles['item-icon-text'],
-                children: [jsxRuntime.jsx("div", {
-                  className: styles['icon-container'],
-                  children: jsxRuntime.jsx("div", {
-                    className: styles['icon'],
+              children: jsxRuntime.jsxs(ItemIconText, {
+                children: [jsxRuntime.jsx(IconWrapper, {
+                  children: jsxRuntime.jsx(Icon, {
+                    className: "icon",
                     children: jsxRuntime.jsx(icons.SupportIcon, {
                       size: "scale"
                     })
                   })
-                }), isMenuOpen ? jsxRuntime.jsx("div", {
-                  className: styles.title,
+                }), isMenuOpen ? jsxRuntime.jsx(Title, {
                   children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
                 }) : null]
               })