@commercetools-frontend/application-components 22.2.1 → 22.3.1

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

@@ -14,10 +14,10 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var designSystem = require('@commercetools-uikit/design-system');
 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');
@@ -38,8 +38,8 @@ var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
-var PageNotFoundIllustration = require('@commercetools-frontend/assets/images/page-application-disabled.svg');
-var FailedAuthorizationIllustration = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
+var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
+var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
@@ -69,71 +69,23 @@ var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
-var PageNotFoundIllustration__default = /*#__PURE__*/_interopDefault(PageNotFoundIllustration);
-var FailedAuthorizationIllustration__default = /*#__PURE__*/_interopDefault(FailedAuthorizationIllustration);
+var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
+var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.2.1";
-
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
-const appKitSpacing55 = '40px'; // TODO: move to uikit?
+var version = "22.3.1";
 
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
+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.colorNeutral,
-    colorForNavbarIcon: designSystem.designTokens.colorSurface,
-    colorForNavbarIconWhenActive: designSystem.designTokens.colorPrimary,
-    colorForNavbarLink: designSystem.designTokens.colorSurface,
-    colorForNavbarLinkWhenActive: designSystem.designTokens.colorPrimary,
-    colorForNavbarLinkWhenHovered: designSystem.designTokens.colorPrimary,
-    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral60,
-    backgroundColorForNavbar: designSystem.designTokens.colorAccent,
-    backgroundColorForNavbarWhenActive: designSystem.designTokens.colorAccent30,
-    backgroundColorForNavbarWhenHovered: designSystem.designTokens.colorAccent30,
-    backgroundColorForPageHeader: designSystem.designTokens.colorNeutral95,
-    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorNeutral95,
-    backgroundColorForUserMenuItemWhenHovered: designSystem.designTokens.colorNeutral90,
-    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral),
-    borderColorForDialogDivider: designSystem.designTokens.colorNeutral,
-    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral60,
-    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorNeutral,
-    fontSizeForNavbarLink: designSystem.designTokens.fontSize40,
-    fontWeightForNavbarLink: designSystem.designTokens.fontWeight500,
-    fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight500,
-    fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight500,
-    heightForTab: '4px',
-    lineHeightForNavbarLink: designSystem.designTokens.lineHeight50,
-    marginBottomForPageTopBar: designSystem.designTokens.spacing20,
-    marginForDialogContainerContents: "".concat(designSystem.designTokens.spacing30, " 0"),
-    marginForModalPageHeader: "0 ".concat(designSystem.designTokens.spacing30),
-    marginForUserMenuItem: '0',
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing30,
-    marginRightForAppbar: 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',
-    shadowForAppbar: designSystem.designTokens.shadow1,
-    shadowForNavbar: '6px 0 10px rgba(0, 0, 0, 0.16)',
-    widthForDialogAsMedium: designSystem.designTokens.constraint7,
-    widthForDialogAsLarge: designSystem.designTokens.constraint10,
-    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint15, " / 2)")
-  },
-  test: {
     colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral90,
     colorForNavbarIcon: colorAccent90,
     colorForNavbarIconWhenActive: designSystem.designTokens.colorSurface,
@@ -158,7 +110,7 @@ const themesOverrides = {
     heightForTab: '2px',
     lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
     marginBottomForPageTopBar: designSystem.designTokens.spacing40,
-    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context4, designSystem.designTokens.spacing50, " 0"),
+    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,
@@ -166,14 +118,14 @@ const themesOverrides = {
     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),
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, appKitSpacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
+    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, 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"),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context5, appKitSpacing55, " 0"),
+    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context6, designSystem.designTokens.spacing40),
+    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context7, appKitSpacing55, " 0"),
+    paddingForPageContent: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context8, appKitSpacing55),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context9, appKitSpacing55, " 0"),
     paddingLeftForTabAsFirst: designSystem.designTokens.spacing30,
     shadowForAppbar: newShadow1,
     shadowForNavbar: 'none',
