@commercetools-frontend/application-shell 22.17.2 → 22.19.0

package/dist/{index-3d6cf404.cjs.prod.js → index-e452a65f.cjs.prod.js}

@@ -35,13 +35,13 @@ var icons = require('@commercetools-uikit/icons');
 var useIsServedByProxy = require('./use-is-served-by-proxy-845cace5.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-var _objectDestructuringEmpty = require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
+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');
@@ -69,6 +69,7 @@ var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable
 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');
@@ -95,6 +96,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 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);
@@ -108,13 +110,14 @@ var ldAdapter__default = /*#__PURE__*/_interopDefault(ldAdapter);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var 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 applicationShellVersion = "22.17.2";
+var applicationShellVersion = "22.19.0";
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-f5ea48c9.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-b424edc1.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -225,7 +228,7 @@ var messages = reactIntl.defineMessages({
   projectsLabel: {
     id: 'ProjectSwitcher.projectsLabel',
     description: 'The label for project dropdown switcher',
-    defaultMessage: 'Projects menu'
+    defaultMessage: 'Projects'
   },
   searchPlaceholder: {
     id: 'ProjectSwitcher.searchPlaceholder',
@@ -249,72 +252,73 @@ var messages = reactIntl.defineMessages({
   }
 });
 
+const _excluded = ["children"];
 function ownKeys$9(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$9(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$9(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$9(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';
-var _ref3$1 = {
-  name: "82a6rk",
-  styles: "flex:1"
-} ;
-const ValueContainer = _ref4 => {
-  let restProps = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
-  return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react$1.css("display:flex;flex:1;align-items:center;font-weight:", designSystem.designTokens.fontWeight500, ";" + ("" ), "" ),
-    children: jsxRuntime.jsx("div", {
-      css: _ref3$1,
-      children: jsxRuntime.jsx(SelectInput__default["default"].ValueContainer, _objectSpread$9(_objectSpread$9({}, restProps), {}, {
-        children: restProps.children
-      }))
-    })
+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$9(_objectSpread$9({}, 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: "16lqnjx",
-  styles: "font-size:1.5rem;display:flex"
-} ;
-var _ref2$2 = {
-  name: "10s3lzp",
-  styles: "word-wrap:break-word"
+  name: "uyj17t",
+  styles: "flex:1;word-wrap:break-word"
 } ;
 const ProjectSwitcherOption = props => {
   const project = props.data;
   return jsxRuntime.jsx(SelectInput__default["default"].Option, _objectSpread$9(_objectSpread$9({}, props), {}, {
-    children: jsxRuntime.jsxs("div", {
-      css: _ref2$2,
+    children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      scale: "xs",
+      justifyContent: "space-between",
       children: [jsxRuntime.jsxs("div", {
-        css: /*#__PURE__*/react$1.css("color:", props.isDisabled ? designSystem.designTokens.colorNeutral : designSystem.designTokens.colorAccent, ";" + ("" ), "" ),
-        children: [project.name, props.isDisabled && jsxRuntime.jsx("span", {
-          css: _ref$2,
-          children: jsxRuntime.jsx(icons.ErrorIcon, {
-            size: "medium"
-          })
+        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("div", {
-        css: /*#__PURE__*/react$1.css("font-size:11px;color:", props.isDisabled ? designSystem.designTokens.colorNeutral : 'inherit', ";" + ("" ), "" ),
-        children: project.key
-      }), project.suspension && project.suspension.isActive && jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$1.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages.suspended))
-      }), project.expiry && project.expiry.isActive && jsxRuntime.jsx("div", {
-        css: /*#__PURE__*/react$1.css("font-size:11px;color:", designSystem.designTokens.colorError, ";" + ("" ), "" ),
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages.expired))
+      }), jsxRuntime.jsx(ProjectStampsList, {
+        isProductionProject: project.isProductionProject,
+        suspension: project.suspension,
+        expiry: project.expiry
       })]
     })
   }));
 };
-const mapProjectsToOptions = memoize__default["default"](projects => _mapInstanceProperty__default["default"](projects).call(projects, project => ({
-  key: project.key,
-  name: project.name,
-  label: project.name,
-  value: project.key,
-  suspension: project.suspension,
-  expiry: project.expiry,
-  isProductionProject: project.isProductionProject
-})));
+const mapProjectsToOptions = memoize__default["default"](projects => {
+  return [{
+    label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, 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", {
-    css: /*#__PURE__*/react$1.css("width:max-content;max-width:", designSystem.designTokens.constraint6, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(reactSelect.components.MenuList, _objectSpread$9(_objectSpread$9({}, props), {}, {
       children: props.children
     }))
@@ -360,7 +364,7 @@ const ProjectSwitcher = props => {
           redirectTo("/".concat(selectedProjectKey));
         }
       },
-      options: data && data.user && mapProjectsToOptions(data.user.projects.results),
+      options: data && data.user && mapProjectsToOptions(data.user.projects.results) || [],
       isOptionDisabled: option => {
         const project = option;
         return project.suspension.isActive || project.expiry.isActive;
@@ -377,7 +381,9 @@ const ProjectSwitcher = props => {
       noOptionsMessage: () => intl.formatMessage(messages.noResults),
       horizontalConstraint: 'auto',
       appearance: "quiet",
-      maxMenuHeight: 360
+      maxMenuHeight: 380,
+      maxMenuWidth: 8,
+      minMenuWidth: 8
     })]
   });
 };
@@ -386,7 +392,7 @@ ProjectSwitcher.displayName = 'ProjectSwitcher';
 // eslint-disable-next-line import/prefer-default-export
 const REQUESTS_IN_FLIGHT_LOADER_DOM_ID = 'loader-for-requests-in-flight';
 
-const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-1314b25d.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
+const UserSettingsMenu = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./user-settings-menu-daa096fd.cjs.prod.js' /* webpackChunkName: "user-settings-menu" */); }));
 
 var _ref$1 = {
   name: "zjik7",
@@ -396,6 +402,10 @@ var _ref2$1 = {
   name: "36bnqj",
   styles: "display:flex;flex:1"
 } ;
+var _ref3$1 = {
+  name: "w3f7al",
+  styles: "height:22px"
+} ;
 const AppBar = props => {
   var _props$user$defaultPr, _props$user;
   const previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
@@ -407,9 +417,8 @@ const AppBar = props => {
       children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
         scale: "m",
         alignItems: "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, {
@@ -419,15 +428,25 @@ const AppBar = props => {
             }
             // The `<ProjectSwitcher>` should be rendered only if the
             // user is fetched and the user has projects while the app runs in an project context.
-            if (props.user.projects.total > 0 && props.projectKeyFromUrl) return jsxRuntime.jsx(ProjectSwitcher
-            // In this case it's not necessary to check if the `projectKey` param
-            // is included in the list of projects. In such case
-            // the dropdown will still be rendered but no project will be selected.
-            // This is fine becase the user has still the possibility to "switch"
-            // to a project.
-            , {
-              projectKey: props.projectKeyFromUrl || previousProjectKey
-            });
+            if (props.user.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 === null || selectedProject === void 0 ? void 0 : 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
@@ -510,7 +529,7 @@ const ConfigureIntlProvider = props => {
 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" */); }));
+const ErrorApologizer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./error-apologizer-7bc04be1.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: [] }] } }] } }], loc: { start: 0, end: 1049, 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  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const FetchProject = props => {
@@ -542,7 +561,7 @@ FetchProject.propTypes = {
 };
 FetchProject.displayName = 'FetchProject';
 
-var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "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: "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: 695, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    createdAt\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    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      }\n    }\n    idTokenUserInfo {\n      iss\n      sub\n      aud\n      exp\n      iat\n      email\n      name\n      additionalClaims\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var LoggedInUserQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchLoggedInUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "email" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "createdAt" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "gravatarHash" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "firstName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "lastName" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "numberFormat" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "timeZone" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingId" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTeam" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingTenant" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "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: 723, source: { body: "query FetchLoggedInUser {\n  user: me {\n    id\n    email\n    createdAt\n    gravatarHash\n    firstName\n    lastName\n    language\n    numberFormat\n    timeZone\n    launchdarklyTrackingId\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    launchdarklyTrackingTeam\n    launchdarklyTrackingTenant\n    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,
@@ -566,9 +585,9 @@ FetchUser.propTypes = {
 };
 FetchUser.displayName = 'FetchUser';
 
-const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-53abe300.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
+const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-681a53df.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-a7b22509.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-554de6c1.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -680,7 +699,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-bd6496a4.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-e5dc862b.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -767,7 +786,7 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-9b9b32c5.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-ca90976f.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
 
 const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-c962f72f.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
@@ -886,15 +905,17 @@ SetupFlopFlipProvider.propTypes = {};
 SetupFlopFlipProvider.displayName = 'SetupFlopFlipProvider';
 
 const ThemeSwitcher = () => {
+  const isRecolouringThemeEnabled = reactBroadcast.useFeatureToggle(constants.featureFlags.RECOLOURING);
+  const theme = isRecolouringThemeEnabled ? 'recolouring' : 'default';
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: jsxRuntime.jsx(designSystem.ThemeProvider, {
-      theme: "default",
-      themeOverrides: applicationComponents.themesOverrides.default
+      theme: theme,
+      themeOverrides: applicationComponents.themesOverrides[theme]
     })
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-15416b7d.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-b283cce0.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
 
 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; }
@@ -1372,7 +1393,7 @@ const hasCachedAuthenticationState = () => {
   return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
-const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-663e13d0.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-6eda6b00.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; }
@@ -1588,7 +1609,26 @@ ApplicationShell.propTypes = {};
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = applicationShellVersion;
 
-const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-a4c2526e.cjs.prod.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-07deb1be.cjs.prod.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+
+function CustomViewFlopFlipProvider(props) {
+  var _props$user2;
+  const adapterArgs = react.useMemo(() => {
+    var _props$user;
+    return {
+      user: {
+        key: (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.id
+      }
+    };
+  }, [(_props$user2 = props.user) === null || _props$user2 === void 0 ? void 0 : _props$user2.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; }
@@ -1651,8 +1691,12 @@ function CustomViewShellAuthenticated(props) {
                       project: project,
                       projectDataLocale: props.dataLocale,
                       environment: props.environment,
-                      children: jsxRuntime.jsx(CustomViewWithPermissionCheck, {
-                        children: props.children
+                      children: jsxRuntime.jsx(CustomViewFlopFlipProvider, {
+                        flags: _flagsInstanceProperty__default["default"](props),
+                        user: user,
+                        children: jsxRuntime.jsx(CustomViewWithPermissionCheck, {
+                          children: props.children
+                        })
                       })
                     });
                   }
@@ -1682,6 +1726,13 @@ const customViewsThemesOverrides = {
     paddingForDetailPageHeader: "0 0 ".concat(designSystem.designTokens.spacing40, " 0"),
     paddingForMainPageHeader: '0',
     paddingForTabularPageHeader: '0'
+  },
+  recolouring: {
+    marginForCustomViewsSelectorAsTabular: '0',
+    marginForPageContent: "".concat(designSystem.designTokens.spacing50, " 0"),
+    paddingForDetailPageHeader: "0 0 ".concat(designSystem.designTokens.spacing40, " 0"),
+    paddingForMainPageHeader: '0',
+    paddingForTabularPageHeader: '0'
   }
 };
 
@@ -1728,15 +1779,22 @@ function StrictModeEnablement(props) {
     });
   }
 }
+StrictModeEnablement.propTypes = {};
+function CustomViewThemeProvider() {
+  const theme = reactBroadcast.useFeatureToggle('mcRecolouring') ? 'recolouring' : '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.
 */
-StrictModeEnablement.propTypes = {};
 const isLocalProdMode = window.app.env === 'development';
-const customViewThemeOverrides = _objectSpread$1(_objectSpread$1({}, applicationComponents.themesOverrides.default), customViewsThemesOverrides.default);
 function CustomViewShell(props) {
   var _window$app$__DEVELOP;
   const _useState = react.useState(),
@@ -1805,10 +1863,7 @@ function CustomViewShell(props) {
   }
   const hostUrl = isLocalProdMode ? (_window$app$__DEVELOP = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP === void 0 ? void 0 : _window$app$__DEVELOP.customViewHostUrl : hostContext.hostUrl;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(designSystem.ThemeProvider, {
-      theme: "default",
-      themeOverrides: customViewThemeOverrides
-    }), jsxRuntime.jsx(ApplicationShellProvider, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
       environment: window.app,
       applicationMessages: props.applicationMessages,
       apolloClient: props.apolloClient,
@@ -1824,8 +1879,9 @@ function CustomViewShell(props) {
               environment: window.app,
               messages: props.applicationMessages,
               projectKey: hostContext.projectKey,
+              flags: hostContext.featureFlags,
               customViewConfig: hostContext.customViewConfig,
-              children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+              children: [jsxRuntime.jsx(CustomViewThemeProvider, {}), jsxRuntime.jsx(applicationComponents.PortalsContainer
               // @ts-ignore
               , {
                 ref: layoutRefs