@commercetools-frontend/application-shell 22.5.0 → 22.7.0

package/dist/{index-53b461f0.cjs.prod.js → index-62467df5.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var configureApollo = require('./configure-apollo-235efa51.cjs.prod.js');
+var configureApollo = require('./configure-apollo-651219fe.cjs.prod.js');
 var _pt = require('prop-types');
 var react = require('react');
 var reactRouterDom = require('react-router-dom');
@@ -24,7 +24,7 @@ var constants$1 = require('@commercetools-frontend/constants');
 var i18n = require('@commercetools-frontend/i18n');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var sentry = require('@commercetools-frontend/sentry');
-var constants = require('./constants-4408614d.cjs.prod.js');
+var constants = require('./constants-ed10e935.cjs.prod.js');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -47,15 +47,6 @@ var CTLogoSVG = require('@commercetools-frontend/assets/images/ct-logo.svg');
 var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
 var history = require('@commercetools-frontend/browser-history');
 var l10n = require('@commercetools-frontend/l10n');
-var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
-var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
-var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
-var reactBroadcast = require('@flopflip/react-broadcast');
-var classnames = require('classnames');
-var MissingImageSvg = require('@commercetools-frontend/assets/images/diagonal-line.svg');
-var permissions = require('@commercetools-frontend/permissions');
-var InlineSvg = require('@commercetools-uikit/icons/inline-svg');
-var isNil = require('lodash/isNil');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
@@ -70,10 +61,13 @@ var _flagsInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/inst
 var combineAdapters = require('@flopflip/combine-adapters');
 var httpAdapter = require('@flopflip/http-adapter');
 var ldAdapter = require('@flopflip/launchdarkly-adapter');
+var reactBroadcast = require('@flopflip/react-broadcast');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var types = require('@flopflip/types');
 var reactRedux = require('react-redux');
 var upperFirst = require('lodash/upperFirst');
-var oidc = require('./oidc-3a2cf8b3.cjs.prod.js');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var oidc = require('./oidc-a780f067.cjs.prod.js');
 require('@commercetools-uikit/design-system/materials/resets.css');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
@@ -106,13 +100,6 @@ var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
 var CTLogoSVG__default = /*#__PURE__*/_interopDefault(CTLogoSVG);
 var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
 var history__default = /*#__PURE__*/_interopDefault(history);
-var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
-var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
-var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var MissingImageSvg__default = /*#__PURE__*/_interopDefault(MissingImageSvg);
-var InlineSvg__default = /*#__PURE__*/_interopDefault(InlineSvg);
-var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var _Object$fromEntries__default = /*#__PURE__*/_interopDefault(_Object$fromEntries);
@@ -122,10 +109,11 @@ var httpAdapter__default = /*#__PURE__*/_interopDefault(httpAdapter);
 var ldAdapter__default = /*#__PURE__*/_interopDefault(ldAdapter);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-4d55dd23.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-219f802b.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -278,26 +266,26 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-const _excluded$1 = ["projectCount"];
+const _excluded = ["projectCount"];
 function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 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 } } } };
 const PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