@@ -187,50 +139,30 @@ const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverr
 });
 
 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, ";}" + ("" ), "" );
-
 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;}}" + ("" ), "" )];
 
 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; }
-
 function _objectSpread$6(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$6(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$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
-
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
 };
-
 const getDisabledLinkAtributes = isDisabled => isDisabled ? {
   tabIndex: -1,
   'aria-disabled': true
 } : {};
-
 const TabLabel = _ref => {
   let children = _ref.children;
-
-  const _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
   });
 };
-
 const TabHeader = props => {
   const intl = reactIntl.useIntl();
   const location = reactRouterDom.useLocation();
@@ -242,11 +174,9 @@ const TabHeader = props => {
   }));
   const isDisabled = props.isDisabled;
   let label = props.label;
-
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
-
   warnIfMissingContent(props);
   return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$6(_objectSpread$6({
     role: "tab",
@@ -271,44 +201,36 @@ const getConstraintForGridStyle = size => {
   switch (size) {
     case 'm':
       return designTokens.widthForDialogAsMedium;
-
     case 7:
       return designSystem.designTokens.constraint7;
-
     case 8:
       return designSystem.designTokens.constraint8;
-
     case 9:
       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 16:
+      return designSystem.designTokens.constraint16;
     case 'l':
       return designTokens.widthForDialogAsLarge;
-
     case 'scale':
       return designSystem.designTokens.constraintScale;
-
     default:
       return designSystem.designTokens.constraintScale;
   }
 };
-
 const getModalContentStyles = props => {
   const sizeConstraint = getConstraintForGridStyle(props.size);
-  const 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.
+  const 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.
   const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
@@ -316,18 +238,15 @@ const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;positio
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
 function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const getDefaultParentSelector$1 = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
-
-const getOverlayElement$1 = (props, contentElement) => // Assign the `data-role` to the overlay container, which is used as
+const getOverlayElement$1 = (props, contentElement) =>
+// Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
 jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
-
 const defaultProps$h = {
   // TODO: t-shirt sizes are deprecated but we need to keep using them for
   // backwards compatibility and to help with styling migration
@@ -336,31 +255,25 @@ const defaultProps$h = {
   size: 'l',
   getParentSelector: getDefaultParentSelector$1
 };
-
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
-
 var _ref3$1 = {
   name: "13udsys",
   styles: "height:100%"
 } ;
-
 const sizeStyles = props => {
   if (props.size === 'scale') return _ref3$1;
   return /*#__PURE__*/react.css("" , "" );
 };
-
 var _ref$6 = {
   name: "1daj17f",
   styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
 } ;
-
 var _ref2$3 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
-
 const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
   children: _ref4 => {
     let makeClassName = _ref4.css;
@@ -386,7 +299,8 @@ const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
       }), jsxRuntime.jsx(GridArea, {
         name: "main",
         css: _ref2$3,
-        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
+        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.
         , {
@@ -400,28 +314,16 @@ const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
     });
   }
 });
-
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$h;
 
+// 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;" + ("" ));
 
 const Title$1 = props => {
-  const _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,
@@ -429,7 +331,6 @@ const Title$1 = props => {
     children: props.title
   });
 };
-
 const DialogHeader = props => jsxRuntime.jsx("div", {
   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, {
@@ -446,7 +347,6 @@ const DialogHeader = props => jsxRuntime.jsx("div", {
     })]
   })
 });
-
 DialogHeader.propTypes = {};
 DialogHeader.displayName = 'DialogHeader';
 
@@ -464,7 +364,6 @@ const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
     children: props.children
   })]
 });
-
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
@@ -473,16 +372,13 @@ 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; }
 const defaultProps$g = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
 };
-
 const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
-
 const DialogFooter = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
@@ -503,7 +399,6 @@ const DialogFooter = props => {
     })
   });
 };
-
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
 DialogFooter.defaultProps = defaultProps$g;
