@commercetools-frontend/application-shell 0.0.0-FEC-157-preview-releases-20241126230331

package/dist/index-ff82019b.cjs.prod.js

@@ -0,0 +1,2058 @@
+'use strict';
+
+var _pt = require('prop-types');
+var react = require('react');
+var reactRouterDom = require('react-router-dom');
+var index = require('./index-91985d64.cjs.prod.js');
+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 = require('@commercetools-frontend/constants');
+var i18n = require('@commercetools-frontend/i18n');
+var reactNotifications = require('@commercetools-frontend/react-notifications');
+var sentry = require('@commercetools-frontend/sentry');
+var oidc = require('./oidc-d74e6aa2.cjs.prod.js');
+require('@babel/runtime-corejs3/core-js-stable/url');
+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 location = require('./location-537e0660.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+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 reactSelect = require('react-select');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
+var SelectInput = require('@commercetools-uikit/select-input');
+var Text = require('@commercetools-uikit/text');
+var CTLogoSVG = require('@commercetools-frontend/assets/images/ct-logo.svg');
+var LoadingSpinner = require('@commercetools-uikit/loading-spinner');
+var history = require('@commercetools-frontend/browser-history');
+var l10n = require('@commercetools-frontend/l10n');
+var _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 react$2 = require('@apollo/client/react');
+var combineAdapters = require('@flopflip/combine-adapters');
+var httpAdapter = require('@flopflip/http-adapter');
+var ldAdapter = require('@flopflip/launchdarkly-adapter');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var types = require('@flopflip/types');
+var reactRedux = require('react-redux');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@commercetools-uikit/design-system/materials/resets.css');
+var ssr = require('@commercetools-frontend/application-config/ssr');
+var permissions = require('@commercetools-frontend/permissions');
+var memoryAdapter = require('@flopflip/memory-adapter');
+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');
+
+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 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 Text__default = /*#__PURE__*/_interopDefault(Text);
+var CTLogoSVG__default = /*#__PURE__*/_interopDefault(CTLogoSVG);
+var LoadingSpinner__default = /*#__PURE__*/_interopDefault(LoadingSpinner);
+var history__default = /*#__PURE__*/_interopDefault(history);
+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 _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var memoryAdapter__default = /*#__PURE__*/_interopDefault(memoryAdapter);
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "22.35.1";
+
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-7f677421.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+
+// Attempt to load the `projectKey` from localStorage
+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;
+};
+
+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 => location.location.replace(`/${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';
+
+const animationPulse = react$1.keyframes`
+  0% {
+    background-color: ${designSystem.customProperties.colorNeutral};
+  }
+  100% {
+    background-color: ${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';
+
+var messages = reactIntl.defineMessages({
+  projectsLabel: {
+    id: 'ProjectSwitcher.projectsLabel',
+    description: 'The label for project dropdown switcher',
+    defaultMessage: 'Projects'
+  },
+  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 = ["children"];
+function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+var ProjectsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchUserProjects" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "projects" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "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: "isProductionProject" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 258, source: { body: "query FetchUserProjects {\n  user: me {\n    id\n    projects {\n      total\n      results {\n        name\n        key\n        suspension {\n          isActive\n        }\n        expiry {\n          isActive\n        }\n        isProductionProject\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
+const ValueContainer = _ref2 => {
+  let children = _ref2.children,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  return jsxRuntime.jsx(Text__default["default"].Body, {
+    fontWeight: "medium",
+    as: "span",
+    children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$8(_objectSpread$8({}, restProps), {}, {
+      children: children
+    }))
+  });
+};
+const ProjectStampsList = props => jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+  scale: "xs",
+  alignItems: "flex-end",
+  children: [props.isProductionProject && jsxRuntime.jsx(applicationComponents.ProjectStamp.IsProduction, {}), props.suspension && props.suspension.isActive && jsxRuntime.jsx(applicationComponents.ProjectStamp.IsSuspended, {}), props.expiry && props.expiry.isActive && jsxRuntime.jsx(applicationComponents.ProjectStamp.IsExpired, {}), props.expiry && Boolean(props.expiry.daysLeft) && jsxRuntime.jsx(applicationComponents.ProjectStamp.WillExpire, {
+    daysLeft: props.expiry.daysLeft
+  })]
+});
+var _ref$2 = {
+  name: "uyj17t",
+  styles: "flex:1;word-wrap:break-word"
+} ;
+const ProjectSwitcherOption = props => {
+  const project = props.data;
+  return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$8(_objectSpread$8({}, props), {}, {
+    children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      scale: "xs",
+      justifyContent: "space-between",
+      children: [jsxRuntime.jsxs("div", {
+        css: _ref$2,
+        children: [jsxRuntime.jsx(Text__default["default"].Body, {
+          fontWeight: "medium",
+          tone: props.isDisabled ? 'tertiary' : 'inherit',
+          children: project.name
+        }), jsxRuntime.jsx(Text__default["default"].Caption, {
+          tone: props.isDisabled ? 'tertiary' : 'secondary',
+          children: project.key
+        })]
+      }), jsxRuntime.jsx(ProjectStampsList, {
+        isProductionProject: project.isProductionProject,
+        suspension: project.suspension,
+        expiry: project.expiry
+      })]
+    })
+  }));
+};
+const mapProjectsToOptions = memoize__default["default"](projects => {
+  return [{
+    label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages.projectsLabel)),
+    options: _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,
+      isProductionProject: project.isProductionProject
+    }))
+  }];
+});
+const CustomMenuList = props => {
+  return jsxRuntime.jsx("div", {
+    children: jsxRuntime.jsx(reactSelect.components.MenuList, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      children: props.children
+    }))
+  });
+};
+const Control = props => jsxRuntime.jsx(reactSelect.components.Control, _objectSpread$8(_objectSpread$8({}, props), {}, {
+  css: /*#__PURE__*/react$1.css("min-width:", designSystem.designTokens.constraint3, ";" + ("" ), "" ),
+  children: props.children
+}));
+const redirectTo = targetUrl => location.location.replace(targetUrl);
+const ProjectSwitcher = props => {
+  const intl = reactIntl.useIntl();
+  const _useMcQuery = applicationShellConnectors.useMcQuery(ProjectsQuery, {
+      onError: sentry.reportErrorToSentry,
+      context: {
+        target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+      }
+    }),
+    loading = _useMcQuery.loading,
+    data = _useMcQuery.data;
+  if (loading) return null;
+  return jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: PROJECT_SWITCHER_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, 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) {
+          if (window.app.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+            applicationShellConnectors.oidcStorage.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(`/${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,
+        MenuList: CustomMenuList,
+        Control
+      },
+      isClearable: false,
+      backspaceRemovesValue: false,
+      placeholder: intl.formatMessage(messages.searchPlaceholder),
+      noOptionsMessage: () => intl.formatMessage(messages.noResults),
+      horizontalConstraint: 'auto',
+      appearance: "quiet",
+      maxMenuHeight: 380,
+      maxMenuWidth: 8,
+      minMenuWidth: 8
+    })]
+  });
+};
+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-ead5fed2.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
+
+var _ref$1 = {
+  name: "zjik7",
+  styles: "display:flex"
+} ;
+var _ref2$1 = {
+  name: "36bnqj",
+  styles: "display:flex;flex:1"
+} ;
+var _ref3$1 = {
+  name: "w3f7al",
+  styles: "height:22px"
+} ;
+const AppBar = props => {
+  const previousProjectKey = getPreviousProjectKey(props.user?.defaultProjectKey ?? undefined);
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);padding:0 40px;min-height:", oidc.DIMENSIONS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    "data-test": "top-navigation",
+    children: [jsxRuntime.jsx("div", {
+      css: /*#__PURE__*/react$1.css("float:right;font-weight:normal;font-size:1rem;margin-right:", designSystem.designTokens.spacing55, ";display:flex;align-items:center;" + ("" ), "" ),
+      children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "m",
+        alignItems: "center",
+        children: [jsxRuntime.jsxs("div", {
+          css: /*#__PURE__*/react$1.css("display:flex;gap:", designSystem.designTokens.spacing30, ";align-items:center;" + ("" ), "" ),
+          children: [(() => {
+            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) {
+              var _context;
+              const selectedProject = _findInstanceProperty__default["default"](_context = props.user.projects.results).call(_context, project => project.key === props.projectKeyFromUrl);
+              return jsxRuntime.jsxs("div", {
+                css: /*#__PURE__*/react$1.css("display:flex;gap:", designSystem.designTokens.spacing20, ";align-items:center;" + ("" ), "" ),
+                children: [selectedProject?.isProductionProject && jsxRuntime.jsx("div", {
+                  css: _ref3$1,
+                  children: jsxRuntime.jsx(applicationComponents.ProjectStamp.IsProduction, {})
+                }), 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", {
+            id: oidc.CONTAINERS.LOCALE_SWITCHER
+          })]
+        }), jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: jsxRuntime.jsx("div", {
+            id: REQUESTS_IN_FLIGHT_LOADER_DOM_ID,
+            css: _ref2$1
+          })
+        })]
+      })
+    }), jsxRuntime.jsxs("div", {
+      css: _ref$1,
+      children: [jsxRuntime.jsx("div", {
+        id: oidc.CONTAINERS.LEFT_OF_PROFILE
+      }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
+        language: props.user.language,
+        firstName: props.user.firstName,
+        lastName: props.user.lastName,
+        gravatarHash: props.user.gravatarHash,
+        email: props.user.email
+      }) : jsxRuntime.jsx(LoadingPlaceholder, {
+        shape: "dot",
+        size: "l"
+      })]
+    })]
+  });
+};
+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 getBrowserHistory = () => history__default["default"];
+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-84dc825c.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: "isProductionProject" }, 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: [] }] } }, { kind: "Field", name: { kind: "Name", value: "sampleDataImportDataset" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "isUserAdminOfCurrentProject" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 1081, 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    isProductionProject\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    sampleDataImportDataset\n    isUserAdminOfCurrentProject\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const FetchProject = props => {
+  const _useMcQuery = applicationShellConnectors.useMcQuery(ProjectQuery, {
+      onError: sentry.reportErrorToSentry,
+      variables: {
+        projectKey: props.projectKey
+      },
+      context: {
+        target: constants.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: "launchdarklyTrackingCloudEnvironment" }, 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: "isProductionProject" }, 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: 692, 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    launchdarklyTrackingCloudEnvironment\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        isProductionProject\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 = applicationShellConnectors.useMcQuery(LoggedInUserQuery, {
+      onError: sentry.reportErrorToSentry,
+      context: {
+        target: constants.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';
+
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-1465f182.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
+
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-55778868.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() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+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 getDerivedStateFromError( /* error */
+    ) {
+      // 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'
+};
+
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-5ffe0e5c.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();
+      }
+      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-263d0e66.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+
+const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-e4ff7797.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
+
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$7(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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 getUserContextForLaunchDarklyAdapter(user, projectKey) {
+  return {
+    kind: 'user',
+    key: user?.id,
+    project: projectKey ?? '',
+    id: user?.launchdarklyTrackingId ?? '',
+    team: user?.launchdarklyTrackingTeam ?? [],
+    group: user?.launchdarklyTrackingGroup ?? '',
+    subgroup: user?.launchdarklyTrackingSubgroup ?? '',
+    cloudEnvironment: user?.launchdarklyTrackingCloudEnvironment ?? ''
+  };
+}
+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 getCacheMode = adapterIdentifier => {
+  if (
+  // @ts-ignore
+  typeof window.Cypress !== 'undefined' || adapterIdentifier === types.adapterIdentifiers.http) {
+    // Temporary workaround: when running in Cypress, do not use lazy mode
+    // as the flag is not being updated in time during the test run.
+    return types.cacheModes.eager;
+  }
+  return types.cacheModes.lazy;
+};
+const SetupFlopFlipProvider = props => {
+  const apolloClient = react$2.useApolloClient();
+  const enableLongLivedFeatureFlags = applicationShellConnectors.useApplicationContext(context => context.environment.enableLongLivedFeatureFlags);
+  const flags = react.useMemo(() => _objectSpread$7(_objectSpread$7({}, constants.featureFlags.FLAGS), _flagsInstanceProperty__default["default"](props)), [_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$7(_objectSpread$7({}, constants.featureFlags.DEFAULT_FLAGS), props.defaultFlags), [props.defaultFlags]);
+  const adapterArgs = react.useMemo(() => ({
+    user: {
+      key: props.user?.id
+    },
+    launchdarkly: {
+      cacheIdentifier: types.cacheIdentifiers.local,
+      cacheMode: getCacheMode(types.adapterIdentifiers.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 ?? ldClientSideIdProduction,
+        clientOptions: {
+          sendEventsOnlyForVariation: true
+        }
+      },
+      flags,
+      context: getUserContextForLaunchDarklyAdapter(props.user, props.projectKey)
+    },
+    http: {
+      // polling interval set to 15 minutes
+      pollingIntervalMs: 1000 * 60 * 15,
+      cacheIdentifier: types.cacheIdentifiers.local,
+      cacheMode: getCacheMode(types.adapterIdentifiers.http),
+      user: {
+        key: props.user?.id
+      },
+      execute: async adapterArgs => {
+        const response = await apolloClient.query({
+          query: AllFeaturesQuery,
+          errorPolicy: 'ignore',
+          fetchPolicy: 'network-only',
+          context: {
+            target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND,
+            projectKey: adapterArgs.user?.project
+          }
+        });
+        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,
+    children: props.children
+  });
+};
+SetupFlopFlipProvider.propTypes = {};
+SetupFlopFlipProvider.displayName = 'SetupFlopFlipProvider';
+
+const ThemeSwitcher = () => {
+  const theme = 'default';
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(designSystem.ThemeProvider, {
+      theme: theme,
+      themeOverrides: applicationComponents.themesOverrides[theme]
+    })
+  });
+};
+
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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: "evthls",
+  styles: "grid-column:2/3;grid-row:3/4;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: "lzrvov",
+  styles: "grid-column:1/2;grid-row:2/4;overflow:hidden"
+} ;
+var _ref3 = {
+  name: "tjbz3t",
+  styles: "grid-row:'2/3';grid-column:'2/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.LOGOUT_REASONS.UNAUTHORIZED;else if (hasUserBeenDeletedError) logoutReason = constants.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 = applicationShellConnectors.selectProjectKeyFromUrl(location.pathname);
+      return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+        user: user,
+        environment: applicationEnvironment,
+        children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
+          locale: user?.language,
+          applicationMessages: props.applicationMessages,
+          children: _ref7 => {
+            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$6(_objectSpread$6({}, 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(RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
+                    user: user ?? undefined
+                  }), jsxRuntime.jsxs("div", {
+                    css: /*#__PURE__*/react$1.css("height:100vh;display:grid;grid-template-rows:auto ", oidc.DIMENSIONS.header, " 1fr;grid-template-columns:min-content 1fr;" + ("" ), "" ),
+                    children: [jsxRuntime.jsxs("div", {
+                      ref: notificationsGlobalRef,
+                      role: "region",
+                      "aria-live": "polite",
+                      css: _ref4,
+                      children: [jsxRuntime.jsx("div", {
+                        id: "above-top-navigation"
+                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                        domain: constants.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;
+                            const isLoading = isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project;
+                            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,
+                                isLoading: isLoading
+                              })
+                            });
+                          }
+                        });
+                      })()
+                    }), 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.DOMAINS.PAGE
+                        })
+                      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                        domain: constants.DOMAINS.SIDE
+                      }), jsxRuntime.jsxs("div", {
+                        css: _ref,
+                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+                        // @ts-ignore
+                        , {
+                          ref: layoutRefs,
+                          offsetTop: oidc.DIMENSIONS.header,
+                          offsetLeft: projectKeyFromUrl ? oidc.NAVBAR.widthLeftNavigation : '0px',
+                          offsetLeftOnExpandedMenu: projectKeyFromUrl ? oidc.NAVBAR.widthLeftNavigationWhenExpanded : '0px'
+                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
+                          children: [jsxRuntime.jsx(reactRouterDom.Route, {
+                            path: "/profile",
+                            render: () => jsxRuntime.jsx(reactRouterDom.Redirect, {
+                              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(index.RouteCatchAll, {})
+                          }), jsxRuntime.jsx(reactRouterDom.Route, {
+                            exact: true,
+                            path: "/",
+                            children: (() => {
+                              const previousProjectKey = getPreviousProjectKey(user?.defaultProjectKey ?? 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: `/${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';
+
+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 || []), projectKeyOrStaticPath, 'Merchant Center'].join(' - ');
+  }
+  return [...(customTitleParts || []), 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$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const SuspendedRoute = props => jsxRuntime.jsx(reactRouterDom.Route, _objectSpread$5(_objectSpread$5({}, 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 = applicationShellConnectors.useMcQuery(AmILoggedInQuery, {
+      context: {
+        target: constants.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, oidc.OIDC_CLAIMS.PROJECT_KEY)).join(' ');
+};
+const hasCachedAuthenticationState = () => {
+  if (window.app.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+    try {
+      let activeProjectKey = applicationShellConnectors.oidcStorage.getActiveProjectKey();
+      if (activeProjectKey) {
+        // 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.__DEVELOPMENT__?.oidc?.initialProjectKey) {
+          applicationShellConnectors.oidcStorage.removeActiveProjectKey();
+        }
+
+        // If the project key we had in the storage does not match the one
+        // we have in the development config, then we need to discard it and
+        // use the one from the development config.
+        if (window.app.__DEVELOPMENT__?.oidc?.initialProjectKey && window.app.__DEVELOPMENT__?.oidc?.initialProjectKey !== activeProjectKey) {
+          activeProjectKey = window.app.__DEVELOPMENT__?.oidc?.initialProjectKey;
+          applicationShellConnectors.oidcStorage.setActiveProjectKey(activeProjectKey);
+        }
+      } else {
+        if (window.app.__DEVELOPMENT__?.oidc?.initialProjectKey) {
+          // Here we store the initial project key in local storage,
+          // so that it gets picked up when we initiate the login flow.
+          applicationShellConnectors.oidcStorage.setActiveProjectKey(window.app.__DEVELOPMENT__?.oidc?.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 = applicationShellConnectors.oidcStorage.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 ?? undefined,
+        oAuthScopes: window.app.__DEVELOPMENT__?.oidc?.oAuthScopes,
+        additionalOAuthScopes: window.app.__DEVELOPMENT__?.oidc?.additionalOAuthScopes,
+        teamId: window.app.__DEVELOPMENT__?.oidc?.teamId,
+        applicationId: window.app.__DEVELOPMENT__?.oidc?.applicationId
+      });
+      // 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-76814954.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const Authenticated = props => {
+  // 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.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.render({
+        isAuthenticated: false
+      })
+    });
+  }
+
+  // Fall back to check for cookie-based authentication.
+  return jsxRuntime.jsx(AmILoggedIn, _objectSpread$4({}, 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/:identifier/oidc/callback`,
+    children: jsxRuntime.jsx(OidcCallback, {
+      locale: props.locale,
+      applicationMessages: props.applicationMessages
+    })
+  }), jsxRuntime.jsx(reactRouterDom.Route, {
+    children: jsxRuntime.jsx(Authenticated, _objectSpread$4({}, props))
+  })]
+});
+AuthenticationRoutes.displayName = 'AuthenticationRoutes';
+
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+/**
+ * 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$3(_objectSpread$3({}, coercedEnvironmentValues), {}, {
+      [key]: getCoerceEnvironmentValue(uncoercedEnvironmentValue)
+    });
+  }, {});
+};
+const useCoercedEnvironmentValues = environment => {
+  const coercedEnvironmentValues = react.useMemo(() => shallowlyCoerceValues(environment), [environment]);
+  return coercedEnvironmentValues;
+};
+
+const ApplicationShellProvider = props => {
+  const apolloClient = react.useMemo(() => props.apolloClient ?? applicationShellConnectors.createApolloClient(), [props.apolloClient]);
+  react.useEffect(() => {
+    applicationShellConnectors.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: index.internalReduxStore,
+          children: jsxRuntime.jsx(react$2.ApolloProvider, {
+            client: apolloClient,
+            children: jsxRuntime.jsxs(reactRouterDom.Router, {
+              history: getBrowserHistory(),
+              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';
+
+const RedirectToLogin = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-login-8c7575fb.cjs.prod.js' /* webpackChunkName: "redirect-to-login" */); }));
+
+const styles = {
+  name: "gx7yk8",
+  styles: "html,body{font-size:var(--font-size-30);height:100vh;}#app{height:100%;}"
+} ;
+const GlobalStyles = () => jsxRuntime.jsx(react$1.Global, {
+  styles: styles
+});
+
+const StrictModeEnablement$1 = props => {
+  if (props.enableReactStrictMode) {
+    return jsxRuntime.jsx(react.StrictMode, {
+      children: props.children
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.children
+    });
+  }
+};
+StrictModeEnablement$1.propTypes = {};
+const ApplicationShell = props => {
+  react.useEffect(() => {
+    props.onRegisterErrorListeners?.({
+      dispatch: index.internalReduxStore.dispatch
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // <-- run only once, when component mounts
+
+  return jsxRuntime.jsxs(StrictModeEnablement$1, {
+    enableReactStrictMode: props.enableReactStrictMode,
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+      apolloClient: props.apolloClient,
+      environment: props.environment,
+      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 = version;
+
+const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-076c2a9f.cjs.prod.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+
+function CustomViewFlopFlipProvider(props) {
+  const adapterArgs = react.useMemo(() => ({
+    user: {
+      key: props.user?.id
+    }
+  }), [props.user?.id]);
+  return jsxRuntime.jsx(reactBroadcast.ConfigureFlopFlip, {
+    adapter: memoryAdapter__default["default"],
+    defaultFlags: _flagsInstanceProperty__default["default"](props),
+    adapterArgs: adapterArgs,
+    children: props.children
+  });
+}
+CustomViewFlopFlipProvider.propTypes = {};
+
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const CustomViewWithPermissionCheck = props => {
+  const permissionKeys = ssr.entryPointUriPathToPermissionKeys(constants.CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH);
+
+  // Require View permission to render the application.
+  const canView = permissions.useIsAuthorized({
+    demandedPermissions: [permissionKeys.View]
+  });
+  if (canView) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.children
+    });
+  }
+  return jsxRuntime.jsx(applicationComponents.PageUnauthorized, {});
+};
+CustomViewWithPermissionCheck.propTypes = {};
+function CustomViewShellAuthenticated(props) {
+  const browserLocale = getBrowserLocale(window);
+  return jsxRuntime.jsx(FetchUser, {
+    children: _ref => {
+      let isLoading = _ref.isLoading,
+        fetchUserError = _ref.error,
+        user = _ref.user;
+      if (isLoading) {
+        return jsxRuntime.jsx(ApplicationLoader, {});
+      }
+      return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+        locale: user?.language || browserLocale,
+        applicationMessages: props.messages,
+        children: _ref2 => {
+          let isLoadingLocaleData = _ref2.isLoading,
+            locale = _ref2.locale,
+            messages = _ref2.messages;
+          return jsxRuntime.jsx(ConfigureIntlProvider
+          // We do not want to pass the language as long as the locale data
+          // is not loaded.
+          , _objectSpread$2(_objectSpread$2({}, isLoadingLocaleData ? {} : {
+            locale,
+            messages
+          }), {}, {
+            children: jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+              user: user,
+              environment: props.environment,
+              children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+                children: jsxRuntime.jsx(FetchProject, {
+                  projectKey: props.projectKey,
+                  children: _ref3 => {
+                    let isProjectLoading = _ref3.isLoading,
+                      project = _ref3.project;
+                    if (fetchUserError) {
+                      return jsxRuntime.jsx(applicationComponents.PageUnauthorized, {});
+                    }
+                    if (isProjectLoading) {
+                      return jsxRuntime.jsx(ApplicationLoader, {});
+                    }
+                    return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
+                      user: user,
+                      project: project,
+                      projectDataLocale: props.dataLocale,
+                      environment: props.environment,
+                      children: jsxRuntime.jsx(CustomViewFlopFlipProvider, {
+                        flags: _flagsInstanceProperty__default["default"](props),
+                        user: user,
+                        children: jsxRuntime.jsx(CustomViewWithPermissionCheck, {
+                          children: props.children
+                        })
+                      })
+                    });
+                  }
+                })
+              })
+            })
+          }));
+        }
+      });
+    }
+  });
+}
+CustomViewShellAuthenticated.propTypes = {};
+
+// These styles exist so we can make the Page Layout components to work
+// property when they are used within a Custom View panel.
+// Those components have some default margins and paddings around them
+// which are required when using this components in Custom Applications,
+// but we don't want them in Custom View panels since they already provide
+// their own paddings.
+// These overrides allows us to change the border/margins those Page Layout
+// components use when they are used within a Custom View panel.
+const customViewsThemesOverrides = {
+  default: {
+    marginForCustomViewsSelectorAsTabular: '0',
+    marginForPageContent: `${designSystem.designTokens.spacing50} 0`,
+    paddingForDetailPageHeader: `0 0 ${designSystem.designTokens.spacing40} 0`,
+    paddingForMainPageHeader: '0',
+    paddingForTabularPageHeader: '0'
+  }
+};
+
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const browserLocale = getBrowserLocale(window);
+function NotificationsContainer(props) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
+      ref: props.notificationsGlobalRef,
+      role: "region",
+      "aria-live": "polite",
+      style: {
+        gridRow: 1,
+        gridColumn: '1/3'
+      },
+      children: [jsxRuntime.jsx("div", {
+        id: "above-top-navigation"
+      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+        domain: constants.DOMAINS.GLOBAL
+      })]
+    }), jsxRuntime.jsx("div", {
+      ref: props.notificationsPageRef,
+      children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+        domain: constants.DOMAINS.PAGE
+      })
+    }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+      domain: constants.DOMAINS.SIDE
+    })]
+  });
+}
+NotificationsContainer.propTypes = {};
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e8xye0r0"
+} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
+function StrictModeEnablement(props) {
+  if (props.enableReactStrictMode) {
+    return jsxRuntime.jsx(react.StrictMode, {
+      children: props.children
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.children
+    });
+  }
+}
+StrictModeEnablement.propTypes = {};
+function CustomViewThemeProvider() {
+  const theme = 'default';
+  const customViewThemeOverrides = _objectSpread$1(_objectSpread$1({}, applicationComponents.themesOverrides[theme]), customViewsThemesOverrides[theme]);
+  return jsxRuntime.jsx(designSystem.ThemeProvider, {
+    theme: theme,
+    themeOverrides: customViewThemeOverrides
+  });
+}
+
+/*
+  During e2e tests, the Custom View template is built in production mode but still runs on localhost.
+  Checking for local production mode is necessary for applying the development host URL,
+  creating an environment for testing interaction with the Custom View template.
+*/
+const isLocalProdMode = window.app.env === 'development';
+function CustomViewShell(props) {
+  const _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    hostContext = _useState2[0],
+    setHostContext = _useState2[1];
+  const iFrameCommunicationPort = react.useRef();
+  const notificationsGlobalRef = react.useRef(null);
+  const notificationsPageRef = react.useRef(null);
+  const layoutRefs = react.useRef({
+    notificationsGlobalRef,
+    notificationsPageRef
+  });
+  const hostMessageHandler = react.useCallback(event => {
+    if (event.data.eventName === constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION) {
+      setHostContext(event.data.eventData.context);
+    } else {
+      console.warn(`CustomViewShell: Unknown received event with name: ${event.data.eventName}`, {
+        event
+      });
+    }
+  }, []);
+  const handleClose = react.useCallback(() => {
+    iFrameCommunicationPort.current?.postMessage({
+      origin: window.location.origin,
+      source: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${hostContext?.customViewConfig.id}`,
+      destination: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_CLOSE,
+      eventData: {}
+    });
+  }, [hostContext?.customViewConfig.id]);
+  react.useEffect(() => {
+    const bootstrapMessageHandler = event => {
+      if ((event.origin === window.location.origin ||
+      // event.origin is not defined in test environment
+              "production" === 'test') && event.data === constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP) {
+        iFrameCommunicationPort.current = event.ports[0];
+        iFrameCommunicationPort.current.onmessage = hostMessageHandler;
+        // Once bootstraped, we don't want to listen for global messages anymore.
+        // We will only listen to messages coming through the MessageChannel port.
+        window.removeEventListener('message', bootstrapMessageHandler);
+      } else {
+        console.warn('CustomViewShell: Received an event that is not allowed.', {
+          event
+        });
+      }
+    };
+    window.addEventListener('message', bootstrapMessageHandler);
+    return () => {
+      window.removeEventListener('message', bootstrapMessageHandler);
+    };
+  }, [hostMessageHandler]);
+  react.useEffect(() => {
+    // Close the channel when the component unmounts
+    return () => {
+      iFrameCommunicationPort.current?.close();
+      iFrameCommunicationPort.current = undefined;
+    };
+  }, []);
+  if (!hostContext) {
+    return jsxRuntime.jsx(ApplicationLoader, {
+      showLogo: true
+    });
+  }
+  const hostUrl = isLocalProdMode ? window.app.__DEVELOPMENT__?.customViewHostUrl : hostContext.hostUrl;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+      environment: window.app,
+      applicationMessages: props.applicationMessages,
+      apolloClient: props.apolloClient,
+      children: _ref => {
+        let isAuthenticated = _ref.isAuthenticated;
+        if (isAuthenticated) {
+          return jsxRuntime.jsx(applicationShellConnectors.CustomViewContextProvider, {
+            hostUrl: hostUrl,
+            customViewConfig: hostContext.customViewConfig,
+            children: jsxRuntime.jsxs(CustomViewShellAuthenticated, {
+              dataLocale: hostContext.dataLocale,
+              environment: window.app,
+              messages: props.applicationMessages,
+              projectKey: hostContext.projectKey,
+              flags: hostContext.featureFlags,
+              customViewConfig: hostContext.customViewConfig,
+              children: [jsxRuntime.jsx(CustomViewThemeProvider, {}), jsxRuntime.jsx(applicationComponents.PortalsContainer
+              // @ts-ignore
+              , {
+                ref: layoutRefs
+              }), jsxRuntime.jsx(NotificationsContainer, {
+                notificationsGlobalRef: notificationsGlobalRef,
+                notificationsPageRef: notificationsPageRef
+              }), jsxRuntime.jsxs(reactRouterDom.Route, {
+                path: `/custom-views/${hostContext.customViewConfig.id}/projects/${hostContext.projectKey}`,
+                children: [jsxRuntime.jsx(applicationComponents.ModalPageTopBar, {
+                  onClose: handleClose,
+                  hidePathLabel: true
+                }), jsxRuntime.jsx(ContentWrapper, {
+                  children: props.children
+                })]
+              })]
+            })
+          });
+        }
+        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: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+            });
+          }
+        });
+      }
+    })]
+  });
+}
+CustomViewShell.propTypes = {};
+const CustomViewShellWrapper = props => {
+  if ((isLocalProdMode) && !props.disableDevHost) {
+    return jsxRuntime.jsx(StrictModeEnablement, {
+      enableReactStrictMode: props.enableReactStrictMode,
+      children: jsxRuntime.jsx(react.Suspense, {
+        fallback: jsxRuntime.jsx(ApplicationLoader, {}),
+        children: jsxRuntime.jsx(CustomViewDevHost, {
+          applicationMessages: props.applicationMessages,
+          children: jsxRuntime.jsx(CustomViewShell, {
+            apolloClient: props.apolloClient,
+            applicationMessages: props.applicationMessages,
+            children: props.children
+          })
+        })
+      })
+    });
+  }
+  return jsxRuntime.jsx(StrictModeEnablement, {
+    enableReactStrictMode: props.enableReactStrictMode,
+    children: jsxRuntime.jsx(CustomViewShell, {
+      apolloClient: props.apolloClient,
+      applicationMessages: props.applicationMessages,
+      children: props.children
+    })
+  });
+};
+CustomViewShellWrapper.propTypes = {};
+
+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|completed with undelivered notifications)/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);
+      index.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);
+      index.internalReduxStore.dispatch(actionsGlobal.showUnexpectedErrorNotification({
+        errorId
+      }));
+    }
+  });
+}
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+
+/**
+ * The route path to match. Usually it starts with `/:projectKey/my-entry-point`.
+ */
+
+const makeRoute = (routePath, routeOptions) => {
+  const getUrl = (nextParams, nextQueryParams) => {
+    const baseUrl = reactRouterDom.generatePath(routePath, _objectSpread(_objectSpread({}, routeOptions.params), nextParams));
+    if (nextQueryParams) {
+      return `${baseUrl}?${nextQueryParams.toString()}`;
+    }
+    return baseUrl;
+  };
+  const go = (nextParams, nextQueryParams) => {
+    routeOptions.goTo(getUrl(nextParams, nextQueryParams));
+  };
+  return {
+    path: routePath,
+    getUrl,
+    go
+  };
+};
+function useRoutesCreator() {
+  const _useRouteMatch = reactRouterDom.useRouteMatch(),
+    params = _useRouteMatch.params;
+  const _useHistory = reactRouterDom.useHistory(),
+    goTo = _useHistory.push,
+    location = _useHistory.location;
+  const createRoute = routePath => makeRoute(routePath, {
+    goTo,
+    params,
+    location
+  });
+  return {
+    createRoute
+  };
+}
+
+exports.ApplicationLoader = ApplicationLoader;
+exports.ApplicationPageTitle = ApplicationPageTitle;
+exports.ApplicationShell = ApplicationShell;
+exports.ApplicationShellProvider = ApplicationShellProvider;
+exports.ButlerContainer = ButlerContainer;
+exports.ConfigureIntlProvider = ConfigureIntlProvider;
+exports.CustomViewShellWrapper = CustomViewShellWrapper;
+exports.ErrorApologizer = ErrorApologizer;
+exports.ErrorBoundary = ErrorBoundary;
+exports.FetchProject = FetchProject;
+exports.FetchUser = FetchUser;
+exports.InjectReducers = InjectReducers;
+exports.ProjectDataLocale = ProjectDataLocale;
+exports.ProjectSwitcher = ProjectSwitcher;
+exports.REQUESTS_IN_FLIGHT_LOADER_DOM_ID = REQUESTS_IN_FLIGHT_LOADER_DOM_ID;
+exports.RedirectToLogin = RedirectToLogin;
+exports.RedirectToLogout = RedirectToLogout;
+exports.RedirectToProjectCreate = RedirectToProjectCreate;
+exports.SetupFlopFlipProvider = SetupFlopFlipProvider;
+exports.SuspendedRoute = SuspendedRoute;
+exports.getBrowserLocale = getBrowserLocale;
+exports.getPreviousProjectKey = getPreviousProjectKey;
+exports.pimIndexerStates = pimIndexerStates;
+exports.setupGlobalErrorListener = setupGlobalErrorListener;
+exports.useRoutesCreator = useRoutesCreator;
+exports.version = version;