@commercetools-frontend/application-components 21.21.2 → 21.22.0

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

@@ -87,7 +87,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.21.2";
+var version = "21.22.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
 var appKitSpacing55 = '40px'; // TODO: move to uikit?
@@ -120,7 +120,7 @@ var themesOverrides = {
     fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight500,
     fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight500,
     heightForTab: '4px',
-    lineHeightForNavBarLink: designSystem.designTokens.lineHeight50,
+    lineHeightForNavbarLink: designSystem.designTokens.lineHeight50,
     marginBottomForPageTopBar: designSystem.designTokens.spacing20,
     marginForDialogContainerContents: "".concat(designSystem.designTokens.spacing30, " 0"),
     marginForModalPageHeader: "0 ".concat(designSystem.designTokens.spacing30),
@@ -168,7 +168,7 @@ var themesOverrides = {
     fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight600,
     fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight600,
     heightForTab: '2px',
-    lineHeightForNavBarLink: designSystem.designTokens.lineHeight20,
+    lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
     marginBottomForPageTopBar: designSystem.designTokens.spacing40,
     marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context4, designSystem.designTokens.spacing50, " 0"),
     marginForModalPageHeader: "0 ".concat(appKitSpacing55),
@@ -202,13 +202,13 @@ var getBottomBorderStyles = function getBottomBorderStyles(background) {
   return /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:", designTokens.heightForTab, ";border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
 };
 
-var _ref$6 = {
+var _ref$7 = {
   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.designTokens.fontSizeDefault, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designTokens.paddingLeftForTabAsFirst, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$6, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
+  return [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSizeDefault, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designTokens.paddingLeftForTabAsFirst, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
 };
 
 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; }
@@ -287,11 +287,11 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$h = {
+var defaultProps$i = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$h;
+TabHeader.defaultProps = defaultProps$i;
 
 var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
   switch (size) {
@@ -361,7 +361,7 @@ var getOverlayElement$1 = function getOverlayElement(props, contentElement) {
   );
 };
 
-var defaultProps$g = {
+var defaultProps$h = {
   // TODO: t-shirt sizes are deprecated but we need to keep using them for
   // backwards compatibility and to help with styling migration
   // After the migration is done, we should change this default value to 13.
@@ -386,7 +386,7 @@ var sizeStyles = function sizeStyles(props) {
   return /*#__PURE__*/react.css("" , "" );
 };
 
-var _ref$5 = {
+var _ref$6 = {
   name: "1daj17f",
   styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
 } ;
@@ -428,7 +428,7 @@ var DialogContainer = function DialogContainer(props) {
           , {
             css: /*#__PURE__*/react.css("min-height:0;", sizeStyles(props), " padding:", designTokens.paddingForDialogContainer, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
             children: jsxRuntime.jsx("div", {
-              css: _ref$5,
+              css: _ref$6,
               children: props.children
             })
           })
@@ -440,7 +440,7 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$g;
+DialogContainer.defaultProps = defaultProps$h;
 
 var Title$1 = function Title(props) {
   var _useTheme = designSystem.useTheme(),
@@ -519,7 +519,7 @@ function filterDataAttributes(obj) {
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _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$f = {
+var defaultProps$g = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -552,9 +552,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$f;
+DialogFooter.defaultProps = defaultProps$g;
 
-var defaultProps$e = {
+var defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -586,12 +586,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$e; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$f; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$d = {
+var defaultProps$e = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -624,7 +624,7 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$d; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.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.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -665,13 +665,13 @@ var getBeforeCloseContainerAnimation = function getBeforeCloseContainerAnimation
   return _ref2$1;
 };
 
-var _ref$4 = {
+var _ref$5 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
 
 var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
-  return _ref$4;
+  return _ref$5;
 };
 
 var messages$2 = reactIntl.defineMessages({
@@ -695,12 +695,12 @@ var LargeIconWrapper = /*#__PURE__*/_styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$c = {
+var defaultProps$d = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
 
-var _ref$3 = {
+var _ref$4 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -714,7 +714,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:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$3,
+      css: _ref$4,
       children: [jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -748,7 +748,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$c;
+ModalPageTopBar.defaultProps = defaultProps$d;
 
 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; }
 
@@ -771,7 +771,7 @@ var getOverlayElement = function getOverlayElement(props, contentElement) {
 // does not recognize the object shape.
 
 
-var defaultProps$b = {
+var defaultProps$c = {
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
 };
@@ -851,9 +851,9 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$b;
+ModalPage.defaultProps = defaultProps$c;
 
-var defaultProps$a = {
+var defaultProps$b = {
   titleSize: 'small',
   truncate: false
 };
@@ -914,14 +914,14 @@ Subtitle.defaultProps = {
   truncate: false
 };
 
-var _ref$2 = {
+var _ref$3 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
 
 var PageHeaderTitle = function PageHeaderTitle(props) {
   return jsxRuntime.jsxs("div", {
-    css: _ref$2,
+    css: _ref$3,
     children: [jsxRuntime.jsx(Title, {
       title: props.title,
       titleSize: props.titleSize,
@@ -935,7 +935,7 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
 
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$a;
+PageHeaderTitle.defaultProps = defaultProps$b;
 
 var PageHeader = function PageHeader(props) {
   var _useTheme = designSystem.useTheme(),
@@ -1088,7 +1088,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$9 = {
+var defaultProps$a = {
   hideControls: false
 };
 
@@ -1125,7 +1125,7 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$9; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$a; // 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;
@@ -1156,16 +1156,16 @@ var TabularPageContainer = function TabularPageContainer(props) {
 
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$8 = {
+var defaultProps$9 = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$8;
+TabularPageContainer.defaultProps = defaultProps$9;
 
 var FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre0"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   hideControls: false
 };
 
@@ -1208,7 +1208,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$7; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1218,7 +1218,7 @@ TabularModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience p
 
 TabularModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$6 = {
+var defaultProps$7 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1241,7 +1241,7 @@ var PageTopBar = function PageTopBar(props) {
 
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$6;
+PageTopBar.defaultProps = defaultProps$7;
 
 var DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
@@ -1254,7 +1254,7 @@ var HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 // does not recognize the object shape.
 
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   hideControls: false
 };
 
@@ -1284,7 +1284,7 @@ var CustomFormDetailPage = function CustomFormDetailPage(props) {
 
 CustomFormDetailPage.propTypes = {};
 CustomFormDetailPage.displayName = 'CustomFormDetailPage';
-CustomFormDetailPage.defaultProps = defaultProps$5; // Static export of pre-configured page header title component to easily
+CustomFormDetailPage.defaultProps = defaultProps$6; // 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
@@ -1297,7 +1297,7 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton; // This is a convenien
 
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   hideControls: false
 };
 
@@ -1329,7 +1329,7 @@ var FormDetailPage = function FormDetailPage(props) {
 
 FormDetailPage.propTypes = {};
 FormDetailPage.displayName = 'FormDetailPage';
-FormDetailPage.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDetailPage.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.
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
@@ -1356,7 +1356,7 @@ InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configure
 
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   hideControls: false
 };
 
@@ -1390,7 +1390,7 @@ var TabularDetailPage = function TabularDetailPage(props) {
 
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$3; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$4; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -1403,7 +1403,7 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience pr
 TabularDetailPage.Intl = i18n.sharedMessages;
 
 var PublicPageLayout = /*#__PURE__*/react$1.lazy(function () {
-  return Promise.resolve().then(function () { return require('./public-page-layout-8489cd86.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./public-page-layout-d4fefecc.cjs.prod.js'
   /* webpackChunkName: "public-page-layout" */
   ); });
 });
@@ -1418,7 +1418,7 @@ var MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;padding:", designTokens.paddingForPageContent, ";" + ("" ));
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   hideControls: false,
   hideDivider: false
 };
@@ -1446,7 +1446,7 @@ var CustomFormMainPage = function CustomFormMainPage(props) {
 
 CustomFormMainPage.propTypes = {};
 CustomFormMainPage.displayName = 'CustomFormMainPage';
-CustomFormMainPage.defaultProps = defaultProps$2; // Static export of pre-configured page header title component to easily
+CustomFormMainPage.defaultProps = defaultProps$3; // 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
@@ -1459,7 +1459,7 @@ CustomFormMainPage.FormDeleteButton = FormDeleteButton; // This is a convenience
 
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1489,7 +1489,7 @@ var FormMainPage = function FormMainPage(props) {
 
 FormMainPage.propTypes = {};
 FormMainPage.displayName = 'FormMainPage';
-FormMainPage.defaultProps = defaultProps$1; // Static export of pre-configured page header title component to easily
+FormMainPage.defaultProps = defaultProps$2; // 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.
@@ -1516,7 +1516,7 @@ InfoMainPage.displayName = 'InfoMainPage'; // Static export of pre-configured pa
 
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1547,7 +1547,7 @@ var TabularMainPage = function TabularMainPage(props) {
 
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -1559,7 +1559,7 @@ TabularMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience prox
 
 TabularMainPage.Intl = i18n.sharedMessages;
 
-var _ref$1 = {
+var _ref$2 = {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } ;
@@ -1587,7 +1587,7 @@ var MaintenancePageLayout = function MaintenancePageLayout(props) {
         }), jsxRuntime.jsx(Text__default["default"].Body, {
           children: props.paragraph1
         }), props.bodyContent && jsxRuntime.jsx("div", {
-          css: _ref$1,
+          css: _ref$2,
           children: props.bodyContent
         }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
           children: props.paragraph2
@@ -1683,6 +1683,138 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
+var Content$1 = /*#__PURE__*/_styled__default["default"]("section", {
+  target: "e1jvhtw81"
+} )({
+  name: "1sxg93g",
+  styles: "grid-area:content"
+} );
+
+var Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1jvhtw80"
+} )({
+  name: "jri2nt",
+  styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(400px, 600px) 1fr;width:100%"
+} );
+
+function PageContentNarrow(props) {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
+  if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+  return jsxRuntime.jsx(Container$1, {
+    children: jsxRuntime.jsx(Content$1, {
+      children: props.children
+    })
+  });
+}
+
+PageContentNarrow.propTypes = {};
+
+var Content = /*#__PURE__*/_styled__default["default"]("section", {
+  target: "e1dg479f4"
+} )("grid-area:content;display:grid;grid-template-areas:", function (props) {
+  return props.columns === '1' ? 'none' : '"left-column right-column"';
+}, ";grid-template-columns:", function (props) {
+  switch (props.columns) {
+    case '1/1':
+      return '1fr 1fr';
+
+    case '2/1':
+      return '2fr 1fr';
+
+    default:
+      return '1fr';
+  }
+}, ";gap:", function (props) {
+  return props.gapSize === '10' ? designSystem.designTokens.spacing50 : designSystem.designTokens.spacing70;
+}, ";width:100%;" + ("" ));
+
+var LeftContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f3"
+} )({
+  name: "1ibwnup",
+  styles: "grid-area:left-column"
+} );
+
+var RightContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f2"
+} )({
+  name: "hjfyry",
+  styles: "grid-area:right-column"
+} );
+
+var RightColumnContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f1"
+} )("top:0;position:", function (props) {
+  return props.columns === '2/1' ? 'sticky' : 'static';
+}, ";" + ("" ));
+
+var Container = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f0"
+} )({
+  name: "5phl7w",
+  styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(800px, 1200px) 1fr;width:100%"
+} );
+
+function PageContentWide(props) {
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
+  if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+
+  var _Children$toArray = react$1.Children.toArray(props.children),
+      _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
+      leftChild = _Children$toArray2[0],
+      rightChild = _Children$toArray2[1];
+
+  return jsxRuntime.jsx(Container, {
+    children: jsxRuntime.jsx(Content, {
+      columns: props.columns,
+      gapSize: props.gapSize,
+      children: props.columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: leftChild
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(LeftContentColumn, {
+          children: leftChild
+        }), jsxRuntime.jsx(RightContentColumn, {
+          children: jsxRuntime.jsx(RightColumnContentWrapper, {
+            columns: props.columns,
+            children: rightChild
+          })
+        })]
+      })
+    })
+  });
+}
+
+PageContentWide.propTypes = {};
+var defaultProps = {
+  columns: '1',
+  gapSize: '10'
+};
+PageContentWide.defaultProps = defaultProps;
+
+var _ref$1 = {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} ;
+
+function PageContentFull(props) {
+  return jsxRuntime.jsx("div", {
+    css: _ref$1,
+    children: jsxRuntime.jsx("section", {
+      children: props.children
+    })
+  });
+}
+
+PageContentFull.propTypes = {};
+
 var _mutationObserver;
 
 var getMutationObserver = function getMutationObserver(options) {
@@ -1892,6 +2024,9 @@ exports.InfoDialog = InfoDialog;
 exports.InfoMainPage = InfoMainPage;
 exports.InfoModalPage = InfoModalPage;
 exports.MaintenancePageLayout = MaintenancePageLayout;
+exports.PageContentFull = PageContentFull;
+exports.PageContentNarrow = PageContentNarrow;
+exports.PageContentWide = PageContentWide;
 exports.PageNotFound = PageNotFound;
 exports.PageUnauthorized = PageUnauthorized;
 exports.PortalsContainer = PortalsContainer;