@@ -512,7 +407,6 @@ const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
-
 const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
   isOpen: props.isOpen,
   onClose: props.onClose,
@@ -535,19 +429,17 @@ const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
     dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
   })]
 });
-
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$f; // 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;
 
 const defaultProps$e = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
-
 const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
   isOpen: props.isOpen,
   onClose: props.onClose,
@@ -571,36 +463,29 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
     iconLeftSecondaryButton: props.iconLeftSecondaryButton
   })]
 });
-
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$e; // 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;
 
 const defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
-
 const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
 } )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
-
 const Title = props => {
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   switch (props.titleSize) {
     case 'big':
       return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: themedValue('h2', 'h1'),
+        as: "h1",
         title: props.title,
         truncate: props.truncate,
         children: props.title
       });
-
     default:
       return jsxRuntime.jsx(Text__default["default"].Subheadline, {
         as: "h4",
@@ -610,41 +495,32 @@ const Title = props => {
       });
   }
 };
-
 const Subtitle = props => {
-  const _useTheme2 = designSystem.useTheme(),
-        themedValue = _useTheme2.themedValue;
-
   if (!props.subtitle) {
     return null;
   }
-
   if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
     return jsxRuntime.jsx(SubtitleWrapper, {
       children: props.subtitle
     });
   }
-
   return jsxRuntime.jsx(SubtitleWrapper, {
     children: jsxRuntime.jsx(Text__default["default"].Body, {
       title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
       truncate: props.truncate,
-      tone: themedValue(undefined, 'secondary'),
+      tone: "secondary",
       children: props.subtitle
     })
   });
 };
-
 Subtitle.propTypes = {};
 Subtitle.defaultProps = {
   truncate: false
 };
-
 var _ref$5 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
-
 const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
   css: _ref$5,
   children: [jsxRuntime.jsx(Title, {
@@ -656,26 +532,21 @@ const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
     truncate: props.truncate
   })]
 });
-
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
 PageHeaderTitle.defaultProps = defaultProps$d;
 
 const PageHeader = props => {
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   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: themedValue('small', 'big'),
+      titleSize: "big",
       subtitle: props.subtitle,
       truncate: true
     }), props.children]
   });
 };
-
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
@@ -700,39 +571,32 @@ const messages$2 = reactIntl.defineMessages({
   }
 });
 
+// Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
   styles: "display:flex;align-items:center;justify-content:center;&::after{content:'';position:absolute;height:35px;width:48px;top:0;right:0;}"
 } ;
-
-// Component to have a larger clickable surface
 const LargeIconWrapper = props => jsxRuntime.jsx("span", {
   css: _ref2$2,
   children: /*#__PURE__*/react$1.cloneElement(props.children, {
     size: props.size
   })
-}); // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+});
+
+// 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.
-
-
 LargeIconWrapper.propTypes = {};
 const defaultProps$c = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
-
 var _ref$4 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
-
 const ModalPageTopBar = props => {
   const intl = reactIntl.useIntl();
-
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   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", {
@@ -762,11 +626,10 @@ const ModalPageTopBar = props => {
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
       }),
-      size: themedValue('medium', 'big')
+      size: "big"
     })]
   });
 };
-
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
 ModalPageTopBar.defaultProps = defaultProps$c;
@@ -775,62 +638,50 @@ const TRANSITION_DURATION = 200;
 const getContainerStyles = _props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:100%;display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
 const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:0;transition:opacity ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
-
 var _ref4 = {
   name: "1ffv7m4",
   styles: "transform:translate3d(0, 0, 0)!important"
 } ;
-
 const getAfterOpenContainerAnimation = () => _ref4;
-
 var _ref3 = {
   name: "1d9ftqx",
   styles: "opacity:1!important"
 } ;
-
 const getAfterOpenOverlayAnimation = () => _ref3;
-
 var _ref2$1 = {
   name: "110wxen",
   styles: "transform:translate3d(30px, 0, 0)!important"
 } ;
-
 const getBeforeCloseContainerAnimation = () => _ref2$1;
