@commercetools-frontend/application-shell 22.11.0 → 22.13.0

package/dist/{index-497ae97d.cjs.prod.js → index-ae549827.cjs.prod.js}

@@ -24,7 +24,7 @@ var constants = require('@commercetools-frontend/constants');
 var i18n = require('@commercetools-frontend/i18n');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var sentry = require('@commercetools-frontend/sentry');
-var oidc = require('./oidc-88c678f1.cjs.prod.js');
+var oidc = require('./oidc-b070ff6c.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -35,9 +35,11 @@ var icons = require('@commercetools-uikit/icons');
 var useIsServedByProxy = require('./use-is-served-by-proxy-845cace5.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _objectDestructuringEmpty = require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
+var _extends = require('@babel/runtime-corejs3/helpers/extends');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var memoize = require('memoize-one');
+var reactSelect = require('react-select');
 var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
 var SelectInput = require('@commercetools-uikit/select-input');
 var CTLogoSVG = require('@commercetools-frontend/assets/images/ct-logo.svg');
@@ -110,9 +112,9 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
 // NOTE: This string will be replaced on build time with the package version.
-var applicationShellVersion = "22.11.0";
+var applicationShellVersion = "22.13.0";
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-d1643ea7.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-fd3c09f0.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -247,7 +249,6 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-const _excluded = ["projectCount"];
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 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 } } } };
@@ -260,27 +261,23 @@ var _ref4$1 = {
   name: "zol16h",
   styles: "display:flex;flex:1;align-items:center"
 } ;
