@commercetools-frontend/application-components 22.17.2 → 22.19.0

package/dist/commercetools-frontend-application-components.cjs.prod.js

@@ -18,6 +18,7 @@ var Text = require('@commercetools-uikit/text');
 var utils = require('@commercetools-uikit/utils');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react$1 = require('react');
 var _styled = require('@emotion/styled/base');
@@ -37,17 +38,21 @@ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instan
 var sentry = require('@commercetools-frontend/sentry');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var Constraints = require('@commercetools-uikit/constraints');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var reactBroadcast = require('@flopflip/react-broadcast');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
-var reactBroadcast = require('@flopflip/react-broadcast');
 var IconButton = require('@commercetools-uikit/icon-button');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var PageNotFoundSVGRebranding = require('@commercetools-frontend/assets/images/page-not-found-rebranding.svg');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
+var FailedAuthorizationSVGRebranding = require('@commercetools-frontend/assets/images/doors-closed-rebranding.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+var Stamp = require('@commercetools-uikit/stamp');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
 
@@ -62,6 +67,7 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
@@ -74,28 +80,85 @@ var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var PageNotFoundSVGRebranding__default = /*#__PURE__*/_interopDefault(PageNotFoundSVGRebranding);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
+var FailedAuthorizationSVGRebranding__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVGRebranding);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.17.2";
+var version = "22.19.0";
+
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
+
+// We keep these tokens as they are related to page layout components which should have
+// a slightly different layout (margins/paddings) when used within a Custom View panel.
+// https://github.com/commercetools/merchant-center-application-kit/pull/3353
+const themesOverrides = {
+  default: {
+    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
+    marginForPageContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing50, " ")).call(_context, designSystem.designTokens.spacing55),
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, designSystem.designTokens.spacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context4, designSystem.designTokens.spacing55, " 0"),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context5, designSystem.designTokens.spacing55, " 0"),
+    // recolouring rollout
+    backgroundColorForNavbar: designSystem.designTokens.colorPrimary,
+    backgroundColorForNavbarExpander: _concatInstanceProperty__default["default"](_context6 = "linear-gradient(180deg, ".concat(designSystem.designTokens.colorPrimary, " 0%, ")).call(_context6, designSystem.designTokens.colorPrimary25, " 100%)"),
+    backgroundColorForNavbarExpanderWhenHovered: designSystem.designTokens.colorPrimary40,
+    backgroundColorForNavbarHeader: designSystem.designTokens.colorAccent10,
+    backgroundColorForNavbarMenuItemWhenActive: designSystem.designTokens.colorAccent30,
+    backgroundColorForNavbarSubmenuItemWhenActive: designSystem.designTokens.colorAccent30,
+    backgroundColorForNavbarMenuItemWhenHovered: designSystem.designTokens.colorPrimary40,
+    backgroundColorForNavbarSkeleton: '#009987',
+    backgroundColorForNavbarSkeletonFooter: 'linear-gradient(180deg, #009987 0%, #004d44 100%)',
+    borderColorForNotificationWhenSuccess: designSystem.designTokens.colorPrimary85,
+    fontColorForNotificationWhenSuccess: designSystem.designTokens.colorPrimary,
+    fontColorForNotificationWhenWarning: designSystem.designTokens.colorWarning,
+    fontColorForTabLabelWhenActive: designSystem.designTokens.colorSolid,
+    visibilityForNavbarFaded: 'visible'
+  },
+  recolouring: {
+    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
+    marginForPageContent: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context7, designSystem.designTokens.spacing55),
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context9, designSystem.designTokens.spacing55, " ")).call(_context8, designSystem.designTokens.spacing40),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context10, designSystem.designTokens.spacing55, " 0"),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context11 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context11, designSystem.designTokens.spacing55, " 0"),
+    backgroundColorForNavbar: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarExpander: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarExpanderWhenHovered: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarHeader: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarMenuItemWhenActive: designSystem.designTokens.colorPrimary25,
+    backgroundColorForNavbarSubmenuItemWhenActive: designSystem.designTokens.colorPrimary40,
+    backgroundColorForNavbarMenuItemWhenHovered: designSystem.designTokens.colorPrimary20,
+    backgroundColorForNavbarSkeleton: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarSkeletonFooter: designSystem.designTokens.colorPrimary10,
+    borderColorForNotificationWhenSuccess: designSystem.designTokens.colorSuccess85,
+    fontColorForNotificationWhenSuccess: designSystem.designTokens.colorSuccess,
+    fontColorForNotificationWhenWarning: designSystem.designTokens.colorWarning60,
+    fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary,
+    visibilityForNavbarFaded: 'hidden'
+  }
+};
+const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
+  includeDefaultValue: false
+});
 
 const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