-
 var _ref$3 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
-
 const getBeforeCloseOverlayAnimation = () => _ref$3;
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
-
-const getOverlayElement = (props, contentElement) => // Assign the `data-role` to the overlay container, which is used as
+const getOverlayElement = (props, contentElement) =>
+// Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
 jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
-})); // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+}));
+
+// 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.
-
-
 const defaultProps$b = {
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
 };
-
 const ModalPage = props => {
   const _useState = react$1.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        forceClose = _useState2[0],
-        setForceClose = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    forceClose = _useState2[0],
+    setForceClose = _useState2[1];
   const closingTimer = react$1.useRef();
   react$1.useEffect(() => {
     if (props.isOpen === true) setForceClose(false);
@@ -852,13 +703,11 @@ const ModalPage = props => {
       }, TRANSITION_DURATION);
       return;
     }
-
     onClose && onClose(event);
   }, [onClose, props.shouldDelayOnClose]);
   return jsxRuntime.jsx(react.ClassNames, {
     children: _ref => {
       var _props$afterOpenStyle;
-
       let makeClassName = _ref.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: forceClose === true ? false : props.isOpen,
@@ -878,7 +727,8 @@ const ModalPage = props => {
         },
         contentLabel: props.title,
         parentSelector: props.getParentSelector,
-        ariaHideApp: false // Adjust this value if the (beforeClose) animation duration is changed
+        ariaHideApp: false
+        // Adjust this value if the (beforeClose) animation duration is changed
         ,
         closeTimeoutMS: TRANSITION_DURATION,
         style: {
@@ -897,7 +747,6 @@ const ModalPage = props => {
     }
   });
 };
-
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
 ModalPage.defaultProps = defaultProps$b;
@@ -919,24 +768,20 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
     children: props.children
   })]
 });
-
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
 function ownKeys$2(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$2(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$2(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$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const primaryDefaultProps = {
   label: i18n.sharedMessages.confirm,
   isDisabled: false,
   dataAttributes: {}
 };
-
 const useFormattedLabel = label => {
   const intl = reactIntl.useIntl();
   return typeof label === 'string' ? label : intl.formatMessage(label);
 };
-
 const FormPrimaryButton = props => {
   const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$2({
@@ -945,7 +790,6 @@ const FormPrimaryButton = props => {
     isDisabled: props.isDisabled
   }, filterDataAttributes(props.dataAttributes)));
 };
-
 FormPrimaryButton.propTypes = {};
 FormPrimaryButton.displayName = 'FormPrimaryButton';
 FormPrimaryButton.defaultProps = primaryDefaultProps;
@@ -954,7 +798,6 @@ const secondaryDefaultProps = {
   isDisabled: false,
   dataAttributes: {}
 };
-
 const FormSecondaryButton = props => {
   const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$2({
@@ -964,7 +807,6 @@ const FormSecondaryButton = props => {
     iconLeft: props.iconLeft
   }, filterDataAttributes(props.dataAttributes)));
 };
-
 FormSecondaryButton.propTypes = {};
 FormSecondaryButton.displayName = 'FormSecondaryButton';
 FormSecondaryButton.defaultProps = secondaryDefaultProps;
@@ -973,7 +815,6 @@ const deleteDefaultProps = {
   isDisabled: false,
   dataAttributes: {}
 };
-
 const FormDeleteButton = props => {
   const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$2({
@@ -983,7 +824,6 @@ const FormDeleteButton = props => {
     isDisabled: props.isDisabled
   }, filterDataAttributes(props.dataAttributes)));
 };
-
 FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
@@ -1009,22 +849,20 @@ const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
     children: props.children
   })]
 });
-
 CustomFormModalPage.propTypes = {};
-CustomFormModalPage.displayName = 'CustomFormModalPage'; // Static export of pre-configured form control buttons to easily re-use
+CustomFormModalPage.displayName = 'CustomFormModalPage';
+// Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
-
 CustomFormModalPage.FormPrimaryButton = FormPrimaryButton;
 CustomFormModalPage.FormSecondaryButton = FormSecondaryButton;
-CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+CustomFormModalPage.FormDeleteButton = FormDeleteButton;
+// 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.
-
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$a = {
   hideControls: false
 };
-
 const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
   title: props.title,
   subtitle: props.subtitle,
@@ -1053,18 +891,16 @@ const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
   }),
   children: props.children
 });
-
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$a; // 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;
 
 const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre1"
 } )("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, ";" + ("" ), "" ),
   children: [jsxRuntime.jsx(TabControls, {
@@ -1072,22 +908,18 @@ const ControlsContainter = props => jsxRuntime.jsxs("div", {
     children: props.tabControls
   }), props.formControls]
 });
-
 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, ";" + ("" ), "" ),
   children: props.children
 });
-
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
 const defaultProps$9 = {
   color: 'surface'
 };
 TabularPageContainer.defaultProps = defaultProps$9;
-
 const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre0"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
@@ -1095,11 +927,7 @@ const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
 const defaultProps$8 = {
   hideControls: false
 };
-
 const TabularModalPage = props => {
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -1115,7 +943,7 @@ const TabularModalPage = props => {
       color: "neutral",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title,
-        titleSize: themedValue('small', 'big'),
+        titleSize: "big",
         subtitle: props.subtitle,
         truncate: true
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1132,24 +960,22 @@ const TabularModalPage = props => {
     })]
   });
 };
-
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$8; // 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;
 TabularModalPage.FormSecondaryButton = FormSecondaryButton;
-TabularModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+TabularModalPage.FormDeleteButton = FormDeleteButton;
+// 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.
-
 TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$7 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
-
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
@@ -1165,7 +991,6 @@ const PageTopBar = props => {
     })
   });
 };
-
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
 PageTopBar.defaultProps = defaultProps$7;
@@ -1173,18 +998,16 @@ PageTopBar.defaultProps = defaultProps$7;
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
 } )("background-color:", designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designTokens.colorForPageHeaderBottomBorder, " solid;" + ("" ));
-
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
-} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" )); // 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.
-
-
 const defaultProps$6 = {
   hideControls: false
 };
-
 const CustomFormDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1208,26 +1031,24 @@ const CustomFormDetailPage = props => {
     })]
   });
 };
-
 CustomFormDetailPage.propTypes = {};
 CustomFormDetailPage.displayName = 'CustomFormDetailPage';
-CustomFormDetailPage.defaultProps = defaultProps$6; // 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
+CustomFormDetailPage.PageHeaderTitle = PageHeaderTitle;
+// Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
-
 CustomFormDetailPage.FormPrimaryButton = FormPrimaryButton;
 CustomFormDetailPage.FormSecondaryButton = FormSecondaryButton;
-CustomFormDetailPage.FormDeleteButton = FormDeleteButton; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+CustomFormDetailPage.FormDeleteButton = FormDeleteButton;
+// 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.
-
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
 const defaultProps$5 = {
   hideControls: false
 };
-
 const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
   title: props.title,
   subtitle: props.subtitle,
@@ -1251,17 +1072,16 @@ const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
   }),
   children: props.children
 });
-
 FormDetailPage.propTypes = {};
 FormDetailPage.displayName = 'FormDetailPage';
-FormDetailPage.defaultProps = defaultProps$5; // 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
-
-FormDetailPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDetailPage.PageHeaderTitle = PageHeaderTitle;
+// 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.
-
 FormDetailPage.Intl = i18n.sharedMessages;
 
 const InfoDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
@@ -1272,17 +1092,15 @@ const InfoDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
   onPreviousPathClick: props.onPreviousPathClick,
   children: props.children
 });
-
 InfoDetailPage.propTypes = {};
-InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configured page header title component to easily
+InfoDetailPage.displayName = 'InfoDetailPage';
+// Static export of pre-configured page header title component to easily
 // use as part of a custom title row
