@commercetools-frontend/application-shell 21.16.0 → 21.17.0

package/dist/{index-66c10aaa.cjs.prod.js → index-4581e7d6.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-95970544.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-c63a6460.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,6 +24,7 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
+var designSystem = require('@commercetools-uikit/design-system');
 var constants = require('./constants-9ffc458b.cjs.prod.js');
 var uuid = require('uuid');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
@@ -42,7 +43,6 @@ var oidc = require('./oidc-d13fc045.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
-var designSystem = require('@commercetools-uikit/design-system');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Card = require('@commercetools-uikit/card');
@@ -1209,22 +1209,6 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
 
 ErrorBoundary.propTypes = {};
 
-var gridStyles = {
-  name: "r6l3ky",
-  styles: ".row clear:both;float:left;width:100%"
-} ;
-var resetStyles = /*#__PURE__*/react$2.css("*,*::before,*::after{box-sizing:inherit;}html,body{color:", designSystem.customProperties.colorSolid, ";font-family:'Open Sans',sans-serif;font-size:13px;margin:0;padding:0;height:100vh;}html{box-sizing:border-box;}h1,h2,h3,h4,h5,h6{margin:0;}button{cursor:pointer;}a{color:", designSystem.customProperties.colorPrimary, ";cursor:pointer;text-decoration:none;transition:color 0.2s ease-in;}p{color:", designSystem.customProperties.colorSolid, ";margin:0;}" + ("" ), "" );
-
-var GlobalStyles = function GlobalStyles() {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(react$2.Global, {
-      styles: gridStyles
-    }), jsxRuntime.jsx(react$2.Global, {
-      styles: resetStyles
-    })]
-  });
-};
-
 var getBrowserLocale = function getBrowserLocale(win) {
   var browserLocale = win && win.navigator && win.navigator.language;
   return l10n.getSupportedLocale(browserLocale);
@@ -1290,8 +1274,8 @@ var ApplicationShellProvider = function ApplicationShellProvider(props) {
   }, [apolloClient]);
   var coercedEnvironmentValues = useCoercedEnvironmentValues(props.environment);
   var browserLocale = getBrowserLocale(window);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ErrorBoundary, {
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(ErrorBoundary, {
       children: jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
         environment: coercedEnvironmentValues,
         children: jsxRuntime.jsx(reactRedux.Provider, {
@@ -1335,7 +1319,7 @@ var ApplicationShellProvider = function ApplicationShellProvider(props) {
           })
         })
       })
-    })]
+    })
   });
 };
 
@@ -1344,7 +1328,7 @@ ApplicationShellProvider.displayName = 'ApplicationShellProvider'; // This is us
 
 ApplicationShellProvider.history = history__default["default"];
 
