@commercetools-frontend/application-components 21.20.0 → 21.20.2

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

@@ -19,6 +19,7 @@ require('@commercetools-uikit/utils');
 var Text = require('@commercetools-uikit/text');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react$1 = require('react');
 var _styled = require('@emotion/styled/base');
@@ -41,7 +42,6 @@ var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/desert-fox.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
 var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
@@ -62,6 +62,7 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var startCase__default = /*#__PURE__*/_interopDefault(startCase);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
@@ -77,7 +78,6 @@ var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 var _Map__default = /*#__PURE__*/_interopDefault(_Map);
@@ -87,19 +87,85 @@ 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.0";
+var version = "21.20.2";
+
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
+var spacing40 = '40px';
+var themesOverrides = {
+  default: {
+    colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral,
+    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral60,
+    backgroundColorForPageHeader: designSystem.designTokens.colorNeutral95,
+    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorNeutral95,
+    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral),
+    borderColorForDialogDivider: designSystem.designTokens.colorNeutral,
+    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral60,
+    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorNeutral,
+    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"),
+    paddingLeftForTabAsFirst: '0',
+    widthForDialogAsMedium: designSystem.designTokens.constraint7,
+    widthForDialogAsLarge: designSystem.designTokens.constraint10,
+    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint15, " / 2)")
+  },
+  test: {
+    colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral90,
+    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral90,
+    backgroundColorForPageHeader: designSystem.designTokens.colorSurface,
+    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorSurface,
+    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
+    borderColorForDialogDivider: designSystem.designTokens.colorNeutral90,
+    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral90,
+    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorSurface,
+    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,
+    widthForDialogAsMedium: designSystem.designTokens.constraint9,
+    widthForDialogAsLarge: designSystem.designTokens.constraint13,
+    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint16, " / 2)")
+  }
+};
+var designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
+  includeDefaultValue: false
+});
 
 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, ";}" + ("" ), "" );
+  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$8 = {
+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.customProperties.fontSizeDefault, ";padding:", designSystem.customProperties.spacingS, " ", designSystem.customProperties.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:0;}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.customProperties.colorPrimary), " & h4{color:", designSystem.customProperties.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.customProperties.colorPrimary, "!important;}}" + ("" ), "" )];
+  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; }
@@ -167,31 +233,44 @@ TabHeader.defaultProps = defaultProps$h;
 
 var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
   switch (size) {
-    case 7:
     case 'm':
-      return designSystem.customProperties.constraint7;
+      return designTokens.widthForDialogAsMedium;
+
+    case 7:
+      return designSystem.designTokens.constraint7;
 
     case 8:
-      return designSystem.customProperties.constraint8;
+      return designSystem.designTokens.constraint8;
 
     case 9:
-      return designSystem.customProperties.constraint9;
+      return designSystem.designTokens.constraint9;
 
     case 10:
+      return designSystem.designTokens.constraint10;
+
+    case 11:
+      return designSystem.designTokens.constraint11;
+
+    case 12:
+      return designSystem.designTokens.constraint12;
+
+    case 13:
+      return designSystem.designTokens.constraint13;
+
     case 'l':
-      return designSystem.customProperties.constraint10;
+      return designTokens.widthForDialogAsLarge;
 
     case 'scale':
-      return designSystem.customProperties.constraintScale;
+      return designSystem.designTokens.constraintScale;
 
     default:
-      return designSystem.customProperties.constraintScale;
+      return designSystem.designTokens.constraintScale;
   }
 };
 
 var getModalContentStyles = function getModalContentStyles(props) {
   var sizeConstraint = getConstraintForGridStyle(props.size);
-  var gridStyle = props.size === 'scale' ? /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.customProperties.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.customProperties.spacingXl, ",\n              1fr\n            ) [row3-end]/", designSystem.customProperties.spacingXl, " 1fr ", designSystem.customProperties.spacingXl, ";" + ("" ), "" ) : /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.customProperties.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.customProperties.spacingXl, ",\n              1fr\n            ) [row3-end]/minmax(", designSystem.customProperties.spacingXl, ", 1fr) ", sizeConstraint, " minmax(", designSystem.customProperties.spacingXl, ", 1fr);" + ("" ), "" ); // To ensure that the mouse click on the overlay surface goes "through"
+  var gridStyle = props.size === 'scale' ? /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row3-end]/", designSystem.designTokens.spacingXl, " 1fr ", designSystem.designTokens.spacingXl, ";" + ("" ), "" ) : /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row3-end]/minmax(", designSystem.designTokens.spacingXl, ", 1fr) ", sizeConstraint, " minmax(", designSystem.designTokens.spacingXl, ", 1fr);" + ("" ), "" ); // To ensure that the mouse click on the overlay surface goes "through"
   // and triggers the modal to close, we need to turn off the pointer events.
 
   var baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
@@ -221,7 +300,11 @@ var getOverlayElement$1 = function getOverlayElement(props, contentElement) {
 };
 
 var defaultProps$g = {
-  size: 10,
+  // 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.
+  // t-shirt sizes then can be removed in a next breaking change release
+  size: 'l',
   getParentSelector: getDefaultParentSelector$1
 };
 
@@ -241,7 +324,7 @@ var sizeStyles = function sizeStyles(props) {
   return /*#__PURE__*/react.css("" , "" );
 };
 
-var _ref$7 = {
+var _ref$6 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
@@ -271,7 +354,7 @@ var DialogContainer = function DialogContainer(props) {
           name: "bottom"
         }), jsxRuntime.jsx(GridArea, {
           name: "main",
-          css: _ref$7,
+          css: _ref$6,
           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.
@@ -292,14 +375,14 @@ DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$g;
 
-var _ref$6 = {
+var _ref$5 = {
   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$5,
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
       alignItems: "center",
@@ -325,7 +408,7 @@ DialogHeader.displayName = 'DialogHeader';
 
 var DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eo6zkz80"
-} )("border-top:1px solid ", designSystem.customProperties.colorNeutral, ";padding:", designSystem.customProperties.spacingM, " 0 ", designSystem.customProperties.spacingS, ";flex:1;overflow:auto;" + ("" ));
+} )("border-top:1px solid ", designTokens.borderColorForDialogDivider, ";padding:", designTokens.paddingForDialogContent, ";flex:1;overflow:auto;" + ("" ));
 
 var InfoDialog = function InfoDialog(props) {
   return jsxRuntime.jsxs(DialogContainer, {
@@ -499,13 +582,13 @@ var getBeforeCloseContainerAnimation = function getBeforeCloseContainerAnimation
   return _ref2$1;
 };
 
-var _ref$5 = {
+var _ref$4 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
 
 var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
-  return _ref$5;
+  return _ref$4;
 };
 
 var messages$2 = reactIntl.defineMessages({
@@ -534,7 +617,7 @@ var defaultProps$c = {
   previousPathLabel: messages$2.back
 };
 
-var _ref$4 = {
+var _ref$3 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -542,9 +625,9 @@ var _ref$4 = {
 var ModalPageTopBar = function ModalPageTopBar(props) {
   var intl = reactIntl.useIntl();
   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;}" + ("" ), "" ),
+    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$4,
+      css: _ref$3,
       children: [jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -690,7 +773,7 @@ var defaultProps$a = {
 
 var SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
-} )("margin-top:", designSystem.customProperties.spacingM, ";" + ("" ));
+} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
 
 var renderTitle = function renderTitle(props) {
   switch (props.titleSize) {
@@ -734,7 +817,7 @@ var renderSubtitle = function renderSubtitle(subtitle) {
   });
 };
 
-var _ref$3 = {
+var _ref$2 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
@@ -750,7 +833,7 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
   });
   var renderedSubtitle = renderSubtitle(props.subtitle, truncate);
   return jsxRuntime.jsxs("div", {
-    css: _ref$3,
+    css: _ref$2,
     children: [renderedTitle, renderedSubtitle]
   });
 };
@@ -761,7 +844,7 @@ PageHeaderTitle.defaultProps = defaultProps$a;
 
 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, ";}" + ("" ), "" ),
+    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,
       subtitle: props.subtitle,
@@ -775,7 +858,7 @@ PageHeader.displayName = 'PageHeader';
 
 var ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;padding:", designSystem.customProperties.spacingM, ";overflow:auto;" + ("" ));
+} )("flex:1;flex-basis:0;padding:", designTokens.paddingForPageContent, ";overflow:auto;" + ("" ));
 var PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn00"
 } )({
@@ -950,16 +1033,11 @@ FormModalPage.Intl = i18n.sharedMessages;
 
 var TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre1"
-} )("margin-top:", designSystem.customProperties.spacingS, ";" + ("" ));
-
-var _ref$2 = {
-  name: "1nrstx4",
-  styles: "display:flex;align-items:flex-end;justify-content:space-between"
-} ;
+} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 
 var ControlsContainter = function ControlsContainter(props) {
   return jsxRuntime.jsxs("div", {
-    css: _ref$2,
+    css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designTokens.marginTopForTabControls, ";" + ("" ), "" ),
     children: [jsxRuntime.jsx(TabControls, {
       role: "tablist",
       children: props.tabControls
@@ -972,7 +1050,7 @@ 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;" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("background-color:", props.color === 'surface' ? designSystem.designTokens.colorSurface : designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:", designTokens.borderBottomForTabularPageHeader, ";" + ("" ), "" ),
     children: props.children
   });
 };
@@ -986,7 +1064,7 @@ TabularPageContainer.defaultProps = defaultProps$8;
 
 var FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre0"
-} )("margin-bottom:", designSystem.customProperties.spacingM, ";" + ("" ));
+} )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
 
 var defaultProps$7 = {
   hideControls: false
@@ -1004,23 +1082,21 @@ var TabularModalPage = function TabularModalPage(props) {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx(TabularPageContainer, {
+    children: [jsxRuntime.jsxs(TabularPageContainer, {
       color: "neutral",
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-          title: props.title,
-          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
-            })
+      children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title,
+        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, {
       children: props.children
     })]
@@ -1047,7 +1123,7 @@ var defaultProps$6 = {
 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, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designTokens.marginBottomForPageTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.customProperties.colorSurface, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
       tone: "primary",
       label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -1065,8 +1141,12 @@ PageTopBar.displayName = 'PageTopBar';
 PageTopBar.defaultProps = defaultProps$6;
 
 var DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "etkdonc1"
+} )("background-color:", designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designTokens.colorForPageHeaderBottomBorder, " solid;" + ("" ));
+
+var HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
-} )("background-color:", designSystem.customProperties.colorNeutral95, ";padding:", designSystem.customProperties.spacingM, ";border-bottom:1px ", designSystem.customProperties.colorNeutral, " solid;" + ("" )); // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" )); // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 
@@ -1078,21 +1158,21 @@ var defaultProps$5 = {
 var CustomFormDetailPage = function CustomFormDetailPage(props) {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(DetailPageContainer, {
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        children: [jsxRuntime.jsx(PageTopBar, {
-          color: "neutral",
-          previousPathLabel: props.previousPathLabel,
-          onClick: props.onPreviousPathClick
-        }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-          title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
-          subtitle: props.subtitle,
-          titleSize: "big"
-        }), !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+    children: [jsxRuntime.jsxs(DetailPageContainer, {
+      children: [jsxRuntime.jsx(PageTopBar, {
+        color: "neutral",
+        previousPathLabel: props.previousPathLabel,
+        onClick: props.onPreviousPathClick
+      }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), !props.hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+        children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
-        })]
-      })
+        })
+      })]
     }), jsxRuntime.jsx(ContentWrapper, {
       children: props.children
     })]
@@ -1180,27 +1260,25 @@ var defaultProps$3 = {
 var TabularDetailPage = function TabularDetailPage(props) {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(TabularPageContainer, {
+    children: [jsxRuntime.jsxs(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
-            })
+      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
     })]
@@ -1222,20 +1300,20 @@ 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-f35456c1.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./public-page-layout-bb45c637.cjs.prod.js'
   /* webpackChunkName: "public-page-layout" */
   ); });
 });
 
 var MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
-} )("padding:", designSystem.customProperties.spacingM, ";" + ("" ));
+} )("padding:", designTokens.paddingForMainPageHeader, ";" + ("" ));
 var Divider = /*#__PURE__*/_styled__default["default"]("hr", {
   target: "ev8m2jf1"
-} )("background-color:", designSystem.customProperties.colorNeutral60, ";height:1px;border:0;" + ("" ));
+} )("background-color:", designTokens.backgroundColorForMainPageDivider, ";height:1px;border:0;" + ("" ));
 var MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
-} )("flex:1;flex-basis:0;overflow:auto;padding:", designSystem.customProperties.spacingM, ";" + ("" ));
+} )("flex:1;flex-basis:0;overflow:auto;padding:", designTokens.paddingForPageContent, ";" + ("" ));
 
 var defaultProps$2 = {
   hideControls: false
@@ -1337,25 +1415,23 @@ var defaultProps = {
 var TabularMainPage = function TabularMainPage(props) {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(TabularPageContainer, {
+    children: [jsxRuntime.jsxs(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
-            })
+      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, ";" + ("" ), "" ),
+      css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
       children: props.children
     })]
   });
@@ -1716,5 +1792,7 @@ exports.TabHeader = TabHeader;
 exports.TabularDetailPage = TabularDetailPage;
 exports.TabularMainPage = TabularMainPage;
 exports.TabularModalPage = TabularModalPage;
+exports.designTokens = designTokens;
+exports.themesOverrides = themesOverrides;
 exports.useModalState = useModalState;
 exports.version = version;