@commercetools-frontend/application-components 21.20.3 → 21.20.5

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

@@ -87,10 +87,10 @@ 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.20.3";
+var version = "21.20.5";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
-var spacing40 = '40px';
+var appKitSpacing55 = '40px';
 var themesOverrides = {
   default: {
     colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral,
@@ -104,18 +104,21 @@ var themesOverrides = {
     fontSizeForNavBarLink: designSystem.designTokens.fontSize40,
     heightForTab: '4px',
     lineHeightForNavBarLink: designSystem.designTokens.lineHeight50,
-    marginBottomForPageTopBar: designSystem.designTokens.spacingS,
-    marginForModalPageHeader: "0 ".concat(designSystem.designTokens.spacingM),
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacingM,
-    marginTopForPageSubtitle: designSystem.designTokens.spacingM,
-    marginTopForTabControls: designSystem.designTokens.spacingS,
-    paddingForDetailPageHeader: designSystem.designTokens.spacingM,
-    paddingForDialogContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacingM, " 0 ")).call(_context, designSystem.designTokens.spacingS),
-    paddingForMainPageHeader: designSystem.designTokens.spacingM,
-    paddingForModalPageHeader: "".concat(designSystem.designTokens.spacingM, " 0"),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacingS, " ")).call(_context2, designSystem.designTokens.spacingM),
-    paddingForPageContent: designSystem.designTokens.spacingM,
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacingM, " ")).call(_context3, designSystem.designTokens.spacingM, " 0"),
+    marginBottomForPageTopBar: designSystem.designTokens.spacing20,
+    marginForDialogContainerContents: "".concat(designSystem.designTokens.spacing30, " 0"),
+    marginForModalPageHeader: "0 ".concat(designSystem.designTokens.spacing30),
+    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing30,
+    marginTopForDialogFooter: designSystem.designTokens.spacing30,
+    marginTopForPageSubtitle: designSystem.designTokens.spacing30,
+    marginTopForTabControls: designSystem.designTokens.spacing20,
+    paddingForDetailPageHeader: designSystem.designTokens.spacing30,
+    paddingForDialogContainer: "0",
+    paddingForDialogContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing20),
+    paddingForMainPageHeader: designSystem.designTokens.spacing30,
+    paddingForModalPageHeader: "".concat(designSystem.designTokens.spacing30, " 0"),
+    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context2, designSystem.designTokens.spacing30),
+    paddingForPageContent: designSystem.designTokens.spacing30,
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing30, " ")).call(_context3, designSystem.designTokens.spacing30, " 0"),
     paddingLeftForTabAsFirst: '0',
     widthForDialogAsMedium: designSystem.designTokens.constraint7,
     widthForDialogAsLarge: designSystem.designTokens.constraint10,
@@ -133,19 +136,22 @@ var themesOverrides = {
     fontSizeForNavBarLink: designSystem.designTokens.fontSize20,
     heightForTab: '2px',
     lineHeightForNavBarLink: designSystem.designTokens.lineHeight20,
-    marginBottomForPageTopBar: designSystem.designTokens.spacingL,
-    marginForModalPageHeader: "0 ".concat(spacing40),
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacingXl,
-    marginTopForPageSubtitle: designSystem.designTokens.spacingS,
-    marginTopForTabControls: designSystem.designTokens.spacingL,
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacingXl, " ")).call(_context5, spacing40, " ")).call(_context4, designSystem.designTokens.spacingL),
-    paddingForDialogContent: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacingL, " 0 ")).call(_context6, designSystem.designTokens.spacingS),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacingXl, " ")).call(_context7, spacing40, " 0"),
-    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacingM, " 0 ")).call(_context8, designSystem.designTokens.spacingL),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context9 = _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacingL, " ")).call(_context10, spacing40, " ")).call(_context9, designSystem.designTokens.spacingS),
-    paddingForPageContent: _concatInstanceProperty__default["default"](_context11 = "".concat(designSystem.designTokens.spacingXl, " ")).call(_context11, spacing40),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context12 = "".concat(designSystem.designTokens.spacingXl, " ")).call(_context12, spacing40, " 0"),
-    paddingLeftForTabAsFirst: designSystem.designTokens.spacingM,
+    marginBottomForPageTopBar: designSystem.designTokens.spacing40,
+    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context4, designSystem.designTokens.spacing50, " 0"),
+    marginForModalPageHeader: "0 ".concat(appKitSpacing55),
+    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing50,
+    marginTopForDialogFooter: designSystem.designTokens.spacing50,
+    marginTopForPageSubtitle: designSystem.designTokens.spacing20,
+    marginTopForTabControls: designSystem.designTokens.spacing40,
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context5 = _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context6, appKitSpacing55, " ")).call(_context5, designSystem.designTokens.spacing40),
+    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context7, designSystem.designTokens.spacing30),
+    paddingForDialogContent: "".concat(designSystem.designTokens.spacing40, " 0 0"),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context8, appKitSpacing55, " 0"),
+    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context9, designSystem.designTokens.spacing40),
+    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context10, appKitSpacing55, " 0"),
+    paddingForPageContent: _concatInstanceProperty__default["default"](_context11 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context11, appKitSpacing55),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context12 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context12, appKitSpacing55, " 0"),
+    paddingLeftForTabAsFirst: designSystem.designTokens.spacing30,
     widthForDialogAsMedium: designSystem.designTokens.constraint9,
     widthForDialogAsLarge: designSystem.designTokens.constraint13,
     widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint16, " / 2)")