-var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultProjectKey" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }], loc: { start: 0, end: 516, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    defaultProjectKey\n    businessRole\n    projects {\n      total\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultProjectKey" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "suspension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "expiry" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "isActive" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "idTokenUserInfo" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "iss" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "sub" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "aud" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "exp" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "iat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "additionalClaims" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 640, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    defaultProjectKey\n    businessRole\n    projects {\n      total\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n      }\n    }\n    idTokenUserInfo {\n      iss\n      sub\n      aud\n      exp\n      iat\n      email\n      name\n      additionalClaims\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 
 var FetchUser = function FetchUser(props) {
   var _useMcQuery = useMcQuery(LoggedInUserQuery, {
@@ -1956,7 +1940,7 @@ var _ref4$1 = {
   styles: "flex:1"
 } ;
 
-var _ref5$1 = {
+var _ref5 = {
   name: "zol16h",
   styles: "display:flex;flex:1;align-items:center"
 } ;
@@ -1966,7 +1950,7 @@ var ProjectSwitcherValueContainer = function ProjectSwitcherValueContainer(_ref6
       restProps = _objectWithoutProperties(_ref6, _excluded$1);
 
   return jsxRuntime.jsxs("div", {
-    css: _ref5$1,
+    css: _ref5,
     children: [jsxRuntime.jsx("div", {
       css: _ref4$1,
       children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
@@ -2403,19 +2387,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-903e64c9.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-28b4da26.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-d38c0a60.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-bdefb97a.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-ed02d6f9.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-20d04d23.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2462,7 +2446,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-9b1ce740.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-267991e0.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3101,7 +3085,7 @@ function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys$3(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys$3(Object(source))).call(_context12, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var compiledStyles = {
-  "global": ":root {\n\n  /* Left navigation */\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\n  display: flex;\n  flex-grow: 1;\n  width: 64px;\n  z-index: 19999;\n  background: #213c45;\n}\n\n.navbar-mod__list___RCV3J {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.navbar-mod__list-item___MjK6t {\n  width: 64px;\n  height: 64px;\n  background: #213c45;\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___X2Ina {\n  color: #fff;\n  padding: 16px;\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: space-between;\n  align-items: center;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon___bLsep {\n  width: 32px;\n  height: 32px;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 100;\n  color: #fff;\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__title-user-voice___oOLj8 {\n  font-size: 0.9em !important;\n}\n\n.navbar-mod__expander___jyAUi {\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  background: #1a1a1a;\n  align-items: center;\n  border-radius: 32px;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  transform: translateX(0) rotateZ(180deg);\n  width: 32px;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:hover {\n  background-color: hsl(195, 35.2941176471%, 30%);\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__title___eRWUj {\n  opacity: 1;\n  display: block;\n  transition: all 0.2s ease;\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n/* NO SUBMENU */\n\n.navbar-mod__item__no-submenu___0lmiH,\n.navbar-mod__item_menu-collapsed___cluyY {\n  height: 64px !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__title___eRWUj {\n  border-bottom: 0;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__sublist___os1s7 {\n  padding: 45px 20px 20px;\n}\n\n/* left-nav open */\n\n.body__menu-open .navbar-mod__title___eRWUj {\n  color: #fff;\n  font-weight: 100;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\n  box-shadow: 6px 0 10px rgba(0, 0, 0, 0.16);\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  height: auto;\n  min-height: 64px;\n  max-height: 0;\n  transition: max-height 0.15s ease-out;\n  overflow: hidden;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt,\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  width: 200px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  display: block;\n  opacity: 1;\n  margin-left: 16px;\n  color: #fff;\n}\n\n.body__menu-open .navbar-mod__expand-icon___BtmRa {\n  transform: translateX(65px) rotateZ(0deg);\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(32px + 16px);\n  padding: 8px 0 0;\n  background-color: transparent;\n  border-top: 1px hsl(0, 0%, 60%) solid;\n}\n\n.body__menu-open .navbar-mod__sublist___os1s7.navbar-mod__sublist-no-children___Dy-h- {\n  border: 0;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q {\n  font-size: 0.857em;\n  color: white;\n  text-decoration: none;\n  font-weight: lighter;\n  transition: all 0.15s ease;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q:hover {\n  color: hsl(172.9608938547486, 100%, 40%);\n}\n\n.body__menu-open .navbar-mod__expander___jyAUi {\n  min-height: 50px;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\n  padding: 55px 16px 16px;\n  font-weight: 100;\n  position: absolute;\n  background-color: hsl(195, 35.2941176471%, 30%);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: 3px 0;\n}\n\n.navbar-mod__sublist-item___gafkS:hover {\n  /* background-color: --color-accent-30; */\n  color: hsl(172.9608938547486, 100%, 40%);\n}\n\n.navbar-mod__text___ccHEu {\n  font-size: 0.857em;\n}\n\n.navbar-mod__text-link___dhtj6 {\n  color: white;\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6:hover {\n  color: hsl(172.9608938547486, 100%, 40%);\n}\n\n.navbar-mod__title-text___5DEpd {\n  font-weight: bold;\n  visibility: hidden;\n  opacity: 0.001;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr {\n  background: hsl(195, 35.2941176471%, 30%);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  position: absolute;\n  width: 175px;\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: 30px;\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: 16px;\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: 150px;\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(32px + 16px));\n}\n\n.navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh {\n  opacity: 1;\n  visibility: visible;\n  text-align: left;\n}\n\n.navbar-mod__highlighted___oJWkA {\n  color: hsl(172.9608938547486, 100%, 40%) !important;\n}\n\n.navbar-mod__hidden___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider-first-item___9Ftml {\n  border-top: 1px solid #1a1a1a;\n}\n\n.navbar-mod__divider-second-item___EDS33 {\n  border-top: 1px solid hsl(195, 35.2941176471%, 40%);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n}\n\n.navbar-mod__fixed-menu___42tD9 {\n  flex: 0 0 0;\n}\n",
+  "global": ":root {\n\n  /* Left navigation */\n}\n\n/* Left Nav */\n\n.navbar-mod__left-navigation___n7yUt {\n  display: flex;\n  flex-grow: 1;\n  width: 64px;\n  z-index: 19999;\n  background: var(--color-accent);\n}\n\n.navbar-mod__list___RCV3J {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1 1 0;\n}\n\n.body__menu-open .navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.navbar-mod__list-item___MjK6t {\n  width: 64px;\n  height: 64px;\n  background: var(--color-accent);\n  margin: 0;\n  list-style: none;\n  cursor: pointer;\n}\n\n.navbar-mod__item-link___X2Ina {\n  color: var(--color-surface);\n  padding: var(--spacing-m);\n  width: 100%;\n  position: relative;\n  display: block;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__item-icon-text___a-8JY {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__icon___bLsep {\n  width: 32px;\n  height: 32px;\n}\n\n.navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 100;\n  color: var(--color-surface);\n  display: none;\n  opacity: 0;\n  transition: all 0.25s ease-in-out;\n  text-align: left;\n  text-decoration: none;\n}\n\n.navbar-mod__title-user-voice___oOLj8 {\n  font-size: 0.9em !important;\n}\n\n.navbar-mod__expander___jyAUi {\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  background: var(--color-solid);\n  align-items: center;\n  border-radius: 32px;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  transform: translateX(0) rotateZ(180deg);\n  width: 32px;\n}\n\n.navbar-mod__item--bottom___eW7nh {\n  position: absolute;\n  bottom: 50px;\n}\n\n.navbar-mod__list-item___MjK6t:hover {\n  background-color: var(--color-accent-30);\n}\n\n.navbar-mod__item__active___lo1sr .navbar-mod__title___eRWUj {\n  opacity: 1;\n  display: block;\n  transition: all 0.2s ease;\n}\n\n.navbar-mod__item_menu-open___zk0zh {\n  height: auto !important;\n}\n\n/* NO SUBMENU */\n\n.navbar-mod__item__no-submenu___0lmiH,\n.navbar-mod__item_menu-collapsed___cluyY {\n  height: 64px !important;\n}\n\n.navbar-mod__item_menu-collapsed___cluyY .navbar-mod__item-link___X2Ina {\n  text-align: center;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__title___eRWUj {\n  border-bottom: 0;\n}\n\n.navbar-mod__item__no-submenu___0lmiH .navbar-mod__sublist___os1s7 {\n  padding: 45px 20px 20px;\n}\n\n/* left-nav open */\n\n.body__menu-open .navbar-mod__title___eRWUj {\n  color: var(--color-surface);\n  font-weight: 100;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt {\n  box-shadow: 6px 0 10px rgba(0, 0, 0, 0.16);\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  height: auto;\n  min-height: 64px;\n  max-height: 0;\n  transition: max-height 0.15s ease-out;\n  overflow: hidden;\n}\n\n.body__menu-open .navbar-mod__left-navigation___n7yUt,\n.body__menu-open .navbar-mod__list-item___MjK6t {\n  width: 200px;\n}\n\n.body__menu-open .navbar-mod__list-item___MjK6t .navbar-mod__title___eRWUj {\n  display: block;\n  opacity: 1;\n  margin-left: var(--spacing-m);\n  color: var(--color-surface);\n}\n\n.body__menu-open .navbar-mod__expand-icon___BtmRa {\n  transform: translateX(65px) rotateZ(0deg);\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(32px + var(--spacing-m));\n  padding: var(--spacing-s) 0 0;\n  background-color: transparent;\n  border-top: 1px var(--color-neutral-60) solid;\n}\n\n.body__menu-open .navbar-mod__sublist___os1s7.navbar-mod__sublist-no-children___Dy-h- {\n  border: 0;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q {\n  font-size: 0.857em;\n  color: white;\n  text-decoration: none;\n  font-weight: lighter;\n  transition: all 0.15s ease;\n}\n\n.body__menu-open .navbar-mod__title-copy___o2y1q:hover {\n  color: var(--color-primary-40);\n}\n\n.body__menu-open .navbar-mod__expander___jyAUi {\n  min-height: 50px;\n}\n\n/*  Second level menu */\n\n.navbar-mod__sublist___os1s7 {\n  padding: 55px var(--spacing-m) var(--spacing-m);\n  font-weight: 100;\n  position: absolute;\n  background-color: var(--color-accent-30);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: 3px 0;\n}\n\n.navbar-mod__sublist-item___gafkS:hover {\n  /* background-color: --color-accent-30; */\n  color: var(--color-primary-40);\n}\n\n.navbar-mod__text___ccHEu {\n  font-size: 0.857em;\n}\n\n.navbar-mod__text-link___dhtj6 {\n  color: white;\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6:hover {\n  color: var(--color-primary-40);\n}\n\n.navbar-mod__title-text___5DEpd {\n  font-weight: bold;\n  visibility: hidden;\n  opacity: 0.001;\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr {\n  background: var(--color-accent-30);\n}\n\n.navbar-mod__list-item___MjK6t.navbar-mod__item__active___lo1sr .navbar-mod__item-icon-text___a-8JY {\n  position: absolute;\n  width: 175px;\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: 30px;\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: 150px;\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(32px + var(--spacing-m)));\n}\n\n.navbar-mod__sublist-expanded__active___240JK,\n.navbar-mod__sublist-collapsed__active___-9vYh {\n  opacity: 1;\n  visibility: visible;\n  text-align: left;\n}\n\n.navbar-mod__highlighted___oJWkA {\n  color: var(--color-primary-40) !important;\n}\n\n.navbar-mod__hidden___TQLSs {\n  display: none;\n}\n\n.navbar-mod__divider-first-item___9Ftml {\n  border-top: 1px solid var(--color-solid);\n}\n\n.navbar-mod__divider-second-item___EDS33 {\n  border-top: 1px solid var(--color-accent-40);\n}\n\n.navbar-mod__loading-dot-container___G2LVb {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.navbar-mod__scrollable-menu___64pxJ {\n  flex: 1 1 0;\n}\n\n.navbar-mod__fixed-menu___42tD9 {\n  flex: 0 0 0;\n}\n",
   "jsonMap": {
     "left-navigation": "navbar-mod__left-navigation___n7yUt",
     "list": "navbar-mod__list___RCV3J",
@@ -3707,7 +3691,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-9470f281.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-9f784445.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3962,6 +3946,28 @@ var RedirectToLogout = function RedirectToLogout(props) {
   });
 };
 
+var appStyles = {
+  name: "172jsbd",
+  styles: "#app{height:100%;}"
+} ;
+var gridStyles = {
+  name: "r6l3ky",
+  styles: ".row clear:both;float:left;width:100%"
+} ;
+var resetStyles = /*#__PURE__*/react$2.css("*,*::before,*::after{box-sizing:inherit;}html,body{color:", designSystem.customProperties.colorSolid, ";font-family:'Open Sans',sans-serif;font-size:13px;margin:0;padding:0;height:100vh;}html{box-sizing:border-box;}h1,h2,h3,h4,h5,h6{margin:0;}button{cursor:pointer;}a{color:", designSystem.customProperties.colorPrimary, ";cursor:pointer;text-decoration:none;transition:color 0.2s ease-in;}p{color:", designSystem.customProperties.colorSolid, ";margin:0;}" + ("" ), "" );
+
+var GlobalStyles = function GlobalStyles() {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(react$2.Global, {
+      styles: appStyles
+    }), jsxRuntime.jsx(react$2.Global, {
+      styles: gridStyles
+    }), jsxRuntime.jsx(react$2.Global, {
+      styles: resetStyles
+    })]
+  });
+};
+
 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; }
@@ -3992,22 +3998,22 @@ var MainContainer = /*#__PURE__*/_styled__default["default"]("main", {
   styles: "grid-column:2;grid-row:3;min-width:0;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column;position:relative"
 } );
 
-var _ref2 = {
+var _ref = {
   name: "tlwzvn",
   styles: "flex-grow:1;display:flex;flex-direction:column;position:relative;>*:not(:first-of-type){flex-grow:1;display:flex;flex-direction:column;}"
 } ;
 
-var _ref3 = {
+var _ref2 = {
   name: "14w5yo3",
   styles: "position:relative;grid-row:3;display:flex;flex-direction:column"
 } ;
 
-var _ref4 = {
+var _ref3 = {
   name: "fqjitq",
   styles: "grid-row:2;grid-column:1/3"
 } ;
 
-var _ref5 = {
+var _ref4 = {
   name: "8bdwu0",
   styles: "grid-row:1;grid-column:1/3"
 } ;
@@ -4029,10 +4035,10 @@ var RestrictedApplication = function RestrictedApplication(props) {
     notificationsPageRef: notificationsPageRef
   });
   return jsxRuntime.jsx(FetchUser, {
-    children: function children(_ref6) {
-      var isLoadingUser = _ref6.isLoading,
-          user = _ref6.user,
-          error = _ref6.error;
+    children: function children(_ref5) {
+      var isLoadingUser = _ref5.isLoading,
+          user = _ref5.user,
+          error = _ref5.error;
 
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
@@ -4055,9 +4061,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref7) {
-            var locale = _ref7.locale,
-                messages = _ref7.messages;
+          children: function children(_ref6) {
+            var locale = _ref6.locale,
+                messages = _ref6.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -4075,12 +4081,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref8) {
+          children: function children(_ref7) {
             var _user$businessRole;
 
-            var isLoadingLocaleData = _ref8.isLoading,
-                locale = _ref8.locale,
-                messages = _ref8.messages;
+            var isLoadingLocaleData = _ref7.isLoading,
+                locale = _ref7.locale,
+                messages = _ref7.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 ? {} : {
@@ -4108,7 +4114,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                       ref: notificationsGlobalRef,
                       role: "region",
                       "aria-live": "polite",
-                      css: _ref5,
+                      css: _ref4,
                       children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
                         domain: constants$1.DOMAINS.GLOBAL
                       })
@@ -4117,9 +4123,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref9) {
-                            var isProjectLoading = _ref9.isLoading,
-                                project = _ref9.project;
+                          children: function children(_ref8) {
+                            var 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
 
@@ -4127,9 +4133,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                             if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
                             return jsxRuntime.jsx(ProjectDataLocale, {
                               locales: project.languages,
-                              children: function children(_ref10) {
-                                var dataLocale = _ref10.locale,
-                                    setProjectDataLocale = _ref10.setProjectDataLocale;
+                              children: function children(_ref9) {
+                                var dataLocale = _ref9.locale,
+                                    setProjectDataLocale = _ref9.setProjectDataLocale;
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
                                   project: project,
@@ -4145,13 +4151,13 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         });
                       }
                     }), jsxRuntime.jsx("header", {
-                      css: _ref4,
+                      css: _ref3,
                       children: jsxRuntime.jsx(AppBar, {
                         user: user,
                         projectKeyFromUrl: projectKeyFromUrl
                       })
                     }), jsxRuntime.jsx("aside", {
-                      css: _ref3,
+                      css: _ref2,
                       children: function () {
                         // The <NavBar> should only be rendered within a project
                         // context, therefore when there is a `projectKey`.
@@ -4166,9 +4172,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return null;
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref11) {
-                            var isLoadingProject = _ref11.isLoading,
-                                project = _ref11.project;
+                          children: function children(_ref10) {
+                            var 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, {});
@@ -4202,7 +4208,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                       }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
                         domain: constants$1.DOMAINS.SIDE
                       }), jsxRuntime.jsxs("div", {
-                        css: _ref2,
+                        css: _ref,
                         children: [jsxRuntime.jsx(applicationComponents.PortalsContainer // @ts-ignore
                         , {
                           ref: layoutRefs,
@@ -4283,11 +4289,6 @@ var RestrictedApplication = function RestrictedApplication(props) {
 };
 RestrictedApplication.displayName = 'RestrictedApplication';
 
-var _ref = {
-  name: "172jsbd",
-  styles: "#app{height:100%;}"
-} ;
-
 var ApplicationShell = function ApplicationShell(props) {
   react.useEffect(function () {
     var _props$onRegisterErro;
@@ -4298,15 +4299,15 @@ var ApplicationShell = function ApplicationShell(props) {
   }, []); // <-- run only once, when component mounts
 
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(react$2.Global, {
-      styles: _ref
-    }), jsxRuntime.jsx(ApplicationShellProvider, {
+    children: [jsxRuntime.jsx(designSystem.ThemeProvider, {
+      theme: "default"
+    }), jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
       apolloClient: props.apolloClient,
       environment: props.environment,
       trackingEventList: props.trackingEventList,
       applicationMessages: props.applicationMessages,
-      children: function children(_ref12) {
-        var isAuthenticated = _ref12.isAuthenticated;
+      children: function children(_ref11) {
+        var isAuthenticated = _ref11.isAuthenticated;
 
         if (isAuthenticated) {
           return jsxRuntime.jsxs(reactRouterDom.Switch, {