-var _ref3$1 = {
+var _ref3 = {
   name: "82a6rk",
   styles: "flex:1"
 } ;
-var _ref4$1 = {
+var _ref4 = {
   name: "zol16h",
   styles: "display:flex;flex:1;align-items:center"
 } ;
 const ProjectSwitcherValueContainer = _ref5 => {
   let projectCount = _ref5.projectCount,
-    restProps = _objectWithoutProperties(_ref5, _excluded$1);
+    restProps = _objectWithoutProperties(_ref5, _excluded);
   return jsxRuntime.jsxs("div", {
-    css: _ref4$1,
+    css: _ref4,
     children: [jsxRuntime.jsx("div", {
-      css: _ref3$1,
+      css: _ref3,
       children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
         children: restProps.children
       }))
@@ -409,7 +397,7 @@ 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-d5d5dba3.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
+const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-fa056e1c.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
 
 var _ref$1 = {
   name: "36bnqj",
@@ -600,398 +588,9 @@ FetchUser.propTypes = {
 };
 FetchUser.displayName = 'FetchUser';
 
-const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-766fb0fd.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
-
-const _excluded = ["icon"];
-function ownKeys$7(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$7(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$7(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$7(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const compiledStyles$1 = {
-  "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  min-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__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_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  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.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__icon___bLsep > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__title___eRWUj {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__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: 75px 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.navbar-mod__item_menu__active___5xFRw {\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.navbar-mod__item_menu-collapsed___cluyY.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  max-height: 44px;\n  overflow: hidden;\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\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  min-height: 100%;\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.navbar-mod__highlighted___oJWkA .navbar-mod__title___eRWUj {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider___TpVzu {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  padding-bottom: 32px;\n  /* \n    FIXME: Make the navbar scrollable in collapsed state.\n    NOTE: do not use `overflow-x: hidden; overflow-y: auto;` as this prevents submenus from showing up on hover \n  */\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",
-    "scrollable-menu": "navbar-mod__scrollable-menu___64pxJ",
-    "list-item": "navbar-mod__list-item___MjK6t",
-    "item-link": "navbar-mod__item-link___X2Ina",
-    "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",
-    "item--bottom": "navbar-mod__item--bottom___eW7nh",
-    "item__active": "navbar-mod__item__active___lo1sr",
-    "item_menu-open": "navbar-mod__item_menu-open___zk0zh",
-    "item_menu-collapsed": "navbar-mod__item_menu-collapsed___cluyY",
-    "item__no-submenu": "navbar-mod__item__no-submenu___0lmiH",
-    "sublist": "navbar-mod__sublist___os1s7",
-    "sublist-no-children": "navbar-mod__sublist-no-children___Dy-h-",
-    "title-copy": "navbar-mod__title-copy___o2y1q",
-    "sublist__inactive": "navbar-mod__sublist__inactive___kJvf-",
-    "sublist-item": "navbar-mod__sublist-item___gafkS",
-    "text": "navbar-mod__text___ccHEu",
-    "text-link": "navbar-mod__text-link___dhtj6",
-    "item_menu__active": "navbar-mod__item_menu__active___5xFRw",
-    "icon-container": "navbar-mod__icon-container___w3FtA",
-    "fixed-menu": "navbar-mod__fixed-menu___42tD9",
-    "sublist-expanded__active": "navbar-mod__sublist-expanded__active___240JK",
-    "sublist-collapsed__active": "navbar-mod__sublist-collapsed__active___-9vYh",
-    "highlighted": "navbar-mod__highlighted___oJWkA",
-    "hidden": "navbar-mod__hidden___TQLSs",
-    "divider": "navbar-mod__divider___TpVzu",
-    "loading-dot-container": "navbar-mod__loading-dot-container___G2LVb"
-  }
-};
-const styles$2 = compiledStyles$1.jsonMap;
-/*
-<DataMenu data={[]}>
-  <MenuGroup>
-    <MenuItem>
-      <MenuItemLink linkTo="/foo">(icon) Products</MenuItemLink>
-      <MenuGroup>
-        <MenuItemLink linkTo="/foo/new">Add product</MenuItemLink>
-      </MenuGroup>
-    </MenuItem>
-  </MenuGroup>
-  <MenuExpander/>
-</DataMenu>
-*/
-
-const HeartIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./heart-ebfab4cd.cjs.prod.js'); }));
-const PaperclipIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./paperclip-6f0b6ae5.cjs.prod.js'); }));
-const PluginIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./plugin-f199ed20.cjs.prod.js'); }));
-const RocketIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./rocket-f0bfae34.cjs.prod.js'); }));
-const StarIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./star-c11b0683.cjs.prod.js'); }));
-const ConnectedSquareIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./connected-square-960e046b.cjs.prod.js'); }));
-const WorldIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./world-f921d80c.cjs.prod.js'); }));
-const TreeStructureIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tree-structure-690366f9.cjs.prod.js'); }));
-const UserFilledIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-filled-58af1ae4.cjs.prod.js'); }));
-const SpeedometerIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./speedometer-0de260cf.cjs.prod.js'); }));
-const TagMultiIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tag-multi-f8d9c9e6.cjs.prod.js'); }));
-const CartIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./cart-f2fc1baf.cjs.prod.js'); }));
-const BoxIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./box-e17daf6c.cjs.prod.js'); }));
-const GearIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./gear-9b394c43.cjs.prod.js'); }));
-const ListWithSearchIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./list-with-search-e3ccba98.cjs.prod.js'); }));
-// The icon is expected to be the `svg` document as a string.
-// For backwards compatibility purposes, we still support the legacy "icon name",
-// which we then map to one of the pre-defined icons.
-// Eventually, we want to get rid of this "switch" logic.
-const IconSwitcher = _ref => {
-  let icon = _ref.icon,
-    iconProps = _objectWithoutProperties(_ref, _excluded);
-  if (_includesInstanceProperty__default["default"](icon).call(icon, '<svg')) {
-    return jsxRuntime.jsx(InlineSvg__default["default"], _objectSpread$7({
-      data: icon
-    }, iconProps));
-  }
-  // Backwards compatibility for apps using the "icon name".
-  switch (icon) {
-    // Legacy application icons
-    // TODO: To be removed once MC applications icons updates are published
-    case 'TreeStructureIcon':
-      return jsxRuntime.jsx(TreeStructureIcon, _objectSpread$7({}, iconProps));
-    case 'UserFilledIcon':
-      return jsxRuntime.jsx(UserFilledIcon, _objectSpread$7({}, iconProps));
-    case 'SpeedometerIcon':
-      return jsxRuntime.jsx(SpeedometerIcon, _objectSpread$7({}, iconProps));
-    case 'TagMultiIcon':
-      return jsxRuntime.jsx(TagMultiIcon, _objectSpread$7({}, iconProps));
-    case 'CartIcon':
-      return jsxRuntime.jsx(CartIcon, _objectSpread$7({}, iconProps));
-    case 'BoxIcon':
-      return jsxRuntime.jsx(BoxIcon, _objectSpread$7({}, iconProps));
-    case 'GearIcon':
-      return jsxRuntime.jsx(GearIcon, _objectSpread$7({}, iconProps));
-    case 'ListWithSearchIcon':
-      return jsxRuntime.jsx(ListWithSearchIcon, _objectSpread$7({}, iconProps));
-
-    // Custom application icons set
-    case 'HeartIcon':
-      return jsxRuntime.jsx(HeartIcon, _objectSpread$7({}, iconProps));
-    case 'PaperclipIcon':
-      return jsxRuntime.jsx(PaperclipIcon, _objectSpread$7({}, iconProps));
-    case 'PluginIcon':
-      return jsxRuntime.jsx(PluginIcon, _objectSpread$7({}, iconProps));
-    case 'RocketIcon':
-      return jsxRuntime.jsx(RocketIcon, _objectSpread$7({}, iconProps));
-    case 'StarIcon':
-      return jsxRuntime.jsx(StarIcon, _objectSpread$7({}, iconProps));
-    case 'ConnectedSquareIcon':
-      return jsxRuntime.jsx(ConnectedSquareIcon, _objectSpread$7({}, iconProps));
-    // For backwards compatibility
-    case 'WorldIcon':
-      return jsxRuntime.jsx(WorldIcon, _objectSpread$7({}, iconProps));
-    default:
-      return jsxRuntime.jsx("img", {
-        src: MissingImageSvg__default["default"],
-        alt: "missing icon"
-      });
-  }
-};
-IconSwitcher.propTypes = {};
-IconSwitcher.displayName = 'IconSwitcher';
-const MenuExpander = props => {
-  return jsxRuntime.jsx("li", {
-    className: classnames__default["default"](styles$2['list-item'], styles$2.expander, {
-      [styles$2.hidden]: !props.isVisible
-    }),
-    children: jsxRuntime.jsx("div", {
-      onClick: props.onClick,
-      className: styles$2['expand-icon'],
-      "data-testid": "menu-expander",
-      children: jsxRuntime.jsx(icons.ArrowRightIcon, {
-        color: "surface",
-        size: "big"
-      })
-    })
-  }, "expander");
-};
-MenuExpander.propTypes = {};
-MenuExpander.displayName = 'MenuExpander';
-const Faded = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "ekdrmmp0"
-} )("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;" + ("" ));
-const MenuGroup = props => {
-  if (props.isExpanded && (props.level === 2 && !props.hasSubmenu || props.level === 2 && !props.isActive)) {
-    return null;
-  }
-  const isSublistActiveWhileIsMenuExpanded = props.level === 2 && props.isActive && props.isExpanded;
-  const isSublistActiveWhileIsMenuCollapsed = props.level === 2 && props.isActive && !props.isExpanded;
-  return jsxRuntime.jsx("ul", {
-    id: "group-".concat(props.id),
-    "data-testid": "group-".concat(props.id),
-    role: "menu",
-    "aria-expanded": isSublistActiveWhileIsMenuExpanded || isSublistActiveWhileIsMenuCollapsed,
-    className: classnames__default["default"]({
-      [styles$2.list]: props.level === 1
-    }, {
-      [styles$2.sublist]: props.level === 2
-    }, {
-      [styles$2['sublist-no-children']]: props.level === 2 && !props.children
-    }, {
-      [styles$2['sublist-expanded__active']]: isSublistActiveWhileIsMenuExpanded
-    }, {
-      [styles$2['sublist-collapsed__active']]: isSublistActiveWhileIsMenuCollapsed
-    }, {
-      [styles$2.sublist__inactive]: !isSublistActiveWhileIsMenuCollapsed
-    }),
-    children: props.children
-  });
-};
-MenuGroup.propTypes = {};
-MenuGroup.displayName = 'MenuGroup';
-const MenuItem = props => {
-  var _props$isMainMenuRout;
-  return jsxRuntime.jsx("li", {
-    role: "menuitem",
-    className: classnames__default["default"](styles$2['list-item'], {
-      [styles$2.item__active]: props.isActive,
-      [styles$2['item_menu__active']]: (_props$isMainMenuRout = props.isMainMenuRouteActive) !== null && _props$isMainMenuRout !== void 0 ? _props$isMainMenuRout : false,
-      [styles$2['item_menu-collapsed']]: !props.isMenuOpen,
-      [styles$2['item__no-submenu']]: !props.hasSubmenu
-    }),
-    onClick: props.onClick,
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    children: jsxRuntime.jsx("div", {
-      className: styles$2['item-link'],
-      children: props.children
-    })
-  });
-};
-MenuItem.propTypes = {};
-MenuItem.displayName = 'MenuItem';
-const menuItemLinkDefaultProps = {
-  exactMatch: false
-};
-const MenuItemLink = props => {
-  const redirectTo = targetUrl => useIsServedByProxy.location.replace(targetUrl);
-  if (props.linkTo) {
-    return jsxRuntime.jsx(reactRouterDom.NavLink, {
-      to: props.linkTo,
-      exact: props.exactMatch,
-      activeClassName: styles$2.highlighted,
-      className: styles$2['text-link'],
-      onClick: event => {
-        if (props.linkTo && props.useFullRedirectsForLinks) {
-          event.preventDefault();
-          redirectTo(props.linkTo);
-        } else if (props.onClick) {
-          event.persist();
-          props.onClick(event);
-        }
-      },
-      children: props.children
-    });
-  }
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.children
-  });
-};
-MenuItemLink.propTypes = {};
-MenuItemLink.displayName = 'MenuItemLink';
-MenuItemLink.defaultProps = menuItemLinkDefaultProps;
-const MenuItemDivider = () => jsxRuntime.jsx("div", {
-  className: styles$2.divider
-});
-MenuItemDivider.displayName = 'MenuItemDivider';
-const isEveryMenuVisibilitySetToHidden = (menuVisibilities, namesOfMenuVisibilities) => _Array$isArray__default["default"](namesOfMenuVisibilities) && namesOfMenuVisibilities.length > 0 && _everyInstanceProperty__default["default"](namesOfMenuVisibilities).call(namesOfMenuVisibilities, nameOfMenuVisibility => menuVisibilities && menuVisibilities[nameOfMenuVisibility] === true);
-const restrictedMenuItemDefaultProps = {
-  permissions: []
-};
-function isLongLivedFlag(flag) {
-  return typeof (flag === null || flag === void 0 ? void 0 : flag.value) === 'boolean';
-}
-const RestrictedMenuItem = props => {
-  // NOTE: Custom application are activated/deactivated while their
-  // visibility is not controlled via a visibiility overwrite.
-  const flagVariation = reactBroadcast.useFlagVariation(props.featureToggle);
-  if (isEveryMenuVisibilitySetToHidden(props.menuVisibilities, props.namesOfMenuVisibilities)) return null;
-  const permissionsWrapper = _Array$isArray__default["default"](props.permissions) && props.permissions.length > 0 || _Array$isArray__default["default"](props.dataFences) && props.dataFences.length > 0 ? jsxRuntime.jsx(permissions.RestrictedByPermissions, {
-    permissions: props.permissions,
-    actionRights: props.actionRights,
-    dataFences: props.dataFences,
-    selectDataFenceData: demandedDataFence => {
-      switch (demandedDataFence.type) {
-        case 'store':
-          return demandedDataFence.actualDataFenceValues;
-        default:
-          return null;
-      }
-    }
-    // Always check that some of the given permissions match.
-    ,
-    shouldMatchSomePermissions: true,
-    projectPermissions: props.projectPermissions,
-    children: props.children
-  }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.children
-  });
-  if (props.featureToggle) {
-    // A regular short-lived feature toggle
-    if (flagVariation === true) return permissionsWrapper;
-    // A long-lived feature toggle with `{ value: boolean, string: reason }`
-    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) return permissionsWrapper;
-    return null;
-  }
-  return permissionsWrapper;
-};
-RestrictedMenuItem.propTypes = {};
-RestrictedMenuItem.displayName = 'RestrictedMenuItem';
-RestrictedMenuItem.defaultProps = restrictedMenuItemDefaultProps;
-const MenuLabel = props => {
-  var _context;
-  const localizedLabel = _findInstanceProperty__default["default"](_context = props.labelAllLocales).call(_context, loc => {
-    var _context2;
-    return _startsWithInstanceProperty__default["default"](_context2 = props.applicationLocale).call(_context2, loc.locale);
-  });
-  if (localizedLabel) return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: localizedLabel.value
-  });
-  if (props.defaultLabel) return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.defaultLabel
-  });
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: constants$1.NO_VALUE_FALLBACK
-  });
-};
-MenuLabel.propTypes = {
-  labelAllLocales: _pt__default["default"].arrayOf(_pt__default["default"].any).isRequired,
-  defaultLabel: _pt__default["default"].string,
-  applicationLocale: _pt__default["default"].string.isRequired
-};
-const NavBarLayout = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [jsxRuntime.jsx(react$1.Global, {
-    styles: /*#__PURE__*/react$1.css(compiledStyles$1.global, ";" + ("" ), "" )
-  }), jsxRuntime.jsx("nav", {
-    ref: ref,
-    className: styles$2['left-navigation'],
-    "data-test": "left-navigation",
-    "data-testid": "left-navigation",
-    children: props.children
-  })]
-}));
-NavBarLayout.displayName = 'NavBarLayout';
-
-const useLoadingMenuLayoutEffect = () => {
-  const cachedIsForcedMenuOpen = window.localStorage.getItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
-  const isForcedMenuOpen = isNil__default["default"](cachedIsForcedMenuOpen) ? null : JSON.parse(cachedIsForcedMenuOpen);
-  react.useLayoutEffect(() => {
-    if (isForcedMenuOpen) document.body.classList.add('body__menu-open');
-    if (!isForcedMenuOpen) document.body.classList.remove('body__menu-open');
-  }, [isForcedMenuOpen]);
-};
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-21b59702.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
-// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
-const 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  /* 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  min-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__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_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  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.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__icon___bLsep > svg *:not([fill='none']) {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  fill: var(--color-for-navbar-icon-when-active);\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.navbar-mod__list-item___MjK6t:not(.navbar-mod__item__active___lo1sr):hover .navbar-mod__title___eRWUj {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n}\n\n.body__menu-open .navbar-mod__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: 75px 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.navbar-mod__item_menu__active___5xFRw {\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.navbar-mod__item_menu-collapsed___cluyY.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY .navbar-mod__title___eRWUj {\n  max-height: 44px;\n  overflow: hidden;\n  /* stylelint-disable-next-line value-no-vendor-prefix */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\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  min-height: 100%;\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.navbar-mod__highlighted___oJWkA .navbar-mod__title___eRWUj {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-active) !important;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-active);\n}\n\n.navbar-mod__hidden___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider___TpVzu {\n  border-top: 1px solid var(--color-neutral-40);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  padding-bottom: 32px;\n  /* \n    FIXME: Make the navbar scrollable in collapsed state.\n    NOTE: do not use `overflow-x: hidden; overflow-y: auto;` as this prevents submenus from showing up on hover \n  */\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",
-    "scrollable-menu": "navbar-mod__scrollable-menu___64pxJ",
-    "list-item": "navbar-mod__list-item___MjK6t",
-    "item-link": "navbar-mod__item-link___X2Ina",
-    "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",
-    "item--bottom": "navbar-mod__item--bottom___eW7nh",
-    "item__active": "navbar-mod__item__active___lo1sr",
-    "item_menu-open": "navbar-mod__item_menu-open___zk0zh",
-    "item_menu-collapsed": "navbar-mod__item_menu-collapsed___cluyY",
-    "item__no-submenu": "navbar-mod__item__no-submenu___0lmiH",
-    "sublist": "navbar-mod__sublist___os1s7",
-    "sublist-no-children": "navbar-mod__sublist-no-children___Dy-h-",
-    "title-copy": "navbar-mod__title-copy___o2y1q",
-    "sublist__inactive": "navbar-mod__sublist__inactive___kJvf-",
-    "sublist-item": "navbar-mod__sublist-item___gafkS",
-    "text": "navbar-mod__text___ccHEu",
-    "text-link": "navbar-mod__text-link___dhtj6",
-    "item_menu__active": "navbar-mod__item_menu__active___5xFRw",
-    "icon-container": "navbar-mod__icon-container___w3FtA",
-    "fixed-menu": "navbar-mod__fixed-menu___42tD9",
-    "sublist-expanded__active": "navbar-mod__sublist-expanded__active___240JK",
-    "sublist-collapsed__active": "navbar-mod__sublist-collapsed__active___-9vYh",
-    "highlighted": "navbar-mod__highlighted___oJWkA",
-    "hidden": "navbar-mod__hidden___TQLSs",
-    "divider": "navbar-mod__divider___TpVzu",
-    "loading-dot-container": "navbar-mod__loading-dot-container___G2LVb"
-  }
-};
-const styles$1 = compiledStyles.jsonMap;
-const LoadingNavBar = () => {
-  var _context;
-  const ref = react.useRef(null);
-  useLoadingMenuLayoutEffect();
-  return jsxRuntime.jsx(NavBarLayout, {
-    ref: ref,
-    children: jsxRuntime.jsx(MenuGroup, {
-      id: "main",
-      level: 1,
-      children: jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: _mapInstanceProperty__default["default"](_context = _Array$from__default["default"](new Array(5))).call(_context, (_, index) => jsxRuntime.jsx(MenuItem, {
-          hasSubmenu: false,
-          isMenuOpen: false,
-          isActive: false,
-          onClick: () => undefined,
-          children: jsxRuntime.jsx("div", {
-            className: styles$1['loading-dot-container'],
-            "data-testid": "dot-container-".concat(index),
-            children: jsxRuntime.jsx(LoadingPlaceholder, {
-              shape: "dot",
-              size: "m"
-            })
-          })
-        }, index))
-      })
-    })
-  });
-};
-LoadingNavBar.displayName = 'LoadingNavBar';
-
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-5c3c1313.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-e2770668.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -1103,7 +702,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-567cd0e8.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-c6e99d06.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -1190,7 +789,7 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-cc82cee3.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-55feba64.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" */); }));
 
