@commercetools-frontend/application-shell 21.21.0 → 21.21.2

package/dist/{index-04ba50dc.cjs.prod.js → index-5581e4ca.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-27b3556f.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-c7c9a0b7.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,7 +24,7 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
-var constants = require('./constants-d3b01ef6.cjs.prod.js');
+var constants = require('./constants-88fb9ef8.cjs.prod.js');
 var uuid = require('uuid');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -38,7 +38,7 @@ var reactRedux = require('react-redux');
 var history = require('@commercetools-frontend/browser-history');
 var reactIntl = require('react-intl');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
-var oidc = require('./oidc-2de78d6b.cjs.prod.js');
+var oidc = require('./oidc-1c91f5ee.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
@@ -1334,7 +1334,7 @@ ApplicationShellProvider.displayName = 'ApplicationShellProvider'; // This is us
 
 ApplicationShellProvider.history = history__default["default"];
 
-var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultProjectKey" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "idTokenUserInfo" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "iss" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "sub" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "aud" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "exp" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "iat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "additionalClaims" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "verificationStatus" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 663, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    defaultProjectKey\n    businessRole\n    projects {\n      total\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n    idTokenUserInfo {\n      iss\n      sub\n      aud\n      exp\n      iat\n      email\n      name\n      additionalClaims\n    }\n    verificationStatus\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultProjectKey" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "idTokenUserInfo" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "iss" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "sub" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "aud" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "exp" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "iat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "additionalClaims" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 640, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    defaultProjectKey\n    businessRole\n    projects {\n      total\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n    idTokenUserInfo {\n      iss\n      sub\n      aud\n      exp\n      iat\n      email\n      name\n      additionalClaims\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 
 var FetchUser = function FetchUser(props) {
   var _useMcQuery = useMcQuery(LoggedInUserQuery, {
@@ -1635,7 +1635,7 @@ var messages$5 = reactIntl.defineMessages({
 
 function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$9(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$9(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var MENU_LABEL_ID = 'user-menu-setting-menu-label';
 
 var UserAvatar = function UserAvatar(props) {
@@ -1650,6 +1650,10 @@ var UserAvatar = function UserAvatar(props) {
   var handleMouseOut = react.useCallback(function () {
     setIsMouseOver(false);
   }, []);
+
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   return jsxRuntime.jsx("div", {
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
@@ -1660,7 +1664,7 @@ var UserAvatar = function UserAvatar(props) {
         firstName: props.firstName,
         lastName: props.lastName,
         isHighlighted: isMouseOver
-      }), jsxRuntime.jsx(icons.CaretDownIcon, {
+      }), theme === 'test' ? null : jsxRuntime.jsx(icons.CaretDownIcon, {
         size: "small",
         color: isMouseOver ? 'neutral60' : 'solid'
       })]
@@ -1720,10 +1724,50 @@ var renderLabel = function renderLabel(menu, applicationLanguage) {
 
 var MenuItem$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1al5ftg0"
-} )("width:100%;cursor:pointer;color:", designSystem.customProperties.colorSolid, ";:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}", function (props) {
-  return props.hasDivider === true ? /*#__PURE__*/react$2.css("border-bottom:1px solid ", designSystem.customProperties.colorNeutral, ";" + ("" ), "" ) : '';
+} )("width:100%;cursor:pointer;color:", designSystem.designTokens.colorSolid, ";:hover{background-color:", applicationComponents.designTokens.backgroundColorForUserMenuItemWhenHovered, ";}", function (props) {
+  return props.hasDivider === true ? /*#__PURE__*/react$2.css("border-bottom:1px solid ", designSystem.designTokens.colorNeutral, ";margin:", applicationComponents.designTokens.marginForUserMenuItem, ";" + ("" ), "" ) : '';
 }, ";" + ("" ));
 
+var MenuItemLabel = function MenuItemLabel(props) {
+  if (props.theme === 'test') {
+    return jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$2.css("padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+      children: props.children
+    });
+  }
+
+  return jsxRuntime.jsx(Spacings__default["default"].Inset, {
+    scale: "s",
+    children: props.children
+  });
+};
+
+MenuItemLabel.propTypes = {};
+
+var UserSettingsAvatarContainer = function UserSettingsAvatarContainer(props) {
+  if (props.theme === 'test') {
+    return jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$2.css("padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+      children: props.children
+    });
+  }
+
+  return jsxRuntime.jsx(Spacings__default["default"].Inset, {
+    scale: "xs",
+    children: props.children
+  });
+};
+
+UserSettingsAvatarContainer.propTypes = {};
+
+var getUserSettingsMenuStyles = function getUserSettingsMenuStyles(theme) {
+  if (theme === 'test') {
+    return /*#__PURE__*/react$2.css("position:absolute;background:", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius2, ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);width:", designSystem.designTokens.constraint9, ";right:40px;top:calc(", constants.DIMENSIONS.header, " + ", designSystem.designTokens.spacing20, ");padding:0 0 ", designSystem.designTokens.spacing10, " 0;overflow:hidden;" + ("" ), "" );
+  }
+
+  return /*#__PURE__*/react$2.css("position:absolute;background:", designSystem.designTokens.colorSurface, ";border:1px ", designSystem.designTokens.colorPrimary40, " solid;border-radius:", designSystem.designTokens.borderRadius6, ";box-shadow:", designSystem.designTokens.shadow7, ";width:", designSystem.designTokens.constraint7, ";right:14px;top:calc(", constants.DIMENSIONS.header, " + ", designSystem.designTokens.spacing20, ");padding:", designSystem.designTokens.spacingXs, ";overflow:hidden;" + ("" ), "" );
+};
+
 var _ref2$3 = {
   name: "4zleql",
   styles: "display:block"
@@ -1734,9 +1778,12 @@ var getUserSettingsMenuItemLinkStyles = function getUserSettingsMenuItemLinkStyl
 };
 
 var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
-  var _context2;
+  var _context2, _context3;
+
+  var _useTheme2 = designSystem.useTheme(),
+      theme = _useTheme2.theme; // Focus on a menu item when it's opened through keyboard
+
 
-  // Focus on a menu item when it's opened through keyboard
   var menuElementRef = react.useRef(null);
   react.useEffect(function () {
     var _menuElementRef$curre;
@@ -1752,34 +1799,47 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
     },
     environment: environment
   });
+  var accountMenuItems = applicationsAppBarMenu !== null && applicationsAppBarMenu !== void 0 ? applicationsAppBarMenu : [];
   return jsxRuntime.jsx("div", {
     onKeyDown: function onKeyDown(event) {
       if (event.key === 'Esc' || event.key === 'Tab' && !getIsFocusedElementInMenu()) {
         props.downshiftProps.closeMenu();
       }
     },
-    css: /*#__PURE__*/react$2.css("position:absolute;background:", designSystem.customProperties.colorSurface, ";border:1px ", designSystem.customProperties.colorPrimary40, " solid;border-radius:", designSystem.customProperties.borderRadius6, ";box-shadow:", designSystem.customProperties.shadow7, ";width:315px;right:14px;top:40px;padding:", designSystem.customProperties.spacingXs, ";overflow:hidden;" + ("" ), "" ),
+    css: getUserSettingsMenuStyles(theme),
     children: jsxRuntime.jsxs("div", _objectSpread$9(_objectSpread$9({}, props.downshiftProps.getMenuProps()), {}, {
-      children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
-        scale: "xs",
+      children: [jsxRuntime.jsx(UserSettingsAvatarContainer, {
+        theme: theme,
         children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-          scale: "xs",
+          scale: theme === 'test' ? 'm' : 'xs',
           alignItems: "center",
           children: [jsxRuntime.jsx(Avatar__default["default"], {
             firstName: props.firstName,
             lastName: props.lastName,
             gravatarHash: props.gravatarHash
-          }), jsxRuntime.jsxs("div", {
+          }), theme === 'test' ? jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx(Text__default["default"].Subheadline, {
+              as: "h4",
+              children: _trimInstanceProperty__default["default"](_context2 = [props.firstName, props.lastName].join(' ')).call(_context2)
+            }), jsxRuntime.jsx(Text__default["default"].Detail, {
+              truncate: true,
+              tone: "secondary",
+              children: props.email
+            })]
+          }) : jsxRuntime.jsxs("div", {
             children: [jsxRuntime.jsx(Text__default["default"].Body, {
               isBold: true,
-              children: _trimInstanceProperty__default["default"](_context2 = [props.firstName, props.lastName].join(' ')).call(_context2)
+              children: _trimInstanceProperty__default["default"](_context3 = [props.firstName, props.lastName].join(' ')).call(_context3)
             }), jsxRuntime.jsx(Text__default["default"].Body, {
               truncate: true,
               children: props.email
             })]
           })]
         })
-      }), applicationsAppBarMenu === null || applicationsAppBarMenu === void 0 ? void 0 : _mapInstanceProperty__default["default"](applicationsAppBarMenu).call(applicationsAppBarMenu, function (menu) {
+      }), theme === 'test' && accountMenuItems.length > 0 ? jsxRuntime.jsx(MenuItem$1, {
+        hasDivider: true,
+        theme: theme
+      }) : null, _mapInstanceProperty__default["default"](accountMenuItems).call(accountMenuItems, function (menu) {
         var _menu$featureToggle;
 
         return jsxRuntime.jsx(OptionalFeatureToggle, {
@@ -1793,15 +1853,19 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
             "data-user-settings-menu": true,
             ref: menuElementRef,
             children: jsxRuntime.jsx(MenuItem$1, {
-              children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
-                scale: "s",
-                children: renderLabel(menu, props.language)
+              theme: theme,
+              children: jsxRuntime.jsx(MenuItemLabel, {
+                theme: theme,
+                children: jsxRuntime.jsx(Text__default["default"].Body, {
+                  children: renderLabel(menu, props.language)
+                })
               })
             })
           })
         }, menu.key);
       }), jsxRuntime.jsx(MenuItem$1, {
-        hasDivider: true
+        hasDivider: true,
+        theme: theme
       }), jsxRuntime.jsx("a", {
         css: getUserSettingsMenuItemLinkStyles(),
         href: "https://commercetools.com/privacy#suppliers",
@@ -1813,9 +1877,12 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         "data-user-settings-menu": true,
         ref: !applicationsAppBarMenu ? menuElementRef : undefined,
         children: jsxRuntime.jsx(MenuItem$1, {
-          children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
-            scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.privacyPolicy))
+          theme: theme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            theme: theme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages$5.privacyPolicy
+            })
           })
         })
       }), jsxRuntime.jsx("a", {
@@ -1831,13 +1898,17 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         },
         "data-user-settings-menu": true,
         children: jsxRuntime.jsx(MenuItem$1, {
-          children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
-            scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.support))
+          theme: theme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            theme: theme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages$5.support
+            })
           })
         })
       }), jsxRuntime.jsx(MenuItem$1, {
-        hasDivider: true
+        hasDivider: true,
+        theme: theme
       }), jsxRuntime.jsxs("a", {
         css: getUserSettingsMenuItemLinkStyles() // NOTE: we want to redirect to a new page so that the
         // server can remove things like cookie for access token.
@@ -1846,9 +1917,12 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         "data-test": "logout-button",
         "data-user-settings-menu": true,
         children: [jsxRuntime.jsx(MenuItem$1, {
-          children: jsxRuntime.jsx(Spacings__default["default"].Inset, {
-            scale: "s",
-            children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$5.logout))
+          theme: theme,
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            theme: theme,
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages$5.logout
+            })
           })
         }), jsxRuntime.jsx("div", {
           tabIndex: 0,
@@ -1940,40 +2014,40 @@ function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) {
 var ProjectsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchUserProjects" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }], loc: { start: 0, end: 218, source: { body: "query FetchUserProjects {\n  user: me {\n    id\n    projects {\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
 
-var _ref4$1 = {
+var _ref3$1 = {
   name: "82a6rk",
   styles: "flex:1"
 } ;
 
-var _ref5 = {
+var _ref4$1 = {
   name: "zol16h",
   styles: "display:flex;flex:1;align-items:center"
 } ;
 
-var ProjectSwitcherValueContainer = function ProjectSwitcherValueContainer(_ref6) {
-  var projectCount = _ref6.projectCount,
-      restProps = _objectWithoutProperties(_ref6, _excluded$1);
+var ProjectSwitcherValueContainer = function ProjectSwitcherValueContainer(_ref5) {
+  var projectCount = _ref5.projectCount,
+      restProps = _objectWithoutProperties(_ref5, _excluded$1);
 
   return jsxRuntime.jsxs("div", {
-    css: _ref5,
+    css: _ref4$1,
     children: [jsxRuntime.jsx("div", {
-      css: _ref4$1,
+      css: _ref3$1,
       children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
         children: restProps.children
       }))
     }), jsxRuntime.jsx("span", {
-      css: /*#__PURE__*/react$2.css("width:22px;height:22px;border-radius:100%;background:", designSystem.customProperties.colorAccent40, ";color:", designSystem.customProperties.colorSurface, ";font-size:0.9rem;display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
+      css: /*#__PURE__*/react$2.css("width:22px;height:22px;border-radius:100%;background:", designSystem.designTokens.colorAccent40, ";color:", designSystem.designTokens.colorSurface, ";font-size:0.9rem;display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
       children: projectCount
     })]
   });
 };
 
-var _ref2$2 = {
+var _ref$3 = {
   name: "16lqnjx",
   styles: "font-size:1.5rem;display:flex"
 } ;
 
-var _ref3$1 = {
+var _ref2$2 = {
   name: "10s3lzp",
   styles: "word-wrap:break-word"
 } ;
@@ -1982,23 +2056,23 @@ var ProjectSwitcherOption = function ProjectSwitcherOption(props) {
   var project = props.data;
   return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$8(_objectSpread$8({}, props), {}, {
     children: jsxRuntime.jsxs("div", {
-      css: _ref3$1,
+      css: _ref2$2,
       children: [jsxRuntime.jsxs("div", {
-        css: /*#__PURE__*/react$2.css("color:", props.isDisabled ? designSystem.customProperties.colorNeutral : designSystem.customProperties.colorAccent, ";" + ("" ), "" ),
+        css: /*#__PURE__*/react$2.css("color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
         children: [project.name, props.isDisabled && jsxRuntime.jsx("span", {
-          css: _ref2$2,
+          css: _ref$3,
           children: jsxRuntime.jsx(icons.ErrorIcon, {
             size: "medium"
           })
         })]
       }), jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$2.css("font-size:11px;color:", props.isDisabled ? designSystem.customProperties.colorNeutral : 'inherit', ";" + ("" ), "" ),
+        css: /*#__PURE__*/react$2.css("font-size:11px;color:", props.isDisabled ? designSystem.designTokens.colorNeutral : 'inherit', ";" + ("" ), "" ),
         children: project.key
       }), project.suspension && project.suspension.isActive && jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
+        css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
         children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.suspended))
       }), project.expiry && project.expiry.isActive && jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.customProperties.colorError, ";" + ("" ), "" ),
+        css: /*#__PURE__*/react$2.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
         children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.expired))
       })]
     })
@@ -2021,11 +2095,6 @@ var redirectTo = function redirectTo(targetUrl) {
   return applicationEntryPoint.location.replace(targetUrl);
 };
 
-var _ref$3 = {
-  name: "1i30uc2",
-  styles: "width:225px"
-} ;
-
 var ProjectSwitcher = function ProjectSwitcher(props) {
   var intl = reactIntl.useIntl();
 
@@ -2040,7 +2109,7 @@ var ProjectSwitcher = function ProjectSwitcher(props) {
 
   if (loading) return null;
   return jsxRuntime.jsxs("div", {
-    css: _ref$3,
+    css: /*#__PURE__*/react$2.css("width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
     "data-track-component": "ProjectSwitch",
     "data-track-event": "click",
     children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
@@ -2229,7 +2298,7 @@ var AppBar = function AppBar(props) {
 
   var previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$2.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow1, ";min-height:", constants.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    css: /*#__PURE__*/react$2.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", applicationComponents.designTokens.shadowForAppbar, ";min-height:", constants.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
     "data-test": "top-navigation",
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       children: [jsxRuntime.jsx("div", {
@@ -2251,11 +2320,12 @@ var AppBar = function AppBar(props) {
         css: _ref$2
       })]
     }), jsxRuntime.jsx("div", {
-      css: /*#__PURE__*/react$2.css("float:right;font-weight:normal;font-size:1rem;margin-right:", designSystem.customProperties.spacingM, ";display:flex;align-items:center;" + ("" ), "" ),
+      css: /*#__PURE__*/react$2.css("float:right;font-weight:normal;font-size:1rem;margin-right:", applicationComponents.designTokens.marginRightForAppbar, ";display:flex;align-items:center;" + ("" ), "" ),
       children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
         scale: "m",
         alignItems: "center",
         children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: "m",
           alignItems: "center",
           children: [jsxRuntime.jsx("div", {
             id: constants.CONTAINERS.LOCALE_SWITCHER
@@ -2283,7 +2353,7 @@ var AppBar = function AppBar(props) {
             });
           }()]
         }), jsxRuntime.jsx("div", {
-          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:", constants.DIMENSIONS.header, ";" + ("" ), "" )
+          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.designTokens.colorNeutral90, " solid;height:", constants.DIMENSIONS.headerItemDivider, ";" + ("" ), "" )
         }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
           language: props.user.language,
           firstName: props.user.firstName,
@@ -2325,10 +2395,10 @@ var _SingleValue = function SingleValue(props) {
     children: [jsxRuntime.jsx(icons.WorldIcon, {
       size: "big"
     }), jsxRuntime.jsx("span", {
-      css: /*#__PURE__*/react$2.css("margin-left:2px;flex:1;color:", designSystem.customProperties.colorAccent, ";" + ("" ), "" ),
+      css: /*#__PURE__*/react$2.css("margin-left:2px;flex:1;color:", designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
       children: props.children
     }), jsxRuntime.jsx("span", {
-      css: /*#__PURE__*/react$2.css("width:22px;height:22px;border-radius:100%;background:", designSystem.customProperties.colorAccent40, ";color:", designSystem.customProperties.colorSurface, ";font-size:0.9rem;display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
+      css: /*#__PURE__*/react$2.css("width:22px;height:22px;border-radius:100%;background:", designSystem.designTokens.colorAccent40, ";color:", designSystem.designTokens.colorSurface, ";font-size:0.9rem;display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
       children: props.localeCount
     })]
   });
@@ -2356,7 +2426,7 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
     setProjectDataLocale(event.target.value);
   }, [setProjectDataLocale]);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$2.css("position:relative;width:", designSystem.customProperties.constraint3, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react$2.css("position:relative;width:", designSystem.designTokens.constraint3, ";" + ("" ), "" ),
     "data-track-component": "LocaleSwitch",
     children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
       children: jsxRuntime.jsx("span", {
@@ -2392,19 +2462,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-e0c29f6a.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-84e5baa4.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-ecd5b320.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-f962498a.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-f9a7f36f.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-4df4badb.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2451,7 +2521,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-a59892f1.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-076f710d.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3100,7 +3170,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys$3(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys$3(Object(source))).call(_context12, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var compiledStyles = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\n  display: flex;\n  flex-grow: 1;\n  width: 64px;\n  z-index: 19999;\n  background: var(--color-accent);\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.body__menu-open .navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.navbar-mod__list-item___MjK6t {\n  width: 64px;\n  height: 56px;\n  background: var(--color-accent);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___X2Ina {\n  color: var(--color-surface);\n  padding: var(--spacing-m);\n  width: 100%;\n  position: relative;\n  display: block;\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__item-link___X2Ina {\n  padding-right: var(--spacing-l);\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}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  flex: 1;\n  font-weight: 500;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-nav-bar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-nav-bar-link);\n  color: var(--color-surface);\n  display: none;\n  opacity: 0;\n  transition: all 0.25s ease-in-out;\n  text-align: left;\n  text-decoration: none;\n}\n\n.navbar-mod__expander___jyAUi {\n  border-top: 1px solid var(--color-neutral-40);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n}\n\n.navbar-mod__expander___jyAUi:hover {\n  background: transparent !important;\n}\n\n.navbar-mod__expand-icon___BtmRa {\n  align-items: center;\n  border-radius: 32px;\n  cursor: pointer;\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  transform: translateX(0) rotateZ(0deg);\n  width: 24px;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:hover {\n  background-color: var(--color-accent-30);\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__title___eRWUj {\n  opacity: 1;\n  display: block;\n  transition: all 0.2s ease;\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n/* NO SUBMENU */\n\n.navbar-mod__item__no-submenu___0lmiH,\n.navbar-mod__item_menu-collapsed___cluyY {\n  height: 56px !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__title___eRWUj {\n  border-bottom: 0;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__sublist___os1s7 {\n  padding-top: 40px;\n}\n\n/* left-nav open */\n\n.body__menu-open .navbar-mod__title___eRWUj {\n  color: var(--color-surface);\n  font-weight: 500;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-nav-bar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-nav-bar-link);\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\n  box-shadow: 6px 0 10px rgba(0, 0, 0, 0.16);\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  height: auto;\n  min-height: 56px;\n  max-height: 0;\n  transition: max-height 0.15s ease-out;\n  overflow: hidden;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt,\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  width: 245px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  display: block;\n  opacity: 1;\n  margin-left: var(--spacing-m);\n  color: var(--color-surface);\n}\n\n.body__menu-open .navbar-mod__expand-icon___BtmRa {\n  transform: translateX(0) rotateZ(180deg);\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.body__menu-open .navbar-mod__sublist___os1s7 {\n  position: relative;\n  z-index: 1;\n  left: 0;\n  margin: 0 0 0 calc(\n    24px + var(--spacing-m) + 4px + 4px\n  );\n  padding: var(--spacing-m) 0 0;\n  background-color: transparent;\n}\n\n.body__menu-open .navbar-mod__sublist___os1s7.navbar-mod__sublist-no-children___Dy-h- {\n  border: 0;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q {\n  font-weight: 400;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-nav-bar-link);\n  color: white;\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q:hover {\n  color: var(--color-primary-40);\n}\n\n.body__menu-open .navbar-mod__expander___jyAUi {\n  min-height: 50px;\n  justify-content: flex-end;\n  padding: var(--spacing-m);\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\n  padding: 55px var(--spacing-l) var(--spacing-m);\n  font-weight: 400;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-nav-bar-link);\n  position: absolute;\n  background-color: var(--color-accent-30);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: var(--spacing-s) 0 0;\n}\n\n.navbar-mod__sublist-item___gafkS:first-of-type {\n  padding: 0;\n}\n\n.navbar-mod__sublist-item___gafkS:hover {\n  color: var(--color-primary-40);\n}\n\n.navbar-mod__text___ccHEu {\n  font-weight: 400;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-nav-bar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-nav-bar-link);\n}\n\n.navbar-mod__text-link___dhtj6 {\n  color: white;\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6:hover {\n  color: var(--color-primary-40);\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr {\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  width: calc(\n    205px + 64px -\n      var(--spacing-m) * 2\n  );\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  width: calc(24px + 4px * 2);\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: flex-start;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__fixed-menu___42tD9 .navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  /* empty block */\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.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  margin-left: 40px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  margin-left: var(--spacing-m);\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__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__sublist___os1s7 {\n  width: 205px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__sublist___os1s7 {\n  width: calc(100% - calc(\n    24px + var(--spacing-m) + 4px + 4px\n  ));\n}\n\n.navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh {\n  opacity: 1;\n  visibility: visible;\n  text-align: left;\n}\n\n.navbar-mod__highlighted___oJWkA {\n  color: var(--color-primary-40) !important;\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}\n\n.navbar-mod__fixed-menu___42tD9 {\n  flex: 0 0 0;\n}\n",
+  "global": ":root {\n\n  /* Left navigation */\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\n  display: flex;\n  flex-grow: 1;\n  width: 64px;\n  z-index: 19999;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: var(--background-color-for-navbar);\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.body__menu-open .navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.navbar-mod__list-item___MjK6t {\n  width: 64px;\n  height: 56px;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: var(--background-color-for-navbar);\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  padding: var(--spacing-m);\n  width: 100%;\n  position: relative;\n  display: block;\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__item-link___X2Ina {\n  padding-right: var(--spacing-l);\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}\n\n.navbar-mod__list-item___MjK6t .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);\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon__active___asorg > 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 .navbar-mod__title___eRWUj {\n  flex: 1;\n  font-weight: 500;\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  display: none;\n  opacity: 0;\n  transition: all 0.25s ease-in-out;\n  text-align: left;\n  text-decoration: none;\n}\n\n.navbar-mod__expander___jyAUi {\n  border-top: 1px solid var(--color-neutral-40);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n}\n\n.navbar-mod__expander___jyAUi:hover {\n  background: transparent !important;\n}\n\n.navbar-mod__expand-icon___BtmRa {\n  align-items: center;\n  border-radius: 32px;\n  cursor: pointer;\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  transform: translateX(0) rotateZ(0deg);\n  width: 24px;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar-when-hovered);\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__title___eRWUj {\n  opacity: 1;\n  display: block;\n  transition: all 0.2s ease;\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n/* NO SUBMENU */\n\n.navbar-mod__item__no-submenu___0lmiH,\n.navbar-mod__item_menu-collapsed___cluyY {\n  height: 56px !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__title___eRWUj {\n  border-bottom: 0;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__sublist___os1s7 {\n  padding-top: 40px;\n}\n\n/* left-nav open */\n\n.body__menu-open .navbar-mod__title___eRWUj {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  font-weight: 500;\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}\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}\n\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  height: auto;\n  min-height: 56px;\n  max-height: 0;\n  transition: max-height 0.15s ease-out;\n  overflow: hidden;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt,\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  width: 245px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  display: block;\n  opacity: 1;\n  margin-left: var(--spacing-m);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n}\n\n.body__menu-open .navbar-mod__expand-icon___BtmRa {\n  transform: translateX(0) rotateZ(180deg);\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.body__menu-open .navbar-mod__sublist___os1s7 {\n  position: relative;\n  z-index: 1;\n  left: 0;\n  margin: 0 0 0 calc(\n    24px + var(--spacing-m) + 4px + 4px\n  );\n  padding: var(--spacing-m) 0 0;\n  background-color: transparent;\n}\n\n.body__menu-open .navbar-mod__sublist___os1s7.navbar-mod__sublist-no-children___Dy-h- {\n  border: 0;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q {\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  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q: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}\n\n.body__menu-open .navbar-mod__expander___jyAUi {\n  min-height: 50px;\n  justify-content: flex-end;\n  padding: var(--spacing-m);\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\n  padding: 55px var(--spacing-l) var(--spacing-m);\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  position: absolute;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: var(--spacing-s) 0 0;\n}\n\n.navbar-mod__sublist-item___gafkS:first-of-type {\n  padding: 0;\n}\n\n.navbar-mod__sublist-item___gafkS: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}\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}\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  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6: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}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background: var(--background-color-for-navbar-when-active);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  width: calc(\n    205px + 64px -\n      var(--spacing-m) * 2\n  );\n  justify-content: flex-start;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  width: calc(24px + 4px * 2);\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: flex-start;\n  display: flex;\n  width: 100%;\n}\n\n.navbar-mod__fixed-menu___42tD9 .navbar-mod__list-item___MjK6t .navbar-mod__icon-container___w3FtA {\n  /* empty block */\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.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  margin-left: 40px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  margin-left: var(--spacing-m);\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__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__sublist___os1s7 {\n  width: 205px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__sublist___os1s7 {\n  width: calc(100% - calc(\n    24px + var(--spacing-m) + 4px + 4px\n  ));\n}\n\n.navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh {\n  opacity: 1;\n  visibility: visible;\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__highlighted___oJWkA {\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}\n\n.navbar-mod__fixed-menu___42tD9 {\n  flex: 0 0 0;\n  position: relative;\n}\n",
   "jsonMap": {
     "left-navigation": "navbar-mod__left-navigation___n7yUt",
     "list": "navbar-mod__list___RCV3J",
@@ -3110,6 +3180,7 @@ var compiledStyles = {
     "item__active": "navbar-mod__item__active___lo1sr",
     "item-icon-text": "navbar-mod__item-icon-text___a-8JY",
     "icon": "navbar-mod__icon___bLsep",
+    "icon__active": "navbar-mod__icon__active___asorg",
     "title": "navbar-mod__title___eRWUj",
     "expander": "navbar-mod__expander___jyAUi",
     "expand-icon": "navbar-mod__expand-icon___BtmRa",
@@ -3297,6 +3368,10 @@ var MenuExpander = function MenuExpander(props) {
 MenuExpander.propTypes = {};
 MenuExpander.displayName = 'MenuExpander';
 
+var Faded = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ejre2oe0"
+} )("position:absolute;top:-32px;height:32px;width:100%;background:linear-gradient(\n    0deg,\n    ", applicationComponents.designTokens.backgroundColorForNavbar, " 0%,\n    rgba(0, 0, 0, 0) 100%\n  );z-index:1;" + ("" ));
+
 var MenuGroup = function MenuGroup(props) {
   var isSublistActiveWhileIsMenuExpanded = props.level === 2 && props.isActive && props.isExpanded;
   var isSublistActiveWhileIsMenuCollapsed = props.level === 2 && props.isActive && !props.isExpanded;
@@ -3432,10 +3507,6 @@ var RestrictedMenuItem = function RestrictedMenuItem(props) {
 RestrictedMenuItem.propTypes = {};
 RestrictedMenuItem.displayName = 'RestrictedMenuItem';
 RestrictedMenuItem.defaultProps = restrictedMenuItemDefaultProps;
-var getIconColor = function getIconColor(isActive) {
-  if (isActive) return 'primary40';
-  return 'surface';
-};
 
 var getMenuVisibilitiesOfSubmenus = function getMenuVisibilitiesOfSubmenus(menu) {
   var _context, _context2;
@@ -3523,11 +3594,10 @@ var ApplicationMenu = function ApplicationMenu(props) {
           children: [jsxRuntime.jsx("div", {
             className: styles$1['icon-container'],
             children: jsxRuntime.jsx("div", {
-              className: styles$1.icon,
+              className: classnames__default["default"](styles$1.icon, _defineProperty({}, styles$1.icon__active, props.isActive || isMainMenuRouteActive)),
               children: jsxRuntime.jsx(IconSwitcher, {
                 icon: props.menu.icon,
-                size: "scale",
-                color: getIconColor(props.isActive || isMainMenuRouteActive)
+                size: "scale"
               })
             })
           }), jsxRuntime.jsx("div", {
@@ -3678,7 +3748,7 @@ var NavBar = function NavBar(props) {
         })]
       }), jsxRuntime.jsxs("div", {
         className: styles$1['fixed-menu'],
-        children: [jsxRuntime.jsx(MenuItem, {
+        children: [jsxRuntime.jsx(Faded, {}), jsxRuntime.jsx(MenuItem, {
           hasSubmenu: false,
           isActive: false,
           isMenuOpen: isMenuOpen,
@@ -3700,10 +3770,9 @@ var NavBar = function NavBar(props) {
               children: [jsxRuntime.jsx("div", {
                 className: styles$1['icon-container'],
                 children: jsxRuntime.jsx("div", {
-                  className: styles$1.icon,
+                  className: classnames__default["default"](styles$1.icon, _defineProperty({}, styles$1.icon__active, activeItemIndex === 'fixed-support')),
                   children: jsxRuntime.jsx(icons.SupportIcon, {
-                    size: "scale",
-                    color: getIconColor(activeItemIndex === 'fixed-support')
+                    size: "scale"
                   })
                 })
               }), jsxRuntime.jsx("div", {
@@ -3784,7 +3853,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-40df7c6e.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-96b38efe.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });

package/dist/{oidc-2de78d6b.cjs.prod.js → oidc-1c91f5ee.cjs.prod.js}

@@ -4,7 +4,7 @@ var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArr
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
-var constants = require('./constants-d3b01ef6.cjs.prod.js');
+var constants = require('./constants-88fb9ef8.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/dist/{oidc-3bed1dca.cjs.dev.js → oidc-5b2e4f8f.cjs.dev.js}

@@ -4,7 +4,7 @@ var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArr
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
-var constants = require('./constants-22e3b93b.cjs.dev.js');
+var constants = require('./constants-c2d56f3d.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }