@commercetools-frontend/application-components 21.2.0 → 21.3.2

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

@@ -2,20 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('prop-types');
-var react$1 = require('react');
-var _styled = require('@emotion/styled/base');
-var Modal = require('react-modal');
-var react = require('@emotion/react');
-var constants = require('@commercetools-frontend/constants');
-var designSystem = require('@commercetools-uikit/design-system');
-var Card = require('@commercetools-uikit/card');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var icons = require('@commercetools-uikit/icons');
-var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
-var Text = require('@commercetools-uikit/text');
-var Spacings = require('@commercetools-uikit/spacings');
-var i18n = require('@commercetools-frontend/i18n');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -25,15 +11,32 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+var reactRouterDom = require('react-router-dom');
+var startCase = require('lodash/startCase');
 var reactIntl = require('react-intl');
-var SecondaryButton = require('@commercetools-uikit/secondary-button');
+require('@commercetools-uikit/utils');
+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 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 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');
@@ -41,12 +44,6 @@ var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/fold
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var Modal__default = /*#__PURE__*/_interopDefault(Modal);
-var Card__default = /*#__PURE__*/_interopDefault(Card);
-var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
-var Text__default = /*#__PURE__*/_interopDefault(Text);
-var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -55,20 +52,437 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
+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 _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
-var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+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 CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLogoSvg);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.2.0";
+var version = "21.3.2";
+
+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 = {
+  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;}}" + ("" ), "" )];
+};
+
+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 pathWithoutSearch = function pathWithoutSearch(path) {
+  return typeof path === 'string' ? path.split('?')[0] : path.pathname;
+};
+
+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,
+    'aria-disabled': true
+  } : {};
+};
+
+var TabHeader = function TabHeader(props) {
+  var intl = reactIntl.useIntl();
+  var location = reactRouterDom.useLocation();
+  var isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
+    // strip the search, otherwise the path won't match
+    path: pathWithoutSearch(props.to),
+    exact: props.exactPathMatch,
+    strict: false
+  }));
+  var isDisabled = props.isDisabled;
+  var label = props.label;
+
+  if (props.intlMessage) {
+    label = intl.formatMessage(props.intlMessage);
+  }
+
+  var dataAttributeProps = _objectSpread$5({
+    '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({
+    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
+      })
+    }))
+  }));
+};
+TabHeader.propTypes = {};
+TabHeader.displayName = 'TabHeader';
+var defaultProps$d = {
+  isDisabled: false,
+  exactPathMatch: false
+};
+TabHeader.defaultProps = defaultProps$d;
+
+var defaultProps$c = {
+  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$8 = {
+  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$8,
+    children: [renderedTitle, renderedSubtitle]
+  });
+};
+
+PageHeaderTitle.propTypes = {};
+PageHeaderTitle.displayName = 'PageHeaderTitle';
+PageHeaderTitle.defaultProps = defaultProps$c;
+
+var TabControls = _styled__default["default"]("div", {
+  target: "elpldre1"
+} )("margin-top:", designSystem.customProperties.spacingS, ";" + ("" ));
+
+var _ref$7 = {
+  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,
+    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$b = {
+  color: 'surface'
+};
+TabularPageContainer.defaultProps = defaultProps$b;
+
+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$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$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 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$4({
+    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$4({
+    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$4({
+    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$a = {
+  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$a; // 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 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) {
@@ -103,20 +517,20 @@ var getModalContentStyles = function getModalContentStyles(props) {
   return baseStyles;
 };
 
-var _ref$8 = {
+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"
 } ;
 
 var getModalOverlayStyles = function getModalOverlayStyles() {
-  return _ref$8;
+  return _ref$6;
 };
 
 var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -128,17 +542,17 @@ var GridArea = _styled__default["default"]("div", {
   return props.name;
 }, ";" + ("" ));
 
-var _ref2$3 = {
+var _ref2$2 = {
   name: "13udsys",
   styles: "height:100%"
 } ;
 
 var sizeStyles = function sizeStyles(props) {
-  if (props.size === 'scale') return _ref2$3;
+  if (props.size === 'scale') return _ref2$2;
   return /*#__PURE__*/react.css("" , "" );
 };
 
-var _ref$7 = {
+var _ref$5 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
@@ -173,7 +587,7 @@ var DialogContainer = function DialogContainer(props) {
           name: "bottom"
         }), jsxRuntime.jsx(GridArea, {
           name: "main",
-          css: _ref$7,
+          css: _ref$5,
           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.
@@ -192,16 +606,16 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$8;
+DialogContainer.defaultProps = defaultProps$7;
 
-var _ref$6 = {
+var _ref$4 = {
   name: "o5s7gs",
   styles: "flex:0 1 auto;display:flex;flex-direction:column"
 } ;
 
 var DialogHeader = function DialogHeader(props) {
   return jsxRuntime.jsx("div", {
-    css: _ref$6,
+    css: _ref$4,
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
       alignItems: "center",
@@ -249,16 +663,10 @@ var InfoDialog = function InfoDialog(props) {
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
-function filterDataAttributes(obj) {
-  return omitBy__default["default"](obj, function (_value, key) {
-    return !_startsWithInstanceProperty__default["default"](key).call(key, 'data-');
-  });
-}
-
-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$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$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$7 = {
+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 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -274,10 +682,10 @@ 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$3({
       label: getFormattedLabel(props.labelSecondary, intl),
       onClick: props.onCancel
-    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
       label: getFormattedLabel(props.labelPrimary, intl),
       onClick: props.onConfirm,
       isDisabled: props.isPrimaryButtonDisabled
@@ -287,9 +695,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$7;
+DialogFooter.defaultProps = defaultProps$6;
 
-var defaultProps$6 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -321,12 +729,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.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.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$5 = {
+var defaultProps$4 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -358,7 +766,7 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.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.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -380,46 +788,32 @@ var getAfterOpenContainerAnimation = function getAfterOpenContainerAnimation() {
   return _ref4;
 };
 
-var _ref3$1 = {
+var _ref3 = {
   name: "1d9ftqx",
   styles: "opacity:1!important"
 } ;
 
 var getAfterOpenOverlayAnimation = function getAfterOpenOverlayAnimation() {
-  return _ref3$1;
+  return _ref3;
 };
 
-var _ref2$2 = {
+var _ref2$1 = {
   name: "110wxen",
   styles: "transform:translate3d(30px, 0, 0)!important"
 } ;
 
 var getBeforeCloseContainerAnimation = function getBeforeCloseContainerAnimation() {
-  return _ref2$2;
+  return _ref2$1;
 };
 
-var _ref$5 = {
+var _ref$3 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
 
 var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
-  return _ref$5;
+  return _ref$3;
 };
-var ContentWrapper = _styled__default["default"]("div", {
-  target: "e1jbmsa0"
-} )("flex:1;padding:", designSystem.customProperties.spacingM, ";overflow:auto;" + ("" ));
-
-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"
@@ -431,12 +825,12 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$4 = {
+var defaultProps$3 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
 
-var _ref$4 = {
+var _ref$2 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -446,7 +840,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$4,
+      css: _ref$2,
       children: [jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -480,7 +874,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$4;
+ModalPageTopBar.defaultProps = defaultProps$3;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -489,7 +883,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$2 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -570,89 +964,21 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$3;
-
-var defaultProps$2 = {
-  titleSize: 'small'
-};
-
-var SubtitleWrapper = _styled__default["default"]("div", {
-  target: "e1vqgk5c0"
-} )("margin-top:", designSystem.customProperties.spacingM, ";" + ("" )); // eslint-disable-next-line react/display-name
-
-
-var renderTitle = function renderTitle(size, title) {
-  switch (size) {
-    case 'big':
-      return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: "h2",
-        title: title,
-        truncate: true,
-        children: title
-      });
-
-    default:
-      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        title: title,
-        truncate: true,
-        children: title
-      });
-  }
-};
-
-var renderSubtitle = function renderSubtitle(subtitle) {
-  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: true,
-      children: subtitle
-    })
-  });
-};
-
-var _ref$3 = {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} ;
+ModalPage.defaultProps = defaultProps$2;
 
-var ModalPageHeaderTitle = function ModalPageHeaderTitle(props) {
-  // eslint-disable-next-line testing-library/render-result-naming-convention
-  var renderedTitle = renderTitle(props.titleSize, props.title); // eslint-disable-next-line testing-library/render-result-naming-convention
-
-  var renderedSubtitle = renderSubtitle(props.subtitle);
-  return jsxRuntime.jsxs("div", {
-    css: _ref$3,
-    children: [renderedTitle, renderedSubtitle]
-  });
-};
-
-ModalPageHeaderTitle.propTypes = {};
-ModalPageHeaderTitle.displayName = 'ModalPageHeaderTitle';
-ModalPageHeaderTitle.defaultProps = defaultProps$2;
-
-var ModalPageHeader = function ModalPageHeader(props) {
+var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:0 ", designSystem.customProperties.spacingM, ";padding:", designSystem.customProperties.spacingM, " 0;border-bottom:1px solid ", designSystem.customProperties.colorNeutral60, ";&>*+*{margin-left:", designSystem.customProperties.spacingM, ";}" + ("" ), "" ),
-    children: [jsxRuntime.jsx(ModalPageHeaderTitle, {
+    children: [jsxRuntime.jsx(PageHeaderTitle, {
       title: props.title,
-      subtitle: props.subtitle
+      subtitle: props.subtitle,
+      truncate: true
     }), props.children]
   });
 };
 
-ModalPageHeader.propTypes = {};
-ModalPageHeader.displayName = 'ModalPageHeader';
+PageHeader.propTypes = {};
+PageHeader.displayName = 'PageHeader';
 
 var InfoModalPage = function InfoModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
@@ -667,7 +993,7 @@ var InfoModalPage = function InfoModalPage(props) {
     shouldDelayOnClose: props.shouldDelayOnClose,
     getParentSelector: props.getParentSelector,
     afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx(ModalPageHeader, {
+    children: [jsxRuntime.jsx(PageHeader, {
       title: props.title,
       subtitle: props.subtitle
     }), jsxRuntime.jsx(ContentWrapper, {
@@ -679,70 +1005,6 @@ 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
-  }, 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, {
     level: props.level,
@@ -756,7 +1018,7 @@ var CustomFormModalPage = function CustomFormModalPage(props) {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx(ModalPageHeader, {
+    children: [jsxRuntime.jsx(PageHeader, {
       title: props.title,
       subtitle: props.subtitle,
       children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
@@ -827,21 +1089,6 @@ var defaultProps = {
   hideControls: false
 };
 
-var _ref$2 = {
-  name: "18uqayh",
-  styles: "margin-bottom:16px"
-} ;
-
-var _ref2$1 = {
-  name: "hkh81z",
-  styles: "margin-top:8px"
-} ;
-
-var _ref3 = {
-  name: "1nrstx4",
-  styles: "display:flex;align-items:flex-end;justify-content:space-between"
-} ;
-
 var TabularModalPage = function TabularModalPage(props) {
   return jsxRuntime.jsxs(ModalPage, {
     level: props.level,
@@ -856,24 +1103,21 @@ var TabularModalPage = function TabularModalPage(props) {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx("div", {
-      css: /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorNeutral95, ";padding:", designSystem.customProperties.spacingM, " ", designSystem.customProperties.spacingM, " 0;border-bottom:1px ", designSystem.customProperties.colorNeutral, " solid;" + ("" ), "" ),
+    children: [jsxRuntime.jsx(TabularPageContainer, {
+      color: "neutral",
       children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        children: [props.customTitleRow || jsxRuntime.jsx(ModalPageHeaderTitle, {
+        children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
           title: props.title,
-          subtitle: props.subtitle
-        }), jsxRuntime.jsxs("div", {
-          css: _ref3,
-          children: [jsxRuntime.jsx("div", {
-            css: _ref2$1,
-            children: props.tabControls
-          }), jsxRuntime.jsx("div", {
-            css: _ref$2,
+          subtitle: props.subtitle,
+          truncate: true
+        }), 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, {
@@ -1142,6 +1386,9 @@ exports.PageNotFound = PageNotFound;
 exports.PageUnauthorized = PageUnauthorized;
 exports.PortalsContainer = PortalsContainer;
 exports.PublicPageLayout = PublicPageLayout;
+exports.TabHeader = TabHeader;
+exports.TabularDetailPage = TabularDetailPage;
+exports.TabularMainPage = TabularMainPage;
 exports.TabularModalPage = TabularModalPage;
 exports.useModalState = useModalState;
 exports.version = version;