@@ -159,13 +165,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$7 = {
+var _ref$6 = {
   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$7, !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$6, !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; }
@@ -187,6 +193,27 @@ var getDisabledLinkAtributes = function getDisabledLinkAtributes(isDisabled) {
   } : {};
 };
 
+var TabLabel = function TabLabel(_ref) {
+  var children = _ref.children;
+
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
+  if (theme === 'default') {
+    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+      as: "h4",
+      truncate: true,
+      children: children
+    });
+  }
+
+  return jsxRuntime.jsx(Text__default["default"].Headline, {
+    as: "h3",
+    truncate: true,
+    children: children
+  });
+};
+
 var TabHeader = function TabHeader(props) {
   var intl = reactIntl.useIntl();
   var location = reactRouterDom.useLocation();
@@ -216,9 +243,7 @@ var TabHeader = function TabHeader(props) {
     to: props.to,
     css: getLinkStyles(isActive, isDisabled)
   }, getDisabledLinkAtributes(isDisabled)), dataAttributeProps), {}, {
-    children: jsxRuntime.jsx(Text__default["default"].Subheadline, {
-      as: "h4",
-      truncate: true,
+    children: jsxRuntime.jsx(TabLabel, {
       children: label
     })
   }));
@@ -314,25 +339,30 @@ var GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   return props.name;
 }, ";" + ("" ));
 
-var _ref2$2 = {
+var _ref3$1 = {
   name: "13udsys",
   styles: "height:100%"
 } ;
 
 var sizeStyles = function sizeStyles(props) {
-  if (props.size === 'scale') return _ref2$2;
+  if (props.size === 'scale') return _ref3$1;
   return /*#__PURE__*/react.css("" , "" );
 };
 
-var _ref$6 = {
+var _ref$5 = {
+  name: "1daj17f",
+  styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
+} ;
+
+var _ref2$2 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
 
 var DialogContainer = function DialogContainer(props) {
   return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref3) {
-      var makeClassName = _ref3.css;
+    children: function children(_ref4) {
+      var makeClassName = _ref4.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: props.isOpen,
         onRequestClose: props.onClose,
@@ -354,14 +384,14 @@ var DialogContainer = function DialogContainer(props) {
           name: "bottom"
         }), jsxRuntime.jsx(GridArea, {
           name: "main",
-          css: _ref$6,
+          css: _ref2$2,
           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.
           , {
-            css: /*#__PURE__*/react.css("min-height:0;", sizeStyles(props), ">div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+            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: /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0;>*+*{margin:", designSystem.customProperties.spacingM, " 0 0;}" + ("" ), "" ),
+              css: _ref$5,
               children: props.children
             })
           })
@@ -375,23 +405,36 @@ DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$g;
 
-var _ref$5 = {
-  name: "o5s7gs",
-  styles: "flex:0 1 auto;display:flex;flex-direction:column"
-} ;
+var Title$1 = function Title(props) {
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
+  if (theme === 'default') {
+    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+      as: "h4",
+      title: props.title,
+      truncate: true,
+      children: props.title
+    });
+  }
+
+  return jsxRuntime.jsx(Text__default["default"].Headline, {
+    as: "h3",
+    title: props.title,
+    truncate: true,
+    children: props.title
+  });
+};
 
 var DialogHeader = function DialogHeader(props) {
   return jsxRuntime.jsx("div", {
-    css: _ref$5,
+    css: /*#__PURE__*/react.css("flex:0 1 auto;display:flex;flex-direction:column;margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
       alignItems: "center",
       justifyContent: "space-between",
-      children: [jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        truncate: true,
-        title: props.title,
-        children: props.title
+      children: [jsxRuntime.jsx(Title$1, {
+        title: props.title
       }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
         label: "Close dialog",
         onClick: props.onClose,
@@ -451,19 +494,22 @@ var getFormattedLabel = function getFormattedLabel(label, intl) {
 
 var DialogFooter = function DialogFooter(props) {
   var intl = reactIntl.useIntl();
-  return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-    scale: "m",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
-      label: getFormattedLabel(props.labelSecondary, intl),
-      onClick: props.onCancel,
-      iconLeft: props.iconLeftSecondaryButton
-    }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
-      label: getFormattedLabel(props.labelPrimary, intl),
-      onClick: props.onConfirm,
-      isDisabled: props.isPrimaryButtonDisabled
-    }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("margin-top:", designTokens.marginTopForDialogFooter, ";" + ("" ), "" ),
+    children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      scale: "m",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+        label: getFormattedLabel(props.labelSecondary, intl),
+        onClick: props.onCancel,
+        iconLeft: props.iconLeftSecondaryButton
+      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+        label: getFormattedLabel(props.labelPrimary, intl),
+        onClick: props.onConfirm,
+        isDisabled: props.isPrimaryButtonDisabled
+      }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+    })
   });
 };
 
@@ -624,6 +670,10 @@ var _ref$3 = {
 
 var ModalPageTopBar = function ModalPageTopBar(props) {
   var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   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", {
@@ -652,7 +702,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
       onClick: props.onClose,
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {
-          size: "medium"
+          size: theme === 'default' ? 'medium' : 'big'
         })
       })
     })]