@@ -1213,13 +812,16 @@ const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().
  *   them to off until fetched).
  */
 
-const FLAGS = {};
+const MAIN_NAVIGATION = 'newMainNavigationBar';
+const FLAGS = {
+  [MAIN_NAVIGATION]: false
+};
 
-function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var FetchAllMenuFeatureToggles = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchAllMenuFeatureToggles" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allFeatureToggles" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 57, source: { body: "query FetchAllMenuFeatureToggles {\n  allFeatureToggles\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const defaultApiUrl = window.location.origin;
-const getDefaultedFeatureToggles = allFeatureToggles => _reduceInstanceProperty__default["default"](allFeatureToggles).call(allFeatureToggles, (previouslyDefaultedFeatureToggles, nextFeatureToggle) => _objectSpread$6(_objectSpread$6({}, previouslyDefaultedFeatureToggles), {}, {
+const getDefaultedFeatureToggles = allFeatureToggles => _reduceInstanceProperty__default["default"](allFeatureToggles).call(allFeatureToggles, (previouslyDefaultedFeatureToggles, nextFeatureToggle) => _objectSpread$7(_objectSpread$7({}, previouslyDefaultedFeatureToggles), {}, {
   [nextFeatureToggle]: false
 }), {});
 const useAllMenuFeatureToggles = () => {
@@ -1244,16 +846,18 @@ const useAllMenuFeatureToggles = () => {
   };
 };
 
-function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var AllFeaturesQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "AllFeatures" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allFeatures" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "reason" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 72, source: { body: "query AllFeatures {\n  allFeatures {\n    name\n    value\n    reason\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 // This value is hard-coded here because we want to make sure that the
 // app uses our account of LD. The value is meant to be public, so there
 // is no need to be concerned about security.
 const ldClientSideIdProduction = '5979d95f6040390cd07b5e01';
-function getUserCustomFieldsForLaunchDarklyAdapter(user, projectKey) {
+function getUserContextForLaunchDarklyAdapter(user, projectKey) {
   var _user$launchdarklyTra, _user$launchdarklyTra2, _user$launchdarklyTra3, _user$launchdarklyTra4, _user$launchdarklyTra5;
   return {
+    kind: 'user',
+    key: user === null || user === void 0 ? void 0 : user.id,
     project: projectKey !== null && projectKey !== void 0 ? projectKey : '',
     id: (_user$launchdarklyTra = user === null || user === void 0 ? void 0 : user.launchdarklyTrackingId) !== null && _user$launchdarklyTra !== void 0 ? _user$launchdarklyTra : '',
     team: (_user$launchdarklyTra2 = user === null || user === void 0 ? void 0 : user.launchdarklyTrackingTeam) !== null && _user$launchdarklyTra2 !== void 0 ? _user$launchdarklyTra2 : [],
@@ -1273,7 +877,7 @@ const SetupFlopFlipProvider = props => {
   const apolloClient = react$2.useApolloClient();
   const enableLongLivedFeatureFlags = applicationShellConnectors.useApplicationContext(context => context.environment.enableLongLivedFeatureFlags);
   const allMenuFeatureToggles = useAllMenuFeatureToggles();
-  const flags = react.useMemo(() => _objectSpread$5(_objectSpread$5(_objectSpread$5({}, FLAGS), allMenuFeatureToggles.allFeatureToggles), _flagsInstanceProperty__default["default"](props)), [allMenuFeatureToggles.allFeatureToggles, _flagsInstanceProperty__default["default"](props)]);
+  const flags = react.useMemo(() => _objectSpread$6(_objectSpread$6(_objectSpread$6({}, FLAGS), allMenuFeatureToggles.allFeatureToggles), _flagsInstanceProperty__default["default"](props)), [allMenuFeatureToggles.allFeatureToggles, _flagsInstanceProperty__default["default"](props)]);
   react.useMemo(() => {
     if (enableLongLivedFeatureFlags) {
       combineAdapters__default["default"].combine([ldAdapter__default["default"], httpAdapter__default["default"]]);
@@ -1281,9 +885,9 @@ const SetupFlopFlipProvider = props => {
       combineAdapters__default["default"].combine([ldAdapter__default["default"]]);
     }
   }, [enableLongLivedFeatureFlags]);
-  const defaultFlags = react.useMemo(() => _objectSpread$5(_objectSpread$5(_objectSpread$5({}, FLAGS), allMenuFeatureToggles.allFeatureToggles), props.defaultFlags), [allMenuFeatureToggles.allFeatureToggles, props.defaultFlags]);
+  const defaultFlags = react.useMemo(() => _objectSpread$6(_objectSpread$6(_objectSpread$6({}, FLAGS), allMenuFeatureToggles.allFeatureToggles), props.defaultFlags), [allMenuFeatureToggles.allFeatureToggles, props.defaultFlags]);
   const adapterArgs = react.useMemo(() => {
-    var _props$user, _props$ldClientSideId, _props$user2, _props$user3;
+    var _props$user, _props$ldClientSideId, _props$user2;
     return {
       user: {
         key: (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.id
@@ -1296,14 +900,11 @@ const SetupFlopFlipProvider = props => {
           clientSideId: (_props$ldClientSideId = props.ldClientSideId) !== null && _props$ldClientSideId !== void 0 ? _props$ldClientSideId : ldClientSideIdProduction
         },
         flags,
-        user: {
-          key: (_props$user2 = props.user) === null || _props$user2 === void 0 ? void 0 : _props$user2.id,
-          custom: getUserCustomFieldsForLaunchDarklyAdapter(props.user, props.projectKey)
-        }
+        context: getUserContextForLaunchDarklyAdapter(props.user, props.projectKey)
       },
       http: {
         user: {
-          key: (_props$user3 = props.user) === null || _props$user3 === void 0 ? void 0 : _props$user3.id
+          key: (_props$user2 = props.user) === null || _props$user2 === void 0 ? void 0 : _props$user2.id
         },
         execute: async function () {
           const response = await apolloClient.query({
@@ -1338,10 +939,23 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-b4681839.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-e1338396.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
 
-function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+// TODO: Remove this file once the new navigation is enabled for all users
+const NewMainNavigationFlagWrapper = props => {
+  const isNewNavigationEnabled = reactBroadcast.useFeatureToggle(MAIN_NAVIGATION);
+  const _useAdapterStatus = reactBroadcast.useAdapterStatus({
+      adapterIdentifiers: [types.adapterIdentifiers.launchdarkly]
+    }),
+    isReady = _useAdapterStatus.isReady;
+  return props.children({
+    isNewNavigationEnabled,
+    isNewNavigationEnabledEvaluationReady: isReady
+  });
+};
+
+function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const getHasUnauthorizedError = graphQLErrors => _findInstanceProperty__default["default"](graphQLErrors).call(graphQLErrors, gqlError => gqlError.extensions && gqlError.extensions.code && gqlError.extensions.code === 'UNAUTHENTICATED');
 const getHasUserBeenDeletedError = graphQLErrors => _findInstanceProperty__default["default"](graphQLErrors).call(graphQLErrors, gqlError => {
   var _context;
@@ -1351,10 +965,7 @@ const getHasUserBeenDeletedError = graphQLErrors => _findInstanceProperty__defau
 });
 const MainContainer = /*#__PURE__*/_styled__default["default"]("main", {
   target: "esrtekc0"
-} )({
-  name: "1rdshd",
-  styles: "grid-column:2;grid-row:3;min-width:0;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column;position:relative"
-} );
+} )(props => props.isNewNavigationEnabled ? "\n        grid-column: 2/3;\n        grid-row: 3/4;\n      " : "\n        grid-column: 2;\n        grid-row: 3;\n      ", ";min-width:0;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column;position:relative;" + ("" ));
 
 /**
  * This component is rendered whenever the user is considered "authenticated"
@@ -1365,14 +976,6 @@ var _ref = {
   styles: "flex-grow:1;display:flex;flex-direction:column;position:relative;>*:not(:first-of-type){flex-grow:1;display:flex;flex-direction:column;}"
 } ;
 var _ref2 = {
-  name: "14w5yo3",
-  styles: "position:relative;grid-row:3;display:flex;flex-direction:column"
-} ;
-var _ref3 = {
-  name: "fqjitq",
-  styles: "grid-row:2;grid-column:1/3"
-} ;
-var _ref4 = {
   name: "8bdwu0",
   styles: "grid-row:1;grid-column:1/3"
 } ;
@@ -1391,10 +994,10 @@ const ApplicationShellAuthenticated = props => {
     notificationsPageRef
   });
   return jsxRuntime.jsx(FetchUser, {
-    children: _ref5 => {
-      let isLoadingUser = _ref5.isLoading,
-        user = _ref5.user,
-        error = _ref5.error;
+    children: _ref3 => {
+      let isLoadingUser = _ref3.isLoading,
+        user = _ref3.user,
+        error = _ref3.error;
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
         if (error.graphQLErrors && _Array$isArray__default["default"](error.graphQLErrors)) {
@@ -1414,9 +1017,9 @@ const ApplicationShellAuthenticated = props => {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: _ref6 => {
-            let locale = _ref6.locale,
-              messages = _ref6.messages;
+          children: _ref4 => {
+            let locale = _ref4.locale,
+              messages = _ref4.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -1433,14 +1036,14 @@ const ApplicationShellAuthenticated = props => {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: _ref7 => {
-            let isLoadingLocaleData = _ref7.isLoading,
-              locale = _ref7.locale,
-              messages = _ref7.messages;
+          children: _ref5 => {
+            let isLoadingLocaleData = _ref5.isLoading,
+              locale = _ref5.locale,
+              messages = _ref5.messages;
             return jsxRuntime.jsx(ConfigureIntlProvider
             // We do not want to pass the language as long as the locale data
             // is not loaded.
-            , _objectSpread$4(_objectSpread$4({}, isLoadingLocaleData ? {} : {
+            , _objectSpread$5(_objectSpread$5({}, isLoadingLocaleData ? {} : {
               locale,
               messages
             }), {}, {
@@ -1450,180 +1053,189 @@ const ApplicationShellAuthenticated = props => {
                 ldClientSideId: applicationEnvironment.ldClientSideId,
                 flags: props.featureFlags,
                 defaultFlags: props.defaultFeatureFlags,
-                children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [jsxRuntime.jsx(ThemeSwitcher, {}), jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
-                    user: user !== null && user !== void 0 ? user : undefined
-                  }), jsxRuntime.jsxs("div", {
-                    css: /*#__PURE__*/react$1.css("height:100vh;display:grid;grid-template-rows:auto ", constants.DIMENSIONS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
-                    children: [jsxRuntime.jsxs("div", {
-                      ref: notificationsGlobalRef,
-                      role: "region",
-                      "aria-live": "polite",
-                      css: _ref4,
-                      children: [jsxRuntime.jsx("div", {
-                        id: "above-top-navigation"
-                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.GLOBAL
-                      })]
-                    }), jsxRuntime.jsx(reactRouterDom.Route, {
-                      children: () => {
-                        if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
-                        return jsxRuntime.jsx(FetchProject, {
-                          projectKey: projectKeyFromUrl,
-                          children: _ref8 => {
-                            let isProjectLoading = _ref8.isLoading,
-                              project = _ref8.project;
-                            if (isProjectLoading || !project) return null;
-
-                            // when used outside of a project context,
-                            // or when the project is expired or supsended
-                            const shouldUseProjectContext = !(project.suspension && project.suspension.isActive || project.expiry && project.expiry.isActive);
-                            if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
-                            return jsxRuntime.jsx(ProjectDataLocale, {
-                              locales: project.languages,
+                children: jsxRuntime.jsx(NewMainNavigationFlagWrapper, {
+                  children: _ref6 => {
+                    let isNewNavigationEnabled = _ref6.isNewNavigationEnabled,
+                      isNewNavigationEnabledEvaluationReady = _ref6.isNewNavigationEnabledEvaluationReady;
+                    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      children: [jsxRuntime.jsx(ThemeSwitcher, {}), jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
+                        user: user !== null && user !== void 0 ? user : undefined
+                      }), jsxRuntime.jsxs("div", {
+                        css: /*#__PURE__*/react$1.css("height:100vh;display:grid;grid-template-rows:auto ", constants.DIMENSIONS.header, " 1fr;grid-template-columns:minmax(", constants.DIMENSIONS.navMenu, ", auto) 1fr;" + ("" ), "" ),
+                        children: [jsxRuntime.jsxs("div", {
+                          ref: notificationsGlobalRef,
+                          role: "region",
+                          "aria-live": "polite",
+                          css: _ref2,
+                          children: [jsxRuntime.jsx("div", {
+                            id: "above-top-navigation"
+                          }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                            domain: constants$1.DOMAINS.GLOBAL
+                          })]
+                        }), jsxRuntime.jsx(reactRouterDom.Route, {
+                          children: () => {
+                            if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
+                            return jsxRuntime.jsx(FetchProject, {
+                              projectKey: projectKeyFromUrl,
+                              children: _ref7 => {
+                                let isProjectLoading = _ref7.isLoading,
+                                  project = _ref7.project;
+                                if (isProjectLoading || !project) return null;
+
+                                // when used outside of a project context,
+                                // or when the project is expired or supsended
+                                const shouldUseProjectContext = !(project.suspension && project.suspension.isActive || project.expiry && project.expiry.isActive);
+                                if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
+                                return jsxRuntime.jsx(ProjectDataLocale, {
+                                  locales: project.languages,
+                                  children: _ref8 => {
+                                    let dataLocale = _ref8.locale,
+                                      setProjectDataLocale = _ref8.setProjectDataLocale;
+                                    return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                                      user: user,
+                                      project: project,
+                                      projectDataLocale: dataLocale,
+                                      environment: applicationEnvironment,
+                                      children: jsxRuntime.jsx(QuickAccessTrigger, {
+                                        onChangeProjectDataLocale: setProjectDataLocale
+                                      })
+                                    });
+                                  }
+                                });
+                              }
+                            });
+                          }
+                        }), jsxRuntime.jsx("header", {
+                          css: /*#__PURE__*/react$1.css("grid-row:", isNewNavigationEnabled ? '2/3' : '2', ";grid-column:", isNewNavigationEnabled ? '2/3' : '1/3', ";" + ("" ), "" ),
+                          children: jsxRuntime.jsx(AppBar, {
+                            user: user,
+                            projectKeyFromUrl: projectKeyFromUrl
+                          })
+                        }), jsxRuntime.jsx("aside", {
+                          css: /*#__PURE__*/react$1.css(isNewNavigationEnabled === false && "position: relative;\n                                    grid-row: 3;\n                                    display: flex;\n                                    flex-direction: column;", " ", isNewNavigationEnabled === true && "grid-column: 1/2;\n                                    grid-row: 2/4;\n                                    overflow: hidden;", ";" + ("" ), "" ),
+                          children: (() => {
+                            // The <NavBar> should only be rendered within a project
+                            // context, therefore when there is a `projectKey`.
+                            // If there is no `projectKey` in the URL (e.g. `/account`
+                            // routes), we don't render it.
+                            // NOTE: we also "cache" the `projectKey` in localStorage
+                            // but this should only be used to "re-hydrate" the URL
+                            // location (e.g when you go to `/`, there should be a
+                            // redirect to `/:projectKey`). Therefore, we should not
+                            // rely on the value in localStorage to determine which
+                            // `projectKey` is currently used.
+                            if (!projectKeyFromUrl) return null;
+                            return jsxRuntime.jsx(FetchProject, {
+                              projectKey: projectKeyFromUrl,
                               children: _ref9 => {
-                                let dataLocale = _ref9.locale,
-                                  setProjectDataLocale = _ref9.setProjectDataLocale;
+                                let isLoadingProject = _ref9.isLoading,
+                                  project = _ref9.project;
+                                const isLoading = isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project;
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
-                                  project: project,
-                                  projectDataLocale: dataLocale,
-                                  environment: applicationEnvironment,
-                                  children: jsxRuntime.jsx(QuickAccessTrigger, {
-                                    onChangeProjectDataLocale: setProjectDataLocale
+                                  environment: applicationEnvironment
+                                  // NOTE: do not pass the `project` into the application context.
+                                  // The permissions for the Navbar are resolved separately, within
+                                  // a different React context.
+                                  ,
+                                  children: jsxRuntime.jsx(Navbar, {
+                                    applicationLocale: locale,
+                                    projectKey: projectKeyFromUrl,
+                                    project: project,
+                                    environment: applicationEnvironment,
+                                    onMenuItemClick: props.onMenuItemClick,
+                                    isLoading: isLoading,
+                                    isNewNavigationEnabled: isNewNavigationEnabled,
+                                    isNewNavigationEnabledEvaluationReady: isNewNavigationEnabledEvaluationReady
                                   })
                                 });
                               }
                             });
-                          }
-                        });
-                      }
-                    }), jsxRuntime.jsx("header", {
-                      css: _ref3,
-                      children: jsxRuntime.jsx(AppBar, {
-                        user: user,
-                        projectKeyFromUrl: projectKeyFromUrl
-                      })
-                    }), jsxRuntime.jsx("aside", {
-                      css: _ref2,
-                      children: (() => {
-                        // The <NavBar> should only be rendered within a project
-                        // context, therefore when there is a `projectKey`.
-                        // If there is no `projectKey` in the URL (e.g. `/account`
-                        // routes), we don't render it.
-                        // NOTE: we also "cache" the `projectKey` in localStorage
-                        // but this should only be used to "re-hydrate" the URL
-                        // location (e.g when you go to `/`, there should be a
-                        // redirect to `/:projectKey`). Therefore, we should not
-                        // rely on the value in localStorage to determine which
-                        // `projectKey` is currently used.
-                        if (!projectKeyFromUrl) return null;
-                        return jsxRuntime.jsx(FetchProject, {
-                          projectKey: projectKeyFromUrl,
-                          children: _ref10 => {
-                            let isLoadingProject = _ref10.isLoading,
-                              project = _ref10.project;
-                            // Render the loading navbar as long as all the data
-                            // hasn't been loaded, or if the project does not exist.
-                            if (isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project) return jsxRuntime.jsx(LoadingNavBar, {});
-                            return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
-                              user: user,
-                              environment: applicationEnvironment
-                              // NOTE: do not pass the `project` into the application context.
-                              // The permissions for the Navbar are resolved separately, within
-                              // a different React context.
-                              ,
-                              children: jsxRuntime.jsx(Navbar, {
-                                applicationLocale: locale,
-                                projectKey: projectKeyFromUrl,
-                                project: project,
-                                environment: applicationEnvironment,
-                                onMenuItemClick: props.onMenuItemClick
-                              })
-                            });
-                          }
-                        });
-                      })()
-                    }), isLoadingUser || isLoadingLocaleData ? jsxRuntime.jsx(MainContainer, {
-                      role: "main",
-                      children: jsxRuntime.jsx(ApplicationLoader, {})
-                    }) : jsxRuntime.jsxs(MainContainer, {
-                      role: "main",
-                      children: [jsxRuntime.jsx("div", {
-                        ref: notificationsPageRef,
-                        children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                          domain: constants$1.DOMAINS.PAGE
-                        })
-                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.SIDE
-                      }), jsxRuntime.jsxs("div", {
-                        css: _ref,
-                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
-                        // @ts-ignore
-                        , {
-                          ref: layoutRefs,
-                          offsetTop: constants.DIMENSIONS.header,
-                          offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
-                          offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
-                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
-                          children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
-                            from: "/profile",
-                            to: "/account/profile"
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            path: "/account",
-                            children:
-                            /**
-                             * In case the AppShell uses the `render` function, we assume it's one of two cases:
-                             * 1. The application does not use `children` and therefore implements the routes including
-                             * the <RouteCatchAll> (this is the "legacy" behavior).
-                             * 2. It's the account application, which always uses `render` and therefore should render as normal.
-                             *
-                             * In case the AppShell uses the `children` function, we can always assume that
-                             * it's a normal Custom Application and that it should trigger a force reload.
-                             */
-                            props.render ? jsxRuntime.jsx(jsxRuntime.Fragment, {
-                              children: props.render()
-                            }) : jsxRuntime.jsx(configureApollo.RouteCatchAll, {})
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            exact: true,
-                            path: "/",
-                            children: (() => {
-                              var _user$defaultProjectK;
-                              const previousProjectKey = getPreviousProjectKey((_user$defaultProjectK = user === null || user === void 0 ? void 0 : user.defaultProjectKey) !== null && _user$defaultProjectK !== void 0 ? _user$defaultProjectK : undefined);
-
-                              /**
-                               * NOTE:
-                               *   Given the user has not been loaded a loading spinner is shown.
-                               *   Given the user was not working on a project previously nor has a default
-                               *   project, the user will be prompted to create one.
-                               *   Given the user was working on a project previously or has a default
-                               *   project, the application will redirect to that project.
-                               */
-                              if (!user) return jsxRuntime.jsx(ApplicationLoader, {});
-                              if (!previousProjectKey) return jsxRuntime.jsx(RedirectToProjectCreate, {});
-                              return jsxRuntime.jsx(reactRouterDom.Redirect, {
-                                to: "/".concat(previousProjectKey)
-                              });
-                            })()
-                          }), jsxRuntime.jsx(reactRouterDom.Route, {
-                            exact: false,
-                            path: "/:projectKey",
-                            children: jsxRuntime.jsx(ProjectContainer, {
-                              user: user,
-                              environment: applicationEnvironment,
-                              disableRoutePermissionCheck: props.disableRoutePermissionCheck
-                              // This effectively renders the
-                              // children, which is the application
-                              // specific part
-                              ,
-                              render: props.render,
-                              children: props.children
+                          })()
+                        }), isLoadingUser || isLoadingLocaleData ? jsxRuntime.jsx(MainContainer, {
+                          isNewNavigationEnabled: isNewNavigationEnabled,
+                          role: "main",
+                          children: jsxRuntime.jsx(ApplicationLoader, {})
+                        }) : jsxRuntime.jsxs(MainContainer, {
+                          isNewNavigationEnabled: isNewNavigationEnabled,
+                          role: "main",
+                          children: [jsxRuntime.jsx("div", {
+                            ref: notificationsPageRef,
+                            children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                              domain: constants$1.DOMAINS.PAGE
                             })
+                          }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                            domain: constants$1.DOMAINS.SIDE
+                          }), jsxRuntime.jsxs("div", {
+                            css: _ref,
+                            children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+                            // @ts-ignore
+                            , {
+                              ref: layoutRefs,
+                              offsetTop: constants.DIMENSIONS.header,
+                              offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
+                              offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
+                            }), jsxRuntime.jsxs(reactRouterDom.Switch, {
+                              children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
+                                from: "/profile",
+                                to: "/account/profile"
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                path: "/account",
+                                children:
+                                /**
+                                 * In case the AppShell uses the `render` function, we assume it's one of two cases:
+                                 * 1. The application does not use `children` and therefore implements the routes including
+                                 * the <RouteCatchAll> (this is the "legacy" behavior).
+                                 * 2. It's the account application, which always uses `render` and therefore should render as normal.
+                                 *
+                                 * In case the AppShell uses the `children` function, we can always assume that
+                                 * it's a normal Custom Application and that it should trigger a force reload.
+                                 */
+                                props.render ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+                                  children: props.render()
+                                }) : jsxRuntime.jsx(configureApollo.RouteCatchAll, {})
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                exact: true,
+                                path: "/",
+                                children: (() => {
+                                  var _user$defaultProjectK;
+                                  const previousProjectKey = getPreviousProjectKey((_user$defaultProjectK = user === null || user === void 0 ? void 0 : user.defaultProjectKey) !== null && _user$defaultProjectK !== void 0 ? _user$defaultProjectK : undefined);
+
+                                  /**
+                                   * NOTE:
+                                   *   Given the user has not been loaded a loading spinner is shown.
+                                   *   Given the user was not working on a project previously nor has a default
+                                   *   project, the user will be prompted to create one.
+                                   *   Given the user was working on a project previously or has a default
+                                   *   project, the application will redirect to that project.
+                                   */
+                                  if (!user) return jsxRuntime.jsx(ApplicationLoader, {});
+                                  if (!previousProjectKey) return jsxRuntime.jsx(RedirectToProjectCreate, {});
+                                  return jsxRuntime.jsx(reactRouterDom.Redirect, {
+                                    to: "/".concat(previousProjectKey)
+                                  });
+                                })()
+                              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                                exact: false,
+                                path: "/:projectKey",
+                                children: jsxRuntime.jsx(ProjectContainer, {
+                                  user: user,
+                                  environment: applicationEnvironment,
+                                  disableRoutePermissionCheck: props.disableRoutePermissionCheck
+                                  // This effectively renders the
+                                  // children, which is the application
+                                  // specific part
+                                  ,
+                                  render: props.render,
+                                  children: props.children
+                                })
+                              })]
+                            })]
                           })]
                         })]
                       })]
-                    })]
-                  })]
+                    });
+                  }
                 })
               })
             }));