-var _ref$7 = {
+var _ref$8 = {
   name: "1u0tiat",
   styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
 } ;
-const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
+const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
 
-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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(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$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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; }
 const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
@@ -127,7 +190,7 @@ const TabHeader = props => {
     label = intl.formatMessage(props.intlMessage);
   }
   warnIfMissingContent(props);
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -184,13 +247,13 @@ const getModalContentStyles = props => {
 const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
-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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(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$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(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$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector$1 = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 const getOverlayElement$1 = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
@@ -205,7 +268,7 @@ const defaultProps$i = {
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
-var _ref$6 = {
+var _ref$7 = {
   name: "1daj17f",
   styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
 } ;
@@ -213,45 +276,48 @@ var _ref2$3 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
-const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
-  children: _ref3 => {
-    let makeClassName = _ref3.css;
-    return jsxRuntime.jsxs(Modal__default["default"], {
-      isOpen: props.isOpen,
-      onRequestClose: props.onClose,
-      shouldCloseOnOverlayClick: Boolean(props.onClose),
-      shouldCloseOnEsc: Boolean(props.onClose),
-      overlayElement: getOverlayElement$1,
-      overlayClassName: makeClassName(getOverlayStyles$1(props)),
-      className: makeClassName(getModalContentStyles(props)),
-      contentLabel: props.title,
-      parentSelector: props.getParentSelector,
-      ariaHideApp: false,
-      children: [jsxRuntime.jsx(GridArea, {
-        name: "top"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "left"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "right"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "bottom"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "main",
-        css: _ref2$3,
-        children: jsxRuntime.jsx(Card__default["default"]
-        // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
-        // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
-        , {
-          css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
-          children: jsxRuntime.jsx("div", {
-            css: _ref$6,
-            children: props.children
+const DialogContainer = props => {
+  utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
+  return jsxRuntime.jsx(react.ClassNames, {
+    children: _ref3 => {
+      let makeClassName = _ref3.css;
+      return jsxRuntime.jsxs(Modal__default["default"], {
+        isOpen: props.isOpen,
+        onRequestClose: props.onClose,
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement$1,
+        overlayClassName: makeClassName(getOverlayStyles$1(props)),
+        className: makeClassName(getModalContentStyles(props)),
+        contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
+        parentSelector: props.getParentSelector,
+        ariaHideApp: false,
+        children: [jsxRuntime.jsx(GridArea, {
+          name: "top"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "left"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "right"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "bottom"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "main",
+          css: _ref2$3,
+          children: jsxRuntime.jsx(Card__default["default"]
+          // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
+          // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
+          , {
+            css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+            children: jsxRuntime.jsx("div", {
+              css: _ref$7,
+              children: props.children
+            })
           })
-        })
-      })]
-    });
-  }
-});
+        })]
+      });
+    }
+  });
+};
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$i;
@@ -261,13 +327,23 @@ const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eo6zkz80"
 } )("border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:", designSystem.designTokens.spacing40, " 0 0;flex:1;overflow:auto;" + ("" ));
 
+const TextTitle = props => jsxRuntime.jsx(Text__default["default"].Headline, {
+  as: "h3",
+  title: props.title,
+  truncate: true,
+  children: props.title
+});
+TextTitle.propTypes = {};
 const Title$1 = props => {
-  return jsxRuntime.jsx(Text__default["default"].Headline, {
-    as: "h3",
-    title: props.title,
-    truncate: true,
-    children: props.title
-  });
+  if (typeof props.title === 'string') {
+    return jsxRuntime.jsx(TextTitle, {
+      title: props.title
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.title
+    });
+  }
 };
 const DialogHeader = props => jsxRuntime.jsx("div", {
   css: /*#__PURE__*/react.css("flex:0 1 auto;display:flex;flex-direction:column;margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
@@ -294,6 +370,7 @@ const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -305,12 +382,16 @@ const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+InfoDialog.TextTitle = TextTitle;
+
 function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
-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; }
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(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$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const defaultProps$h = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
@@ -325,11 +406,11 @@ const DialogFooter = props => {
       scale: "m",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
+      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$6({
         label: getFormattedLabel(props.labelSecondary, intl),
         onClick: props.onCancel,
         iconLeft: props.iconLeftSecondaryButton
-      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
+      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
         label: getFormattedLabel(props.labelPrimary, intl),
         onClick: props.onConfirm,
         isDisabled: props.isPrimaryButtonDisabled
@@ -351,6 +432,7 @@ const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -373,6 +455,9 @@ ConfirmationDialog.defaultProps = defaultProps$g;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 ConfirmationDialog.Intl = i18n.sharedMessages;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+ConfirmationDialog.TextTitle = TextTitle;
 
 const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
@@ -384,6 +469,7 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -407,8 +493,11 @@ FormDialog.defaultProps = defaultProps$f;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 FormDialog.Intl = i18n.sharedMessages;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+FormDialog.TextTitle = TextTitle;
 
-const messages$4 = reactIntl.defineMessages({
+const messages$5 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
     defaultMessage: 'Go Back'
@@ -437,10 +526,10 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 LargeIconWrapper.propTypes = {};
 const defaultProps$e = {
   color: 'surface',
-  previousPathLabel: messages$4.back,
+  previousPathLabel: messages$5.back,
   hidePathLabel: false
 };
-var _ref$5 = {
+var _ref$6 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -449,7 +538,7 @@ const ModalPageTopBar = props => {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$5,
+      css: _ref$6,
       children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -470,7 +559,7 @@ const ModalPageTopBar = props => {
         })]
       })]
     }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-      label: intl.formatMessage(messages$4.close),
+      label: intl.formatMessage(messages$5.close),
       onClick: props.onClose,
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -520,19 +609,19 @@ var _ref2$1 = {
 } ;
 const getAfterOpenOverlayAnimation = () => _ref2$1;
 const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$4 = {
+var _ref$5 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
-const getBeforeCloseOverlayAnimation = () => _ref$4;
+const getBeforeCloseOverlayAnimation = () => _ref$5;
 
-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; }
+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 getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 const getOverlayElement = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
 }));
@@ -621,7 +710,7 @@ ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
 ModalPage.defaultProps = defaultProps$d;
 
-const messages$3 = reactIntl.defineMessages({
+const messages$4 = reactIntl.defineMessages({
   loadError: {
     id: 'CustomViewLoader.error.load',
     defaultMessage: 'We could not load the Custom View. Please contact your administrator to check its configuration.'
@@ -659,6 +748,7 @@ function CustomViewLoader(props) {
     var _context$project;
     return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
   });
+  const featureFlags = reactBroadcast.useAllFeatureToggles();
   const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
   const showNotification = actionsGlobal.useShowNotification();
   const intl = reactIntl.useIntl();
@@ -682,7 +772,7 @@ function CustomViewLoader(props) {
       showNotification({
         domain: constants.DOMAINS.PAGE,
         kind: constants.NOTIFICATION_KINDS_PAGE.error,
-        text: intl.formatMessage(messages$3.loadError)
+        text: intl.formatMessage(messages$4.loadError)
       });
       return;
     }
@@ -702,6 +792,7 @@ function CustomViewLoader(props) {
         context: {
           dataLocale,
           projectKey,
+          featureFlags,
           customViewConfig: props.customView,
           hostUrl: props.hostUrl || window.location.href
         }
@@ -745,7 +836,7 @@ function CustomViewLoader(props) {
 }
 CustomViewLoader.propTypes = {};
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   title: {
     id: 'CustomViewsSelector.title',
     defaultMessage: 'Custom Views:'
@@ -776,8 +867,8 @@ const useCustomViewsConnector = _ref => {
   };
 };
 
-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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(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$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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 COMPONENT_HEIGHT = '52px';
 const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e16cb3zv3"
@@ -852,7 +943,7 @@ function CustomViewSelector(props) {
               color: "neutral60"
             }), jsxRuntime.jsx(Text__default["default"].Detail, {
               tone: "secondary",
-              intlMessage: messages$2.title
+              intlMessage: messages$3.title
             })]
           }), _mapInstanceProperty__default["default"](customViews).call(customViews, (customView, index) => {
             const isNotLastItem = index !== customViews.length - 1;
@@ -882,7 +973,7 @@ const CustomViewSelectorOrNothing = props => {
   if (!props.customViewLocatorCode) {
     return null;
   }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
     customViewLocatorCode: props.customViewLocatorCode
   }));
 };
@@ -942,12 +1033,12 @@ Subtitle.propTypes = {};
 Subtitle.defaultProps = {
   truncate: false
 };
-var _ref$3 = {
+var _ref$4 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
 const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
-  css: _ref$3,
+  css: _ref$4,
   children: [jsxRuntime.jsx(Title, {
     title: props.title,
     titleSize: props.titleSize,
@@ -981,24 +1072,6 @@ const PageHeader = props => {
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
-var _context, _context2, _context3, _context4, _context5;
-
-// We keep these tokens as they are related to page layout components which should have
-// a slightly different layout (margins/paddings) when used within a Custom View panel.
-// https://github.com/commercetools/merchant-center-application-kit/pull/3353
-const themesOverrides = {
-  default: {
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
-    marginForPageContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing50, " ")).call(_context, designSystem.designTokens.spacing55),
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, designSystem.designTokens.spacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context4, designSystem.designTokens.spacing55, " 0"),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context5, designSystem.designTokens.spacing55, " 0")
-  }
-};
-const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
-  includeDefaultValue: false
-});
-
 const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn02"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
@@ -1033,8 +1106,8 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
-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; }
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(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$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const primaryDefaultProps = {
   label: i18n.sharedMessages.confirm,
   isDisabled: false,
@@ -1046,7 +1119,7 @@ const useFormattedLabel = label => {
 };
 const FormPrimaryButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled
@@ -1062,7 +1135,7 @@ const secondaryDefaultProps = {
 };
 const FormSecondaryButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled,
@@ -1079,7 +1152,7 @@ const deleteDefaultProps = {
 };
 const FormDeleteButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
     label: label,
     onClick: props.onClick,
@@ -1268,7 +1341,7 @@ TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$8 = {
   color: 'surface',
-  previousPathLabel: messages$4.back
+  previousPathLabel: messages$5.back
 };
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
@@ -1618,7 +1691,7 @@ TabularMainPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularMainPage.Intl = i18n.sharedMessages;
 
-var _ref$2 = {
+var _ref$3 = {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } ;
@@ -1646,7 +1719,7 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
       }), jsxRuntime.jsx(Text__default["default"].Body, {
         children: props.paragraph1
       }), props.bodyContent && jsxRuntime.jsx("div", {
-        css: _ref$2,
+        css: _ref$3,
         children: props.bodyContent
       }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
         children: props.paragraph2
@@ -1657,7 +1730,7 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
-var messages$1 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
     id: 'PageNotFound.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1668,8 +1741,8 @@ var messages$1 = reactIntl.defineMessages({
   }
 });
 
-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; }
+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 getLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
@@ -1678,11 +1751,13 @@ const getLink = msg => jsxRuntime.jsx("a", {
 });
 const PageNotFound = () => {
   const intl = reactIntl.useIntl();
+  const _useTheme = designSystem.useTheme(),
+    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: PageNotFoundSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
-    label: intl.formatMessage(messages$1.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph1), {}, {
+    imageSrc: themedValue(PageNotFoundSVG__default["default"], PageNotFoundSVGRebranding__default["default"]),
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$2.title)),
+    label: intl.formatMessage(messages$2.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$2.paragraph1), {}, {
       values: {
         a: getLink
       }
@@ -1691,7 +1766,7 @@ const PageNotFound = () => {
 };
 PageNotFound.displayName = 'PageNotFound';
 
-var messages = reactIntl.defineMessages({
+var messages$1 = reactIntl.defineMessages({
   title: {
     id: 'PageUnauthorized.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1706,8 +1781,8 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-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; }
+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 getSupportUrlLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
@@ -1716,12 +1791,14 @@ const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
 });
 const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
+  const _useTheme = designSystem.useTheme(),
+    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: FailedAuthorizationSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.title)),
-    label: intl.formatMessage(messages.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.paragraph1)),
-    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread(_objectSpread({}, messages.paragraph2), {}, {
+    imageSrc: themedValue(FailedAuthorizationSVG__default["default"], FailedAuthorizationSVGRebranding__default["default"]),
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
+    label: intl.formatMessage(messages$1.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.paragraph1)),
+    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph2), {}, {
       values: {
         a: getSupportUrlLink
       }
@@ -1820,13 +1897,13 @@ const defaultProps$1 = {
 };
 PageContentWide.defaultProps = defaultProps$1;
 
-var _ref$1 = {
+var _ref$2 = {
   name: "1d3w5wq",
   styles: "width:100%"
 } ;
 function PageContentFull(props) {
   return jsxRuntime.jsx("div", {
-    css: _ref$1,
+    css: _ref$2,
     children: jsxRuntime.jsx("section", {
       children: props.children
     })
@@ -1871,7 +1948,7 @@ function Drawer(props) {
               children: props.subtitle
             })
           }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-            label: intl.formatMessage(messages$4.close),
+            label: intl.formatMessage(messages$5.close),
             onClick: props.onClose,
             icon: jsxRuntime.jsx(LargeIconWrapper, {
               children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -1912,6 +1989,78 @@ Drawer.FormSecondaryButton = FormSecondaryButton;
 // The Intl messages can be used for button labels.
 Drawer.Intl = i18n.sharedMessages;
 
+var messages = reactIntl.defineMessages({
+  ProjectProduction: {
+    id: 'ProjectStamp.production',
+    defaultMessage: 'Production'
+  },
+  ProjectSuspended: {
+    id: 'ProjectStamp.suspended',
+    defaultMessage: 'Suspended'
+  },
+  ProjectExpired: {
+    id: 'ProjectStamp.expired',
+    defaultMessage: 'Trial expired'
+  },
+  ProjectWillExpire: {
+    id: 'ProjectStamp.willExpire',
+    defaultMessage: '{daysLeft, select, 0 {Trial ends today} 1 {Trial ends in 1 day} other {Trial ends in {daysLeft} days}}'
+  }
+});
+
+const _excluded = ["values"];
+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; }
+function CustomStamp(props) {
+  const intl = reactIntl.useIntl();
+  const _props$label = props.label,
+    values = _valuesInstanceProperty__default["default"](_props$label),
+    message = _objectWithoutProperties(_props$label, _excluded);
+  return jsxRuntime.jsx(Stamp__default["default"], {
+    tone: props.tone,
+    isCondensed: true,
+    label: intl.formatMessage(message, values || {}),
+    icon: props.icon
+  });
+}
+CustomStamp.propTypes = {};
+var _ref$1 = {
+  name: "ph6b5m",
+  styles: "height:18px;svg{height:18px;width:12px;}"
+} ;
+const IsProduction = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "positive",
+  label: messages.ProjectProduction,
+  icon: jsxRuntime.jsx("div", {
+    css: _ref$1,
+    children: jsxRuntime.jsx(icons.DotIcon, {
+      color: "primary"
+    })
+  })
+});
+const IsSuspended = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectSuspended
+});
+const IsExpired = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectExpired
+});
+const WillExpire = props => jsxRuntime.jsx(CustomStamp, {
+  tone: "information",
+  label: _objectSpread(_objectSpread({}, messages.ProjectWillExpire), {}, {
+    values: {
+      daysLeft: props.daysLeft
+    }
+  })
+});
+const ProjectStamp = {
+  IsProduction,
+  IsSuspended,
+  IsExpired,
+  WillExpire
+};
+
 const useObserverElementDimensions = element => {
   const _useState = react$1.useState({
       height: 0,
@@ -2048,6 +2197,7 @@ exports.PageContentWide = PageContentWide;
 exports.PageNotFound = PageNotFound;
 exports.PageUnauthorized = PageUnauthorized;
 exports.PortalsContainer = PortalsContainer;
+exports.ProjectStamp = ProjectStamp;
 exports.PublicPageLayout = PublicPageLayout;
 exports.TabHeader = TabHeader;
 exports.TabularDetailPage = TabularDetailPage;