@commercetools-frontend/application-components 21.5.1 → 21.8.0

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

@@ -30,18 +30,26 @@ var IconButton = require('@commercetools-uikit/icon-button');
 var icons = require('@commercetools-uikit/icons');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
-var FlatButton = require('@commercetools-uikit/flat-button');
 var Modal = require('react-modal');
 var constants = require('@commercetools-frontend/constants');
 var Card = require('@commercetools-uikit/card');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var FlatButton = require('@commercetools-uikit/flat-button');
 var CommercetoolsLogoSvg = require('@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_white-text_RGB.svg');
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/desert-fox.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
+var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
+var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
+var useLatest = require('@react-hook/latest');
+var rafSchd = require('raf-schd');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -62,36 +70,43 @@ var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
-var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLogoSvg);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
+var _Map__default = /*#__PURE__*/_interopDefault(_Map);
+var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
+var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
+var useLatest__default = /*#__PURE__*/_interopDefault(useLatest);
+var rafSchd__default = /*#__PURE__*/_interopDefault(rafSchd);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.5.1";
+var version = "21.8.0";
 
 var getBottomBorderStyles = function getBottomBorderStyles(background) {
   return /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:", designSystem.customProperties.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.customProperties.transitionEaseinout150Ms, ";}" + ("" ), "" );
 };
 
-var _ref$9 = {
+var _ref$8 = {
   name: "1u0tiat",
   styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
 } ;
 
 var getLinkStyles = function getLinkStyles(isActive, isDisabled) {
-  return [/*#__PURE__*/react.css("font-size:", designSystem.customProperties.fontSizeDefault, ";padding:", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:0;}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.customProperties.colorPrimary), ">*>*{color:", designSystem.customProperties.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$9, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{>*>*{color:", designSystem.customProperties.colorPrimary, "!important;}}" + ("" ), "" )];
+  return [/*#__PURE__*/react.css("font-size:", designSystem.customProperties.fontSizeDefault, ";padding:", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:0;}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.customProperties.colorPrimary), " & h4{color:", designSystem.customProperties.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.customProperties.colorPrimary, "!important;}}" + ("" ), "" )];
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var pathWithoutSearch = function pathWithoutSearch(path) {
   return typeof path === 'string' ? path.split('?')[0] : path.pathname;
@@ -101,12 +116,6 @@ var warnIfMissingContent = function warnIfMissingContent(props) {
   Boolean(props.intlMessage) || Boolean(props.label);
 };
 
-var getDisabledTabHeaderAriaAttributes = function getDisabledTabHeaderAriaAttributes(isDisabled) {
-  return isDisabled ? {
-    'aria-disabled': true
-  } : {};
-};
-
 var getDisabledLinkAtributes = function getDisabledLinkAtributes(isDisabled) {
   return isDisabled ? {
     tabIndex: -1,
@@ -130,38 +139,35 @@ var TabHeader = function TabHeader(props) {
     label = intl.formatMessage(props.intlMessage);
   }
 
-  var dataAttributeProps = _objectSpread$5({
+  var dataAttributeProps = _objectSpread$7({
     'data-track-event': 'click'
   }, label && {
     'data-track-component': startCase__default["default"](label)
   });
 
   warnIfMissingContent(props);
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$5(_objectSpread$5(_objectSpread$5({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7(_objectSpread$7({
+    role: "tab",
+    "aria-selected": isActive,
     to: props.to,
     css: getLinkStyles(isActive, isDisabled)
   }, getDisabledLinkAtributes(isDisabled)), dataAttributeProps), {}, {
-    children: jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({
-      role: "tab",
-      "aria-selected": isActive
-    }, getDisabledTabHeaderAriaAttributes(isDisabled)), {}, {
-      children: jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        truncate: true,
-        children: label
-      })
-    }))
+    children: jsxRuntime.jsx(Text__default["default"].Subheadline, {
+      as: "h4",
+      truncate: true,
+      children: label
+    })
   }));
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$f = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$f;
 
-var defaultProps$c = {
+var defaultProps$e = {
   titleSize: 'small',
   truncate: false
 };
@@ -212,7 +218,7 @@ var renderSubtitle = function renderSubtitle(subtitle) {
   });
 };
 
-var _ref$8 = {
+var _ref$7 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
@@ -228,27 +234,27 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
   });
   var renderedSubtitle = renderSubtitle(props.subtitle, truncate);
   return jsxRuntime.jsxs("div", {
-    css: _ref$8,
+    css: _ref$7,
     children: [renderedTitle, renderedSubtitle]
   });
 };
 
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$e;
 
 var TabControls = _styled__default["default"]("div", {
   target: "elpldre1"
 } )("margin-top:", designSystem.customProperties.spacingS, ";" + ("" ));
 
