@commercetools-frontend/application-components 22.17.0 → 22.17.2

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

@@ -18,7 +18,6 @@ var Text = require('@commercetools-uikit/text');
 var utils = require('@commercetools-uikit/utils');
 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');
@@ -38,6 +37,7 @@ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instan
 var sentry = require('@commercetools-frontend/sentry');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var Constraints = require('@commercetools-uikit/constraints');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
@@ -62,7 +62,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 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);
@@ -75,6 +74,7 @@ var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
@@ -85,77 +85,14 @@ var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthori
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.17.0";
-
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10;
-const appKitSpacing55 = '40px';
-// TODO: move to uikit?
-const colorAccent10 = 'hsl(195, 35.2941176471%, 10%)';
-const colorAccent20 = 'hsl(195, 35.2941176471%, 20%)';
-const colorAccent90 = 'hsl(195, 35.2941176471%, 90%)';
-const newShadow1 = '0px 2px 5px 0px rgba(0, 0, 0, 0.15)';
-const themesOverrides = {
-  default: {
-    colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral90,
-    colorForNavbarIcon: colorAccent90,
-    colorForNavbarIconWhenActive: designSystem.designTokens.colorSurface,
-    colorForNavbarLink: designSystem.designTokens.colorNeutral,
-    colorForNavbarLinkWhenActive: designSystem.designTokens.colorSurface,
-    colorForNavbarLinkWhenHovered: designSystem.designTokens.colorSurface,
-    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral90,
-    backgroundColorForNavbar: colorAccent10,
-    backgroundColorForNavbarWhenActive: colorAccent20,
-    backgroundColorForNavbarWhenHovered: colorAccent20,
-    backgroundColorForPageHeader: designSystem.designTokens.colorSurface,
-    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorSurface,
-    backgroundColorForUserMenuItemWhenHovered: designSystem.designTokens.colorNeutral95,
-    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
-    borderColorForDialogDivider: designSystem.designTokens.colorNeutral90,
-    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral90,
-    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorSurface,
-    fontSizeForNavbarLink: designSystem.designTokens.fontSize20,
-    fontWeightForNavbarLink: designSystem.designTokens.fontWeight400,
-    fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight600,
-    fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight600,
-    heightForTab: '2px',
-    lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
-    marginBottomForPageTopBar: designSystem.designTokens.spacing40,
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(appKitSpacing55),
-    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing50, " 0"),
-    marginForModalPageHeader: "0 ".concat(appKitSpacing55),
-    marginForUserMenuItem: "".concat(designSystem.designTokens.spacing10, " 0"),
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing50,
-    marginRightForAppbar: appKitSpacing55,
-    marginTopForDialogFooter: designSystem.designTokens.spacing50,
-    marginForPageContent: _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context2, appKitSpacing55),
-    marginForModalsPageContent: _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, appKitSpacing55),
-    marginTopForPageSubtitle: designSystem.designTokens.spacing20,
-    marginTopForTabControls: designSystem.designTokens.spacing40,
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context5, appKitSpacing55, " ")).call(_context4, designSystem.designTokens.spacing40),
-    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context6, designSystem.designTokens.spacing30),
-    paddingForDialogContent: "".concat(designSystem.designTokens.spacing40, " 0 0"),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context7, appKitSpacing55, " 0"),
-    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context8, designSystem.designTokens.spacing40),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context9, appKitSpacing55, " 0"),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context10, appKitSpacing55, " 0"),
-    paddingLeftForTabAsFirst: designSystem.designTokens.spacing30,
-    shadowForAppbar: newShadow1,
-    shadowForNavbar: 'none',
-    widthForDialogAsMedium: designSystem.designTokens.constraint9,
-    widthForDialogAsLarge: designSystem.designTokens.constraint13,
-    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint16, " / 2)")
-  }
-};
-const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
-  includeDefaultValue: false
-});
+var version = "22.17.2";
 
