@commercetools-frontend/application-shell 21.23.10 → 21.24.1

package/dist/index-3765c4c9.cjs.prod.js

@@ -0,0 +1,2870 @@
+'use strict';
+
+var configureApollo = require('./configure-apollo-942ef373.cjs.prod.js');
+var _pt = require('prop-types');
+var react = require('react');
+var reactRouterDom = require('react-router-dom');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _styled = require('@emotion/styled/base');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var react$1 = require('@emotion/react');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+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-e6409334.cjs.prod.js');
+require('uuid');
+require('@babel/runtime-corejs3/core-js-stable/url');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var LogoSVG = require('@commercetools-frontend/assets/images/logo.svg');
+var designSystem = require('@commercetools-uikit/design-system');
+var Spacings = require('@commercetools-uikit/spacings');
+var reactIntl = require('react-intl');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var icons = require('@commercetools-uikit/icons');
+var useIsServedByProxy = require('./use-is-served-by-proxy-51e76976.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var memoize = require('memoize-one');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
+var SelectInput = require('@commercetools-uikit/select-input');
+var react$2 = require('@apollo/client/react');
+var CTLogoSVG = require('@commercetools-frontend/assets/images/ct-logo.svg');
+var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
+var l10n = require('@commercetools-frontend/l10n');
+var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
+var camelcase = require('lodash/camelCase');
+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');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
+var _flagsInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flags');
+var combineAdapters = require('@flopflip/combine-adapters');
+var httpAdapter = require('@flopflip/http-adapter');
+var ldAdapter = require('@flopflip/launchdarkly-adapter');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var Perfume = require('perfume.js');
+var reactRedux = require('react-redux');
+var history = require('@commercetools-frontend/browser-history');
+var upperFirst = require('lodash/upperFirst');
+var oidc = require('./oidc-540a091a.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');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/application-config/ssr');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var LogoSVG__default = /*#__PURE__*/_interopDefault(LogoSVG);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var memoize__default = /*#__PURE__*/_interopDefault(memoize);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
+var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
+var CTLogoSVG__default = /*#__PURE__*/_interopDefault(CTLogoSVG);
+var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
+var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseInstanceProperty);
+var camelcase__default = /*#__PURE__*/_interopDefault(camelcase);
+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);
+var _flagsInstanceProperty__default = /*#__PURE__*/_interopDefault(_flagsInstanceProperty);
+var combineAdapters__default = /*#__PURE__*/_interopDefault(combineAdapters);
+var httpAdapter__default = /*#__PURE__*/_interopDefault(httpAdapter);
+var ldAdapter__default = /*#__PURE__*/_interopDefault(ldAdapter);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var Perfume__default = /*#__PURE__*/_interopDefault(Perfume);
+var history__default = /*#__PURE__*/_interopDefault(history);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+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-a7bc4e12.cjs.prod.js'
+/* webpackChunkName: "requests-in-flight-loader" */
+); }));
+
+function selectProjectKeyFromLocalStorage() {
+  return window.localStorage.getItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY);
+}
+
+const getPreviousProjectKey = defaultProjectKeyOfUser => {
+  const previouslyUsedProjectKeyFromLocalStorage = selectProjectKeyFromLocalStorage();
+  if (previouslyUsedProjectKeyFromLocalStorage) return previouslyUsedProjectKeyFromLocalStorage;
+  if (defaultProjectKeyOfUser) return defaultProjectKeyOfUser;
+  return;
+};
+
+const createApolloContextForProxyForwardTo = proxyForwardTocontext => ({
+  // Send the request to the forward-to endpoint.
+  uri: "".concat(configureApollo.getMcApiUrl(), "/proxy/forward-to"),
+  // Custom properties to be used by the "header-link".
+  forwardToConfig: proxyForwardTocontext,
+  skipGraphQlTargetCheck: true
+});
+
+var messages$1 = reactIntl.defineMessages({
+  backToProjectLink: {
+    id: 'AppBar.backToProjectLink',
+    defaultMessage: 'Back to project'
+  }
+});
+
+/**
+ * Note:
+ *   A full page reload is needed as the user's project may have changed (deletions and/or additions).
+ *   As a result the project and user queries need refetching.
+ */
+const redirectToProject = key => useIsServedByProxy.location.replace("/".concat(key));
+
+const BackToProject = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(FlatButton__default["default"], {
+    onClick: () => redirectToProject(props.projectKey || ''),
+    icon: jsxRuntime.jsx(icons.AngleLeftIcon, {}),
+    label: intl.formatMessage(messages$1.backToProjectLink)
+  });
+};
+BackToProject.displayName = 'BackToProject';
+
+var _templateObject;
+const animationPulse = react$1.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), designSystem.customProperties.colorNeutral, designSystem.customProperties.colorNeutral95);
+
+const getWidthBySize = props => {
+  switch (props.shape) {
+    case 'dot':
+      switch (props.size) {
+        case 's':
+          return designSystem.customProperties.spacingS;
+
+        case 'm':
+          return designSystem.customProperties.spacingM;
+
+        case 'l':
+          return designSystem.customProperties.spacingL;
+
+        case 'xl':
+          return designSystem.customProperties.spacingXl;
+
+        default:
+          return 'auto';
+      }
+
+    case 'rect':
+      switch (props.size) {
+        case 's':
+          return '150px';
+
+        case 'm':
+          return '300px';
+
+        case 'l':
+          return '450px';
+
+        case 'xl':
+          return '600px';
+
+        default:
+          return 'auto';
+      }
+
+    default:
+      return 'auto';
+  }
+};
+
+const getHeightBySize = props => {
+  switch (props.shape) {
+    case 'dot':
+      return getWidthBySize(props);
+
+    case 'rect':
+      return '32px';
+
+    default:
+      return 'auto';
+  }
+};
+
+const getRadiusBySize = props => {
+  switch (props.shape) {
+    case 'dot':
+      switch (props.size) {
+        case 's':
+          return designSystem.customProperties.borderRadius4;
+
+        case 'm':
+          return '8px';
+
+        case 'l':
+          return '12px';
+
+        case 'xl':
+          return '16px';
+
+        default:
+          return 'none';
+      }
+
+    case 'rect':
+      return designSystem.customProperties.borderRadius4;
+
+    default:
+      return 'none';
+  }
+};
+
+const LoadingPlaceholder = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e4c5pm00"
+} )("background-color:", designSystem.customProperties.colorNeutral, ";animation-name:", animationPulse, ";animation-duration:1s;animation-timing-function:ease-out;animation-delay:0;animation-direction:alternate;animation-iteration-count:infinite;width:", getWidthBySize, ";height:", getHeightBySize, ";border-radius:", getRadiusBySize, ";" + ("" ));
+
+LoadingPlaceholder.displayName = 'LoadingPlaceholder';
+
+function useMcQuery(query, options) {
+  return react$2.useQuery(query, options);
+}
+
+function useMcLazyQuery(query, options) {
+  return react$2.useLazyQuery(query, options);
+}
+
+function useMcMutation(mutation, options) {
+  return react$2.useMutation(mutation, options);
+} // Custom Apollo query/mutation wrappers, useful to take advantage
+
+var messages = reactIntl.defineMessages({
+  projectsLabel: {
+    id: 'ProjectSwitcher.projectsLabel',
+    description: 'The label for project dropdown switcher',
+    defaultMessage: 'Projects menu'
+  },
+  searchPlaceholder: {
+    id: 'ProjectSwitcher.searchPlaceholder',
+    description: 'Projects filter search input placeholder',
+    defaultMessage: 'Search for a project'
+  },
+  noResults: {
+    id: 'ProjectSwitcher.noResults',
+    description: 'Projects filter no results text',
+    defaultMessage: 'Sorry, but there are no projects that match your search.'
+  },
+  suspended: {
+    id: 'ProjectSwitcher.suspended',
+    description: 'Label for a suspended project',
+    defaultMessage: 'Suspended'
+  },
+  expired: {
+    id: 'ProjectSwitcher.expired',
+    description: 'Label for a suspended project',
+    defaultMessage: 'Expired'
+  }
+});
+
+const _excluded$1 = ["projectCount"];
+
+function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(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$9(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 = {
+  name: "82a6rk",
+  styles: "flex:1"
+} ;
+
+var _ref4$1 = {
+  name: "zol16h",
+  styles: "display:flex;flex:1;align-items:center"
+} ;
+
+const ProjectSwitcherValueContainer = _ref5 => {
+  let projectCount = _ref5.projectCount,
+      restProps = _objectWithoutProperties(_ref5, _excluded$1);
+
+  const _useTheme = designSystem.useTheme(),
+        themedValue = _useTheme.themedValue;
+
+  return jsxRuntime.jsxs("div", {
+    css: _ref4$1,
+    children: [jsxRuntime.jsx("div", {
+      css: _ref3$1,
+      children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$9(_objectSpread$9({}, restProps), {}, {
+        children: restProps.children
+      }))
+    }), jsxRuntime.jsx("span", {
+      css: /*#__PURE__*/react$1.css("width:", themedValue('22px', '26px'), ";height:", themedValue('22px', '26px'), ";border-radius:100%;background:", themedValue(designSystem.designTokens.colorAccent40, designSystem.designTokens.colorNeutral), ";color:", designSystem.designTokens.colorSurface, ";font-size:", themedValue(designSystem.designTokens.fontSize15, designSystem.designTokens.fontSize30), ";display:flex;justify-content:center;align-items:center;" + ("" ), "" ),
+      children: projectCount
+    })]
+  });
+};
+
+var _ref$2 = {
+  name: "16lqnjx",
+  styles: "font-size:1.5rem;display:flex"
+} ;
+
+var _ref2$2 = {
+  name: "10s3lzp",
+  styles: "word-wrap:break-word"
+} ;
+
+const ProjectSwitcherOption = props => {
+  const project = props.data;
+  return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$9(_objectSpread$9({}, props), {}, {
+    children: jsxRuntime.jsxs("div", {
+      css: _ref2$2,
+      children: [jsxRuntime.jsxs("div", {
+        css: /*#__PURE__*/react$1.css("color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
+        children: [project.name, props.isDisabled && jsxRuntime.jsx("span", {
+          css: _ref$2,
+          children: jsxRuntime.jsx(icons.ErrorIcon, {
+            size: "medium"
+          })
+        })]
+      }), jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react$1.css("font-size:11px;color:", props.isDisabled ? designSystem.designTokens.colorNeutral : 'inherit', ";" + ("" ), "" ),
+        children: project.key
+      }), project.suspension && project.suspension.isActive && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react$1.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages.suspended))
+      }), project.expiry && project.expiry.isActive && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react$1.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages.expired))
+      })]
+    })
+  }));
+};
+const mapProjectsToOptions = memoize__default["default"](projects => _mapInstanceProperty__default["default"](projects).call(projects, project => ({
+  key: project.key,
+  name: project.name,
+  label: project.name,
+  value: project.key,
+  suspension: project.suspension,
+  expiry: project.expiry
+})));
+
+const redirectTo = targetUrl => useIsServedByProxy.location.replace(targetUrl);
+
+const ProjectSwitcher = props => {
+  const intl = reactIntl.useIntl();
+
+  const _useMcQuery = useMcQuery(ProjectsQuery, {
+    onError: sentry.reportErrorToSentry,
+    context: {
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+    }
+  }),
+        loading = _useMcQuery.loading,
+        data = _useMcQuery.data;
+
+  if (loading) return null;
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react$1.css("width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
+    "data-track-component": "ProjectSwitch",
+    "data-track-event": "click",
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: PROJECT_SWITCHER_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages.projectsLabel))
+      })
+    }), jsxRuntime.jsx(SelectInput__default["default"], {
+      value: props.projectKey || '',
+      name: "project-switcher",
+      "aria-labelledby": PROJECT_SWITCHER_LABEL_ID,
+      onChange: event => {
+        const selectedProjectKey = event.target.value;
+
+        if (selectedProjectKey !== props.projectKey) {
+          var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+          if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+            configureApollo.setActiveProjectKey(selectedProjectKey);
+          } // We simply redirect to a "new" browser page, instead of using the
+          // history router. This will simplify a lot of things and avoid possible
+          // problems like e.g. resetting the store/state.
+
+
+          redirectTo("/".concat(selectedProjectKey));
+        }
+      },
+      options: data && data.user && mapProjectsToOptions(data.user.projects.results),
+      isOptionDisabled: option => {
+        const project = option;
+        return project.suspension.isActive || project.expiry.isActive;
+      },
+      components: {
+        Option: ProjectSwitcherOption,
+        ValueContainer: valueContainerProps => jsxRuntime.jsx(ProjectSwitcherValueContainer, _objectSpread$9(_objectSpread$9({}, valueContainerProps), {}, {
+          projectCount: data && data.user && data.user.projects.results.length || 0
+        }))
+      },
+      isClearable: false,
+      backspaceRemovesValue: false,
+      placeholder: intl.formatMessage(messages.searchPlaceholder),
+      noOptionsMessage: () => intl.formatMessage(messages.noResults)
+    })]
+  });
+};
+
+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-7bf6f146.cjs.prod.js'
+/* webpackChunkName: "user-settings-menu" */
+); }));
+
+var _ref$1 = {
+  name: "36bnqj",
+  styles: "display:flex;flex:1"
+} ;
+
+var _ref2$1 = {
+  name: "hlihg7",
+  styles: "display:block;float:left;width:28px;height:32px;margin-left:20px"
+} ;
+
+const AppBar = props => {
+  var _props$user$defaultPr, _props$user;
+
+  const previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", applicationComponents.designTokens.shadowForAppbar, ";min-height:", constants.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    "data-test": "top-navigation",
+    children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      children: [jsxRuntime.jsx("div", {
+        css: _ref2$1,
+        children: !props.user ? jsxRuntime.jsx("img", {
+          src: LogoSVG__default["default"],
+          width: "100%",
+          alt: "Logo"
+        }) : jsxRuntime.jsx("a", {
+          href: "/".concat(previousProjectKey || ''),
+          children: jsxRuntime.jsx("img", {
+            src: LogoSVG__default["default"],
+            width: "100%",
+            alt: "Logo"
+          })
+        })
+      }), jsxRuntime.jsx("div", {
+        id: REQUESTS_IN_FLIGHT_LOADER_DOM_ID,
+        css: _ref$1
+      })]
+    }), jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$1.css("float:right;font-weight:normal;font-size:1rem;margin-right:", applicationComponents.designTokens.marginRightForAppbar, ";display:flex;align-items:center;" + ("" ), "" ),
+      children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "m",
+        alignItems: "center",
+        children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: "m",
+          alignItems: "center",
+          children: [jsxRuntime.jsx("div", {
+            id: constants.CONTAINERS.LOCALE_SWITCHER
+          }), (() => {
+            if (!props.user) {
+              return jsxRuntime.jsx(LoadingPlaceholder, {
+                shape: "rect",
+                size: "s"
+              });
+            } // The `<ProjectSwitcher>` should be rendered only if the
+            // user is fetched and the user has projects while the app runs in an project context.
+
+
+            if (props.user.projects.total > 0 && props.projectKeyFromUrl) return jsxRuntime.jsx(ProjectSwitcher // In this case it's not necessary to check if the `projectKey` param
+            // is included in the list of projects. In such case
+            // the dropdown will still be rendered but no project will be selected.
+            // This is fine becase the user has still the possibility to "switch"
+            // to a project.
+            , {
+              projectKey: props.projectKeyFromUrl || previousProjectKey
+            });
+            if (!props.user.defaultProjectKey) return null;
+            return jsxRuntime.jsx(BackToProject, {
+              projectKey: previousProjectKey
+            });
+          })()]
+        }), jsxRuntime.jsx("div", {
+          css: /*#__PURE__*/react$1.css("border-left:1px ", designSystem.designTokens.colorNeutral90, " solid;height:", constants.DIMENSIONS.headerItemDivider, ";" + ("" ), "" )
+        }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
+          language: props.user.language,
+          firstName: props.user.firstName,
+          lastName: props.user.lastName,
+          gravatarHash: props.user.gravatarHash,
+          email: props.user.email
+        }) : jsxRuntime.jsx(LoadingPlaceholder, {
+          shape: "dot",
+          size: "l"
+        })]
+      })
+    })]
+  });
+};
+
+AppBar.displayName = 'AppBar';
+
+const ApplicationLoader = props => jsxRuntime.jsxs("div", {
+  css: /*#__PURE__*/react$1.css("display:flex;align-items:center;justify-content:center;flex:1;flex-direction:column;height:100vh;padding:", designSystem.customProperties.spacingL, ";>*+*{margin:", designSystem.customProperties.spacingL, " 0 0;}" + ("" ), "" ),
+  "data-testid": "application-loader",
+  children: [jsxRuntime.jsx(LoadingSpinner__default["default"], {}), props.showLogo === true ? jsxRuntime.jsx("img", {
+    alt: "commercetools logo",
+    src: CTLogoSVG__default["default"]
+  }) : null]
+});
+
+ApplicationLoader.displayName = 'ApplicationLoader';
+
+const getBrowserLocale = win => {
+  const browserLocale = win && win.navigator && win.navigator.language;
+  return l10n.getSupportedLocale(browserLocale);
+};
+
+const hideAppLoader = () => {
+  /**
+   * NOTE:
+   *   This function is defined in the `index.html` in a script-tag
+   *   by the `html-template.js` in the `mc-scripts`. There are
+   *   alternative ways of acheiving this namely:
+   *   1. Using custom events and dispatching here
+   *     - Not supported in IE11 and would need a polyfill
+   *   2. Removing the DOM node here
+   *     - Both `index.html` and this component would have to
+   *       now the div's id/class. If one would change the index.html
+   *       the app would never show (always show the loading screen)
+   */
+  if (window.onAppLoaded) window.onAppLoaded();
+};
+
+const ConfigureIntlProvider = props => {
+  react.useEffect(() => {
+    if (props.locale) {
+      hideAppLoader();
+    }
+  }, [props.locale]);
+
+  if (!props.locale) {
+    return null;
+  }
+
+  return jsxRuntime.jsx(reactIntl.IntlProvider, {
+    locale: props.locale,
+    messages: props.messages,
+    children: props.children
+  });
+};
+
+ConfigureIntlProvider.propTypes = {};
+ConfigureIntlProvider.displayName = 'ConfigureIntlProvider';
+
+const ErrorApologizer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./error-apologizer-c55ec6f7.cjs.prod.js'
+/* webpackChunkName: "error-apologizer" */
+); }));
+
+var ProjectQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProject" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "projectKey" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "project" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "key" }, value: { kind: "Variable", name: { kind: "Name", value: "projectKey" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "version" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "countries" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "currencies" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "languages" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "initialized" }, 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: "daysLeft" }, 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: "reason" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "allAppliedPermissions" }, 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: "allAppliedActionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "allAppliedDataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "StoreDataFence" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "allPermissionsForAllApplications" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allAppliedPermissions" }, 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: "allAppliedActionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "allAppliedMenuVisibilities" }, 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: "allAppliedDataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "InlineFragment", typeCondition: { kind: "NamedType", name: { kind: "Name", value: "StoreDataFence" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "__typename" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "owner" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 997, source: { body: "query FetchProject($projectKey: String) {\n  project(key: $projectKey) {\n    key\n    version\n    name\n    countries\n    currencies\n    languages\n    initialized\n    expiry {\n      isActive\n      daysLeft\n    }\n    suspension {\n      isActive\n      reason\n    }\n    allAppliedPermissions {\n      name\n      value\n    }\n    allAppliedActionRights {\n      group\n      name\n      value\n    }\n    allAppliedDataFences {\n      ... on StoreDataFence {\n        type\n        name\n        value\n        group\n        __typename\n      }\n    }\n    allPermissionsForAllApplications {\n      allAppliedPermissions {\n        name\n        value\n      }\n      allAppliedActionRights {\n        group\n        name\n        value\n      }\n      allAppliedMenuVisibilities {\n        name\n        value\n      }\n      allAppliedDataFences {\n        ... on StoreDataFence {\n          type\n          name\n          value\n          group\n          __typename\n        }\n      }\n    }\n    owner {\n      id\n      name\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+
+const FetchProject = props => {
+  const _useMcQuery = useMcQuery(ProjectQuery, {
+    onError: sentry.reportErrorToSentry,
+    variables: {
+      projectKey: props.projectKey
+    },
+    context: {
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+    },
+    skip: props.skip === true
+  }),
+        loading = _useMcQuery.loading,
+        data = _useMcQuery.data,
+        error = _useMcQuery.error;
+
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children({
+      isLoading: loading,
+      error,
+      project: data && data.project
+    })
+  });
+};
+
+FetchProject.propTypes = {
+  projectKey: _pt__default["default"].string,
+  skip: _pt__default["default"].bool,
+  children: _pt__default["default"].func.isRequired
+};
+FetchProject.displayName = 'FetchProject';
+
+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: "createdAt" }, 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: 654, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    createdAt\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 } } } };
+
+const FetchUser = props => {
+  const _useMcQuery = useMcQuery(LoggedInUserQuery, {
+    onError: sentry.reportErrorToSentry,
+    context: {
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+    }
+  }),
+        loading = _useMcQuery.loading,
+        data = _useMcQuery.data,
+        error = _useMcQuery.error;
+
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children({
+      isLoading: loading,
+      user: data && data.user,
+      error
+    })
+  });
+};
+
+FetchUser.propTypes = {
+  children: _pt__default["default"].func.isRequired
+};
+FetchUser.displayName = 'FetchUser';
+
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$8(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$8(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+const isPlainTrackingListValue = value => typeof value === 'string';
+
+const isObjectTrackingListValue = value => typeof value === 'object';
+
+const isHtmlElement = node => node.dataset !== undefined;
+
+const getDataAttribute = (node, key) => {
+  if (isHtmlElement(node)) {
+    const camelKey = camelcase__default["default"](key.replace(/^data-/, ''));
+    return node.dataset[camelKey];
+  }
+
+  return undefined;
+};
+
+const isGtmEnabled = () => window.dataLayer && window.app.trackingGtm && window.app.trackingGtm !== 'null'; // The way that tracking works is like so:
+//
+// `data-track-component`: used to set up the hierarchy of the tracking ID.
+// `data-track-event`: if this attribute exists, track the event.
+// `data-track-strict`: if this exists, do not handle event bubbling.
+// `data-track-label`: additional meta information.
+// Listing and mapping certain generated event names to hardcoded events.
+// They should be keyed by generated name, valued by hardcoded name.
+
+
+const defaultEventList = {
+  LanguageSwitch: 'LanguageSwitch',
+  ProjectSwitch: 'ProjectSwitch',
+  ForgotPassword: 'ForgotPassword'
+};
+
+const logTracking = function (_ref) {
+  var _context, _context2;
+
+  let action = _ref.action,
+      category = _ref.category,
+      label = _ref.label,
+      variable = _ref.variable,
+      value = _ref.value;
+
+  let _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    isIgnored: false
+  },
+      isIgnored = _ref2.isIgnored;
+
+  const groupName = _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "%cGTM ".concat(isIgnored ? '%cignoring' : '%cperforming', " %ctracking %c")).call(_context2, category, " %c")).call(_context, label || '');
+
+  configureApollo.logger.groupCollapsed(groupName, 'color: gray; font-weight: bold;', "color: ".concat(isIgnored ? 'orangered' : 'seagreen', "; font-weight: lighter;"), 'color: gray; font-weight: lighter;', 'color: goldenrod; font-style: normal;', 'color: cornflowerblue; font-style: normal;');
+  if (action) configureApollo.logger.log('%caction', 'color: cadetblue;', action);
+  if (variable) configureApollo.logger.log('%cvariable', 'color: cadetblue;', variable);
+  if (typeof value === 'number') configureApollo.logger.log('%cvalue', 'color: red;', value);
+  configureApollo.logger.log('%ccategory', 'color: goldenrod; font-weight: bold;', category);
+  if (label) configureApollo.logger.log('%clabel', 'color: cornflowerblue; font-weight: bold;', label);
+  configureApollo.logger.groupEnd();
+};
+
+const track = (action, category, label) => {
+  if (!window.dataLayer) return;
+  logTracking({
+    action,
+    category,
+    label
+  }); // sends event to google tag manager based on the mapping defined there
+  // the mapped event is then forwarded to google analytics
+
+  window.dataLayer.push({
+    event: 'TrackingEvent',
+    trackingCategory: category,
+    trackingAction: action,
+    trackingLabel: label // trackingValue: metadata # TODO: use `custom dimensions`
+
+  });
+};
+const trackTiming = _ref3 => {
+  let category = _ref3.category,
+      variable = _ref3.variable,
+      value = _ref3.value,
+      label = _ref3.label;
+
+  if (isGtmEnabled()) {
+    logTracking({
+      variable,
+      value,
+      category,
+      label
+    });
+    window.dataLayer.push({
+      event: 'TimingEvent',
+      trackingCategory: category,
+      trackingVariable: variable,
+      trackingValue: value,
+      trackingLabel: label
+    });
+  }
+}; // Track custom dimensions
+
+const trackApplicationName = applicationName => {
+  if (isGtmEnabled()) window.dataLayer.push({
+    applicationName
+  });
+};
+const trackProjectKey = projectKey => {
+  if (isGtmEnabled() && projectKey) window.dataLayer.push({
+    projectKey
+  });
+};
+const trackUserBusinessRole = userBusinessRole => {
+  if (isGtmEnabled() && userBusinessRole) {
+    window.dataLayer.push({
+      userBusinessRole
+    });
+  }
+}; // Sometimes necessary to manually get the hierarchy.
+
+const getHierarchy = node => {
+  const hierarchy = [];
+  let parent = node;
+
+  while (parent) {
+    const dataTrackComponent = getDataAttribute(parent, 'data-track-component');
+    if (dataTrackComponent) hierarchy.push(dataTrackComponent);
+    parent = parent.parentNode;
+  }
+
+  _reverseInstanceProperty__default["default"](hierarchy).call(hierarchy);
+
+  return hierarchy.join('-');
+};
+
+const eventHandler = (name, trackingEventList) => event => {
+  if (!event.target) return;
+  const hierarchy = [];
+  let trackEvent;
+  let trackLabel;
+  let trackStrict;
+  let node = event.target;
+  const originalNode = node; // Traverse the target elements' parents to find a `data-track` attribute,
+  // and if none is found then do nothing.
+
+  while (node) {
+    const dataTrackComponent = getDataAttribute(node, 'data-track-component');
+    const dataTrackEvent = getDataAttribute(node, 'data-track-event');
+    const dataTrackLabel = getDataAttribute(node, 'data-track-label');
+    const dataTrackStrict = getDataAttribute(node, 'data-track-strict');
+
+    if (dataTrackEvent && (!dataTrackStrict || originalNode === node)) {
+      trackEvent = dataTrackEvent;
+      trackLabel = dataTrackLabel;
+      trackStrict = dataTrackStrict;
+      if (trackStrict) hierarchy.push(trackStrict);
+    }
+
+    if (dataTrackComponent) hierarchy.push(dataTrackComponent);
+    node = node.parentNode || null;
+  }
+
+  if (!trackEvent) return;
+  if (trackEvent !== name) return;
+
+  let hierarchyKey = _reverseInstanceProperty__default["default"](hierarchy).call(hierarchy).join('-'); // The event map also serves as an allow list. This is really not intuitive
+  // by looking at the name.
+  // Since we don't want to have all caught events to be sent automatically
+  // but only certain events that we are interesting in actually tracking
+  // there is a list of events that specifies which events should be
+  // sent to Google Tag manager
+  // Every application of the Merchant Center should maintain its own list of
+  // events it wants to be tracked. This list is passed in via the
+  // `trackingEventList` parameter that needs to be merged with the
+  // default event list.
+  // The default list contains all events that are not generated by a
+  // specific application, but by parts of the application shell itself like the
+  // menu or the profile view.
+
+
+  const eventList = _objectSpread$8(_objectSpread$8({}, defaultEventList), trackingEventList);
+
+  const eventValue = eventList[hierarchyKey]; // This checks:
+  // 1. if the event is in the allow list and is a string, map it
+  // 2. if the event is in the allow list, is an object,
+  //   and there is a matching key, then map to the value
+  // 3. if the event is not in the allow list then don't track
+
+  if (isPlainTrackingListValue(eventValue)) hierarchyKey = eventValue;else if (isObjectTrackingListValue(eventValue) && trackLabel && trackLabel in eventValue) hierarchyKey = eventValue[trackLabel];else {
+    logTracking({
+      action: trackEvent,
+      category: typeof hierarchyKey === 'object' && trackLabel ? hierarchyKey[trackLabel] : hierarchyKey,
+      label: trackLabel
+    }, {
+      isIgnored: true
+    });
+    return;
+  }
+  logTracking({
+    action: trackEvent,
+    category: typeof hierarchyKey === 'object' && trackLabel ? hierarchyKey[trackLabel] : hierarchyKey,
+    label: trackLabel
+  });
+  track(trackEvent, hierarchyKey, trackLabel);
+};
+
+const events = ['click', 'change', 'drop'];
+const boot = trackingEventList => {
+  _forEachInstanceProperty__default["default"](events).call(events, event => {
+    const handler = eventHandler(event, trackingEventList);
+    window.addEventListener(event, handler, true);
+  });
+};
+const updateUser = userId => {
+  if (isGtmEnabled()) window.dataLayer.push({
+    userId
+  });
+};
+const stopTrackingUser = () => {
+  if (isGtmEnabled()) window.dataLayer.push({
+    userId: undefined
+  });
+};
+
+const GtmApplicationTracker = props => {
+  react.useEffect(() => {
+    trackApplicationName(props.applicationName);
+    trackProjectKey(props.projectKey);
+    trackUserBusinessRole(props.userBusinessRole);
+  }, [props.applicationName, props.projectKey, props.userBusinessRole]);
+  return null;
+};
+
+GtmApplicationTracker.propTypes = {
+  applicationName: _pt__default["default"].string.isRequired,
+  projectKey: _pt__default["default"].string,
+  userBusinessRole: _pt__default["default"].string
+};
+GtmApplicationTracker.displayName = 'GtmApplicationTracker';
+
+/**
+ * This component will let gtm know if any information about the user has
+ * changed.
+ */
+const GtmUserTracker = props => {
+  react.useEffect(() => {
+    if (props.user) {
+      updateUser(props.user.id);
+    }
+  }, [props.user]);
+  return null;
+};
+
+GtmUserTracker.displayName = 'GtmUserTracker';
+
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-c02843fb.cjs.prod.js'
+/* webpackChunkName: "navbar" */
+); }));
+
+const trackingEventList = {
+  'Navigation-Categories': 'Navigation-Categories',
+  'Navigation-CategoriesSearch': 'Navigation-CategoriesSearch',
+  'Navigation-AddCategory': 'Navigation-AddCategory',
+  'Navigation-Customers': 'Navigation-Customers',
+  'Navigation-AddCustomer': 'Navigation-AddCustomer',
+  'Navigation-Dashboard': 'Navigation-Dashboard',
+  'Navigation-ProductDiscounts': 'Navigation-ProductDiscounts',
+  'Navigation-AddDiscount': 'Navigation-AddDiscount',
+  'Navigation-CartDiscounts': 'Navigation-CartDiscounts',
+  'Navigation-Orders': 'Navigation-Orders',
+  'Navigation-Products': 'Navigation-Products',
+  'Navigation-ProductList': 'Navigation-ProductList',
+  'Navigation-AddProduct': 'Navigation-AddProduct',
+  'Navigation-DirectAccess': 'Navigation-DirectAccess',
+  'Navigation-Taxes': 'Navigation-Taxes',
+  'Navigation-Support-links': 'Navigation-Support-links'
+};
+
+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; }
+// Expose a Context with the tracking functions.
+// This context can be used by consumers to access the values by either:
+// 1. using `<GtmContext.Consumer>`
+// 2. `static contextType = GtmContext;`
+// NOTE: we do not need to define a `GtmContext.Provider`, as React will
+// fall back to the default value defined, when the context was created,
+// in case the component does not have a matching Provider above in the tree.
+// https://reactjs.org/docs/context.html#reactcreatecontext
+const GtmContext = /*#__PURE__*/react.createContext({
+  track: track,
+  getHierarchy: getHierarchy,
+  trackUserBusinessRole: trackUserBusinessRole
+});
+
+const GtmBooter = props => {
+  react.useEffect(() => {
+    // We don't need any user data to start using GTM, for example for
+    // tracking page views and flows when the user is not logged in.
+    boot(_objectSpread$7(_objectSpread$7({}, trackingEventList), props.trackingEventList)); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+
+GtmBooter.propTypes = {
+  trackingEventList: _pt__default["default"].objectOf(_pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].objectOf(_pt__default["default"].string)])).isRequired,
+  children: _pt__default["default"].node.isRequired
+};
+GtmBooter.displayName = 'GtmBooter';
+
+var trackingEvents$1 = {
+  collapseMainNav: {
+    action: 'CollapseMainNav',
+    category: 'Main-Navigation',
+    label: 'Collapse Main Navigation'
+  },
+  expandMainNav: {
+    action: 'ExpandMainNav',
+    category: 'Main-Navigation',
+    label: 'Expand Main Navigation'
+  },
+  goToSupport: {
+    action: 'GoToSupport',
+    category: 'Main-Navigation',
+    label: 'Go to Support'
+  }
+};
+
+const _excluded = ["icon"];
+
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(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$6(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: 55px var(--spacing-l) var(--spacing-m);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  position: absolute;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: var(--spacing-s) 0 0;\n}\n\n.navbar-mod__sublist-item___gafkS:first-of-type {\n  padding: 0;\n}\n\n.navbar-mod__sublist-item___gafkS:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n}\n\n.navbar-mod__text___ccHEu {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n}\n\n.navbar-mod__text-link___dhtj6 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr,\n.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.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\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-000a023d.cjs.prod.js'); }));
+const PaperclipIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./paperclip-23d1e69c.cjs.prod.js'); }));
+const PluginIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./plugin-7e57f237.cjs.prod.js'); }));
+const RocketIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./rocket-3e3f0a98.cjs.prod.js'); }));
+const StarIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./star-f8502efb.cjs.prod.js'); }));
+const ConnectedSquareIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./connected-square-b2e25621.cjs.prod.js'); }));
+const WorldIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./world-e1f9dbf8.cjs.prod.js'); }));
+const TreeStructureIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tree-structure-f24ee3f6.cjs.prod.js'); }));
+const UserFilledIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-filled-815b49a0.cjs.prod.js'); }));
+const SpeedometerIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./speedometer-2881cef6.cjs.prod.js'); }));
+const TagMultiIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./tag-multi-f9acb1c2.cjs.prod.js'); }));
+const CartIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./cart-0698b97d.cjs.prod.js'); }));
+const BoxIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./box-8850277f.cjs.prod.js'); }));
+const GearIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./gear-2890f7fb.cjs.prod.js'); }));
+const ListWithSearchIcon = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./list-with-search-a5b72b33.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$6({
+      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$6({}, iconProps));
+
+    case 'UserFilledIcon':
+      return jsxRuntime.jsx(UserFilledIcon, _objectSpread$6({}, iconProps));
+
+    case 'SpeedometerIcon':
+      return jsxRuntime.jsx(SpeedometerIcon, _objectSpread$6({}, iconProps));
+
+    case 'TagMultiIcon':
+      return jsxRuntime.jsx(TagMultiIcon, _objectSpread$6({}, iconProps));
+
+    case 'CartIcon':
+      return jsxRuntime.jsx(CartIcon, _objectSpread$6({}, iconProps));
+
+    case 'BoxIcon':
+      return jsxRuntime.jsx(BoxIcon, _objectSpread$6({}, iconProps));
+
+    case 'GearIcon':
+      return jsxRuntime.jsx(GearIcon, _objectSpread$6({}, iconProps));
+
+    case 'ListWithSearchIcon':
+      return jsxRuntime.jsx(ListWithSearchIcon, _objectSpread$6({}, iconProps));
+    // Custom application icons set
+
+    case 'HeartIcon':
+      return jsxRuntime.jsx(HeartIcon, _objectSpread$6({}, iconProps));
+
+    case 'PaperclipIcon':
+      return jsxRuntime.jsx(PaperclipIcon, _objectSpread$6({}, iconProps));
+
+    case 'PluginIcon':
+      return jsxRuntime.jsx(PluginIcon, _objectSpread$6({}, iconProps));
+
+    case 'RocketIcon':
+      return jsxRuntime.jsx(RocketIcon, _objectSpread$6({}, iconProps));
+
+    case 'StarIcon':
+      return jsxRuntime.jsx(StarIcon, _objectSpread$6({}, iconProps));
+
+    case 'ConnectedSquareIcon':
+      return jsxRuntime.jsx(ConnectedSquareIcon, _objectSpread$6({}, iconProps));
+    // For backwards compatibility
+
+    case 'WorldIcon':
+      return jsxRuntime.jsx(WorldIcon, _objectSpread$6({}, iconProps));
+
+    default:
+      return jsxRuntime.jsx("img", {
+        src: MissingImageSvg__default["default"],
+        alt: "missing icon"
+      });
+  }
+};
+
+IconSwitcher.propTypes = {};
+IconSwitcher.displayName = 'IconSwitcher';
+
+const MenuExpander = props => {
+  const gtmTracking = react.useContext(GtmContext);
+  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: event => {
+        const _trackingEvents = trackingEvents$1[props.isMenuOpen ? 'collapseMainNav' : 'expandMainNav'],
+              action = _trackingEvents.action,
+              category = _trackingEvents.category,
+              label = _trackingEvents.label;
+        gtmTracking.track(action, category, label);
+        props.onClick(event);
+      },
+      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: "menu-item",
+    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 gtmTracking = react.useContext(GtmContext);
+
+  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, gtmTracking.track);
+        }
+      },
+      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",
+    "data-track-component": "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 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: 55px var(--spacing-l) var(--spacing-m);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  position: absolute;\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  background-color: var(--background-color-for-navbar);\n  top: 0;\n  left: 64px;\n  z-index: -1;\n  list-style: none;\n  opacity: 0.01;\n  visibility: hidden;\n}\n\n.navbar-mod__sublist__inactive___kJvf- {\n  /* empty block */\n}\n\n.navbar-mod__sublist-item___gafkS {\n  padding: var(--spacing-s) 0 0;\n}\n\n.navbar-mod__sublist-item___gafkS:first-of-type {\n  padding: 0;\n}\n\n.navbar-mod__sublist-item___gafkS:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n}\n\n.navbar-mod__text___ccHEu {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-size: var(--font-size-for-navbar-link);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  line-height: var(--line-height-for-navbar-link);\n}\n\n.navbar-mod__text-link___dhtj6 {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link);\n  text-decoration: none;\n  transition: all 0.15s ease;\n}\n\n.navbar-mod__text-link___dhtj6:hover {\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  color: var(--color-for-navbar-link-when-hovered);\n  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n  font-weight: var(--font-weight-for-navbar-link-when-hovered);\n}\n\n/* Item active */\n\n.navbar-mod__item__active___lo1sr,\n.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.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\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-bf8678e2.cjs.prod.js'
+/* webpackChunkName: "project-container" */
+); }));
+
+const getSelectedDataLocaleForProject = projectLocales => {
+  const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE); // Make sure the cached locale is listed in the selected project
+
+  const isCachedDataLocaleIncludedInProjectLanguages = _includesInstanceProperty__default["default"](projectLocales).call(projectLocales, cachedDataLocale || '');
+
+  if (cachedDataLocale && isCachedDataLocaleIncludedInProjectLanguages) return cachedDataLocale; // Pick the first locale from the list
+
+  const defaultDataLocaleForProject = projectLocales[0]; // Cache it
+
+  window.localStorage.setItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE, defaultDataLocaleForProject);
+  return defaultDataLocaleForProject;
+};
+
+const ProjectDataLocale = props => {
+  const _useState = react.useState(getSelectedDataLocaleForProject(props.locales)),
+        _useState2 = _slicedToArray(_useState, 2),
+        locale = _useState2[0],
+        setLocale = _useState2[1];
+
+  const handleSetProjectDataLocale = react.useCallback(locale => {
+    setLocale(locale); // Cache it
+
+    window.localStorage.setItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE, locale);
+  }, []);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children({
+      locale,
+      setProjectDataLocale: handleSetProjectDataLocale
+    })
+  });
+};
+
+ProjectDataLocale.propTypes = {
+  locales: _pt__default["default"].arrayOf(_pt__default["default"].string).isRequired,
+  children: _pt__default["default"].func.isRequired
+};
+ProjectDataLocale.displayName = 'ProjectDataLocale';
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+let ErrorBoundary = /*#__PURE__*/function (_Component) {
+  _inherits(ErrorBoundary, _Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call(this, ...args);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      const hasRouteChanged = prevProps.pathname !== this.props.pathname;
+      this.setState(prevState => hasRouteChanged && prevState.hasError ? {
+        hasError: false
+      } : null);
+    }
+  }, {
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // Note: In development mode componentDidCatch is not based on try-catch
+      // to catch exceptions. Thus exceptions caught here will also be caught in
+      // the global `error` event listener (setup-global-error-listener.js).
+      // see: https://github.com/facebook/react/issues/10474
+      sentry.reportErrorToSentry(error, {
+        extra: errorInfo
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return jsxRuntime.jsx(ErrorApologizer, {});
+      }
+
+      return jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: this.props.children
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function
+      /* error */
+    getDerivedStateFromError() {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(react.Component);
+
+ErrorBoundary.propTypes = {};
+
+const ButlerContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1fuwyk10"
+} )({
+  name: "xvk698",
+  styles: "position:absolute;left:0;bottom:0;top:0;right:0;background-color:rgba(0, 0, 0, 0.35);z-index:20001"
+} );
+
+var pimIndexerStates = {
+  // we did not check yet
+  UNCHECKED: 'UNCHECKED',
+  // the project is indexed by pim-indexer
+  INDEXED: 'INDEXED',
+  // the project is not indexed by pim-indexer
+  NOT_INDEXED: 'NOT_INDEXED'
+};
+
+var trackingEvents = {
+  openQuickAccess: {
+    event: 'keydown',
+    category: 'QuickAccess',
+    label: 'quick_access_open'
+  }
+};
+
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-517ad7e1.cjs.prod.js'
+/* webpackChunkName: "quick-access" */
+); }));
+
+const QuickAccessTrigger = props => {
+  const _useState = react.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isVisible = _useState2[0],
+        setIsVisible = _useState2[1];
+
+  const open = react.useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const close = react.useCallback(() => {
+    setIsVisible(false);
+  }, []); // We store the information of whether a project is indexed by pim-indexer,
+  // to avoid having to refetch that information every time Quick Access is
+  // opened. We can't move the information to the quick-access.js component
+  // as that component unmounts and would lose its state.
+  //
+  // We need to know whether a project is indexed by pim-indexer to know
+  // whether we should query pim-search or whether we can skip that request.
+  //
+  // We don't need to update this information when the project key changes,
+  // as changing a project always results in a full page reload anyways.
+
+  const _useState3 = react.useState(pimIndexerStates.UNCHECKED),
+        _useState4 = _slicedToArray(_useState3, 2),
+        pimIndexerState = _useState4[0],
+        setPimIndexerState = _useState4[1];
+
+  const handlePimIndexerStateChange = react.useCallback(nextPimIndexerState => {
+    setPimIndexerState(nextPimIndexerState);
+  }, []);
+  const keyHandler = react.useCallback(event => {
+    const hotKey = 'f'; // avoid interfering with any key combinations using modifier keys
+
+    if (event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) return; // Let users close QuickAccess by pressing Escape
+
+    if (event.key === 'Escape' && event.target.id === 'quick-access-search-input') {
+      close();
+      return;
+    } // Avoid interfering with any other elements. We only
+    // open the QuickAccess when nothing was focused, so target is document.body
+
+
+    if (event.target !== document.body && // tabIndex="-1" has a special meaning
+    // It will make the element focusable, while hiding it from the
+    // navigation. It is typically used for modals and overlays.
+    // react-modal uses it for example. We want to treat those elements
+    // similar to document.body.
+    // See https://stackoverflow.com/a/32912224
+    event.target.getAttribute('tabindex') !== '-1' && // Do not prevent Quick Access from opening when a link has focus
+    event.target.nodeName !== 'A') return;
+
+    if (event.key === hotKey) {
+      if (!isVisible) {
+        // prevent the letter from appearing in the search input when
+        // it is the key press that lead to opening Quick Access
+        event.preventDefault(); // We use tracking directly here as it's the easiest
+        // Otherwise we'd have to duplicate injectTracking from core, as we
+        // can't import it from there
+
+        track(trackingEvents.openQuickAccess.event, trackingEvents.openQuickAccess.category, trackingEvents.openQuickAccess.label);
+      }
+
+      open();
+    }
+
+    return;
+  }, [close, isVisible, open]);
+  react.useEffect(() => {
+    document.addEventListener('keydown', keyHandler);
+    return () => {
+      document.removeEventListener('keydown', keyHandler);
+    };
+  }, [keyHandler]);
+  if (!isVisible) return null;
+  return jsxRuntime.jsx(ErrorBoundary, {
+    children: jsxRuntime.jsx(react.Suspense, {
+      fallback: jsxRuntime.jsx(ButlerContainer, {
+        tabIndex: -1
+      }),
+      children: jsxRuntime.jsx(QuickAccess, {
+        pimIndexerState: pimIndexerState,
+        onPimIndexerStateChange: handlePimIndexerStateChange,
+        onClose: close,
+        onChangeProjectDataLocale: props.onChangeProjectDataLocale
+      })
+    })
+  });
+};
+
+QuickAccessTrigger.propTypes = {};
+QuickAccessTrigger.displayName = 'QuickAccessTrigger';
+
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-17e4ba2c.cjs.prod.js'
+/* webpackChunkName: "redirect-to-logout" */
+); }));
+
+const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-048efa71.cjs.prod.js'
+/* webpackChunkName: "redirect-to-project-create" */
+); }));
+
+/*
+ * This file contains a list of all feature toggles used within
+ * the app shell. Each feature toggle should be a constant.
+ *
+ * ```
+ * export const FEATURE_TOGGLE_NAME = 'featureToggleName';
+ * export const FLAGS = {
+ *   [FEATURE_TOGGLE_NAME]: false,
+ * };
+ * ```
+ *
+ * NOTE:
+ *   Default values are not yet passed to flopflip and it has to be decided
+ *   how the integrate with the plugin API.
+ *   The default values would be used whenever feature toggles have not been
+ *   fetched from LaunchDarkly (without default values flopflip will default
+ *   them to off until fetched).
+ */
+const UI_REDESIGN = 'uiRedesign';
+const FLAGS = {
+  [UI_REDESIGN]: false
+};
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(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$5(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$5(_objectSpread$5({}, previouslyDefaultedFeatureToggles), {}, {
+  [nextFeatureToggle]: false
+}), {});
+
+const useAllMenuFeatureToggles = () => {
+  const servedByProxy = useIsServedByProxy.useIsServedByProxy();
+  const mcProxyApiUrl = applicationShellConnectors.useApplicationContext(applicationContext => applicationContext.environment.mcProxyApiUrl);
+
+  const _useMcQuery = useMcQuery(FetchAllMenuFeatureToggles, {
+    fetchPolicy: 'cache-and-network',
+    skip: !servedByProxy,
+    onError: sentry.reportErrorToSentry,
+    context: {
+      uri: "".concat(mcProxyApiUrl || defaultApiUrl, "/api/graphql"),
+      skipGraphQlTargetCheck: true
+    }
+  }),
+        data = _useMcQuery.data,
+        refetch = _useMcQuery.refetch,
+        loading = _useMcQuery.loading;
+
+  return {
+    isLoading: loading,
+    refetch,
+    allFeatureToggles: data && getDefaultedFeatureToggles(data.allFeatureToggles) || {}
+  };
+};
+
+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; }
+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) {
+  var _user$launchdarklyTra, _user$launchdarklyTra2, _user$launchdarklyTra3, _user$launchdarklyTra4, _user$launchdarklyTra5;
+
+  return {
+    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 : [],
+    group: (_user$launchdarklyTra3 = user === null || user === void 0 ? void 0 : user.launchdarklyTrackingGroup) !== null && _user$launchdarklyTra3 !== void 0 ? _user$launchdarklyTra3 : '',
+    subgroup: (_user$launchdarklyTra4 = user === null || user === void 0 ? void 0 : user.launchdarklyTrackingSubgroup) !== null && _user$launchdarklyTra4 !== void 0 ? _user$launchdarklyTra4 : '',
+    tenant: (_user$launchdarklyTra5 = user === null || user === void 0 ? void 0 : user.launchdarklyTrackingTenant) !== null && _user$launchdarklyTra5 !== void 0 ? _user$launchdarklyTra5 : ''
+  };
+}
+
+const parseFlags = fetchedFlags => {
+  var _context;
+
+  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = fetchedFlags.allFeatures).call(_context, fetchedFlag => [fetchedFlag.name, {
+    value: fetchedFlag.value,
+    reason: fetchedFlag.reason
+  }]));
+};
+
+const SetupFlopFlipProvider = props => {
+  const apolloClient = react$2.useApolloClient();
+  const enableLongLivedFeatureFlags = applicationShellConnectors.useApplicationContext(context => context.environment.enableLongLivedFeatureFlags);
+  const allMenuFeatureToggles = useAllMenuFeatureToggles();
+  const flags = react.useMemo(() => _objectSpread$4(_objectSpread$4(_objectSpread$4({}, 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"]]);
+    } else {
+      combineAdapters__default["default"].combine([ldAdapter__default["default"]]);
+    }
+  }, [enableLongLivedFeatureFlags]);
+  const defaultFlags = react.useMemo(() => _objectSpread$4(_objectSpread$4(_objectSpread$4({}, FLAGS), allMenuFeatureToggles.allFeatureToggles), props.defaultFlags), [allMenuFeatureToggles.allFeatureToggles, props.defaultFlags]);
+  const adapterArgs = react.useMemo(() => {
+    var _props$user, _props$ldClientSideId, _props$user2, _props$user3;
+
+    return {
+      user: {
+        key: (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.id
+      },
+      launchdarkly: {
+        sdk: {
+          // Allow to overwrite the client ID, passed via the `additionalEnv` properties
+          // of the application config.
+          // This is mostly useful for internal usage on our staging environments.
+          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)
+        }
+      },
+      http: {
+        user: {
+          key: (_props$user3 = props.user) === null || _props$user3 === void 0 ? void 0 : _props$user3.id
+        },
+        execute: async function () {
+          const response = await apolloClient.query({
+            query: AllFeaturesQuery,
+            errorPolicy: 'ignore',
+            context: {
+              target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+            }
+          });
+          return parseFlags(response.data);
+        }
+      }
+    };
+  }, [apolloClient, flags, props.ldClientSideId, props.projectKey, props.user]);
+
+  return jsxRuntime.jsx(reactBroadcast.ConfigureFlopFlip, {
+    adapter: combineAdapters__default["default"],
+    adapterArgs: adapterArgs,
+    defaultFlags: defaultFlags,
+    shouldDeferAdapterConfiguration: typeof props.shouldDeferAdapterConfiguration === 'boolean' ? props.shouldDeferAdapterConfiguration : !props.user || allMenuFeatureToggles.isLoading,
+    children: props.children
+  });
+};
+SetupFlopFlipProvider.propTypes = {};
+SetupFlopFlipProvider.displayName = 'SetupFlopFlipProvider';
+
+const ThemeSwitcher = () => {
+  const isNewThemeEnabled = reactBroadcast.useFeatureToggle(UI_REDESIGN);
+  const theme = isNewThemeEnabled ? 'test' : 'default';
+  return jsxRuntime.jsx(designSystem.ThemeProvider, {
+    theme: theme,
+    themeOverrides: applicationComponents.themesOverrides[theme]
+  });
+};
+
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-80e0f8f6.cjs.prod.js'
+/* webpackChunkName: "version-tracker" */
+); }));
+
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(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$3(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;
+
+  return gqlError.message && // NOTE: The CTP API does not provide an error code in this case.
+  _includesInstanceProperty__default["default"](_context = gqlError.message).call(_context, 'was not found.');
+});
+
+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"
+} );
+/**
+ * This component is rendered whenever the user is considered "authenticated"
+ * and contains the "restricted" application part.
+ */
+
+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 _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"
+} ;
+
+const ApplicationShellAuthenticated = props => {
+  const applicationEnvironment = applicationShellConnectors.useApplicationContext(context => context.environment); // TODO: using this hook will subscribe the component to route updates.
+  // This is currently useful for detecting a change in the project key
+  // from URL ("/" --> "/:projectKey").
+  // However, every route change will trigger a re-render. This is probably
+  // ok-ish but we might want to look into a more performant solution.
+
+  const location = reactRouterDom.useLocation();
+  const notificationsGlobalRef = react.useRef(null);
+  const notificationsPageRef = react.useRef(null);
+  const layoutRefs = react.useRef({
+    notificationsGlobalRef,
+    notificationsPageRef
+  });
+  return jsxRuntime.jsx(FetchUser, {
+    children: _ref5 => {
+      let isLoadingUser = _ref5.isLoading,
+          user = _ref5.user,
+          error = _ref5.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)) {
+          const hasUnauthorizedError = getHasUnauthorizedError(error.graphQLErrors);
+          const hasUserBeenDeletedError = getHasUserBeenDeletedError(error.graphQLErrors);
+
+          if (hasUnauthorizedError || hasUserBeenDeletedError) {
+            let logoutReason;
+            if (hasUnauthorizedError) logoutReason = constants$1.LOGOUT_REASONS.UNAUTHORIZED;else if (hasUserBeenDeletedError) logoutReason = constants$1.LOGOUT_REASONS.DELETED;
+            return jsxRuntime.jsx(RedirectToLogout, {
+              reason: logoutReason
+            });
+          }
+        } // Since we do not know the locale of the user, we pick it from the
+        // user's browser to attempt to match the language for the correct translations.
+
+
+        const userLocale = getBrowserLocale(window);
+        return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+          locale: userLocale,
+          applicationMessages: props.applicationMessages,
+          children: _ref6 => {
+            let locale = _ref6.locale,
+                messages = _ref6.messages;
+            sentry.reportErrorToSentry(error, {});
+            return jsxRuntime.jsx(ConfigureIntlProvider, {
+              locale: locale,
+              messages: messages,
+              children: jsxRuntime.jsx(ErrorApologizer, {})
+            });
+          }
+        });
+      }
+
+      const projectKeyFromUrl = configureApollo.selectProjectKeyFromUrl(location.pathname);
+      return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+        user: user,
+        environment: applicationEnvironment,
+        children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
+          locale: user === null || user === void 0 ? void 0 : user.language,
+          applicationMessages: props.applicationMessages,
+          children: _ref7 => {
+            var _user$businessRole;
+
+            let 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$3(_objectSpread$3({}, isLoadingLocaleData ? {} : {
+              locale,
+              messages
+            }), {}, {
+              children: jsxRuntime.jsx(SetupFlopFlipProvider, {
+                user: user,
+                projectKey: projectKeyFromUrl,
+                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.jsx(GtmUserTracker, {
+                    user: user
+                  }), jsxRuntime.jsx(GtmApplicationTracker, {
+                    applicationName: applicationEnvironment.applicationName,
+                    projectKey: projectKeyFromUrl,
+                    userBusinessRole: (_user$businessRole = user === null || user === void 0 ? void 0 : user.businessRole) !== null && _user$businessRole !== void 0 ? _user$businessRole : 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.jsx("div", {
+                      ref: notificationsGlobalRef,
+                      role: "region",
+                      "aria-live": "polite",
+                      css: _ref4,
+                      children: 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: _ref9 => {
+                                let dataLocale = _ref9.locale,
+                                    setProjectDataLocale = _ref9.setProjectDataLocale;
+                                return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                                  user: user,
+                                  project: project,
+                                  projectDataLocale: dataLocale,
+                                  environment: applicationEnvironment,
+                                  children: jsxRuntime.jsx(QuickAccessTrigger, {
+                                    onChangeProjectDataLocale: setProjectDataLocale
+                                  })
+                                });
+                              }
+                            });
+                          }
+                        });
+                      }
+                    }), 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
+                            })
+                          })]
+                        })]
+                      })]
+                    })]
+                  })]
+                })
+              })
+            }));
+          }
+        })
+      });
+    }
+  });
+};
+ApplicationShellAuthenticated.propTypes = {};
+ApplicationShellAuthenticated.displayName = 'ApplicationShellAuthenticated';
+
+// https://github.com/Zizzamia/perfume.js#quick-start
+const mapMetricToLabel = metricName => {
+  switch (metricName) {
+    case 'storageEstimate':
+      return 'storageEstimate';
+
+    case 'fp':
+      return 'firstPaint';
+
+    case 'fcp':
+      return 'firstContentfulPaint';
+
+    case 'fid':
+      return 'firstInputDelay';
+
+    case 'lcp':
+      return 'largestContentfulPaint';
+
+    case 'lcpFinal':
+      return 'largestContentfulPaintFinal';
+
+    case 'cls':
+      return 'cumulativeLayoutShift';
+
+    case 'clsFinal':
+      return 'cumulativeLayoutShiftFinal';
+
+    case 'tbt':
+      return 'totalBlockingTime';
+
+    case 'tbt5S':
+      return 'totalBlockingTime5S';
+
+    case 'tbt10S':
+      return 'totalBlockingTime10S';
+
+    case 'tbtFinal':
+      return 'totalBlockingTimeFinal';
+
+    default:
+      return metricName;
+  }
+};
+
+const trackPerformance = () => {
+  new Perfume__default["default"]({
+    analyticsTracker: _ref => {
+      let metricName = _ref.metricName,
+          data = _ref.data;
+
+      switch (metricName) {
+        case 'fp':
+        case 'fcp':
+        case 'fid':
+        case 'lcp':
+        case 'lcpFinal':
+        case 'cls':
+        case 'clsFinal':
+        case 'tbt':
+        case 'tbt10S':
+        case 'tbtFinal':
+          {
+            const paintValue = data;
+            trackTiming({
+              category: 'Loading Performance',
+              variable: mapMetricToLabel(metricName),
+              value: paintValue
+            });
+            break;
+          }
+        // Navigation Timing collects performance metrics for the life and
+        // timings of a network request.
+
+        case 'navigationTiming':
+          {
+            const navigationTiming = data;
+            trackTiming({
+              category: 'Navigation Timing',
+              variable: metricName,
+              value: navigationTiming.fetchTime,
+              label: 'Fetch time'
+            });
+            trackTiming({
+              category: 'Navigation Timing',
+              variable: metricName,
+              value: navigationTiming.timeToFirstByte,
+              label: 'Time To First Byte'
+            });
+            trackTiming({
+              category: 'Navigation Timing',
+              variable: metricName,
+              value: navigationTiming.dnsLookupTime,
+              label: 'DNS lookup time'
+            });
+            trackTiming({
+              category: 'Navigation Timing',
+              variable: metricName,
+              value: navigationTiming.totalTime,
+              label: 'Total time'
+            });
+            break;
+          }
+        // Resource Timing collects performance metrics for document-dependent resources.
+        // Stuff like style sheets, scripts, images, et cetera. Perfume helps expose all
+        // PerformanceResourceTiming entries and group data data consumption by Kb used.
+        // https://zizzamia.github.io/perfume/#/resource-timing/
+
+        case 'dataConsumption':
+          {
+            const dataConsumption = data;
+            trackTiming({
+              category: 'Resource Timing',
+              variable: metricName,
+              value: dataConsumption.css,
+              label: 'CSS'
+            });
+            trackTiming({
+              category: 'Resource Timing',
+              variable: metricName,
+              value: dataConsumption.script,
+              label: 'Script'
+            });
+            trackTiming({
+              category: 'Resource Timing',
+              variable: metricName,
+              value: dataConsumption.script,
+              label: 'Total '
+            });
+            break;
+          }
+      }
+    }
+  });
+};
+
+trackPerformance();
+
+const maxTitleCharLength = 24;
+const staticPaths = ['account', 'login'];
+const defaultProps$1 = {
+  additionalParts: []
+};
+
+const getPageTitle = (pathname, additionalParts) => {
+  const _pathname$split = pathname.split('/'),
+        _pathname$split2 = _slicedToArray(_pathname$split, 3),
+        projectKeyOrStaticPath = _pathname$split2[1],
+        entryPointUriPath = _pathname$split2[2];
+
+  const customTitleParts = _mapInstanceProperty__default["default"](additionalParts).call(additionalParts, titlePart => {
+    if (titlePart.length <= maxTitleCharLength) {
+      return titlePart;
+    }
+
+    return [_sliceInstanceProperty__default["default"](titlePart).call(titlePart, 0, maxTitleCharLength / 2), _sliceInstanceProperty__default["default"](titlePart).call(titlePart, titlePart.length - maxTitleCharLength / 2)].join('...');
+  });
+
+  if (_includesInstanceProperty__default["default"](staticPaths).call(staticPaths, projectKeyOrStaticPath)) {
+    return [...(customTitleParts || []), upperFirst__default["default"](projectKeyOrStaticPath), 'Merchant Center'].join(' - ');
+  }
+
+  return [...(customTitleParts || []), upperFirst__default["default"](entryPointUriPath), projectKeyOrStaticPath, 'Merchant Center'].join(' - ');
+};
+
+const ApplicationPageTitle = props => {
+  const location = reactRouterDom.useLocation();
+  react.useLayoutEffect(() => {
+    const pageTitle = getPageTitle(location.pathname, props.additionalParts);
+    document.title = pageTitle;
+  }, [location.pathname, props.additionalParts]);
+  return null;
+};
+
+ApplicationPageTitle.propTypes = {
+  additionalParts: _pt__default["default"].arrayOf(_pt__default["default"].string).isRequired
+};
+ApplicationPageTitle.displayName = 'ApplicationPageTitle';
+ApplicationPageTitle.defaultProps = defaultProps$1;
+
+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; }
+
+const SuspendedRoute = props => jsxRuntime.jsx(reactRouterDom.Route, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  children: jsxRuntime.jsx(react.Suspense, {
+    fallback: jsxRuntime.jsx(LoadingSpinner__default["default"], {}),
+    children: props.children
+  })
+}));
+
+SuspendedRoute.displayName = 'SuspendedRoute';
+
+var AmILoggedInQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "AmILoggedIn" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "amILoggedIn" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 36, source: { body: "query AmILoggedIn {\n  amILoggedIn\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+
+const AmILoggedIn = props => {
+  // ...otherwise, we ping a "secured" endpoint in the MC API to see if there is
+  // a valid access token. If we get an error, we assume that the user is not
+  // authenticated. If we don't get any error, the access token sent with the cookie
+  // is valid. We return null while the query is loading.
+  const _useMcQuery = useMcQuery(AmILoggedInQuery, {
+    context: {
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND,
+      skipTokenRetry: true
+    },
+    // NOTE: With `no-cache` the `useQuery` will not trigger a
+    // re-render of the `AmILoggedIn` component. Relying on a default
+    // fetch policy results in rendering the component without refetching the data
+    // which as a result unmounts child components (such as an application).
+    //
+    // For example:
+    // Given the user not authenticated
+    // Then the first pass of useQuery returns an exptected error
+    // Given the query is triggered again (through `useQuery`)
+    // Then the component will re-render
+    // Resulting in inconsistent data with the error not being defined
+    fetchPolicy: 'no-cache',
+    onCompleted: data => {
+      if (!data) {
+        // In case the request is 200 but there is no data, we assume
+        // there are some errors.
+        window.localStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
+      } else {
+        // Even though the login page might set this flag, we just make sure that
+        // we do it here as well. This will help in the future when we eventually
+        // move the auth service to itw own domain, in which case the local storage
+        // is not shared anymore.
+        window.localStorage.setItem(constants.STORAGE_KEYS.IS_AUTHENTICATED, String(true));
+      }
+    },
+    onError: () => {
+      // The query fails without the `mcAccessToken`. In this case the caching
+      // needs to be unset as otherwise the application will end up in a infinte
+      // redirect loop.
+      window.localStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
+    }
+  }),
+        data = _useMcQuery.data,
+        loading = _useMcQuery.loading,
+        error = _useMcQuery.error;
+
+  if (error) {
+    // No matter what error, we consider it as a failed authentication
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.render({
+        isAuthenticated: false
+      })
+    });
+  }
+
+  if (!loading && data && data.amILoggedIn) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.render({
+        isAuthenticated: true
+      })
+    });
+  }
+
+  return null;
+};
+
+AmILoggedIn.displayName = 'AmILoggedIn';
+
+const withoutProjectKeyClaim = scope => {
+  var _context;
+
+  return _filterInstanceProperty__default["default"](_context = scope.split(' ')).call(_context, claim => !_startsWithInstanceProperty__default["default"](claim).call(claim, constants.OIDC_CLAIMS.PROJECT_KEY)).join(' ');
+};
+
+const hasCachedAuthenticationState = () => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    try {
+      var _window$app$__DEVELOP9, _window$app$__DEVELOP10, _window$app$__DEVELOP11, _window$app$__DEVELOP12, _window$app$__DEVELOP13, _window$app$__DEVELOP14;
+
+      const activeProjectKey = configureApollo.getActiveProjectKey();
+
+      if (activeProjectKey) {
+        var _window$app$__DEVELOP3, _window$app$__DEVELOP4;
+
+        // GIVEN The application is not requesting a project key,
+        // THEN we assume that the application does not need a project context.
+        // GIVEN The application is not requesting a project key,
+        // THEN we remove the cached project key.
+        // This is the case of an application like `account`.
+        if (!((_window$app$__DEVELOP3 = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP3 !== void 0 && (_window$app$__DEVELOP4 = _window$app$__DEVELOP3.oidc) !== null && _window$app$__DEVELOP4 !== void 0 && _window$app$__DEVELOP4.initialProjectKey)) {
+          configureApollo.removeActiveProjectKey();
+        }
+      } else {
+        var _window$app$__DEVELOP5, _window$app$__DEVELOP6;
+
+        if ((_window$app$__DEVELOP5 = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP5 !== void 0 && (_window$app$__DEVELOP6 = _window$app$__DEVELOP5.oidc) !== null && _window$app$__DEVELOP6 !== void 0 && _window$app$__DEVELOP6.initialProjectKey) {
+          var _window$app$__DEVELOP7, _window$app$__DEVELOP8;
+
+          // Here we store the initial project key in local storage,
+          // so that it gets picked up when we initiate the login flow.
+          configureApollo.setActiveProjectKey((_window$app$__DEVELOP7 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP7 === void 0 ? void 0 : (_window$app$__DEVELOP8 = _window$app$__DEVELOP7.oidc) === null || _window$app$__DEVELOP8 === void 0 ? void 0 : _window$app$__DEVELOP8.initialProjectKey);
+        }
+      } // cachedScope is assumed to be the exact cached version of the `requestedScope`
+      // if they don't match, then we know that one of the claims within the scope has changed
+      // given a change, we need to force the user to log in, so that new values on respective claim
+      // will apply for the given custom application
+
+
+      const cachedScope = configureApollo.getSessionScope(); // Force the user to log in again
+
+      if (!cachedScope) {
+        return false;
+      } // Rebuild the requested OIDC scope to verify that it didn't change.
+
+
+      const requestedScope = oidc.buildOidcScope({
+        projectKey: activeProjectKey !== null && activeProjectKey !== void 0 ? activeProjectKey : undefined,
+        oAuthScopes: (_window$app$__DEVELOP9 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP9 === void 0 ? void 0 : (_window$app$__DEVELOP10 = _window$app$__DEVELOP9.oidc) === null || _window$app$__DEVELOP10 === void 0 ? void 0 : _window$app$__DEVELOP10.oAuthScopes,
+        additionalOAuthScopes: (_window$app$__DEVELOP11 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP11 === void 0 ? void 0 : (_window$app$__DEVELOP12 = _window$app$__DEVELOP11.oidc) === null || _window$app$__DEVELOP12 === void 0 ? void 0 : _window$app$__DEVELOP12.additionalOAuthScopes,
+        teamId: (_window$app$__DEVELOP13 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP13 === void 0 ? void 0 : (_window$app$__DEVELOP14 = _window$app$__DEVELOP13.oidc) === null || _window$app$__DEVELOP14 === void 0 ? void 0 : _window$app$__DEVELOP14.teamId
+      }); // Omit the project key from the check. This allows to switch projects
+      // without having to log in again.
+
+      const cachedScopeWithoutProjectKey = withoutProjectKeyClaim(cachedScope);
+      const requestedScopeWithoutProjectKey = withoutProjectKeyClaim(requestedScope); // Check that the session scope didn't change.
+
+      if (cachedScopeWithoutProjectKey === requestedScopeWithoutProjectKey) {
+        return true;
+      }
+
+      return false;
+    } catch (err) {
+      return false;
+    }
+  }
+
+  return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
+};
+
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-784c3a39.cjs.prod.js'
+/* webpackChunkName: "oidc-callback" */
+); }));
+
+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; }
+
+const Authenticated = props => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+  // We attempt to see if the user was already authenticated by looking
+  // at the "cached" flag in local storage.
+  const cachedAuthenticationState = hasCachedAuthenticationState();
+
+  if (cachedAuthenticationState) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.render({
+        isAuthenticated: true
+      })
+    });
+  } // When using the OIDC workflow, we always return false, to trigger
+  // the redirect to the login page.
+
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.render({
+        isAuthenticated: false
+      })
+    });
+  } // Fall back to check for cookie-based authentication.
+
+
+  return jsxRuntime.jsx(AmILoggedIn, _objectSpread$1({}, props));
+};
+
+Authenticated.displayName = 'Authenticated';
+
+const AuthenticationRoutes = props => jsxRuntime.jsxs(reactRouterDom.Switch, {
+  children: [jsxRuntime.jsx(SuspendedRoute, {
+    path: "/account/oidc/callback",
+    children: jsxRuntime.jsx(OidcCallback, {
+      locale: props.locale,
+      applicationMessages: props.applicationMessages
+    })
+  }), jsxRuntime.jsx(SuspendedRoute, {
+    path: "/:projectKey/".concat(window.app.entryPointUriPath, "/oidc/callback"),
+    children: jsxRuntime.jsx(OidcCallback, {
+      locale: props.locale,
+      applicationMessages: props.applicationMessages
+    })
+  }), jsxRuntime.jsx(reactRouterDom.Route, {
+    children: jsxRuntime.jsx(Authenticated, _objectSpread$1({}, props))
+  })]
+});
+
+AuthenticationRoutes.displayName = 'AuthenticationRoutes';
+
+function ownKeys(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(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(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(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
+ *   the parsed value whenever possible.
+ *
+ *   This allows parsing most primitive values.
+ *
+ *   - `JSON.parse('null')` => `null`
+ *   - `JSON.parse('1')` => `1`
+ *   - `JSON.parse('["a", "b"]')` => `['a', 'b']`
+ */
+const getCoerceEnvironmentValue = environmentValueAsString => {
+  // Return the value as-is if it's not a string.
+  if (typeof environmentValueAsString !== 'string') {
+    return environmentValueAsString;
+  } // In case the value is a string, we try to parse it to attempt to extract
+  // the primitive value, if the original value is indeed supposed to be a primitive.
+  // For example, `'1'` is converted to a number, `'true'` is converted to a boolean, etc.
+
+
+  try {
+    // Strip out escaped quotes. This is mostly important to coerce an array of string
+    // with escaped quotes.
+    return JSON.parse(String(environmentValueAsString).replace(/(\\")/g, '"'));
+  } catch (e) {
+    return environmentValueAsString;
+  }
+};
+
+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(_objectSpread({}, coercedEnvironmentValues), {}, {
+      [key]: getCoerceEnvironmentValue(uncoercedEnvironmentValue)
+    });
+  }, {});
+};
+
+const useCoercedEnvironmentValues = environment => {
+  const coercedEnvironmentValues = react.useMemo(() => shallowlyCoerceValues(environment), [environment]);
+  return coercedEnvironmentValues;
+};
+
+const ApplicationShellProvider = props => {
+  const apolloClient = react.useMemo(() => {
+    var _props$apolloClient;
+
+    return (_props$apolloClient = props.apolloClient) !== null && _props$apolloClient !== void 0 ? _props$apolloClient : configureApollo.createApolloClient();
+  }, [props.apolloClient]);
+  react.useEffect(() => {
+    configureApollo.setCachedApolloClient(apolloClient);
+  }, [apolloClient]);
+  const coercedEnvironmentValues = useCoercedEnvironmentValues(props.environment);
+  const browserLocale = getBrowserLocale(window);
+  return jsxRuntime.jsx(react.Suspense, {
+    fallback: jsxRuntime.jsx(ApplicationLoader, {}),
+    children: jsxRuntime.jsx(ErrorBoundary, {
+      children: jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+        environment: coercedEnvironmentValues,
+        children: jsxRuntime.jsx(reactRedux.Provider, {
+          store: configureApollo.internalReduxStore,
+          children: jsxRuntime.jsx(react$2.ApolloProvider, {
+            client: apolloClient,
+            children: jsxRuntime.jsx(reactRouterDom.Router, {
+              history: ApplicationShellProvider.history,
+              children: jsxRuntime.jsxs(GtmBooter, {
+                trackingEventList: props.trackingEventList || {},
+                children: [jsxRuntime.jsx(ApplicationPageTitle, {}), jsxRuntime.jsx(AuthenticationRoutes, {
+                  locale: browserLocale,
+                  applicationMessages: props.applicationMessages,
+                  render: _ref => {
+                    let isAuthenticated = _ref.isAuthenticated;
+                    if (isAuthenticated) return props.children({
+                      isAuthenticated
+                    });
+                    return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+                      locale: browserLocale,
+                      applicationMessages: props.applicationMessages,
+                      children: _ref2 => {
+                        let locale = _ref2.locale,
+                            messages = _ref2.messages;
+                        return jsxRuntime.jsx(ConfigureIntlProvider, {
+                          locale: locale,
+                          messages: messages,
+                          children: props.children({
+                            isAuthenticated
+                          })
+                        });
+                      }
+                    });
+                  }
+                })]
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+};
+
+ApplicationShellProvider.propTypes = {};
+ApplicationShellProvider.displayName = 'ApplicationShellProvider'; // This is useful to inject a custom history object during tests
+
+ApplicationShellProvider.history = history__default["default"];
+
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-2be0e5db.cjs.prod.js'
+/* webpackChunkName: "redirect-to-login" */
+); }));
+
+const styles = {
+  name: "1prreal",
+  styles: "html,body{font-size:var(--font-size-for-body);height:100vh;}#app{height:100%;}"
+} ;
+
+const GlobalStyles = () => jsxRuntime.jsx(react$1.Global, {
+  styles: styles
+});
+
+const ApplicationShell = props => {
+  react.useEffect(() => {
+    var _props$onRegisterErro;
+
+    (_props$onRegisterErro = props.onRegisterErrorListeners) === null || _props$onRegisterErro === void 0 ? void 0 : _props$onRegisterErro.call(props, {
+      dispatch: configureApollo.internalReduxStore.dispatch
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // <-- run only once, when component mounts
+
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+      apolloClient: props.apolloClient,
+      environment: props.environment,
+      trackingEventList: props.trackingEventList,
+      applicationMessages: props.applicationMessages,
+      children: _ref => {
+        let isAuthenticated = _ref.isAuthenticated;
+
+        if (isAuthenticated) {
+          return jsxRuntime.jsxs(reactRouterDom.Switch, {
+            children: [jsxRuntime.jsx(SuspendedRoute, {
+              path: "/logout",
+              children: jsxRuntime.jsx(RedirectToLogout, {})
+            }), jsxRuntime.jsx(SuspendedRoute, {
+              children: jsxRuntime.jsx(ApplicationShellAuthenticated, {
+                defaultFeatureFlags: props.defaultFeatureFlags,
+                featureFlags: props.featureFlags,
+                render: props.render,
+                applicationMessages: props.applicationMessages,
+                onMenuItemClick: props.onMenuItemClick,
+                disableRoutePermissionCheck: props.disableRoutePermissionCheck,
+                children: props.children
+              })
+            })]
+          });
+        }
+
+        return jsxRuntime.jsx(RedirectToLogin, {});
+      }
+    })]
+  });
+};
+
+ApplicationShell.propTypes = {};
+ApplicationShell.displayName = 'ApplicationShell';
+ApplicationShell.version = configureApollo.applicationShellVersion;
+
+const defaultProps = {
+  shouldCleanUpOnUnmount: true
+};
+
+const InjectReducers = props => {
+  const _useState = react.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        areReducersInjected = _useState2[0],
+        setAreReducersInjected = _useState2[1];
+
+  const store = reactRedux.useStore();
+  react.useEffect(() => {
+    store.injectReducers({
+      id: props.id,
+      reducers: props.reducers
+    });
+    setAreReducersInjected(true);
+    return () => {
+      if (props.shouldCleanUpOnUnmount) {
+        store.removeReducers({
+          id: props.id
+        });
+      }
+    };
+  }, [props.id, props.reducers, props.shouldCleanUpOnUnmount, store]); // Render children only when the plugin reducers have been injected
+
+  if (areReducersInjected) return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+  return null;
+};
+
+InjectReducers.propTypes = {
+  id: _pt__default["default"].string.isRequired,
+  reducers: _pt__default["default"].any.isRequired,
+  shouldCleanUpOnUnmount: _pt__default["default"].bool.isRequired,
+  children: _pt__default["default"].node.isRequired
+};
+InjectReducers.displayName = 'InjectReducers';
+InjectReducers.defaultProps = defaultProps;
+
+const errorMessageIgnoreList = [/ResizeObserver loop limit exceeded/i]; // Ensure to initialize Sentry as soon as possible, so that we have the chance
+// of catching possible errors.
+
+sentry.boot();
+
+const makeErrorToCapture = error => {
+  if (error instanceof Error) return error;
+  if (error instanceof ErrorEvent) return new Error(error.message);
+  return new Error(_JSON$stringify__default["default"](error.reason || 'Unhandled rejection without a reason'));
+};
+
+const getErrorMessage = error => {
+  if (typeof error === 'string') return error;
+  const errorToCapture = makeErrorToCapture(error);
+  return errorToCapture.message || errorToCapture.name;
+};
+
+const shouldErrorBeTracked = error => {
+  const errorMessage = getErrorMessage(error);
+  return !_someInstanceProperty__default["default"](errorMessageIgnoreList).call(errorMessageIgnoreList, match => match.test(errorMessage));
+};
+
+function setupGlobalErrorListener() {
+  // Capture unhandled errors generated from rejected Promises.
+  //
+  // http://www.2ality.com/2016/04/unhandled-rejections.html
+  // https://docs.getsentry.com/hosted/clients/javascript/usage/#promises
+  //
+  // Note: this currently works only in Chrome, and it might not be needed.
+  // We just keep it here as a nice-to-have thing.
+  window.addEventListener('unhandledrejection', event => {
+
+    if (shouldErrorBeTracked(event)) {
+      const errorId = sentry.reportErrorToSentry(event);
+      configureApollo.internalReduxStore.dispatch(actionsGlobal.showUnexpectedErrorNotification({
+        errorId
+      }));
+    }
+  }); // Capture normal global errors coming from non Promise code.
+
+  window.addEventListener('error', errorEvent => {
+    if (shouldErrorBeTracked(errorEvent)) {
+      const errorId = sentry.reportErrorToSentry(errorEvent);
+      configureApollo.internalReduxStore.dispatch(actionsGlobal.showUnexpectedErrorNotification({
+        errorId
+      }));
+    }
+  });
+}
+
+const GtmUserLogoutTracker = () => {
+  react.useEffect(() => {
+    // When the user is not logged in anymore (e.g. on logout) we still track
+    // page views but without the user data in context.
+    stopTrackingUser();
+  }, []);
+  return null;
+};
+
+GtmUserLogoutTracker.displayName = 'GtmUserLogoutTracker';
+
+exports.ApplicationLoader = ApplicationLoader;
+exports.ApplicationPageTitle = ApplicationPageTitle;
+exports.ApplicationShell = ApplicationShell;
+exports.ApplicationShellProvider = ApplicationShellProvider;
+exports.ButlerContainer = ButlerContainer;
+exports.ConfigureIntlProvider = ConfigureIntlProvider;
+exports.ErrorBoundary = ErrorBoundary;
+exports.Faded = Faded;
+exports.FetchProject = FetchProject;
+exports.GtmContext = GtmContext;
+exports.GtmUserLogoutTracker = GtmUserLogoutTracker;
+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.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.trackingEvents = trackingEvents$1;
+exports.useMcLazyQuery = useMcLazyQuery;
+exports.useMcMutation = useMcMutation;
+exports.useMcQuery = useMcQuery;