-var _ref$7 = {
+var _ref$6 = {
   name: "1nrstx4",
   styles: "display:flex;align-items:flex-end;justify-content:space-between"
 } ;
 
 var ControlsContainter = function ControlsContainter(props) {
   return jsxRuntime.jsxs("div", {
-    css: _ref$7,
+    css: _ref$6,
     children: [jsxRuntime.jsx(TabControls, {
       role: "tablist",
       children: props.tabControls
@@ -268,10 +274,10 @@ var TabularPageContainer = function TabularPageContainer(props) {
 
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$d = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$d;
 
 var FormControlsContainer = _styled__default["default"]("div", {
   target: "elpldre0"
@@ -293,9 +299,9 @@ function filterDataAttributes(obj) {
   });
 }
 
-function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var primaryDefaultProps = {
   label: i18n.sharedMessages.confirm,
   isDisabled: false,
@@ -309,7 +315,7 @@ var useFormattedLabel = function useFormattedLabel(label) {
 
 var FormPrimaryButton = function FormPrimaryButton(props) {
   var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled
@@ -327,7 +333,7 @@ var secondaryDefaultProps = {
 
 var FormSecondaryButton = function FormSecondaryButton(props) {
   var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$6({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled
@@ -345,7 +351,7 @@ var deleteDefaultProps = {
 
 var FormDeleteButton = function FormDeleteButton(props) {
   var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$4({
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$6({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
     label: label,
     onClick: props.onClick,
@@ -357,7 +363,7 @@ FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$c = {
   hideControls: false
 };
 
@@ -390,7 +396,7 @@ var TabularMainPage = function TabularMainPage(props) {
 
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$c; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -402,90 +408,6 @@ TabularMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience prox
 
 TabularMainPage.Intl = i18n.sharedMessages;
 
-var messages$2 = reactIntl.defineMessages({
-  back: {
-    id: 'Components.ModalPage.TopBar.Back',
-    defaultMessage: 'Go Back'
-  },
-  close: {
-    id: 'Components.ModalPage.TopBar.Close',
-    defaultMessage: 'Close Modal Page'
-  }
-});
-
-var defaultProps$9 = {
-  color: 'surface',
-  previousPathLabel: messages$2.back
-};
-
-var PageTopBar = function PageTopBar(props) {
-  var intl = reactIntl.useIntl();
-  return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;background-color:", props.color === 'neutral' ? designSystem.customProperties.colorNeutral95 : designSystem.customProperties.colorSurface, ";" + ("" ), "" ),
-    children: jsxRuntime.jsx(FlatButton__default["default"], {
-      tone: "primary",
-      label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
-      icon: jsxRuntime.jsx(icons.ListIcon, {
-        size: "medium",
-        color: "primary"
-      }),
-      onClick: props.onClick
-    })
-  });
-};
-
-PageTopBar.propTypes = {};
-PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
-
-var defaultProps$8 = {
-  hideControls: false
-};
-
-var TabularDetailPage = function TabularDetailPage(props) {
-  var _props$title;
-  return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(TabularPageContainer, {
-      color: "neutral",
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        children: [jsxRuntime.jsx(PageTopBar, {
-          color: "neutral",
-          previousPathLabel: props.previousPathLabel,
-          onClick: props.onPreviousPathClick
-        }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-          title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
-          subtitle: props.subtitle,
-          titleSize: "big"
-        }), jsxRuntime.jsx(ControlsContainter, {
-          tabControls: props.tabControls,
-          formControls: jsxRuntime.jsx(FormControlsContainer, {
-            children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
-              alignItems: "flex-end",
-              children: props.formControls
-            })
-          })
-        })]
-      })
-    }), jsxRuntime.jsx(ContentWrapper, {
-      children: props.children
-    })]
-  });
-};
-
-TabularDetailPage.propTypes = {};
-TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
-// them in the custom controls.
-
-TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
-TabularDetailPage.FormSecondaryButton = FormSecondaryButton;
-TabularDetailPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
-// use as part of a custom title row
-
-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;
-
 var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
   switch (size) {
     case 7:
@@ -518,23 +440,31 @@ var getModalContentStyles = function getModalContentStyles(props) {
   var baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
+var getOverlayStyles$1 = function getOverlayStyles(props) {
+  return /*#__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;" + ("" ), "" );
+};
 
-var _ref$6 = {
-  name: "181loe0",
-  styles: "display:flex;position:absolute;top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1"
-} ;
+function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var getModalOverlayStyles = function getModalOverlayStyles() {
-  return _ref$6;
-};
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var getOverlayElement$1 = function getOverlayElement(props, contentElement) {
+  return (// Assign the `data-role` to the overlay container, which is used as
+    // the CSS selector in the `<PortalsContainer>`.
+    jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
+      "data-role": "dialog-overlay",
+      children: contentElement
+    }))
+  );
+};
+
+var defaultProps$b = {
   size: 10,
-  zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
 };
 
@@ -568,17 +498,12 @@ var DialogContainer = function DialogContainer(props) {
         onRequestClose: props.onClose,
         shouldCloseOnOverlayClick: Boolean(props.onClose),
         shouldCloseOnEsc: Boolean(props.onClose),
-        overlayClassName: makeClassName(getModalOverlayStyles()),
+        overlayElement: getOverlayElement$1,
+        overlayClassName: makeClassName(getOverlayStyles$1(props)),
         className: makeClassName(getModalContentStyles(props)),
         contentLabel: props.title,
         parentSelector: props.getParentSelector,
         ariaHideApp: false,
-        style: {
-          // stylelint-disable-next-line selector-type-no-unknown
-          overlay: {
-            zIndex: props.zIndex
-          }
-        },
         children: [jsxRuntime.jsx(GridArea, {
           name: "top"
         }), jsxRuntime.jsx(GridArea, {
@@ -608,7 +533,7 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$b;
 
 var _ref$4 = {
   name: "o5s7gs",
@@ -665,10 +590,10 @@ var InfoDialog = function InfoDialog(props) {
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
-function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var defaultProps$6 = {
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var defaultProps$a = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -684,10 +609,10 @@ var DialogFooter = function DialogFooter(props) {
     scale: "m",
     alignItems: "center",
     justifyContent: "flex-end",
-    children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
+    children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
       label: getFormattedLabel(props.labelSecondary, intl),
       onClick: props.onCancel
-    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
+    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
       label: getFormattedLabel(props.labelPrimary, intl),
       onClick: props.onConfirm,
       isDisabled: props.isPrimaryButtonDisabled
@@ -697,9 +622,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$a;
 
-var defaultProps$5 = {
+var defaultProps$9 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -731,12 +656,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$9; // 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;
 
-var defaultProps$4 = {
+var defaultProps$8 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -768,17 +693,18 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$8; // 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;
 
 var TRANSITION_DURATION = 200;
-var getContainerStyles = function getContainerStyles(props) {
-  return /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:calc(100% - (48px * ", props.level, "));display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
+var getContainerStyles = function getContainerStyles(_props) {
+  return /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:100%;display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
 };
 var getOverlayStyles = function getOverlayStyles(props) {
-  return /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ? props.zIndex : props.baseZIndex + props.level, ";top:0;left:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:0;transition:opacity ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
+  return /*#__PURE__*/react.css("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;left:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:0;transition:opacity ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
 };
 
 var _ref4 = {
@@ -817,6 +743,17 @@ var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
   return _ref$3;
 };
 
+var messages$2 = reactIntl.defineMessages({
+  back: {
+    id: 'Components.ModalPage.TopBar.Back',
+    defaultMessage: 'Go Back'
+  },
+  close: {
+    id: 'Components.ModalPage.TopBar.Close',
+    defaultMessage: 'Close Modal Page'
+  }
+});
+
 var LargeIconWrapper = _styled__default["default"]("span", {
   target: "edipjip0"
 } )({
@@ -827,7 +764,7 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$7 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -876,18 +813,30 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$7;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
+};
+
+var getOverlayElement = function getOverlayElement(props, contentElement) {
+  return (// Assign the `data-role` to the overlay container, which is used as
+    // the CSS selector in the `<PortalsContainer>`.
+    jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
+      "data-role": "modal-overlay",
+      children: contentElement
+    }))
+  );
 }; // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
-  level: 1,
-  baseZIndex: 1000,
+var defaultProps$6 = {
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
 };
@@ -932,13 +881,14 @@ var ModalPage = function ModalPage(props) {
         onRequestClose: handleClose,
         shouldCloseOnOverlayClick: Boolean(props.onClose),
         shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement,
         overlayClassName: {
           base: makeClassName(getOverlayStyles(props)),
           afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
           beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
         },
         className: {
-          base: makeClassName(getContainerStyles(props)),
+          base: makeClassName(getContainerStyles()),
           afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
           beforeClose: makeClassName(getBeforeCloseContainerAnimation())
         },
@@ -966,7 +916,7 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$6;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -984,12 +934,10 @@ PageHeader.displayName = 'PageHeader';
 
 var InfoModalPage = function InfoModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
-    level: props.level,
     title: props.title,
     isOpen: props.isOpen,
     zIndex: props.zIndex,
     onClose: props.onClose,
-    baseZIndex: props.baseZIndex,
     currentPathLabel: props.topBarCurrentPathLabel || props.title,
     previousPathLabel: props.topBarPreviousPathLabel,
     shouldDelayOnClose: props.shouldDelayOnClose,
@@ -1009,12 +957,10 @@ InfoModalPage.displayName = 'InfoModalPage';
 
 var CustomFormModalPage = function CustomFormModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
-    level: props.level,
     title: props.title,
     isOpen: props.isOpen,
     zIndex: props.zIndex,
     onClose: props.onClose,
-    baseZIndex: props.baseZIndex,
     currentPathLabel: props.topBarCurrentPathLabel || props.title,
     previousPathLabel: props.topBarPreviousPathLabel,
     getParentSelector: props.getParentSelector,
@@ -1044,19 +990,17 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$5 = {
   hideControls: false
 };
 
 var FormModalPage = function FormModalPage(props) {
   return jsxRuntime.jsx(CustomFormModalPage, {
-    level: props.level,
     title: props.title,
     subtitle: props.subtitle,
     isOpen: props.isOpen,
     zIndex: props.zIndex,
     onClose: props.onClose,
-    baseZIndex: props.baseZIndex,
     topBarCurrentPathLabel: props.topBarCurrentPathLabel,
     topBarPreviousPathLabel: props.topBarPreviousPathLabel,
     getParentSelector: props.getParentSelector,
@@ -1082,23 +1026,21 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$5; // 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.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps = {
+var defaultProps$4 = {
   hideControls: false
 };
 
 var TabularModalPage = function TabularModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
-    level: props.level,
     title: props.title,
     isOpen: props.isOpen,
     zIndex: props.zIndex,
     onClose: props.onClose,
-    baseZIndex: props.baseZIndex,
     topBarColor: "neutral",
     currentPathLabel: props.topBarCurrentPathLabel || props.title,
     previousPathLabel: props.topBarPreviousPathLabel,
@@ -1130,7 +1072,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$4; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1140,6 +1082,187 @@ TabularModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience p
 
 TabularModalPage.Intl = i18n.sharedMessages;
 
+var defaultProps$3 = {
+  color: 'surface',
+  previousPathLabel: messages$2.back
+};
+
+var PageTopBar = function PageTopBar(props) {
+  var intl = reactIntl.useIntl();
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;background-color:", props.color === 'neutral' ? designSystem.customProperties.colorNeutral95 : designSystem.customProperties.colorSurface, ";" + ("" ), "" ),
+    children: jsxRuntime.jsx(FlatButton__default["default"], {
+      tone: "primary",
+      label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+      icon: jsxRuntime.jsx(icons.ListIcon, {
+        size: "medium",
+        color: "primary"
+      }),
+      onClick: props.onClick
+    })
+  });
+};
+
+PageTopBar.propTypes = {};
+PageTopBar.displayName = 'PageTopBar';
+PageTopBar.defaultProps = defaultProps$3;
+
+var DetailPageContainer = _styled__default["default"]("div", {
+  target: "etkdonc0"
+} )("background-color:", designSystem.customProperties.colorNeutral95, ";padding:", designSystem.customProperties.spacingM, ";border-bottom:1px ", designSystem.customProperties.colorNeutral, " solid;" + ("" )); // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+// However, we need to explicitly define this otherwise the prop-types babel plugin
+// does not recognize the object shape.
+
+
+var defaultProps$2 = {
+  hideControls: false
+};
+
+var CustomFormDetailPage = function CustomFormDetailPage(props) {
+  var _props$title;
+  return jsxRuntime.jsxs(PageWrapper, {
+    children: [jsxRuntime.jsx(DetailPageContainer, {
+      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+        children: [jsxRuntime.jsx(PageTopBar, {
+          color: "neutral",
+          previousPathLabel: props.previousPathLabel,
+          onClick: props.onPreviousPathClick
+        }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+          title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+          subtitle: props.subtitle,
+          titleSize: "big"
+        }), !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          justifyContent: "flex-end",
+          children: props.formControls
+        })]
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
+      children: props.children
+    })]
+  });
+};
+
+CustomFormDetailPage.propTypes = {};
+CustomFormDetailPage.displayName = 'CustomFormDetailPage';
+CustomFormDetailPage.defaultProps = defaultProps$2; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+CustomFormDetailPage.PageHeaderTitle = PageHeaderTitle; // Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+
+CustomFormDetailPage.FormPrimaryButton = FormPrimaryButton;
+CustomFormDetailPage.FormSecondaryButton = FormSecondaryButton;
+CustomFormDetailPage.FormDeleteButton = FormDeleteButton; // 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.
+
+CustomFormDetailPage.Intl = i18n.sharedMessages;
+
+var defaultProps$1 = {
+  hideControls: false
+};
+
+var FormDetailPage = function FormDetailPage(props) {
+  return jsxRuntime.jsx(CustomFormDetailPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    previousPathLabel: props.previousPathLabel,
+    onPreviousPathClick: props.onPreviousPathClick,
+    hideControls: props.hideControls,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton
+      }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    children: props.children
+  });
+};
+
+FormDetailPage.propTypes = {};
+FormDetailPage.displayName = 'FormDetailPage';
+FormDetailPage.defaultProps = defaultProps$1; // 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.
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+FormDetailPage.PageHeaderTitle = PageHeaderTitle; // 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.
+
+FormDetailPage.Intl = i18n.sharedMessages;
+
+var InfoDetailPage = function InfoDetailPage(props) {
+  return jsxRuntime.jsx(CustomFormDetailPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    previousPathLabel: props.previousPathLabel,
+    onPreviousPathClick: props.onPreviousPathClick,
+    children: props.children
+  });
+};
+
+InfoDetailPage.propTypes = {};
+InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
+
+var defaultProps = {
+  hideControls: false
+};
+
+var TabularDetailPage = function TabularDetailPage(props) {
+  var _props$title;
+  return jsxRuntime.jsxs(PageWrapper, {
+    children: [jsxRuntime.jsx(TabularPageContainer, {
+      color: "neutral",
+      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+        children: [jsxRuntime.jsx(PageTopBar, {
+          color: "neutral",
+          previousPathLabel: props.previousPathLabel,
+          onClick: props.onPreviousPathClick
+        }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+          title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+          subtitle: props.subtitle,
+          titleSize: "big"
+        }), jsxRuntime.jsx(ControlsContainter, {
+          tabControls: props.tabControls,
+          formControls: jsxRuntime.jsx(FormControlsContainer, {
+            children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+              alignItems: "flex-end",
+              children: props.formControls
+            })
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
+      children: props.children
+    })]
+  });
+};
+
+TabularDetailPage.propTypes = {};
+TabularDetailPage.displayName = 'TabularDetailPage';
+TabularDetailPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+
+TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
+TabularDetailPage.FormSecondaryButton = FormSecondaryButton;
+TabularDetailPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+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;
+
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -1195,16 +1318,19 @@ var PublicPageLayout = function PublicPageLayout(props) {
         })
       }), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
         scale: "s",
-        children: [jsxRuntime.jsx(PublicPageLayoutContent, _objectSpread$2({}, props)), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-          scale: "xs",
-          alignItems: props.contentScale === 'wide' ? 'center' : 'stretch',
-          children: [props.legalMessage && jsxRuntime.jsx(Text__default["default"].Body, {
-            tone: "inverted",
-            children: props.legalMessage
-          }), jsxRuntime.jsx(Text__default["default"].Body, {
-            tone: "inverted",
-            children: "".concat(year, " \xA9 commercetools")
-          })]
+        children: [jsxRuntime.jsx(PublicPageLayoutContent, _objectSpread$2({}, props)), jsxRuntime.jsx(PublicPageLayoutContent, {
+          contentScale: props.contentScale,
+          children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: "xs",
+            alignItems: props.contentScale === 'wide' ? 'center' : 'stretch',
+            children: [props.legalMessage && jsxRuntime.jsx(Text__default["default"].Body, {
+              tone: "inverted",
+              children: props.legalMessage
+            }), jsxRuntime.jsx(Text__default["default"].Body, {
+              tone: "inverted",
+              children: "".concat(year, " \xA9 commercetools")
+            })]
+          })
         })]
       })]
     })
@@ -1341,6 +1467,80 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
+var _mutationObserver;
+
+var getMutationObserver = function getMutationObserver(options) {
+  return !_mutationObserver ? _mutationObserver = createMutationObserver(options) : _mutationObserver;
+};
+
+function useMutationObserver(target, callback, options) {
+  var mutationObserver = getMutationObserver(options);
+  var storedCallback = useLatest__default["default"](callback);
+  react$1.useLayoutEffect(function () {
+    var didUnsubscribe = false;
+    var targetEl = target && 'current' in target ? target.current : target;
+    if (!targetEl) return function () {};
+
+    function cb(entry, observer) {
+      if (didUnsubscribe) return;
+      storedCallback.current(entry, observer);
+    }
+
+    mutationObserver.subscribe(targetEl, cb);
+    return function () {
+      didUnsubscribe = true;
+      mutationObserver.unsubscribe(targetEl, cb);
+    };
+  }, [target, mutationObserver, storedCallback]);
+  return mutationObserver.observer;
+}
+
+function createMutationObserver(options) {
+  var callbacks = new _Map__default["default"]();
+  var observer = new MutationObserver(rafSchd__default["default"](function (entries, obs) {
+    var _loop = function _loop(i) {
+      var cbs = callbacks.get(entries[i].target);
+      cbs === null || cbs === void 0 ? void 0 : _forEachInstanceProperty__default["default"](cbs).call(cbs, function (cb) {
+        return cb(entries[i], obs);
+      });
+    };
+
+    for (var i = 0; i < entries.length; i++) {
+      _loop(i);
+    }
+  }));
+  return {
+    observer: observer,
+    subscribe: function subscribe(target, callback) {
+      var _callbacks$get;
+
+      observer.observe(target, options);
+      var cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
+      cbs.push(callback);
+      callbacks.set(target, cbs);
+    },
+    unsubscribe: function unsubscribe(target, callback) {
+      var _callbacks$get2;
+
+      var cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
+
+      if (cbs.length === 1) {
+        observer.disconnect();
+        callbacks.delete(target);
+        return;
+      }
+
+      var cbIndex = _indexOfInstanceProperty__default["default"](cbs).call(cbs, callback);
+
+      if (cbIndex !== -1) _spliceInstanceProperty__default["default"](cbs).call(cbs, cbIndex, 1);
+      callbacks.set(target, cbs);
+    }
+  };
+}
+
+// The width of each indentation level.
+var indentationSize = '48px';
+
 var useObserverElementDimensions = function useObserverElementDimensions(element) {
   var _useState = react$1.useState({
     height: 0,
@@ -1366,7 +1566,7 @@ var _ref = {
 } ;
 
 var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
-  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _current, _current2;
+  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _props$baseModalZInde, _current, _current2, _context2;
 
   // Initialize props with default values.
   // NOTE: using `defaultProps` with `forwardRef` results in the type declarations
@@ -1377,14 +1577,64 @@ var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var offsetLeftOnExpandedMenu = (_props$offsetLeftOnEx = props.offsetLeftOnExpandedMenu) !== null && _props$offsetLeftOnEx !== void 0 ? _props$offsetLeftOnEx : '0px';
   var containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
   var zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
+  var baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
+  var portalsContainerRef = react$1.useRef(null);
   var globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
   var pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+
+  var _useState3 = react$1.useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      stackingLayers = _useState4[0],
+      setStackingLayers = _useState4[1]; // The mutation observer gets triggered every time a child node gets added or
+  // removed from the portals container.
+  // The stacking layers are then re-calculated.
+
+
+  useMutationObserver(portalsContainerRef, function (mutation) {
+    var _context;
+
+    var indentationLevel = 0;
+    var nextStackingLevels = [];
+
+    _forEachInstanceProperty__default["default"](_context = mutation.target.childNodes).call(_context, function (node, index) {
+      if (node instanceof HTMLElement) {
+        var stackingLevel = index + 1;
+        node.dataset.level = String(stackingLevel);
+        var overlayNode = node.firstChild;
+
+        if (overlayNode instanceof HTMLElement) {
+          if (overlayNode.dataset.role === 'modal-overlay') {
+            indentationLevel += 1;
+          }
+        }
+
+        nextStackingLevels.push({
+          stackingLevel: stackingLevel,
+          indentationLevel: indentationLevel
+        });
+      }
+    });
+
+    setStackingLayers(nextStackingLevels);
+  }, {
+    // Only subscribe to changes to the child nodes of the portals container.
+    childList: true
+  });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(react.Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
     , {
-      styles: /*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                100% - ", offsetTop, " -\n                  ", globalNotificationsElementDimensions.height, "px -\n                  ", pageNotificationsElementDimensions.height, "px\n              );width:calc(100% - ", offsetLeft, ");top:calc(\n                ", offsetTop, " + ", globalNotificationsElementDimensions.height, "px +\n                  ", pageNotificationsElementDimensions.height, "px\n              );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + ("" ), "" )
+      styles: _concatInstanceProperty__default["default"](_context2 = [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + ("" ), "" )]).call(_context2, _toConsumableArray(_mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
+      /**
+       * Every "overlay" container gets assigned a sequential `z-index` level.
+       * Furthermore, the "modal overlay" containers (not "dialog") get assigned
+       * the correct indentation level width.
+       */
+      function (stackingLayer) {
+        return /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (", indentationSize, " * ", stackingLayer.indentationLevel, ")\n                  );}" + ("" ), "" );
+      })), ["" ])
     }), jsxRuntime.jsx("div", {
-      id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      id: constants.PORTALS_CONTAINER_ID,
+      ref: portalsContainerRef // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
       ,
       css: _ref
     })]
@@ -1414,9 +1664,12 @@ var useModalState = function useModalState() {
 };
 
 exports.ConfirmationDialog = ConfirmationDialog;
+exports.CustomFormDetailPage = CustomFormDetailPage;
 exports.CustomFormModalPage = CustomFormModalPage;
+exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;
 exports.FormModalPage = FormModalPage;
+exports.InfoDetailPage = InfoDetailPage;
 exports.InfoDialog = InfoDialog;
 exports.InfoModalPage = InfoModalPage;
 exports.MaintenancePageLayout = MaintenancePageLayout;