-const ProjectSwitcherValueContainer = _ref5 => {
-  let projectCount = _ref5.projectCount,
-    restProps = _objectWithoutProperties(_ref5, _excluded);
-  return jsxRuntime.jsxs("div", {
+const ValueContainer = _ref5 => {
+  let restProps = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return jsxRuntime.jsx("div", {
     css: _ref4$1,
-    children: [jsxRuntime.jsx("div", {
+    children: jsxRuntime.jsx("div", {
       css: _ref3$1,
       children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
         children: restProps.children
       }))
-    }), jsxRuntime.jsx("span", {
-      css: /*#__PURE__*/react$1.css("width:26px;height:26px;border-radius:100%;background:", designSystem.designTokens.colorNeutral, ";color:", designSystem.designTokens.colorSurface, ";font-size:", designSystem.designTokens.fontSize30, ";display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
-      children: projectCount
-    })]
+    })
   });
 };
 var _ref$2 = {
   name: "16lqnjx",
   styles: "font-size:1.5rem;display:flex"
 } ;
-var _ref2$1 = {
+var _ref2$2 = {
   name: "10s3lzp",
   styles: "word-wrap:break-word"
 } ;
@@ -288,7 +285,7 @@ const ProjectSwitcherOption = props => {
   const project = props.data;
   return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$8(_objectSpread$8({}, props), {}, {
     children: jsxRuntime.jsxs("div", {
-      css: _ref2$1,
+      css: _ref2$2,
       children: [jsxRuntime.jsxs("div", {
         css: /*#__PURE__*/react$1.css("color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
         children: [project.name, props.isDisabled && jsxRuntime.jsx("span", {
@@ -318,6 +315,14 @@ const mapProjectsToOptions = memoize__default["default"](projects => _mapInstanc
   suspension: project.suspension,
   expiry: project.expiry
 })));
+const CustomMenuList = props => {
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react$1.css("width:max-content;max-width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
+    children: jsxRuntime.jsx(reactSelect.components.MenuList, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      children: props.children
+    }))
+  });
+};
 const redirectTo = targetUrl => useIsServedByProxy.location.replace(targetUrl);
 const ProjectSwitcher = props => {
   const intl = reactIntl.useIntl();
@@ -331,7 +336,6 @@ const ProjectSwitcher = props => {
     data = _useMcQuery.data;
   if (loading) return null;
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$1.css("width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
     children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
       children: jsxRuntime.jsx("span", {
         id: PROJECT_SWITCHER_LABEL_ID,
@@ -362,14 +366,14 @@ const ProjectSwitcher = props => {
       },
       components: {
         Option: ProjectSwitcherOption,
-        ValueContainer: valueContainerProps => jsxRuntime.jsx(ProjectSwitcherValueContainer, _objectSpread$8(_objectSpread$8({}, valueContainerProps), {}, {
-          projectCount: data && data.user && data.user.projects.results.length || 0
-        }))
+        ValueContainer,
+        MenuList: CustomMenuList
       },
       isClearable: false,
       backspaceRemovesValue: false,
       placeholder: intl.formatMessage(messages.searchPlaceholder),
-      noOptionsMessage: () => intl.formatMessage(messages.noResults)
+      noOptionsMessage: () => intl.formatMessage(messages.noResults),
+      horizontalConstraint: 'auto'
     })]
   });
 };
@@ -378,9 +382,13 @@ ProjectSwitcher.displayName = 'ProjectSwitcher';
 // eslint-disable-next-line import/prefer-default-export
 const REQUESTS_IN_FLIGHT_LOADER_DOM_ID = 'loader-for-requests-in-flight';
 
-const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-367bc7a6.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
+const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-2fa90966.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
 
 var _ref$1 = {
+  name: "zjik7",
+  styles: "display:flex"
+} ;
+var _ref2$1 = {
   name: "36bnqj",
   styles: "display:flex;flex:1"
 } ;
@@ -388,14 +396,9 @@ const AppBar = props => {
   var _props$user$defaultPr, _props$user;
   const 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$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", applicationComponents.designTokens.shadowForAppbar, ";min-height:", oidc.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    css: /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", applicationComponents.designTokens.shadowForAppbar, ";padding:0 40px;min-height:", oidc.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
     "data-test": "top-navigation",
-    children: [jsxRuntime.jsx(Spacings__default["default"].Inline, {
-      children: jsxRuntime.jsx("div", {
-        id: REQUESTS_IN_FLIGHT_LOADER_DOM_ID,
-        css: _ref$1
-      })
-    }), jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       css: /*#__PURE__*/react$1.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",
@@ -403,9 +406,7 @@ const AppBar = props => {
         children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
           scale: "m",
           alignItems: "center",
-          children: [jsxRuntime.jsx("div", {
-            id: oidc.CONTAINERS.LOCALE_SWITCHER
-          }), (() => {
+          children: [(() => {
             if (!props.user) {
               return jsxRuntime.jsx(LoadingPlaceholder, {
                 shape: "rect",
@@ -427,20 +428,30 @@ const AppBar = props => {
             return jsxRuntime.jsx(BackToProject, {
               projectKey: previousProjectKey
             });
-          })()]
-        }), jsxRuntime.jsx("div", {
-          css: /*#__PURE__*/react$1.css("border-left:1px ", designSystem.designTokens.colorNeutral90, " solid;height:", oidc.DIMENSIONS.headerItemDivider, ";" + ("" ), "" )
-        }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
-          language: props.user.language,
-          firstName: props.user.firstName,
-          lastName: props.user.lastName,
-          gravatarHash: props.user.gravatarHash,
-          email: props.user.email
-        }) : jsxRuntime.jsx(LoadingPlaceholder, {
-          shape: "dot",
-          size: "l"
+          })(), jsxRuntime.jsx("div", {
+            id: oidc.CONTAINERS.LOCALE_SWITCHER
+          })]
+        }), jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: jsxRuntime.jsx("div", {
+            id: REQUESTS_IN_FLIGHT_LOADER_DOM_ID,
+            css: _ref2$1
+          })
         })]
       })
+    }), jsxRuntime.jsxs("div", {
+      css: _ref$1,
+      children: [jsxRuntime.jsx("div", {
+        id: oidc.CONTAINERS.LEFT_OF_PROFILE
+      }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
+        language: props.user.language,
+        firstName: props.user.firstName,
+        lastName: props.user.lastName,
+        gravatarHash: props.user.gravatarHash,
+        email: props.user.email
+      }) : jsxRuntime.jsx(LoadingPlaceholder, {
+        shape: "dot",
+        size: "l"
+      })]
     })]
   });
 };
@@ -551,9 +562,9 @@ FetchUser.propTypes = {
 };
 FetchUser.displayName = 'FetchUser';
 
-const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-5b122d30.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-969b25dc.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-a125b80c.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-30f9d73a.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -665,7 +676,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-b1fdce23.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-8c1421d2.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -752,7 +763,7 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-f96ad82f.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-ca5f1840.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
 
 const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-2266c427.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