@@ -775,11 +825,14 @@ var SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
 } )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
 
-var renderTitle = function renderTitle(props) {
+var Title = function Title(props) {
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   switch (props.titleSize) {
     case 'big':
       return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: "h2",
+        as: theme === 'default' ? 'h2' : 'h1',
         title: props.title,
         truncate: props.truncate,
         children: props.title
@@ -795,46 +848,51 @@ var renderTitle = function renderTitle(props) {
   }
 };
 
-var renderSubtitle = function renderSubtitle(subtitle) {
-  var truncate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var Subtitle = function Subtitle(props) {
+  var _useTheme2 = designSystem.useTheme(),
+      theme = _useTheme2.theme;
 
-  if (!subtitle) {
+  if (!props.subtitle) {
     return null;
   }
 
-  if ( /*#__PURE__*/react$1.isValidElement(subtitle)) {
+  if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
     return jsxRuntime.jsx(SubtitleWrapper, {
-      children: subtitle
+      children: props.subtitle
     });
   }
 
   return jsxRuntime.jsx(SubtitleWrapper, {
     children: jsxRuntime.jsx(Text__default["default"].Body, {
-      title: subtitle,
-      truncate: truncate,
-      children: subtitle
+      title: props.subtitle,
+      truncate: props.truncate,
+      tone: theme !== 'default' ? 'secondary' : undefined,
+      children: props.subtitle
     })
   });
 };
 
+Subtitle.propTypes = {};
+Subtitle.defaultProps = {
+  truncate: false
+};
+
 var _ref$2 = {
   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$2,
-    children: [renderedTitle, renderedSubtitle]
+    children: [jsxRuntime.jsx(Title, {
+      title: props.title,
+      titleSize: props.titleSize,
+      truncate: props.truncate
+    }), jsxRuntime.jsx(Subtitle, {
+      subtitle: props.subtitle,
+      truncate: props.truncate
+    })]
   });
 };
 
@@ -843,10 +901,14 @@ PageHeaderTitle.displayName = 'PageHeaderTitle';
 PageHeaderTitle.defaultProps = defaultProps$a;
 
 var PageHeader = function PageHeader(props) {
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
     children: [jsxRuntime.jsx(PageHeaderTitle, {
       title: props.title,
+      titleSize: theme === 'default' ? 'small' : 'big',
       subtitle: props.subtitle,
       truncate: true
     }), props.children]
@@ -1071,6 +1133,9 @@ var defaultProps$7 = {
 };
 
 var TabularModalPage = function TabularModalPage(props) {
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -1086,6 +1151,7 @@ var TabularModalPage = function TabularModalPage(props) {
       color: "neutral",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title,
+        titleSize: theme === 'default' ? 'small' : 'big',
         subtitle: props.subtitle,
         truncate: true
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1300,7 +1366,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-48d2dbbc.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./public-page-layout-9fa2edc7.cjs.prod.js'
   /* webpackChunkName: "public-page-layout" */
   ); });
 });
@@ -1316,7 +1382,8 @@ var MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
 } )("flex:1;flex-basis:0;overflow:auto;padding:", designTokens.paddingForPageContent, ";" + ("" ));
 
 var defaultProps$2 = {
-  hideControls: false
+  hideControls: false,
+  hideDivider: false
 };
 
 var CustomFormMainPage = function CustomFormMainPage(props) {
@@ -1332,7 +1399,7 @@ var CustomFormMainPage = function CustomFormMainPage(props) {
         }), !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
-        }), jsxRuntime.jsx(Divider, {})]
+        }), !props.hideDivider && jsxRuntime.jsx(Divider, {})]
       })
     }), jsxRuntime.jsx(MainPageContent, {
       children: props.children
@@ -1394,10 +1461,14 @@ FormMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy e
 FormMainPage.Intl = i18n.sharedMessages;
 
 var InfoMainPage = function InfoMainPage(props) {
+  var _useTheme = designSystem.useTheme(),
+      theme = _useTheme.theme;
+
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
+    hideDivider: theme !== 'default',
     children: props.children
   });
 };