-const getBottomBorderStyles = background => /*#__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, ";}" + ("" ), "" );
+const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
 var _ref$7 = {
   name: "1u0tiat",
   styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
 } ;
-const getLinkStyles = (isActive, isDisabled) => [/*#__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;}}" + ("" ), "" )];
+const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";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:", designSystem.designTokens.spacing30, ";}", 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$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -211,13 +148,12 @@ TabHeader.defaultProps = defaultProps$j;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
-    case 'm':
-      return designTokens.widthForDialogAsMedium;
     case 7:
       return designSystem.designTokens.constraint7;
     case 8:
       return designSystem.designTokens.constraint8;
     case 9:
+    case 'm':
       return designSystem.designTokens.constraint9;
     case 10:
       return designSystem.designTokens.constraint10;
@@ -226,11 +162,10 @@ const getConstraintForGridStyle = size => {
     case 12:
       return designSystem.designTokens.constraint12;
     case 13:
+    case 'l':
       return designSystem.designTokens.constraint13;
     case 16:
       return designSystem.designTokens.constraint16;
-    case 'l':
-      return designTokens.widthForDialogAsLarge;
     case 'scale':
       return designSystem.designTokens.constraintScale;
     default:
@@ -307,7 +242,7 @@ const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
         // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
         // 2. 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;padding:", designTokens.paddingForDialogContainer, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+          css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
           children: jsxRuntime.jsx("div", {
             css: _ref$6,
             children: props.children
@@ -324,7 +259,7 @@ DialogContainer.defaultProps = defaultProps$i;
 // The overflow should be "auto", to make the container scrollable
 const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eo6zkz80"
-} )("border-top:1px solid ", designTokens.borderColorForDialogDivider, ";padding:", designTokens.paddingForDialogContent, ";flex:1;overflow:auto;" + ("" ));
+} )("border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:", designSystem.designTokens.spacing40, " 0 0;flex:1;overflow:auto;" + ("" ));
 
 const Title$1 = props => {
   return jsxRuntime.jsx(Text__default["default"].Headline, {
@@ -385,7 +320,7 @@ const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : i
 const DialogFooter = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    css: /*#__PURE__*/react.css("margin-top:", designTokens.marginTopForDialogFooter, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("margin-top:", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       scale: "m",
       alignItems: "center",
@@ -512,7 +447,7 @@ var _ref$5 = {
 const ModalPageTopBar = props => {
   const intl = reactIntl.useIntl();
   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;}" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
       css: _ref$5,
       children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
@@ -959,7 +894,7 @@ const defaultProps$c = {
 };
 const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
-} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
+} )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
 const Title = props => {
   switch (props.titleSize) {
     case 'big':
@@ -1028,9 +963,9 @@ PageHeaderTitle.defaultProps = defaultProps$c;
 
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing55, ";padding:", designSystem.designTokens.spacing40, " 0 ", designSystem.designTokens.spacing40, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
+      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designSystem.designTokens.spacing50, ";}" + ("" ), "" ),
       children: [jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title,
         titleSize: "big",
@@ -1046,12 +981,30 @@ const PageHeader = props => {
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
+var _context, _context2, _context3, _context4, _context5;
+
+// We keep these tokens as they are related to page layout components which should have
+// a slightly different layout (margins/paddings) when used within a Custom View panel.
+// https://github.com/commercetools/merchant-center-application-kit/pull/3353
+const themesOverrides = {
+  default: {
+    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
+    marginForPageContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing50, " ")).call(_context, designSystem.designTokens.spacing55),
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, designSystem.designTokens.spacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context4, designSystem.designTokens.spacing55, " 0"),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context5, designSystem.designTokens.spacing55, " 0")
+  }
+};
+const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
+  includeDefaultValue: false
+});
+
 const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn02"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 const ModalContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForModalsPageContent, ";" + ("" ));
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designSystem.designTokens.spacing50, " ", designSystem.designTokens.spacing55, ";" + ("" ));
 const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn00"
 } )({
@@ -1233,7 +1186,7 @@ const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre2"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 const ControlsContainter = props => jsxRuntime.jsxs("div", {
-  css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designTokens.marginTopForTabControls, ";" + ("" ), "" ),
+  css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designSystem.designTokens.spacing40, ";" + ("" ), "" ),
   children: [jsxRuntime.jsx(TabControls, {
     role: "tablist",
     children: props.tabControls
@@ -1242,7 +1195,7 @@ const ControlsContainter = props => jsxRuntime.jsxs("div", {
 ControlsContainter.propTypes = {};
 ControlsContainter.displayName = 'ControlsContainter';
 const TabularPageContainer = props => jsxRuntime.jsx("div", {
-  css: /*#__PURE__*/react.css("background-color:", props.color === 'surface' ? designSystem.designTokens.colorSurface : designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:", designTokens.borderBottomForTabularPageHeader, ";" + ("" ), "" ),
+  css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
   children: props.children
 });
 TabularPageContainer.propTypes = {};
@@ -1320,7 +1273,7 @@ const defaultProps$8 = {
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
-    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, ";" + ("" ), "" ),
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designSystem.designTokens.spacing40, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
       tone: "primary",
       label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -1338,7 +1291,7 @@ PageTopBar.defaultProps = defaultProps$8;
 
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
-} )("background-color:", designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designTokens.colorForPageHeaderBottomBorder, " solid;" + ("" ));
+} )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designSystem.designTokens.colorNeutral90, " solid;" + ("" ));
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
@@ -1499,14 +1452,14 @@ 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;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-162d9666.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-6cc4616e.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
 } )("padding:", designTokens.paddingForMainPageHeader, ";" + ("" ));
 const Divider = /*#__PURE__*/_styled__default["default"]("hr", {
   target: "ev8m2jf1"
-} )("background-color:", designTokens.backgroundColorForMainPageDivider, ";height:1px;border:0;" + ("" ));
+} )("background-color:", designSystem.designTokens.colorNeutral90, ";height:1px;border:0;" + ("" ));
 
 // NOTE: do not change "margin" to "padding" as this breaks sticky DataTable styles
 const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
@@ -1646,7 +1599,7 @@ const TabularMainPage = props => {
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsxRuntime.jsx(ContentWrapper$1, {
-      css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
+      css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
       children: props.children
     })]
   });
@@ -1892,7 +1845,7 @@ const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 } )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y40"
-} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ));
+} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
 function Drawer(props) {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs(ModalPage, {