@@ -878,7 +889,7 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-bd652c85.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-7bef59f4.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
 
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1347,7 +1358,7 @@ const hasCachedAuthenticationState = () => {
   return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
-const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-c70d87ef.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-402ad034.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1497,7 +1508,7 @@ const ApplicationShellProvider = props => {
 ApplicationShellProvider.propTypes = {};
 ApplicationShellProvider.displayName = 'ApplicationShellProvider';
 
-const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-2eb8c713.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-573b012a.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
 
 const styles = {
   name: "1prreal",
@@ -1507,6 +1518,18 @@ const GlobalStyles = () => jsxRuntime.jsx(react$1.Global, {
   styles: styles
 });
 
+const StrictModeEnablement$1 = props => {
+  if (props.enableReactStrictMode) {
+    return jsxRuntime.jsx(react.StrictMode, {
+      children: props.children
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.children
+    });
+  }
+};
+StrictModeEnablement$1.propTypes = {};
 const ApplicationShell = props => {
   react.useEffect(() => {
     var _props$onRegisterErro;
@@ -1516,7 +1539,8 @@ const ApplicationShell = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // <-- run only once, when component mounts
 
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return jsxRuntime.jsxs(StrictModeEnablement$1, {
+    enableReactStrictMode: props.enableReactStrictMode,
     children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
       apolloClient: props.apolloClient,
       environment: props.environment,
@@ -1630,6 +1654,18 @@ function CustomViewShellAuthenticated(props) {
 CustomViewShellAuthenticated.propTypes = {};
 
 const browserLocale = getBrowserLocale(window);
+function StrictModeEnablement(props) {
+  if (props.enableReactStrictMode) {
+    return jsxRuntime.jsx(react.StrictMode, {
+      children: props.children
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.children
+    });
+  }
+}
+StrictModeEnablement.propTypes = {};
 function CustomViewShell(props) {
   const _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -1683,6 +1719,7 @@ function CustomViewShell(props) {
   return jsxRuntime.jsx(ApplicationShellProvider, {
     environment: window.app,
     applicationMessages: props.applicationMessages,
+    apolloClient: props.apolloClient,
     children: _ref => {
       let isAuthenticated = _ref.isAuthenticated;
       if (isAuthenticated) {
@@ -1717,9 +1754,12 @@ function CustomViewShell(props) {
 }
 CustomViewShell.propTypes = {};
 const CustomViewShellWrapper = props => {
-  return jsxRuntime.jsx(CustomViewShell, {
-    applicationMessages: props.applicationMessages,
-    children: props.children
+  return jsxRuntime.jsx(StrictModeEnablement, {
+    enableReactStrictMode: props.enableReactStrictMode,
+    children: jsxRuntime.jsx(CustomViewShell, {
+      applicationMessages: props.applicationMessages,
+      children: props.children
+    })
   });
 };
 CustomViewShellWrapper.propTypes = {};

package/dist/{navbar-131d7509.cjs.dev.js → navbar-2372be36.cjs.dev.js}

@@ -24,7 +24,7 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var LogoSVG = require('@commercetools-frontend/assets/logos/commercetools_small-logo.svg');
 var constants = require('@commercetools-frontend/constants');
 var icons = require('@commercetools-uikit/icons');
-var oidc = require('./oidc-ad31a103.cjs.dev.js');
+var oidc = require('./oidc-7c48215c.cjs.dev.js');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');

package/dist/{navbar-058bd4bc.esm.js → navbar-508a24b2.esm.js}

@@ -22,7 +22,7 @@ import { useMcQuery, normalizeAllAppliedPermissions, normalizeAllAppliedActionRi
 import LogoSVG from '@commercetools-frontend/assets/logos/commercetools_small-logo.svg';
 import { NO_VALUE_FALLBACK, GRAPHQL_TARGETS, STORAGE_KEYS, SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
 import { SidebarCollapseIcon, SidebarExpandIcon, SupportIcon } from '@commercetools-uikit/icons';
-import { D as DIMENSIONS, W as WINDOW_SIZES } from './oidc-ffa1a7b2.esm.js';
+import { D as DIMENSIONS, W as WINDOW_SIZES } from './oidc-da8526e3.esm.js';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import _styled from '@emotion/styled/base';
 import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';

package/dist/{navbar-5b122d30.cjs.prod.js → navbar-969b25dc.cjs.prod.js}

@@ -24,7 +24,7 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var LogoSVG = require('@commercetools-frontend/assets/logos/commercetools_small-logo.svg');
 var constants = require('@commercetools-frontend/constants');
 var icons = require('@commercetools-uikit/icons');
-var oidc = require('./oidc-88c678f1.cjs.prod.js');
+var oidc = require('./oidc-b070ff6c.cjs.prod.js');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');

package/dist/{oidc-88c678f1.cjs.prod.js → oidc-7c48215c.cjs.dev.js}

@@ -12,7 +12,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 
 const DIMENSIONS = {
   header: '56px',
-  headerItemDivider: '24px',
   navMenu: '80px',
   navMenuExpanded: '256px',
   navMenuItemHeight: '48px'
@@ -22,7 +21,8 @@ const WINDOW_SIZES = {
   WIDE: 1200
 };
 const CONTAINERS = {
-  LOCALE_SWITCHER: 'locale-switcher-container'
+  LOCALE_SWITCHER: 'locale-switcher-container',
+  LEFT_OF_PROFILE: 'left-of-profile'
 };
 const SUSPENSION_REASONS = {
   TEMPORARY_MAINTENANCE: 'TemporaryMaintenance',

package/dist/{oidc-ad31a103.cjs.dev.js → oidc-b070ff6c.cjs.prod.js}

@@ -12,7 +12,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 
 const DIMENSIONS = {
   header: '56px',
-  headerItemDivider: '24px',
   navMenu: '80px',
   navMenuExpanded: '256px',
   navMenuItemHeight: '48px'
@@ -22,7 +21,8 @@ const WINDOW_SIZES = {
   WIDE: 1200
 };
 const CONTAINERS = {
-  LOCALE_SWITCHER: 'locale-switcher-container'
+  LOCALE_SWITCHER: 'locale-switcher-container',
+  LEFT_OF_PROFILE: 'left-of-profile'
 };
 const SUSPENSION_REASONS = {
   TEMPORARY_MAINTENANCE: 'TemporaryMaintenance',

package/dist/{oidc-callback-c70d87ef.cjs.prod.js → oidc-callback-402ad034.cjs.prod.js}

@@ -18,7 +18,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-497ae97d.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-ae549827.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -54,13 +54,15 @@ require('redux-logger');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@emotion/react');
-require('./oidc-88c678f1.cjs.prod.js');
+require('./oidc-b070ff6c.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('react-intl');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
+require('@babel/runtime-corejs3/helpers/extends');
 require('memoize-one');
+require('react-select');
 require('@commercetools-uikit/accessible-hidden');
 require('@commercetools-uikit/select-input');
 require('@commercetools-frontend/assets/images/ct-logo.svg');

package/dist/{oidc-callback-be76c044.cjs.dev.js → oidc-callback-93aa3fa4.cjs.dev.js}

@@ -18,7 +18,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-cdc22735.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-9c9f0152.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -54,13 +54,15 @@ require('redux-logger');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@emotion/react');
-require('./oidc-ad31a103.cjs.dev.js');
+require('./oidc-7c48215c.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('react-intl');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
+require('@babel/runtime-corejs3/helpers/extends');
 require('memoize-one');
+require('react-select');
 require('@commercetools-uikit/accessible-hidden');
 require('@commercetools-uikit/select-input');
 require('@commercetools-frontend/assets/images/ct-logo.svg');

package/dist/{oidc-callback-943a79a3.esm.js → oidc-callback-9a7982c6.esm.js}

@@ -16,7 +16,7 @@ import { AngleLeftIcon } from '@commercetools-uikit/icons';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { C as ConfigureIntlProvider } from './index-70c1623b.esm.js';
+import { C as ConfigureIntlProvider } from './index-2b55a829.esm.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
@@ -52,13 +52,15 @@ import 'redux-logger';
 import '@babel/runtime-corejs3/core-js-stable/instance/find';
 import '@babel/runtime-corejs3/core-js-stable/array/is-array';
 import '@emotion/react';
-import './oidc-ffa1a7b2.esm.js';
+import './oidc-da8526e3.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import '@babel/runtime-corejs3/core-js-stable/instance/map';
 import 'react-intl';
 import '@babel/runtime-corejs3/helpers/taggedTemplateLiteral';
-import '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import '@babel/runtime-corejs3/helpers/objectDestructuringEmpty';
+import '@babel/runtime-corejs3/helpers/extends';
 import 'memoize-one';
+import 'react-select';
 import '@commercetools-uikit/accessible-hidden';
 import '@commercetools-uikit/select-input';
 import '@commercetools-frontend/assets/images/ct-logo.svg';

package/dist/{oidc-ffa1a7b2.esm.js → oidc-da8526e3.esm.js}

@@ -4,7 +4,6 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 
 const DIMENSIONS = {
   header: '56px',
-  headerItemDivider: '24px',
   navMenu: '80px',
   navMenuExpanded: '256px',
   navMenuItemHeight: '48px'
@@ -14,7 +13,8 @@ const WINDOW_SIZES = {
   WIDE: 1200
 };
 const CONTAINERS = {
-  LOCALE_SWITCHER: 'locale-switcher-container'
+  LOCALE_SWITCHER: 'locale-switcher-container',
+  LEFT_OF_PROFILE: 'left-of-profile'
 };
 const SUSPENSION_REASONS = {
   TEMPORARY_MAINTENANCE: 'TemporaryMaintenance',

package/dist/{project-container-a125b80c.cjs.prod.js → project-container-30f9d73a.cjs.prod.js}

@@ -10,9 +10,9 @@ var reactRouterDom = require('react-router-dom');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var constants = require('@commercetools-frontend/constants');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
-var oidc = require('./oidc-88c678f1.cjs.prod.js');
+var oidc = require('./oidc-b070ff6c.cjs.prod.js');
 var applicationEntryPoint = require('./application-entry-point-bde45acf.cjs.prod.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-497ae97d.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-ae549827.cjs.prod.js');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -24,6 +24,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react$1 = require('@emotion/react');
+var reactSelect = require('react-select');
 var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
 var designSystem = require('@commercetools-uikit/design-system');
 var icons = require('@commercetools-uikit/icons');
@@ -59,7 +60,8 @@ require('@commercetools-uikit/spacings');
 require('@commercetools-uikit/flat-button');
 require('./use-is-served-by-proxy-845cace5.cjs.prod.js');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
+require('@babel/runtime-corejs3/helpers/extends');
 require('memoize-one');
 require('@commercetools-frontend/assets/images/ct-logo.svg');
 require('@commercetools-uikit/loading-spinner');
@@ -124,13 +126,9 @@ const SingleValue = props => {
     }), jsxRuntime.jsx("span", {
       css: /*#__PURE__*/react$1.css("margin-left:2px;flex:1;color:", designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
       children: props.children
-    }), jsxRuntime.jsx("span", {
-      css: /*#__PURE__*/react$1.css("width:26px;height:26px;border-radius:100%;background:", designSystem.designTokens.colorNeutral, ";color:", designSystem.designTokens.colorSurface, ";font-size:", designSystem.designTokens.fontSize30, ";display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
-      children: props.localeCount
     })]
   });
 };
-SingleValue.propTypes = {};
 SingleValue.displayName = 'SingleValue';
 const PatchedValueContainer = props => jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread(_objectSpread({}, props), {}, {
   innerProps: {
@@ -140,6 +138,14 @@ const PatchedValueContainer = props => jsxRuntime.jsx(SelectInput__default["defa
   }
 }));
 PatchedValueContainer.displayName = 'PatchedValueContainer';
+const CustomMenuList = props => {
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react$1.css("width:max-content;max-width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
+    children: jsxRuntime.jsx(reactSelect.components.MenuList, _objectSpread(_objectSpread({}, props), {}, {
+      children: props.children
+    }))
+  });
+};
 const LocaleSwitcher = props => {
   var _context;
   const setProjectDataLocale = props.setProjectDataLocale;
@@ -147,7 +153,6 @@ const LocaleSwitcher = props => {
     setProjectDataLocale(event.target.value);
   }, [setProjectDataLocale]);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$1.css("position:relative;width:", designSystem.designTokens.constraint4, ";" + ("" ), "" ),
     children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
       children: jsxRuntime.jsx("span", {
         id: LOCALE_SWITCHER_LABEL_ID,
@@ -163,26 +168,26 @@ const LocaleSwitcher = props => {
         value: locale
       })),
       components: {
-        SingleValue: valueProps => jsxRuntime.jsx(SingleValue, _objectSpread(_objectSpread({}, valueProps), {}, {
-          localeCount: props.availableLocales.length
-        })),
-        ValueContainer: PatchedValueContainer
+        SingleValue,
+        ValueContainer: PatchedValueContainer,
+        MenuList: CustomMenuList
       },
       isClearable: false,
       backspaceRemovesValue: false,
-      isSearchable: false
+      isSearchable: false,
+      horizontalConstraint: 'auto'
     })]
   });
 };
 LocaleSwitcher.propTypes = {};
 
-const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-3210d4c1.cjs.prod.js' /* webpackChunkName: "project-expired" */); }));
+const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-c1347c42.cjs.prod.js' /* webpackChunkName: "project-expired" */); }));
 
-const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-47f8fa22.cjs.prod.js' /* webpackChunkName: "project-not-found" */); }));
+const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-98689f47.cjs.prod.js' /* webpackChunkName: "project-not-found" */); }));
 
-const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-d7aa4b2f.cjs.prod.js' /* webpackChunkName: "project-not-initialized" */); }));
+const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-ecb987f7.cjs.prod.js' /* webpackChunkName: "project-not-initialized" */); }));
 
-const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-bb439496.cjs.prod.js' /* webpackChunkName: "project-suspended" */); }));
+const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-0f466e92.cjs.prod.js' /* webpackChunkName: "project-suspended" */); }));
 
 var messages = reactIntl.defineMessages({
   trialDaysLeft: {