-
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
 const defaultProps$4 = {
   hideControls: false
 };
-
 const TabularDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1310,24 +1128,21 @@ const TabularDetailPage = props => {
     })]
   });
 };
-
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$4; // 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;
 TabularDetailPage.FormSecondaryButton = FormSecondaryButton;
-TabularDetailPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
+TabularDetailPage.FormDeleteButton = FormDeleteButton;
+// Static export of pre-configured page header title component to easily
 // use as part of a custom title row
-
-TabularDetailPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
-
+TabularDetailPage.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-7f46c618.cjs.prod.js'
-/* webpackChunkName: "public-page-layout" */
-); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-6cbeff9f.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1343,7 +1158,6 @@ const defaultProps$3 = {
   hideControls: false,
   hideDivider: false
 };
-
 const CustomFormMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1364,26 +1178,27 @@ const CustomFormMainPage = props => {
     })]
   });
 };
-
 CustomFormMainPage.propTypes = {};
 CustomFormMainPage.displayName = 'CustomFormMainPage';
-CustomFormMainPage.defaultProps = defaultProps$3; // 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;
 
-CustomFormMainPage.PageHeaderTitle = PageHeaderTitle; // Static export of pre-configured form control buttons to easily re-use
+// Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
-
 CustomFormMainPage.FormPrimaryButton = FormPrimaryButton;
 CustomFormMainPage.FormSecondaryButton = FormSecondaryButton;
-CustomFormMainPage.FormDeleteButton = FormDeleteButton; // 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.
+CustomFormMainPage.FormDeleteButton = FormDeleteButton;
 
+// 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.
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
 const defaultProps$2 = {
   hideControls: false
 };
-
 const FormMainPage = props => {
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
@@ -1407,40 +1222,36 @@ const FormMainPage = props => {
     children: props.children
   });
 };
-
 FormMainPage.propTypes = {};
 FormMainPage.displayName = 'FormMainPage';
-FormMainPage.defaultProps = defaultProps$2; // 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;
 
-FormMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// 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.
-
 FormMainPage.Intl = i18n.sharedMessages;
 
 const InfoMainPage = props => {
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
-    hideDivider: themedValue(false, true),
+    hideDivider: true,
     children: props.children
   });
 };
-
 InfoMainPage.propTypes = {};
-InfoMainPage.displayName = 'InfoMainPage'; // Static export of pre-configured page header title component to easily
+InfoMainPage.displayName = 'InfoMainPage';
+// Static export of pre-configured page header title component to easily
 // use as part of a custom title row
-
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
 const defaultProps$1 = {
   hideControls: false
 };
-
 const TabularMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1465,31 +1276,28 @@ const TabularMainPage = props => {
     })]
   });
 };
-
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$1; // 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;
 TabularMainPage.FormSecondaryButton = FormSecondaryButton;
-TabularMainPage.FormDeleteButton = FormDeleteButton; // Static export of pre-configured page header title component to easily
+TabularMainPage.FormDeleteButton = FormDeleteButton;
+// Static export of pre-configured page header title component to easily
 // use as part of a custom title row
-
-TabularMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
-
+TabularMainPage.PageHeaderTitle = PageHeaderTitle;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularMainPage.Intl = i18n.sharedMessages;
 
 var _ref$2 = {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } ;
-
 var _ref2 = {
   name: "10lgefo",
   styles: "display:grid;align-items:center;justify-content:center;height:100%;white-space:pre-wrap;text-align:center"
 } ;
-
 const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
   css: _ref2,
   children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
@@ -1498,6 +1306,9 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
       scale: "m",
       children: [jsxRuntime.jsx("div", {
         children: jsxRuntime.jsx("img", {
+          style: {
+            height: designSystem.designTokens.constraint7
+          },
           src: props.imageSrc,
           alt: props.label
         })
@@ -1515,7 +1326,6 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
     })
   })
 });
