@commercetools-frontend/application-components 21.12.0 → 21.14.0

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

@@ -20,23 +20,23 @@ var Text = require('@commercetools-uikit/text');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var Spacings = require('@commercetools-uikit/spacings');
-var i18n = require('@commercetools-frontend/i18n');
-var _styled = require('@emotion/styled/base');
 var react$1 = require('react');
-var PrimaryButton = require('@commercetools-uikit/primary-button');
-var SecondaryButton = require('@commercetools-uikit/secondary-button');
-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 _styled = require('@emotion/styled/base');
 var Modal = require('react-modal');
 var constants = require('@commercetools-frontend/constants');
 var Card = require('@commercetools-uikit/card');
+var icons = require('@commercetools-uikit/icons');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var Spacings = require('@commercetools-uikit/spacings');
+var i18n = require('@commercetools-frontend/i18n');
+var SecondaryButton = require('@commercetools-uikit/secondary-button');
+var PrimaryButton = require('@commercetools-uikit/primary-button');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var omitBy = require('lodash/omitBy');
 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 IconButton = require('@commercetools-uikit/icon-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');
@@ -63,18 +63,18 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var startCase__default = /*#__PURE__*/_interopDefault(startCase);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
-var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
-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 Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
+var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLogoSvg);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
@@ -89,7 +89,7 @@ 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.12.0";
+var version = "21.14.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, ";}" + ("" ), "" );
@@ -161,252 +161,11 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$f = {
+var defaultProps$h = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$f;
-
-var defaultProps$e = {
-  titleSize: 'small',
-  truncate: false
-};
-
-var SubtitleWrapper = _styled__default["default"]("div", {
-  target: "epaiodd0"
-} )("margin-top:", designSystem.customProperties.spacingM, ";" + ("" ));
-
-var renderTitle = function renderTitle(props) {
-  switch (props.titleSize) {
-    case 'big':
-      return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: "h2",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-
-    default:
-      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-  }
-};
-
-var renderSubtitle = function renderSubtitle(subtitle) {
-  var truncate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-  if (!subtitle) {
-    return null;
-  }
-
-  if ( /*#__PURE__*/react$1.isValidElement(subtitle)) {
-    return jsxRuntime.jsx(SubtitleWrapper, {
-      children: subtitle
-    });
-  }
-
-  return jsxRuntime.jsx(SubtitleWrapper, {
-    children: jsxRuntime.jsx(Text__default["default"].Body, {
-      title: subtitle,
-      truncate: truncate,
-      children: subtitle
-    })
-  });
-};
-
-var _ref$7 = {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} ;
-
-var PageHeaderTitle = function PageHeaderTitle(props) {
-  var titleSize = props.titleSize,
-      title = props.title,
-      truncate = props.truncate;
-  var renderedTitle = renderTitle({
-    titleSize: titleSize,
-    title: title,
-    truncate: truncate
-  });
-  var renderedSubtitle = renderSubtitle(props.subtitle, truncate);
-  return jsxRuntime.jsxs("div", {
-    css: _ref$7,
-    children: [renderedTitle, renderedSubtitle]
-  });
-};
-
-PageHeaderTitle.propTypes = {};
-PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$e;
-
-var TabControls = _styled__default["default"]("div", {
-  target: "elpldre1"
-} )("margin-top:", designSystem.customProperties.spacingS, ";" + ("" ));
-
-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$6,
-    children: [jsxRuntime.jsx(TabControls, {
-      role: "tablist",
-      children: props.tabControls
-    }), props.formControls]
-  });
-};
-
-ControlsContainter.propTypes = {};
-ControlsContainter.displayName = 'ControlsContainter';
-
-var TabularPageContainer = function TabularPageContainer(props) {
-  return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react.css("background-color:", props.color === 'surface' ? designSystem.customProperties.colorSurface : designSystem.customProperties.colorNeutral95, ";padding:", designSystem.customProperties.spacingM, " ", designSystem.customProperties.spacingM, " 0;border-bottom:1px ", designSystem.customProperties.colorNeutral, " solid;" + ("" ), "" ),
-    children: props.children
-  });
-};
-
-TabularPageContainer.propTypes = {};
-TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$d = {
-  color: 'surface'
-};
-TabularPageContainer.defaultProps = defaultProps$d;
-
-var FormControlsContainer = _styled__default["default"]("div", {
-  target: "elpldre0"
-} )("margin-bottom:", designSystem.customProperties.spacingM, ";" + ("" ));
-
-var ContentWrapper = _styled__default["default"]("div", {
-  target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;padding:", designSystem.customProperties.spacingM, ";overflow:auto;" + ("" ));
-var PageWrapper = _styled__default["default"]("div", {
-  target: "e1b7jwn00"
-} )({
-  name: "kdbhus",
-  styles: "height:100%;display:flex;flex-direction:column"
-} );
-
-function filterDataAttributes(obj) {
-  return omitBy__default["default"](obj, function (_value, key) {
-    return !_startsWithInstanceProperty__default["default"](key).call(key, 'data-');
-  });
-}
-
-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$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,
-  dataAttributes: {}
-};
-
-var useFormattedLabel = function useFormattedLabel(label) {
-  var intl = reactIntl.useIntl();
-  return typeof label === 'string' ? label : intl.formatMessage(label);
-};
-
-var FormPrimaryButton = function FormPrimaryButton(props) {
-  var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
-};
-
-FormPrimaryButton.propTypes = {};
-FormPrimaryButton.displayName = 'FormPrimaryButton';
-FormPrimaryButton.defaultProps = primaryDefaultProps;
-var secondaryDefaultProps = {
-  label: i18n.sharedMessages.cancel,
-  isDisabled: false,
-  dataAttributes: {}
-};
-
-var FormSecondaryButton = function FormSecondaryButton(props) {
-  var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$6({
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
-};
-
-FormSecondaryButton.propTypes = {};
-FormSecondaryButton.displayName = 'FormSecondaryButton';
-FormSecondaryButton.defaultProps = secondaryDefaultProps;
-var deleteDefaultProps = {
-  label: i18n.sharedMessages.delete,
-  isDisabled: false,
-  dataAttributes: {}
-};
-
-var FormDeleteButton = function FormDeleteButton(props) {
-  var label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$6({
-    icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
-};
-
-FormDeleteButton.propTypes = {};
-FormDeleteButton.displayName = 'FormDeleteButton';
-FormDeleteButton.defaultProps = deleteDefaultProps;
-
-var defaultProps$c = {
-  hideControls: false
-};
-
-var TabularMainPage = function TabularMainPage(props) {
-  var _props$title;
-  return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(TabularPageContainer, {
-      color: "surface",
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        children: [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, {
-      css: /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";" + ("" ), "" ),
-      children: props.children
-    })]
-  });
-};
-
-TabularMainPage.propTypes = {};
-TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$c; // Static export of pre-configured form control buttons to easily re-use
-// them in the custom controls.
-
-TabularMainPage.FormPrimaryButton = FormPrimaryButton;
-TabularMainPage.FormSecondaryButton = FormSecondaryButton;
-TabularMainPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
-// use as part of a custom title row
-
-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;
+TabHeader.defaultProps = defaultProps$h;
 
 var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
   switch (size) {
@@ -445,9 +204,9 @@ var getOverlayStyles$1 = function getOverlayStyles(props) {
   "".concat(props.zIndex, " !important") : 'auto', ";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; }
+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$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$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 getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -456,14 +215,14 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
 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), {}, {
+    jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
       "data-role": "dialog-overlay",
       children: contentElement
     }))
   );
 };
 
