@commercetools-frontend/application-components 22.17.1 → 22.18.0

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

@@ -18,7 +18,6 @@ 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');
@@ -38,6 +37,7 @@ 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 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');
@@ -48,6 +48,9 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.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,7 +65,6 @@ 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);
@@ -75,6 +77,7 @@ 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);
@@ -82,83 +85,22 @@ var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceP
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 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.1";
-
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10;
-const appKitSpacing55 = '40px';
-// TODO: move to uikit?
-const colorAccent10 = 'hsl(195, 35.2941176471%, 10%)';
-const colorAccent20 = 'hsl(195, 35.2941176471%, 20%)';
-const colorAccent90 = 'hsl(195, 35.2941176471%, 90%)';
-const newShadow1 = '0px 2px 5px 0px rgba(0, 0, 0, 0.15)';
-const themesOverrides = {
-  default: {
-    colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral90,
-    colorForNavbarIcon: colorAccent90,
-    colorForNavbarIconWhenActive: designSystem.designTokens.colorSurface,
-    colorForNavbarLink: designSystem.designTokens.colorNeutral,
-    colorForNavbarLinkWhenActive: designSystem.designTokens.colorSurface,
-    colorForNavbarLinkWhenHovered: designSystem.designTokens.colorSurface,
-    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral90,
-    backgroundColorForNavbar: colorAccent10,
-    backgroundColorForNavbarWhenActive: colorAccent20,
-    backgroundColorForNavbarWhenHovered: colorAccent20,
-    backgroundColorForPageHeader: designSystem.designTokens.colorSurface,
-    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorSurface,
-    backgroundColorForUserMenuItemWhenHovered: designSystem.designTokens.colorNeutral95,
-    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
-    borderColorForDialogDivider: designSystem.designTokens.colorNeutral90,
-    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral90,
-    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorSurface,
-    fontSizeForNavbarLink: designSystem.designTokens.fontSize20,
-    fontWeightForNavbarLink: designSystem.designTokens.fontWeight400,
-    fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight600,
-    fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight600,
-    heightForTab: '2px',
-    lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
-    marginBottomForPageTopBar: designSystem.designTokens.spacing40,
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(appKitSpacing55),
-    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing50, " 0"),
-    marginForModalPageHeader: "0 ".concat(appKitSpacing55),
-    marginForUserMenuItem: "".concat(designSystem.designTokens.spacing10, " 0"),
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing50,
-    marginRightForAppbar: appKitSpacing55,
-    marginTopForDialogFooter: designSystem.designTokens.spacing50,
-    marginForPageContent: _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context2, appKitSpacing55),
-    marginForModalsPageContent: _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, appKitSpacing55),
-    marginTopForPageSubtitle: designSystem.designTokens.spacing20,
-    marginTopForTabControls: designSystem.designTokens.spacing40,
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context5, appKitSpacing55, " ")).call(_context4, designSystem.designTokens.spacing40),
-    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context6, designSystem.designTokens.spacing30),
-    paddingForDialogContent: "".concat(designSystem.designTokens.spacing40, " 0 0"),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context7, appKitSpacing55, " 0"),
-    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context8, designSystem.designTokens.spacing40),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context9, appKitSpacing55, " 0"),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context10, appKitSpacing55, " 0"),
-    paddingLeftForTabAsFirst: designSystem.designTokens.spacing30,
-    shadowForAppbar: newShadow1,
-    shadowForNavbar: 'none',
-    widthForDialogAsMedium: designSystem.designTokens.constraint9,
-    widthForDialogAsLarge: designSystem.designTokens.constraint13,
-    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint16, " / 2)")
-  }
-};
-const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
-  includeDefaultValue: false
-});
+var version = "22.18.0";
 
-const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:", designTokens.heightForTab, ";border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
-var _ref$7 = {
+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$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.fontSizeDefault, ";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:", designTokens.paddingLeftForTabAsFirst, ";}", 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), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!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);
@@ -190,7 +132,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,
@@ -211,13 +153,12 @@ TabHeader.defaultProps = defaultProps$j;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
-    case 'm':
-      return designTokens.widthForDialogAsMedium;
     case 7:
       return designSystem.designTokens.constraint7;
     case 8:
       return designSystem.designTokens.constraint8;
     case 9:
+    case 'm':
       return designSystem.designTokens.constraint9;
     case 10:
       return designSystem.designTokens.constraint10;
@@ -226,11 +167,10 @@ const getConstraintForGridStyle = size => {
     case 12:
       return designSystem.designTokens.constraint12;
     case 13:
+    case 'l':
       return designSystem.designTokens.constraint13;
     case 16:
       return designSystem.designTokens.constraint16;
-    case 'l':
-      return designTokens.widthForDialogAsLarge;
     case 'scale':
       return designSystem.designTokens.constraintScale;
     default:
@@ -249,13 +189,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
 }));
@@ -270,7 +210,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"
 } ;
@@ -278,45 +218,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:", designTokens.paddingForDialogContainer, ";>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;
@@ -324,15 +267,25 @@ DialogContainer.defaultProps = defaultProps$i;
 // The overflow should be "auto", to make the container scrollable
 const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eo6zkz80"