-
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
@@ -1531,20 +1341,17 @@ var messages$1 = reactIntl.defineMessages({
 });
 
 function ownKeys$1(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$1(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$1(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$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const getLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
   rel: "noopener noreferrer",
   children: msg
 });
-
 const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: PageNotFoundIllustration__default["default"],
+    imageSrc: PageNotFoundSVG__default["default"],
     title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
     label: intl.formatMessage(messages$1.title),
     paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph1), {}, {
@@ -1554,7 +1361,6 @@ const PageNotFound = () => {
     }))
   });
 };
-
 PageNotFound.displayName = 'PageNotFound';
 
 var messages = reactIntl.defineMessages({
@@ -1573,20 +1379,17 @@ var messages = reactIntl.defineMessages({
 });
 
 function ownKeys(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(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(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
   rel: "noopener noreferrer",
   children: msg
 });
-
 const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: FailedAuthorizationIllustration__default["default"],
+    imageSrc: FailedAuthorizationSVG__default["default"],
     title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.title)),
     label: intl.formatMessage(messages.title),
     paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.paragraph1)),
@@ -1605,28 +1408,19 @@ const Content$1 = /*#__PURE__*/_styled__default["default"]("section", {
   name: "1sxg93g",
   styles: "grid-area:content"
 } );
-
 const Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1jvhtw80"
 } )({
   name: "1vpm32e",
   styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(400px, 742px) 1fr;width:100%"
 } );
-
 function PageContentNarrow(props) {
-  const _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 = {};
 
 const Content = /*#__PURE__*/_styled__default["default"]("section", {
@@ -1635,53 +1429,39 @@ const Content = /*#__PURE__*/_styled__default["default"]("section", {
   switch (props.columns) {
     case '1/1':
       return '1fr 1fr';
-
     case '2/1':
       return '2fr 1fr';
-
     default:
       return '1fr';
   }
 }, ";gap:", props => props.gapSize === '10' ? designSystem.designTokens.spacing50 : designSystem.designTokens.spacing70, ";width:100%;" + ("" ));
-
 const LeftContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f3"
 } )({
   name: "1ibwnup",
   styles: "grid-area:left-column"
 } );
-
 const RightContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f2"
 } )({
   name: "hjfyry",
   styles: "grid-area:right-column"
 } );
-
 const RightColumnContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f1"
 } )("top:0;position:", props => props.columns === '2/1' ? 'sticky' : 'static', ";" + ("" ));
-
 const 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) {
-  const _useTheme = designSystem.useTheme(props.themeParentSelector),
-        isNewTheme = _useTheme.isNewTheme;
-
   const _Children$toArray = react$1.Children.toArray(props.children),
-        _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
-        leftChild = _Children$toArray2[0],
-        rightChild = _Children$toArray2[1];
-
+    _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
+    leftChild = _Children$toArray2[0],
+    rightChild = _Children$toArray2[1];
   utils.useWarning(props.columns !== '1' || !Boolean(rightChild), 'PageContentWide: This component only renders its first children when using a single column but you provided more that one.');
-  if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.children
-  });
   return jsxRuntime.jsx(Container, {
     children: jsxRuntime.jsx(Content, {
       columns: props.columns,
@@ -1701,7 +1481,6 @@ function PageContentWide(props) {
     })
   });
 }
-
 PageContentWide.propTypes = {};
 const defaultProps = {
   columns: '1',
@@ -1713,7 +1492,6 @@ var _ref$1 = {
   name: "1d3w5wq",
   styles: "width:100%"
 } ;
-
 function PageContentFull(props) {
   return jsxRuntime.jsx("div", {
     css: _ref$1,
@@ -1722,21 +1500,18 @@ function PageContentFull(props) {
     })
   });
 }
-
 PageContentFull.propTypes = {};
 
 // The width of each indentation level.
 const indentationSize = '48px';