-var defaultProps$b = {
+var defaultProps$g = {
   size: 10,
   getParentSelector: getDefaultParentSelector$1
 };
@@ -484,7 +243,7 @@ var sizeStyles = function sizeStyles(props) {
   return /*#__PURE__*/react.css("" , "" );
 };
 
-var _ref$5 = {
+var _ref$7 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
@@ -514,7 +273,7 @@ var DialogContainer = function DialogContainer(props) {
           name: "bottom"
         }), jsxRuntime.jsx(GridArea, {
           name: "main",
-          css: _ref$5,
+          css: _ref$7,
           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 scale size, we want the card to stretch to 100% height
           // 3. 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.
@@ -533,16 +292,16 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$b;
+DialogContainer.defaultProps = defaultProps$g;
 
-var _ref$4 = {
+var _ref$6 = {
   name: "o5s7gs",
   styles: "flex:0 1 auto;display:flex;flex-direction:column"
 } ;
 
 var DialogHeader = function DialogHeader(props) {
   return jsxRuntime.jsx("div", {
-    css: _ref$4,
+    css: _ref$6,
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
       alignItems: "center",
@@ -590,10 +349,16 @@ var InfoDialog = function InfoDialog(props) {
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
-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 filterDataAttributes(obj) {
+  return omitBy__default["default"](obj, function (_value, key) {
+    return !_startsWithInstanceProperty__default["default"](key).call(key, 'data-');
+  });
+}
 
-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 = {
+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 _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 defaultProps$f = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -609,10 +374,11 @@ var DialogFooter = function DialogFooter(props) {
     scale: "m",
     alignItems: "center",
     justifyContent: "flex-end",
-    children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+    children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
       label: getFormattedLabel(props.labelSecondary, intl),
-      onClick: props.onCancel
-    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+      onClick: props.onCancel,
+      iconLeft: props.iconLeftSecondaryButton
+    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
       label: getFormattedLabel(props.labelPrimary, intl),
       onClick: props.onConfirm,
       isDisabled: props.isPrimaryButtonDisabled
@@ -622,9 +388,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$a;
+DialogFooter.defaultProps = defaultProps$f;
 
-var defaultProps$9 = {
+var defaultProps$e = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -656,12 +422,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$9; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$e; // 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$8 = {
+var defaultProps$d = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -686,14 +452,15 @@ var FormDialog = function FormDialog(props) {
       onCancel: props.onSecondaryButtonClick,
       onConfirm: props.onPrimaryButtonClick,
       dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
-      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
+      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
+      iconLeftSecondaryButton: props.iconLeftSecondaryButton
     })]
   });
 };
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$8; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$d; // 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;
@@ -734,13 +501,13 @@ var getBeforeCloseContainerAnimation = function getBeforeCloseContainerAnimation
   return _ref2$1;
 };
 
-var _ref$3 = {
+var _ref$5 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
 
 var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
-  return _ref$3;
+  return _ref$5;
 };
 
 var messages$2 = reactIntl.defineMessages({
@@ -764,12 +531,12 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$7 = {
+var defaultProps$c = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
 
-var _ref$2 = {
+var _ref$4 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -779,7 +546,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingM, ";background-color:", props.color === 'neutral' ? designSystem.customProperties.colorNeutral95 : designSystem.customProperties.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.customProperties.colorSurface : designSystem.customProperties.colorNeutral, ";& *+*{margin-left:", designSystem.customProperties.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$2,
+      css: _ref$4,
       children: [jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -813,11 +580,11 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$7;
+ModalPageTopBar.defaultProps = defaultProps$c;
 
-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; }
+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 getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -826,7 +593,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 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), {}, {
+    jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
       "data-role": "modal-overlay",
       children: contentElement
     }))
@@ -836,7 +603,7 @@ var getOverlayElement = function getOverlayElement(props, contentElement) {
 // does not recognize the object shape.
 
 
-var defaultProps$6 = {
+var defaultProps$b = {
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
 };
@@ -914,9 +681,85 @@ var ModalPage = function ModalPage(props) {
   });
 };
 
-ModalPage.propTypes = {};
-ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$6;
+ModalPage.propTypes = {};
+ModalPage.displayName = 'ModalPage';
+ModalPage.defaultProps = defaultProps$b;
+
+var defaultProps$a = {
+  titleSize: 'small',
+  truncate: false
+};
+
+var SubtitleWrapper = _styled__default["default"]("div", {
+  target: "epaiodd0"
+} )("margin-top:", designSystem.customProperties.spacingM, ";" + ("" ));
+
+var renderTitle = function renderTitle(props) {
+  switch (props.titleSize) {
+    case 'big':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h2",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+
+    default:
+      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+        as: "h4",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+  }
+};
+
+var renderSubtitle = function renderSubtitle(subtitle) {
+  var truncate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (!subtitle) {
+    return null;
+  }
+
+  if ( /*#__PURE__*/react$1.isValidElement(subtitle)) {
+    return jsxRuntime.jsx(SubtitleWrapper, {
+      children: subtitle
+    });
+  }
+
+  return jsxRuntime.jsx(SubtitleWrapper, {
+    children: jsxRuntime.jsx(Text__default["default"].Body, {
+      title: subtitle,
+      truncate: truncate,
+      children: subtitle
+    })
+  });
+};
+
+var _ref$3 = {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} ;
+
+var PageHeaderTitle = function PageHeaderTitle(props) {
+  var titleSize = props.titleSize,
+      title = props.title,
+      truncate = props.truncate;
+  var renderedTitle = renderTitle({
+    titleSize: titleSize,
+    title: title,
+    truncate: truncate
+  });
+  var renderedSubtitle = renderSubtitle(props.subtitle, truncate);
+  return jsxRuntime.jsxs("div", {
+    css: _ref$3,
+    children: [renderedTitle, renderedSubtitle]
+  });
+};
+
+PageHeaderTitle.propTypes = {};
+PageHeaderTitle.displayName = 'PageHeaderTitle';
+PageHeaderTitle.defaultProps = defaultProps$a;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -932,6 +775,16 @@ var PageHeader = function PageHeader(props) {
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
+var ContentWrapper = _styled__default["default"]("div", {
+  target: "e1b7jwn01"
+} )("flex:1;flex-basis:0;padding:", designSystem.customProperties.spacingM, ";overflow:auto;" + ("" ));
+var PageWrapper = _styled__default["default"]("div", {
+  target: "e1b7jwn00"
+} )({
+  name: "kdbhus",
+  styles: "height:100%;display:flex;flex-direction:column"
+} );
+
 var InfoModalPage = function InfoModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
@@ -955,6 +808,71 @@ var InfoModalPage = function InfoModalPage(props) {
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
+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 primaryDefaultProps = {
+  label: i18n.sharedMessages.confirm,
+  isDisabled: false,
+  dataAttributes: {}
+};
+
+var useFormattedLabel = function useFormattedLabel(label) {
+  var intl = reactIntl.useIntl();
+  return typeof label === 'string' ? label : intl.formatMessage(label);
+};
+
+var FormPrimaryButton = function FormPrimaryButton(props) {
+  var label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, filterDataAttributes(props.dataAttributes)));
+};
+
+FormPrimaryButton.propTypes = {};
+FormPrimaryButton.displayName = 'FormPrimaryButton';
+FormPrimaryButton.defaultProps = primaryDefaultProps;
+var secondaryDefaultProps = {
+  label: i18n.sharedMessages.cancel,
+  isDisabled: false,
+  dataAttributes: {}
+};
+
+var FormSecondaryButton = function FormSecondaryButton(props) {
+  var label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(props.dataAttributes)));
+};
+
+FormSecondaryButton.propTypes = {};
+FormSecondaryButton.displayName = 'FormSecondaryButton';
+FormSecondaryButton.defaultProps = secondaryDefaultProps;
+var deleteDefaultProps = {
+  label: i18n.sharedMessages.delete,
+  isDisabled: false,
+  dataAttributes: {}
+};
+
+var FormDeleteButton = function FormDeleteButton(props) {
+  var label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
+    icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, filterDataAttributes(props.dataAttributes)));
+};
+
+FormDeleteButton.propTypes = {};
+FormDeleteButton.displayName = 'FormDeleteButton';
+FormDeleteButton.defaultProps = deleteDefaultProps;
+
 var CustomFormModalPage = function CustomFormModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
@@ -990,7 +908,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$5 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -1012,7 +930,8 @@ var FormModalPage = function FormModalPage(props) {
         label: props.labelSecondaryButton,
         onClick: props.onSecondaryButtonClick,
         isDisabled: props.isSecondaryButtonDisabled,
-        dataAttributes: props.dataAttributesSecondaryButton
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
       }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
         label: props.labelPrimaryButton,
         onClick: props.onPrimaryButtonClick,
@@ -1026,12 +945,52 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.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.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var TabControls = _styled__default["default"]("div", {
+  target: "elpldre1"
+} )("margin-top:", designSystem.customProperties.spacingS, ";" + ("" ));
+
+var _ref$2 = {
+  name: "1nrstx4",
+  styles: "display:flex;align-items:flex-end;justify-content:space-between"
+} ;
+
+var ControlsContainter = function ControlsContainter(props) {
+  return jsxRuntime.jsxs("div", {
+    css: _ref$2,
+    children: [jsxRuntime.jsx(TabControls, {
+      role: "tablist",
+      children: props.tabControls
+    }), props.formControls]
+  });
+};
+
+ControlsContainter.propTypes = {};
+ControlsContainter.displayName = 'ControlsContainter';
+
+var TabularPageContainer = function TabularPageContainer(props) {
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("background-color:", props.color === 'surface' ? designSystem.customProperties.colorSurface : designSystem.customProperties.colorNeutral95, ";padding:", designSystem.customProperties.spacingM, " ", designSystem.customProperties.spacingM, " 0;border-bottom:1px ", designSystem.customProperties.colorNeutral, " solid;" + ("" ), "" ),
+    children: props.children
+  });
+};
+
+TabularPageContainer.propTypes = {};
+TabularPageContainer.displayName = 'TabularPageContainer';
+var defaultProps$8 = {
+  color: 'surface'
+};
+TabularPageContainer.defaultProps = defaultProps$8;
+
+var FormControlsContainer = _styled__default["default"]("div", {
+  target: "elpldre0"
+} )("margin-bottom:", designSystem.customProperties.spacingM, ";" + ("" ));
+
+var defaultProps$7 = {
   hideControls: false
 };
 