-} )("border-top:1px solid ", designTokens.borderColorForDialogDivider, ";padding:", designTokens.paddingForDialogContent, ";flex:1;overflow:auto;" + ("" ));
+} )("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, ";" + ("" ), "" ),
@@ -359,6 +312,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,
@@ -370,12 +324,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: {},
@@ -385,16 +343,16 @@ const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : i
 const DialogFooter = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react.css("margin-top:", designTokens.marginTopForDialogFooter, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("margin-top:", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       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
@@ -416,6 +374,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,
@@ -438,6 +397,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,
@@ -449,6 +411,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,
@@ -472,8 +435,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'
@@ -502,19 +468,19 @@ 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;}"
 } ;
 const ModalPageTopBar = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
+    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),
@@ -535,7 +501,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, {})
@@ -585,19 +551,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
 }));
@@ -686,7 +652,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.'
@@ -747,7 +713,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;
     }
@@ -810,7 +776,7 @@ function CustomViewLoader(props) {
 }
 CustomViewLoader.propTypes = {};
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   title: {
     id: 'CustomViewsSelector.title',
     defaultMessage: 'Custom Views:'
@@ -841,8 +807,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"
@@ -917,7 +883,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;
@@ -947,7 +913,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
   }));
 };
@@ -959,7 +925,7 @@ const defaultProps$c = {
 };
 const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
-} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
+} )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
 const Title = props => {
   switch (props.titleSize) {
     case 'big':
@@ -1007,12 +973,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,
@@ -1028,9 +994,9 @@ PageHeaderTitle.defaultProps = defaultProps$c;
 
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing55, ";padding:", designSystem.designTokens.spacing40, " 0 ", designSystem.designTokens.spacing40, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
+      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designSystem.designTokens.spacing50, ";}" + ("" ), "" ),
       children: [jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title,
         titleSize: "big",
@@ -1046,12 +1012,30 @@ 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, ";" + ("" ));
 const ModalContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForModalsPageContent, ";" + ("" ));
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designSystem.designTokens.spacing50, " ", designSystem.designTokens.spacing55, ";" + ("" ));
 const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn00"
 } )({
@@ -1080,8 +1064,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,
@@ -1093,7 +1077,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
@@ -1109,7 +1093,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,
@@ -1126,7 +1110,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,
@@ -1233,7 +1217,7 @@ const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre2"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 const ControlsContainter = props => jsxRuntime.jsxs("div", {
-  css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designTokens.marginTopForTabControls, ";" + ("" ), "" ),
+  css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designSystem.designTokens.spacing40, ";" + ("" ), "" ),
   children: [jsxRuntime.jsx(TabControls, {
     role: "tablist",
     children: props.tabControls
@@ -1242,7 +1226,7 @@ const ControlsContainter = props => jsxRuntime.jsxs("div", {
 ControlsContainter.propTypes = {};
 ControlsContainter.displayName = 'ControlsContainter';
 const TabularPageContainer = props => jsxRuntime.jsx("div", {
-  css: /*#__PURE__*/react.css("background-color:", props.color === 'surface' ? designSystem.designTokens.colorSurface : designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:", designTokens.borderBottomForTabularPageHeader, ";" + ("" ), "" ),
+  css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
   children: props.children
 });
 TabularPageContainer.propTypes = {};
@@ -1315,12 +1299,12 @@ TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$8 = {
   color: 'surface',
-  previousPathLabel: messages$4.back
+  previousPathLabel: messages$5.back
 };
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designTokens.marginBottomForPageTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.customProperties.colorSurface, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designSystem.designTokens.spacing40, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
       tone: "primary",
       label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -1338,7 +1322,7 @@ PageTopBar.defaultProps = defaultProps$8;
 
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
-} )("background-color:", designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designTokens.colorForPageHeaderBottomBorder, " solid;" + ("" ));
+} )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designSystem.designTokens.colorNeutral90, " solid;" + ("" ));
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
@@ -1499,14 +1483,14 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularDetailPage.Intl = i18n.sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-d750ebd8.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-6cc4616e.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
 } )("padding:", designTokens.paddingForMainPageHeader, ";" + ("" ));
 const Divider = /*#__PURE__*/_styled__default["default"]("hr", {
   target: "ev8m2jf1"
-} )("background-color:", designTokens.backgroundColorForMainPageDivider, ";height:1px;border:0;" + ("" ));
+} )("background-color:", designSystem.designTokens.colorNeutral90, ";height:1px;border:0;" + ("" ));
 
 // NOTE: do not change "margin" to "padding" as this breaks sticky DataTable styles
 const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
@@ -1646,7 +1630,7 @@ const TabularMainPage = props => {
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsxRuntime.jsx(ContentWrapper$1, {
-      css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
+      css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
       children: props.children
     })]
   });
@@ -1665,7 +1649,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"
 } ;
@@ -1693,7 +1677,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
@@ -1704,7 +1688,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'
@@ -1715,8 +1699,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",
@@ -1727,9 +1711,9 @@ const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   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), {}, {
+    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
       }
@@ -1738,7 +1722,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'
@@ -1753,8 +1737,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",
@@ -1765,10 +1749,10 @@ const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   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), {}, {
+    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
       }
@@ -1867,13 +1851,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
     })
@@ -1892,7 +1876,7 @@ const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 } )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y40"
-} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ));
+} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
 function Drawer(props) {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs(ModalPage, {
@@ -1918,7 +1902,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, {})
@@ -1959,6 +1943,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,
@@ -2095,6 +2151,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;