-
 const useObserverElementDimensions = element => {
   const _useState = react$1.useState({
-    height: 0,
-    width: 0
-  }),
-        _useState2 = _slicedToArray(_useState, 2),
-        dimensions = _useState2[0],
-        setDimensions = _useState2[1];
-
+      height: 0,
+      width: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
   useResizeObserver__default["default"](element, entry => {
     setDimensions({
       height: entry.contentRect.height,
@@ -1744,17 +1519,15 @@ const useObserverElementDimensions = element => {
     });
   });
   return dimensions;
-}; // All modal components expect to be rendered inside this container.
-
+};
 
+// All modal components expect to be rendered inside this container.
 var _ref = {
   name: "qk9kof",
   styles: "display:flex;height:1px;margin-top:-1px"
 } ;
-
 const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _props$baseModalZInde, _current, _current2;
-
   // Initialize props with default values.
   // NOTE: using `defaultProps` with `forwardRef` results in the type declarations
   // to ignore the `defaultProps`. Therefore, the default props are typed
@@ -1768,54 +1541,48 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const portalsContainerRef = react$1.useRef(null);
   const globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
   const pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
-
   const _useState3 = react$1.useState([]),
-        _useState4 = _slicedToArray(_useState3, 2),
-        stackingLayers = _useState4[0],
-        setStackingLayers = _useState4[1]; // The mutation observer gets triggered every time a child node gets added or
+    _useState4 = _slicedToArray(_useState3, 2),
+    stackingLayers = _useState4[0],
+    setStackingLayers = _useState4[1];
+  // The mutation observer gets triggered every time a child node gets added or
   // removed from the portals container.
   // The stacking layers are then re-calculated.
-
-
   hooks.useMutationObserver(portalsContainerRef, mutationList => {
     var _context;
-
     // We expect only a single element in the mutation list as we configured the
     // observer to only listen to `childList` changes.
     const _mutationList = _slicedToArray(mutationList, 1),
-          mutationEvent = _mutationList[0];
-
+      mutationEvent = _mutationList[0];
     let indentationLevel = 0;
     const nextStackingLevels = [];
-
     _forEachInstanceProperty__default["default"](_context = mutationEvent.target.childNodes).call(_context, (node, index) => {
       if (node instanceof HTMLElement) {
         const stackingLevel = index + 1;
         node.dataset.level = String(stackingLevel);
         const overlayNode = node.firstChild;
-
         if (overlayNode instanceof HTMLElement) {
           if (overlayNode.dataset.role === 'modal-overlay') {
             indentationLevel += 1;
           }
         }
-
         nextStackingLevels.push({
           stackingLevel,
           indentationLevel
         });
       }
     });
-
     setStackingLayers(nextStackingLevels);
   }, {
     // Only subscribe to changes to the child nodes of the portals container.
     childList: true
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(react.Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    children: [jsxRuntime.jsx(react.Global
+    // Apply some global styles, based on the `.ReactModal__Body--open` class.
     , {
-      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + ("" ), "" ), // Apply styles for stacking layers.
+      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + ("" ), "" ),
+      // Apply styles for stacking layers.
       ..._mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
       /**
        * Every "overlay" container gets assigned a sequential `z-index` level.
@@ -1825,7 +1592,8 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
       stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (", indentationSize, " * ", stackingLayer.indentationLevel, ")\n                  );}" + ("" ), "" )), "" ]
     }), jsxRuntime.jsx("div", {
       id: constants.PORTALS_CONTAINER_ID,
-      ref: portalsContainerRef // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ref: portalsContainerRef
+      // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
       ,
       css: _ref
     })]
@@ -1835,12 +1603,10 @@ PortalsContainer.displayName = 'PortalsContainer';
 
 const useModalState = function () {
   let isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
   const _useState = react$1.useState(isInitiallyOpen),
-        _useState2 = _slicedToArray(_useState, 2),
-        isModalOpen = _useState2[0],
-        setIsModalOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
   const openModal = react$1.useCallback(() => setIsModalOpen(true), []);
   const closeModal = react$1.useCallback(() => setIsModalOpen(false), []);
   return {