@@ -1671,9 +1283,9 @@ ApplicationPageTitle.propTypes = {
 ApplicationPageTitle.displayName = 'ApplicationPageTitle';
 ApplicationPageTitle.defaultProps = defaultProps$1;
 
-function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-const SuspendedRoute = props => jsxRuntime.jsx(reactRouterDom.Route, _objectSpread$3(_objectSpread$3({}, props), {}, {
+function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+const SuspendedRoute = props => jsxRuntime.jsx(reactRouterDom.Route, _objectSpread$4(_objectSpread$4({}, props), {}, {
   children: jsxRuntime.jsx(react.Suspense, {
     fallback: jsxRuntime.jsx(LoadingSpinner__default["default"], {}),
     children: props.children
@@ -1809,10 +1421,10 @@ 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-d31b1579.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-a6503499.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
 
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const Authenticated = props => {
   var _window$app$__DEVELOP, _window$app$__DEVELOP2;
   // We attempt to see if the user was already authenticated by looking
@@ -1837,7 +1449,7 @@ const Authenticated = props => {
   }
 
   // Fall back to check for cookie-based authentication.
-  return jsxRuntime.jsx(AmILoggedIn, _objectSpread$2({}, props));
+  return jsxRuntime.jsx(AmILoggedIn, _objectSpread$3({}, props));
 };
 Authenticated.displayName = 'Authenticated';
 const AuthenticationRoutes = props => jsxRuntime.jsxs(reactRouterDom.Switch, {
@@ -1854,13 +1466,13 @@ const AuthenticationRoutes = props => jsxRuntime.jsxs(reactRouterDom.Switch, {
       applicationMessages: props.applicationMessages
     })
   }), jsxRuntime.jsx(reactRouterDom.Route, {
-    children: jsxRuntime.jsx(Authenticated, _objectSpread$2({}, props))
+    children: jsxRuntime.jsx(Authenticated, _objectSpread$3({}, props))
   })]
 });
 AuthenticationRoutes.displayName = 'AuthenticationRoutes';
 
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 /**
  * NOTE:
  *   This function try-catches around a `JSON.parse` and return
@@ -1893,7 +1505,7 @@ const shallowlyCoerceValues = uncoercedEnvironmentValues => {
   var _context;
   return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](uncoercedEnvironmentValues)).call(_context, (coercedEnvironmentValues, key) => {
     const uncoercedEnvironmentValue = uncoercedEnvironmentValues[key];
-    return _objectSpread$1(_objectSpread$1({}, coercedEnvironmentValues), {}, {
+    return _objectSpread$2(_objectSpread$2({}, coercedEnvironmentValues), {}, {
       [key]: getCoerceEnvironmentValue(uncoercedEnvironmentValue)
     });
   }, {});
@@ -1959,7 +1571,7 @@ const ApplicationShellProvider = props => {
 ApplicationShellProvider.propTypes = {};
 ApplicationShellProvider.displayName = 'ApplicationShellProvider';
 
-const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-5710f920.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-d133b84f.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
 
 const styles = {
   name: "1prreal",
@@ -2012,6 +1624,197 @@ ApplicationShell.propTypes = {};
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = configureApollo.applicationShellVersion;
 
+/** All built-in and custom scalars, mapped to their actual values */
+let TCustomViewStatus = /*#__PURE__*/function (TCustomViewStatus) {
+  TCustomViewStatus["Draft"] = "DRAFT";
+  TCustomViewStatus["PrivateUsage"] = "PRIVATE_USAGE";
+  return TCustomViewStatus;
+}({});
+let TCustomViewType = /*#__PURE__*/function (TCustomViewType) {
+  TCustomViewType["CustomPanel"] = "CustomPanel";
+  return TCustomViewType;
+}({});
+
+const CustomViewContext = /*#__PURE__*/react.createContext({
+  config: {
+    id: '',
+    defaultLabel: '',
+    labelAllLocales: {},
+    url: '',
+    type: TCustomViewType.CustomPanel,
+    locators: [],
+    permissions: [],
+    createdAt: '',
+    installedBy: [],
+    owner: {
+      createdAt: '',
+      id: '',
+      organizationId: '',
+      updatedAt: ''
+    },
+    ownerId: '',
+    status: TCustomViewStatus.Draft,
+    updatedAt: ''
+  }
+});
+const CustomViewContextProvider = props => {
+  const contextValue = react.useMemo(() => ({
+    config: props.config
+  }), [props.config]);
+  return jsxRuntime.jsx(CustomViewContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+CustomViewContextProvider.propTypes = {};
+const useCustomViewContext = () => {
+  const context = react.useContext(CustomViewContext);
+  if (!context) {
+    throw new Error('useCustomViewContext must be used within a CustomViewContextProvider');
+  }
+  return context;
+};
+
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function CustomViewShellAuthenticated(props) {
+  const browserLocale = getBrowserLocale(window);
+  return jsxRuntime.jsx(FetchUser, {
+    children: _ref => {
+      let isLoading = _ref.isLoading,
+        fetchUserError = _ref.error,
+        user = _ref.user;
+      if (isLoading) {
+        return jsxRuntime.jsx(ApplicationLoader, {});
+      }
+      return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+        locale: (user === null || user === void 0 ? void 0 : user.language) || browserLocale,
+        applicationMessages: props.messages,
+        children: _ref2 => {
+          let isLoadingLocaleData = _ref2.isLoading,
+            locale = _ref2.locale,
+            messages = _ref2.messages;
+          return jsxRuntime.jsx(ConfigureIntlProvider
+          // We do not want to pass the language as long as the locale data
+          // is not loaded.
+          , _objectSpread$1(_objectSpread$1({}, isLoadingLocaleData ? {} : {
+            locale,
+            messages
+          }), {}, {
+            children: jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+              user: user,
+              environment: props.environment,
+              children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [jsxRuntime.jsx(designSystem.ThemeProvider, {
+                  theme: "default"
+                }), !props.projectKey && props.children, Boolean(props.projectKey) && jsxRuntime.jsx(FetchProject, {
+                  projectKey: props.projectKey,
+                  children: _ref3 => {
+                    let isProjectLoading = _ref3.isLoading,
+                      project = _ref3.project;
+                    if (fetchUserError) {
+                      return jsxRuntime.jsx(applicationComponents.PageUnauthorized, {});
+                    }
+                    if (isProjectLoading) {
+                      return jsxRuntime.jsx(ApplicationLoader, {});
+                    }
+                    return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                      user: user,
+                      project: project,
+                      projectDataLocale: props.dataLocale,
+                      environment: props.environment,
+                      children: props.children
+                    });
+                  }
+                })]
+              })
+            })
+          }));
+        }
+      });
+    }
+  });
+}
+CustomViewShellAuthenticated.propTypes = {};
+
+const browserLocale = getBrowserLocale(window);
+function CustomViewShell(props) {
+  const _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    hostContext = _useState2[0],
+    setHostContext = _useState2[1];
+  const iFrameCommunicationPort = react.useRef();
+  const hostMessageHandler = react.useCallback(event => {
+    if (event.data.eventName === constants$1.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION) {
+      setHostContext(event.data.eventData.context);
+    } else {
+      console.warn("CustomViewShell: Unknown received event with name: ".concat(event.data.eventName), {
+        event
+      });
+    }
+  }, []);
+  react.useEffect(() => {
+    const bootstrapMessageHandler = event => {
+      console.log('Custom view shell received message', {
+        event
+      });
+      if (event.origin === window.location.origin && event.data === constants$1.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP) {
+        iFrameCommunicationPort.current = event.ports[0];
+        iFrameCommunicationPort.current.onmessage = hostMessageHandler;
+        // Once bootstraped, we don't want to listen for global messages anymore.
+        // We will only listen to messages coming through the MessageChannel port.
+        window.removeEventListener('message', bootstrapMessageHandler);
+      } else {
+        console.warn('CustomViewShell: Received an event that is not allowed.', {
+          event
+        });
+      }
+    };
+    window.addEventListener('message', bootstrapMessageHandler);
+    return () => {
+      window.removeEventListener('message', bootstrapMessageHandler);
+    };
+  }, [hostMessageHandler]);
+  if (!hostContext) {
+    return jsxRuntime.jsx(ApplicationLoader, {
+      showLogo: true
+    });
+  }
+  return jsxRuntime.jsx(ApplicationShellProvider, {
+    environment: window.app,
+    applicationMessages: props.messages,
+    children: _ref => {
+      let isAuthenticated = _ref.isAuthenticated;
+      if (isAuthenticated) {
+        return jsxRuntime.jsx(CustomViewContextProvider, {
+          config: hostContext.customViewConfig,
+          children: jsxRuntime.jsx(CustomViewShellAuthenticated, {
+            dataLocale: hostContext.dataLocale,
+            environment: window.app,
+            messages: props.messages,
+            projectKey: hostContext.projectKey,
+            children: props.children
+          })
+        });
+      }
+      return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+        locale: browserLocale,
+        applicationMessages: props.messages,
+        children: _ref2 => {
+          let locale = _ref2.locale,
+            messages = _ref2.messages;
+          return jsxRuntime.jsx(ConfigureIntlProvider, {
+            locale: locale,
+            messages: messages,
+            children: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+          });
+        }
+      });
+    }
+  });
+}
+CustomViewShell.propTypes = {};
+
 const defaultProps = {
   shouldCleanUpOnUnmount: true
 };