@@ -1072,7 +1031,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$4; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$7; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1082,7 +1041,7 @@ TabularModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience p
 
 TabularModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$3 = {
+var defaultProps$6 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1105,7 +1064,7 @@ var PageTopBar = function PageTopBar(props) {
 
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$3;
+PageTopBar.defaultProps = defaultProps$6;
 
 var DetailPageContainer = _styled__default["default"]("div", {
   target: "etkdonc0"
@@ -1114,7 +1073,7 @@ var DetailPageContainer = _styled__default["default"]("div", {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$5 = {
   hideControls: false
 };
 
@@ -1144,7 +1103,7 @@ var CustomFormDetailPage = function CustomFormDetailPage(props) {
 
 CustomFormDetailPage.propTypes = {};
 CustomFormDetailPage.displayName = 'CustomFormDetailPage';
-CustomFormDetailPage.defaultProps = defaultProps$2; // Static export of pre-configured page header title component to easily
+CustomFormDetailPage.defaultProps = defaultProps$5; // 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
@@ -1157,7 +1116,7 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton; // This is a convenien
 
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$4 = {
   hideControls: false
 };
 
@@ -1174,7 +1133,8 @@ var FormDetailPage = function FormDetailPage(props) {
         label: props.labelSecondaryButton,
         onClick: props.onSecondaryButtonClick,
         isDisabled: props.isSecondaryButtonDisabled,
-        dataAttributes: props.dataAttributesSecondaryButton
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
       }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
         label: props.labelPrimaryButton,
         onClick: props.onPrimaryButtonClick,
@@ -1188,7 +1148,7 @@ var FormDetailPage = function FormDetailPage(props) {
 
 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.
+FormDetailPage.defaultProps = defaultProps$4; // 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
@@ -1215,7 +1175,7 @@ InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configure
 
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-var defaultProps = {
+var defaultProps$3 = {
   hideControls: false
 };
 
@@ -1251,7 +1211,7 @@ var TabularDetailPage = function TabularDetailPage(props) {
 
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$3; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -1343,6 +1303,157 @@ PublicPageLayout.defaultProps = {
   contentScale: 'normal'
 };
 
+var MainPageContainer = _styled__default["default"]("div", {
+  target: "ev8m2jf2"
+} )("padding:", designSystem.customProperties.spacingL, ";" + ("" ));
+var Divider = _styled__default["default"]("hr", {
+  target: "ev8m2jf1"
+} )("background-color:", designSystem.customProperties.colorNeutral60, ";height:1px;border:0;" + ("" ));
+var MainPageContent = _styled__default["default"]("div", {
+  target: "ev8m2jf0"
+} )({
+  name: "1qmr6ab",
+  styles: "overflow:auto"
+} );
+
+var defaultProps$2 = {
+  hideControls: false
+};
+
+var CustomFormMainPage = function CustomFormMainPage(props) {
+  var _props$title;
+  return jsxRuntime.jsx(PageWrapper, {
+    children: jsxRuntime.jsx(MainPageContainer, {
+      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+        scale: "l",
+        children: [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(Divider, {}), jsxRuntime.jsx(MainPageContent, {
+          children: props.children
+        })]
+      })
+    })
+  });
+};
+
+CustomFormMainPage.propTypes = {};
+CustomFormMainPage.displayName = 'CustomFormMainPage';
+CustomFormMainPage.defaultProps = defaultProps$2; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+CustomFormMainPage.PageHeaderTitle = PageHeaderTitle; // Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+
+CustomFormMainPage.FormPrimaryButton = FormPrimaryButton;
+CustomFormMainPage.FormSecondaryButton = FormSecondaryButton;
+CustomFormMainPage.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.
+
+CustomFormMainPage.Intl = i18n.sharedMessages;
+
+var defaultProps$1 = {
+  hideControls: false
+};
+
+var FormMainPage = function FormMainPage(props) {
+  return jsxRuntime.jsx(CustomFormMainPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    hideControls: props.hideControls,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormMainPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormMainPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    children: props.children
+  });
+};
+
+FormMainPage.propTypes = {};
+FormMainPage.displayName = 'FormMainPage';
+FormMainPage.defaultProps = defaultProps$1; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+FormMainPage.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.
+
+FormMainPage.Intl = i18n.sharedMessages;
+
+var InfoMainPage = function InfoMainPage(props) {
+  return jsxRuntime.jsx(CustomFormMainPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    children: props.children
+  });
+};
+
+InfoMainPage.propTypes = {};
+InfoMainPage.displayName = 'InfoMainPage'; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+InfoMainPage.PageHeaderTitle = PageHeaderTitle;
+
+var defaultProps = {
+  hideControls: false
+};
+
+var TabularMainPage = function TabularMainPage(props) {
+  var _props$title;
+  return jsxRuntime.jsxs(PageWrapper, {
+    children: [jsxRuntime.jsx(TabularPageContainer, {
+      color: "surface",
+      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+        children: [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, {
+      css: /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";" + ("" ), "" ),
+      children: props.children
+    })]
+  });
+};
+
+TabularMainPage.propTypes = {};
+TabularMainPage.displayName = 'TabularMainPage';
+TabularMainPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+
+TabularMainPage.FormPrimaryButton = FormPrimaryButton;
+TabularMainPage.FormSecondaryButton = FormSecondaryButton;
+TabularMainPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+
+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$1 = {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
@@ -1665,12 +1776,15 @@ var useModalState = function useModalState() {
 
 exports.ConfirmationDialog = ConfirmationDialog;
 exports.CustomFormDetailPage = CustomFormDetailPage;
+exports.CustomFormMainPage = CustomFormMainPage;
 exports.CustomFormModalPage = CustomFormModalPage;
 exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;
+exports.FormMainPage = FormMainPage;
 exports.FormModalPage = FormModalPage;
 exports.InfoDetailPage = InfoDetailPage;
 exports.InfoDialog = InfoDialog;
+exports.InfoMainPage = InfoMainPage;
 exports.InfoModalPage = InfoModalPage;
 exports.MaintenancePageLayout = MaintenancePageLayout;
 exports.PageNotFound = PageNotFound;