@@ -2145,29 +1948,23 @@ exports.ApplicationShell = ApplicationShell;
 exports.ApplicationShellProvider = ApplicationShellProvider;
 exports.ButlerContainer = ButlerContainer;
 exports.ConfigureIntlProvider = ConfigureIntlProvider;
+exports.CustomViewContextProvider = CustomViewContextProvider;
+exports.CustomViewShell = CustomViewShell;
 exports.ErrorBoundary = ErrorBoundary;
-exports.Faded = Faded;
 exports.FetchProject = FetchProject;
-exports.IconSwitcher = IconSwitcher;
 exports.InjectReducers = InjectReducers;
-exports.MenuExpander = MenuExpander;
-exports.MenuGroup = MenuGroup;
-exports.MenuItem = MenuItem;
-exports.MenuItemDivider = MenuItemDivider;
-exports.MenuItemLink = MenuItemLink;
-exports.MenuLabel = MenuLabel;
-exports.NavBarLayout = NavBarLayout;
+exports.LoadingPlaceholder = LoadingPlaceholder;
 exports.ProjectDataLocale = ProjectDataLocale;
 exports.ProjectSwitcher = ProjectSwitcher;
 exports.REQUESTS_IN_FLIGHT_LOADER_DOM_ID = REQUESTS_IN_FLIGHT_LOADER_DOM_ID;
 exports.RedirectToLogin = RedirectToLogin;
 exports.RedirectToProjectCreate = RedirectToProjectCreate;
-exports.RestrictedMenuItem = RestrictedMenuItem;
 exports.SetupFlopFlipProvider = SetupFlopFlipProvider;
 exports.SuspendedRoute = SuspendedRoute;
 exports.createApolloContextForProxyForwardTo = createApolloContextForProxyForwardTo;
 exports.pimIndexerStates = pimIndexerStates;
 exports.setupGlobalErrorListener = setupGlobalErrorListener;
+exports.useCustomViewContext = useCustomViewContext;
 exports.useMcLazyQuery = useMcLazyQuery;
 exports.useMcMutation = useMcMutation;
 exports.useMcQuery = useMcQuery;