@commercetools-frontend/application-components 21.23.9 → 21.24.0

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

@@ -12,13 +12,13 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
-var reactRouterDom = require('react-router-dom');
 var startCase = require('lodash/startCase');
 var reactIntl = require('react-intl');
-var utils = require('@commercetools-uikit/utils');
+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');
@@ -30,8 +30,8 @@ var icons = require('@commercetools-uikit/icons');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
 var Spacings = require('@commercetools-uikit/spacings');
 var i18n = require('@commercetools-frontend/i18n');
-var SecondaryButton = require('@commercetools-uikit/secondary-button');
 var PrimaryButton = require('@commercetools-uikit/primary-button');
+var SecondaryButton = require('@commercetools-uikit/secondary-button');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
@@ -41,7 +41,6 @@ var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/desert-fox.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
-var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
@@ -68,8 +67,8 @@ var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
-var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
+var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
@@ -87,16 +86,16 @@ var useLatest__default = /*#__PURE__*/_interopDefault(useLatest);
 var rafSchd__default = /*#__PURE__*/_interopDefault(rafSchd);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.23.9";
+var version = "21.24.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
-var appKitSpacing55 = '40px'; // TODO: move to uikit?
+const appKitSpacing55 = '40px'; // TODO: move to uikit?
 
-var colorAccent10 = 'hsl(195, 35.2941176471%, 10%)';
-var colorAccent20 = 'hsl(195, 35.2941176471%, 20%)';
-var colorAccent90 = 'hsl(195, 35.2941176471%, 90%)';
-var newShadow1 = '0px 2px 5px 0px rgba(0, 0, 0, 0.15)';
-var themesOverrides = {
+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,
@@ -194,47 +193,39 @@ var themesOverrides = {
     widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint16, " / 2)")
   }
 };
-var designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
+const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
   includeDefaultValue: false
 });
 
-var getBottomBorderStyles = function getBottomBorderStyles(background) {
-  return /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:", 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:", 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;}}"
 } ;
 
-var getLinkStyles = function getLinkStyles(isActive, isDisabled) {
-  return [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSizeDefault, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designTokens.paddingLeftForTabAsFirst, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
-};
+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; }
 
-var pathWithoutSearch = function pathWithoutSearch(path) {
-  return typeof path === 'string' ? path.split('?')[0] : path.pathname;
-};
+const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 
-var warnIfMissingContent = function warnIfMissingContent(props) {
+const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
 };
 
-var getDisabledLinkAtributes = function getDisabledLinkAtributes(isDisabled) {
-  return isDisabled ? {
-    tabIndex: -1,
-    'aria-disabled': true
-  } : {};
-};
+const getDisabledLinkAtributes = isDisabled => isDisabled ? {
+  tabIndex: -1,
+  'aria-disabled': true
+} : {};
 
-var TabLabel = function TabLabel(_ref) {
-  var children = _ref.children;
+const TabLabel = _ref => {
+  let children = _ref.children;
 
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
 
   if (theme === 'default') {
     return jsxRuntime.jsx(Text__default["default"].Subheadline, {
@@ -251,23 +242,23 @@ var TabLabel = function TabLabel(_ref) {
   });
 };
 
-var TabHeader = function TabHeader(props) {
-  var intl = reactIntl.useIntl();
-  var location = reactRouterDom.useLocation();
-  var isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
+const TabHeader = props => {
+  const intl = reactIntl.useIntl();
+  const location = reactRouterDom.useLocation();
+  const isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
     // strip the search, otherwise the path won't match
     path: pathWithoutSearch(props.to),
     exact: props.exactPathMatch,
     strict: false
   }));
-  var isDisabled = props.isDisabled;
-  var label = props.label;
+  const isDisabled = props.isDisabled;
+  let label = props.label;
 
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
 
-  var dataAttributeProps = _objectSpread$6({
+  const dataAttributeProps = _objectSpread$6({
     'data-track-event': 'click'
   }, label && {
     'data-track-component': startCase__default["default"](label)
@@ -287,13 +278,13 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$i = {
+const defaultProps$i = {
   isDisabled: false,
   exactPathMatch: false
 };
 TabHeader.defaultProps = defaultProps$i;
 
-var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
+const getConstraintForGridStyle = size => {
   switch (size) {
     case 'm':
       return designTokens.widthForDialogAsMedium;
@@ -330,38 +321,31 @@ var getConstraintForGridStyle = function getConstraintForGridStyle(size) {
   }
 };
 
-var getModalContentStyles = function getModalContentStyles(props) {
-  var sizeConstraint = getConstraintForGridStyle(props.size);
-  var gridStyle = props.size === 'scale' ? /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.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"
+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.
 
-  var baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
+  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
-var getOverlayStyles$1 = function getOverlayStyles(props) {
-  return /*#__PURE__*/react.css("display:flex;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;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
-};
+const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;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;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; }
 
-var getDefaultParentSelector$1 = function getDefaultParentSelector() {
-  return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
-};
+const getDefaultParentSelector$1 = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 
-var getOverlayElement$1 = function getOverlayElement(props, contentElement) {
-  return (// 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 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
+}));
 
-var defaultProps$h = {
+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
   // After the migration is done, we should change this default value to 13.
@@ -370,18 +354,16 @@ var defaultProps$h = {
   getParentSelector: getDefaultParentSelector$1
 };
 
-var GridArea = /*#__PURE__*/_styled__default["default"]("div", {
+const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
-} )("grid-area:", function (props) {
-  return props.name;
-}, ";" + ("" ));
+} )("grid-area:", props => props.name, ";" + ("" ));
 
 var _ref3$1 = {
   name: "13udsys",
   styles: "height:100%"
 } ;
 
-var sizeStyles = function sizeStyles(props) {
+const sizeStyles = props => {
   if (props.size === 'scale') return _ref3$1;
   return /*#__PURE__*/react.css("" , "" );
 };
@@ -396,55 +378,57 @@ var _ref2$2 = {
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
 
-var DialogContainer = function DialogContainer(props) {
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref4) {
-      var makeClassName = _ref4.css;
-      return jsxRuntime.jsxs(Modal__default["default"], {
-        isOpen: props.isOpen,
-        onRequestClose: props.onClose,
-        shouldCloseOnOverlayClick: Boolean(props.onClose),
-        shouldCloseOnEsc: Boolean(props.onClose),
-        overlayElement: getOverlayElement$1,
-        overlayClassName: makeClassName(getOverlayStyles$1(props)),
-        className: makeClassName(getModalContentStyles(props)),
-        contentLabel: props.title,
-        parentSelector: props.getParentSelector,
-        ariaHideApp: false,
-        children: [jsxRuntime.jsx(GridArea, {
-          name: "top"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "left"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "right"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "bottom"
-        }), jsxRuntime.jsx(GridArea, {
-          name: "main",
-          css: _ref2$2,
-          children: jsxRuntime.jsx(Card__default["default"] // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
-          // 2. For the scale size, we want the card to stretch to 100% height
-          // 3. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
-          , {
-            css: /*#__PURE__*/react.css("min-height:0;", sizeStyles(props), " padding:", designTokens.paddingForDialogContainer, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
-            children: jsxRuntime.jsx("div", {
-              css: _ref$6,
-              children: props.children
-            })
+const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
+  children: _ref4 => {
+    let makeClassName = _ref4.css;
+    return jsxRuntime.jsxs(Modal__default["default"], {
+      isOpen: props.isOpen,
+      onRequestClose: props.onClose,
+      shouldCloseOnOverlayClick: Boolean(props.onClose),
+      shouldCloseOnEsc: Boolean(props.onClose),
+      overlayElement: getOverlayElement$1,
+      overlayClassName: makeClassName(getOverlayStyles$1(props)),
+      className: makeClassName(getModalContentStyles(props)),
+      contentLabel: props.title,
+      parentSelector: props.getParentSelector,
+      ariaHideApp: false,
+      children: [jsxRuntime.jsx(GridArea, {
+        name: "top"
+      }), jsxRuntime.jsx(GridArea, {
+        name: "left"
+      }), jsxRuntime.jsx(GridArea, {
+        name: "right"
+      }), jsxRuntime.jsx(GridArea, {
+        name: "bottom"
+      }), jsxRuntime.jsx(GridArea, {
+        name: "main",
+        css: _ref2$2,
+        children: jsxRuntime.jsx(Card__default["default"] // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
+        // 2. For the scale size, we want the card to stretch to 100% height
+        // 3. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
+        , {
+          css: /*#__PURE__*/react.css("min-height:0;", sizeStyles(props), " padding:", designTokens.paddingForDialogContainer, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+          children: jsxRuntime.jsx("div", {
+            css: _ref$6,
+            children: props.children
           })
-        })]
-      });
-    }
-  });
-};
+        })
+      })]
+    });
+  }
+});
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$h;
 
-var Title$1 = function Title(props) {
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
+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, {
@@ -463,74 +447,62 @@ var Title$1 = function Title(props) {
   });
 };
 
-var DialogHeader = function DialogHeader(props) {
-  return 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, {
-      scale: "m",
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [jsxRuntime.jsx(Title$1, {
-        title: props.title
-      }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-        label: "Close dialog",
-        onClick: props.onClose,
-        icon: jsxRuntime.jsx(icons.CloseIcon, {
-          size: "medium"
-        })
-      })]
-    })
-  });
-};
+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, {
+    scale: "m",
+    alignItems: "center",
+    justifyContent: "space-between",
+    children: [jsxRuntime.jsx(Title$1, {
+      title: props.title
+    }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+      label: "Close dialog",
+      onClick: props.onClose,
+      icon: jsxRuntime.jsx(icons.CloseIcon, {
+        size: "medium"
+      })
+    })]
+  })
+});
 
 DialogHeader.propTypes = {};
 DialogHeader.displayName = 'DialogHeader';
 
-var DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "eo6zkz80"
-} )("border-top:1px solid ", designTokens.borderColorForDialogDivider, ";padding:", designTokens.paddingForDialogContent, ";flex:1;overflow:auto;" + ("" ));
-
-var InfoDialog = function InfoDialog(props) {
-  return jsxRuntime.jsxs(DialogContainer, {
-    isOpen: props.isOpen,
-    onClose: props.onClose,
-    size: props.size,
-    zIndex: props.zIndex,
+const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
+  isOpen: props.isOpen,
+  onClose: props.onClose,
+  size: props.size,
+  zIndex: props.zIndex,
+  title: props.title,
+  getParentSelector: props.getParentSelector,
+  children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
-    getParentSelector: props.getParentSelector,
-    children: [jsxRuntime.jsx(DialogHeader, {
-      title: props.title,
-      onClose: props.onClose
-    }), jsxRuntime.jsx(DialogContent, {
-      children: props.children
-    })]
-  });
-};
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  })]
+});
 
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
 function filterDataAttributes(obj) {
-  return omitBy__default["default"](obj, function (_value, key) {
-    return !_startsWithInstanceProperty__default["default"](key).call(key, 'data-');
-  });
+  return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var defaultProps$g = {
+const defaultProps$g = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
 };
 
-var getFormattedLabel = function getFormattedLabel(label, intl) {
-  return typeof label === 'string' ? label : intl.formatMessage(label);
-};
+const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
 
-var DialogFooter = function DialogFooter(props) {
-  var intl = reactIntl.useIntl();
+const DialogFooter = props => {
+  const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("margin-top:", designTokens.marginTopForDialogFooter, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
@@ -554,35 +526,33 @@ DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
 DialogFooter.defaultProps = defaultProps$g;
 
-var defaultProps$f = {
+const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
 
-var ConfirmationDialog = function ConfirmationDialog(props) {
-  return jsxRuntime.jsxs(DialogContainer, {
-    isOpen: props.isOpen,
-    onClose: props.onClose,
-    size: props.size,
-    zIndex: props.zIndex,
+const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
+  isOpen: props.isOpen,
+  onClose: props.onClose,
+  size: props.size,
+  zIndex: props.zIndex,
+  title: props.title,
+  getParentSelector: props.getParentSelector,
+  children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
-    getParentSelector: props.getParentSelector,
-    children: [jsxRuntime.jsx(DialogHeader, {
-      title: props.title,
-      onClose: props.onClose
-    }), jsxRuntime.jsx(DialogContent, {
-      children: props.children
-    }), jsxRuntime.jsx(DialogFooter, {
-      labelSecondary: props.labelSecondary,
-      labelPrimary: props.labelPrimary,
-      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
-      onCancel: props.onCancel,
-      onConfirm: props.onConfirm,
-      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
-      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
-    })]
-  });
-};
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  }), jsxRuntime.jsx(DialogFooter, {
+    labelSecondary: props.labelSecondary,
+    labelPrimary: props.labelPrimary,
+    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+    onCancel: props.onCancel,
+    onConfirm: props.onConfirm,
+    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
+  })]
+});
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
@@ -591,36 +561,34 @@ ConfirmationDialog.defaultProps = defaultProps$f; // This is a convenience proxy
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$e = {
+const defaultProps$e = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
 
-var FormDialog = function FormDialog(props) {
-  return jsxRuntime.jsxs(DialogContainer, {
-    isOpen: props.isOpen,
-    onClose: props.onClose,
-    size: props.size,
-    zIndex: props.zIndex,
+const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
+  isOpen: props.isOpen,
+  onClose: props.onClose,
+  size: props.size,
+  zIndex: props.zIndex,
+  title: props.title,
+  getParentSelector: props.getParentSelector,
+  children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
-    getParentSelector: props.getParentSelector,
-    children: [jsxRuntime.jsx(DialogHeader, {
-      title: props.title,
-      onClose: props.onClose
-    }), jsxRuntime.jsx(DialogContent, {
-      children: props.children
-    }), jsxRuntime.jsx(DialogFooter, {
-      labelSecondary: props.labelSecondary,
-      labelPrimary: props.labelPrimary,
-      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
-      onCancel: props.onSecondaryButtonClick,
-      onConfirm: props.onPrimaryButtonClick,
-      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
-      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
-      iconLeftSecondaryButton: props.iconLeftSecondaryButton
-    })]
-  });
-};
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  }), jsxRuntime.jsx(DialogFooter, {
+    labelSecondary: props.labelSecondary,
+    labelPrimary: props.labelPrimary,
+    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+    onCancel: props.onSecondaryButtonClick,
+    onConfirm: props.onPrimaryButtonClick,
+    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
+    iconLeftSecondaryButton: props.iconLeftSecondaryButton
+  })]
+});
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
@@ -629,52 +597,117 @@ FormDialog.defaultProps = defaultProps$e; // This is a convenience proxy export
 
 FormDialog.Intl = i18n.sharedMessages;
 
-var TRANSITION_DURATION = 200;
-var getContainerStyles = function getContainerStyles(_props) {
-  return /*#__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;" + ("" ), "" );
-};
-var getOverlayStyles = function getOverlayStyles(props) {
-  return /*#__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;" + ("" ), "" );
+const defaultProps$d = {
+  titleSize: 'small',
+  truncate: false
 };
 
-var _ref4 = {
-  name: "1ffv7m4",
-  styles: "transform:translate3d(0, 0, 0)!important"
-} ;
+const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epaiodd0"
+} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
 
-var getAfterOpenContainerAnimation = function getAfterOpenContainerAnimation() {
-  return _ref4;
-};
+const Title = props => {
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
 
-var _ref3 = {
-  name: "1d9ftqx",
-  styles: "opacity:1!important"
-} ;
+  switch (props.titleSize) {
+    case 'big':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: theme === 'default' ? 'h2' : 'h1',
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
 
-var getAfterOpenOverlayAnimation = function getAfterOpenOverlayAnimation() {
-  return _ref3;
+    default:
+      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+        as: "h4",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+  }
 };
 
-var _ref2$1 = {
-  name: "110wxen",
-  styles: "transform:translate3d(30px, 0, 0)!important"
-} ;
+const Subtitle = props => {
+  const _useTheme2 = designSystem.useTheme(),
+        theme = _useTheme2.theme;
+
+  if (!props.subtitle) {
+    return null;
+  }
+
+  if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
+    return jsxRuntime.jsx(SubtitleWrapper, {
+      children: props.subtitle
+    });
+  }
 
-var getBeforeCloseContainerAnimation = function getBeforeCloseContainerAnimation() {
-  return _ref2$1;
+  return jsxRuntime.jsx(SubtitleWrapper, {
+    children: jsxRuntime.jsx(Text__default["default"].Body, {
+      title: props.subtitle,
+      truncate: props.truncate,
+      tone: theme !== 'default' ? 'secondary' : undefined,
+      children: props.subtitle
+    })
+  });
+};
+
+Subtitle.propTypes = {};
+Subtitle.defaultProps = {
+  truncate: false
 };
 
 var _ref$5 = {
-  name: "728dx5",
-  styles: "opacity:0!important"
+  name: "d3v9zr",
+  styles: "overflow:hidden"
 } ;
 
-var getBeforeCloseOverlayAnimation = function getBeforeCloseOverlayAnimation() {
-  return _ref$5;
+const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
+  css: _ref$5,
+  children: [jsxRuntime.jsx(Title, {
+    title: props.title,
+    titleSize: props.titleSize,
+    truncate: props.truncate
+  }), jsxRuntime.jsx(Subtitle, {
+    subtitle: props.subtitle,
+    truncate: props.truncate
+  })]
+});
+
+PageHeaderTitle.propTypes = {};
+PageHeaderTitle.displayName = 'PageHeaderTitle';
+PageHeaderTitle.defaultProps = defaultProps$d;
+
+const PageHeader = props => {
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
+
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
+    children: [jsxRuntime.jsx(PageHeaderTitle, {
+      title: props.title,
+      titleSize: theme === 'default' ? 'small' : 'big',
+      subtitle: props.subtitle,
+      truncate: true
+    }), props.children]
+  });
 };
 
-var messages$2 = reactIntl.defineMessages({
+PageHeader.propTypes = {};
+PageHeader.displayName = 'PageHeader';
+
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn01"
+} )("flex:1;flex-basis:0;padding:", designTokens.paddingForPageContent, ";overflow:auto;" + ("" ));
+const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn00"
+} )({
+  name: "kdbhus",
+  styles: "height:100%;display:flex;flex-direction:column"
+} );
+
+const messages$2 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
     defaultMessage: 'Go Back'
@@ -685,7 +718,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var LargeIconWrapper = /*#__PURE__*/_styled__default["default"]("span", {
+const LargeIconWrapper = /*#__PURE__*/_styled__default["default"]("span", {
   target: "edipjip0"
 } )({
   name: "1rxhroq",
@@ -695,7 +728,7 @@ var LargeIconWrapper = /*#__PURE__*/_styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$d = {
+const defaultProps$c = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -705,11 +738,11 @@ var _ref$4 = {
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
 
-var ModalPageTopBar = function ModalPageTopBar(props) {
-  var intl = reactIntl.useIntl();
+const ModalPageTopBar = props => {
+  const intl = reactIntl.useIntl();
 
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
 
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
@@ -748,57 +781,85 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$d;
+ModalPageTopBar.defaultProps = defaultProps$c;
+
+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; }
 
-var getDefaultParentSelector = function getDefaultParentSelector() {
-  return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
-};
+const getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 
-var getOverlayElement = function getOverlayElement(props, contentElement) {
-  return (// 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`.
+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`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 
 
-var defaultProps$c = {
+const defaultProps$b = {
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
 };
 
-var ModalPage = function ModalPage(props) {
-  var _useState = react$1.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      forceClose = _useState2[0],
-      setForceClose = _useState2[1];
+const ModalPage = props => {
+  const _useState = react$1.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        forceClose = _useState2[0],
+        setForceClose = _useState2[1];
 
-  var closingTimer = react$1.useRef();
-  react$1.useEffect(function () {
+  const closingTimer = react$1.useRef();
+  react$1.useEffect(() => {
     if (props.isOpen === true) setForceClose(false);
-    return function () {
+    return () => {
       if (closingTimer.current) {
         clearTimeout(closingTimer.current);
       }
     };
   }, [props.isOpen]);
-  var onClose = props.onClose;
-  var handleClose = react$1.useCallback(function (event) {
+  const onClose = props.onClose;
+  const handleClose = react$1.useCallback(event => {
     if (props.shouldDelayOnClose) {
       // In this case we want the closing animation to be shown
       // and therefore we need wait for it to be completed
       // before calling `onClose`.
       setForceClose(true);
-      closingTimer.current = _setTimeout__default["default"](function () {
+      closingTimer.current = _setTimeout__default["default"](() => {
         onClose && onClose(event);
       }, TRANSITION_DURATION);
       return;
@@ -807,10 +868,10 @@ var ModalPage = function ModalPage(props) {
     onClose && onClose(event);
   }, [onClose, props.shouldDelayOnClose]);
   return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref) {
+    children: _ref => {
       var _props$afterOpenStyle;
 
-      var makeClassName = _ref.css;
+      let makeClassName = _ref.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: forceClose === true ? false : props.isOpen,
         onRequestClose: handleClose,
@@ -851,139 +912,25 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$c;
-
-var defaultProps$b = {
-  titleSize: 'small',
-  truncate: false
-};
-
-var SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "epaiodd0"
-} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
-
-var Title = function Title(props) {
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
-
-  switch (props.titleSize) {
-    case 'big':
-      return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: theme === 'default' ? 'h2' : 'h1',
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-
-    default:
-      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-  }
-};
-
-var Subtitle = function Subtitle(props) {
-  var _useTheme2 = designSystem.useTheme(),
-      theme = _useTheme2.theme;
-
-  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: props.subtitle,
-      truncate: props.truncate,
-      tone: theme !== 'default' ? 'secondary' : undefined,
-      children: props.subtitle
-    })
-  });
-};
-
-Subtitle.propTypes = {};
-Subtitle.defaultProps = {
-  truncate: false
-};
-
-var _ref$3 = {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} ;
-
-var PageHeaderTitle = function PageHeaderTitle(props) {
-  return jsxRuntime.jsxs("div", {
-    css: _ref$3,
-    children: [jsxRuntime.jsx(Title, {
-      title: props.title,
-      titleSize: props.titleSize,
-      truncate: props.truncate
-    }), jsxRuntime.jsx(Subtitle, {
-      subtitle: props.subtitle,
-      truncate: props.truncate
-    })]
-  });
-};
-
-PageHeaderTitle.propTypes = {};
-PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$b;
-
-var PageHeader = function PageHeader(props) {
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
-
-  return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
-    children: [jsxRuntime.jsx(PageHeaderTitle, {
-      title: props.title,
-      titleSize: theme === 'default' ? 'small' : 'big',
-      subtitle: props.subtitle,
-      truncate: true
-    }), props.children]
-  });
-};
-
-PageHeader.propTypes = {};
-PageHeader.displayName = 'PageHeader';
-
-var ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;padding:", designTokens.paddingForPageContent, ";overflow:auto;" + ("" ));
-var PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn00"
-} )({
-  name: "kdbhus",
-  styles: "height:100%;display:flex;flex-direction:column"
-} );
-
-var InfoModalPage = function InfoModalPage(props) {
-  return jsxRuntime.jsxs(ModalPage, {
+ModalPage.defaultProps = defaultProps$b;
+
+const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
+  title: props.title,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  currentPathLabel: props.topBarCurrentPathLabel || props.title,
+  previousPathLabel: props.topBarPreviousPathLabel,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  getParentSelector: props.getParentSelector,
+  afterOpenStyles: props.afterOpenStyles,
+  children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
-    isOpen: props.isOpen,
-    zIndex: props.zIndex,
-    onClose: props.onClose,
-    currentPathLabel: props.topBarCurrentPathLabel || props.title,
-    previousPathLabel: props.topBarPreviousPathLabel,
-    shouldDelayOnClose: props.shouldDelayOnClose,
-    getParentSelector: props.getParentSelector,
-    afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx(PageHeader, {
-      title: props.title,
-      subtitle: props.subtitle
-    }), jsxRuntime.jsx(ContentWrapper, {
-      children: props.children
-    })]
-  });
-};
+    subtitle: props.subtitle
+  }), jsxRuntime.jsx(ContentWrapper, {
+    children: props.children
+  })]
+});
 
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
@@ -991,19 +938,19 @@ 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; }
-var primaryDefaultProps = {
+const primaryDefaultProps = {
   label: i18n.sharedMessages.confirm,
   isDisabled: false,
   dataAttributes: {}
 };
 
-var useFormattedLabel = function useFormattedLabel(label) {
-  var intl = reactIntl.useIntl();
+const useFormattedLabel = label => {
+  const intl = reactIntl.useIntl();
   return typeof label === 'string' ? label : intl.formatMessage(label);
 };
 
-var FormPrimaryButton = function FormPrimaryButton(props) {
-  var label = useFormattedLabel(props.label);
+const FormPrimaryButton = props => {
+  const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$2({
     label: label,
     onClick: props.onClick,
@@ -1014,14 +961,14 @@ var FormPrimaryButton = function FormPrimaryButton(props) {
 FormPrimaryButton.propTypes = {};
 FormPrimaryButton.displayName = 'FormPrimaryButton';
 FormPrimaryButton.defaultProps = primaryDefaultProps;
-var secondaryDefaultProps = {
+const secondaryDefaultProps = {
   label: i18n.sharedMessages.cancel,
   isDisabled: false,
   dataAttributes: {}
 };
 
-var FormSecondaryButton = function FormSecondaryButton(props) {
-  var label = useFormattedLabel(props.label);
+const FormSecondaryButton = props => {
+  const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$2({
     label: label,
     onClick: props.onClick,
@@ -1033,14 +980,14 @@ var FormSecondaryButton = function FormSecondaryButton(props) {
 FormSecondaryButton.propTypes = {};
 FormSecondaryButton.displayName = 'FormSecondaryButton';
 FormSecondaryButton.defaultProps = secondaryDefaultProps;
-var deleteDefaultProps = {
+const deleteDefaultProps = {
   label: i18n.sharedMessages.delete,
   isDisabled: false,
   dataAttributes: {}
 };
 
-var FormDeleteButton = function FormDeleteButton(props) {
-  var label = useFormattedLabel(props.label);
+const FormDeleteButton = props => {
+  const label = useFormattedLabel(props.label);
   return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$2({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
     label: label,
@@ -1053,29 +1000,27 @@ FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var CustomFormModalPage = function CustomFormModalPage(props) {
-  return jsxRuntime.jsxs(ModalPage, {
+const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
+  title: props.title,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  currentPathLabel: props.topBarCurrentPathLabel || props.title,
+  previousPathLabel: props.topBarPreviousPathLabel,
+  getParentSelector: props.getParentSelector,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  afterOpenStyles: props.afterOpenStyles,
+  children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
-    isOpen: props.isOpen,
-    zIndex: props.zIndex,
-    onClose: props.onClose,
-    currentPathLabel: props.topBarCurrentPathLabel || props.title,
-    previousPathLabel: props.topBarPreviousPathLabel,
-    getParentSelector: props.getParentSelector,
-    shouldDelayOnClose: props.shouldDelayOnClose,
-    afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsx(PageHeader, {
-      title: props.title,
-      subtitle: props.subtitle,
-      children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
-        alignItems: "flex-end",
-        children: props.formControls
-      })
-    }), jsxRuntime.jsx(ContentWrapper, {
-      children: props.children
-    })]
-  });
-};
+    subtitle: props.subtitle,
+    children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+      alignItems: "flex-end",
+      children: props.formControls
+    })
+  }), jsxRuntime.jsx(ContentWrapper, {
+    children: props.children
+  })]
+});
 
 CustomFormModalPage.propTypes = {};
 CustomFormModalPage.displayName = 'CustomFormModalPage'; // Static export of pre-configured form control buttons to easily re-use
@@ -1088,40 +1033,38 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$a = {
+const defaultProps$a = {
   hideControls: false
 };
 
-var FormModalPage = function FormModalPage(props) {
-  return jsxRuntime.jsx(CustomFormModalPage, {
-    title: props.title,
-    subtitle: props.subtitle,
-    isOpen: props.isOpen,
-    zIndex: props.zIndex,
-    onClose: props.onClose,
-    topBarCurrentPathLabel: props.topBarCurrentPathLabel,
-    topBarPreviousPathLabel: props.topBarPreviousPathLabel,
-    getParentSelector: props.getParentSelector,
-    shouldDelayOnClose: props.shouldDelayOnClose,
-    hideControls: props.hideControls,
-    afterOpenStyles: props.afterOpenStyles,
-    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
-        label: props.labelSecondaryButton,
-        onClick: props.onSecondaryButtonClick,
-        isDisabled: props.isSecondaryButtonDisabled,
-        dataAttributes: props.dataAttributesSecondaryButton,
-        iconLeft: props.iconLeftSecondaryButton
-      }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
-        label: props.labelPrimaryButton,
-        onClick: props.onPrimaryButtonClick,
-        isDisabled: props.isPrimaryButtonDisabled,
-        dataAttributes: props.dataAttributesPrimaryButton
-      })]
-    }),
-    children: props.children
-  });
-};
+const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  topBarCurrentPathLabel: props.topBarCurrentPathLabel,
+  topBarPreviousPathLabel: props.topBarPreviousPathLabel,
+  getParentSelector: props.getParentSelector,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  hideControls: props.hideControls,
+  afterOpenStyles: props.afterOpenStyles,
+  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
+      label: props.labelSecondaryButton,
+      onClick: props.onSecondaryButtonClick,
+      isDisabled: props.isSecondaryButtonDisabled,
+      dataAttributes: props.dataAttributesSecondaryButton,
+      iconLeft: props.iconLeftSecondaryButton
+    }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
+      label: props.labelPrimaryButton,
+      onClick: props.onPrimaryButtonClick,
+      isDisabled: props.isPrimaryButtonDisabled,
+      dataAttributes: props.dataAttributesPrimaryButton
+    })]
+  }),
+  children: props.children
+});
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
@@ -1130,48 +1073,44 @@ FormModalPage.defaultProps = defaultProps$a; // This is a convenience proxy expo
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var TabControls = /*#__PURE__*/_styled__default["default"]("div", {
+const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre1"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 
-var ControlsContainter = function ControlsContainter(props) {
-  return 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, {
-      role: "tablist",
-      children: props.tabControls
-    }), props.formControls]
-  });
-};
+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, {
+    role: "tablist",
+    children: props.tabControls
+  }), props.formControls]
+});
 
 ControlsContainter.propTypes = {};
 ControlsContainter.displayName = 'ControlsContainter';
 
-var TabularPageContainer = function TabularPageContainer(props) {
-  return 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
-  });
-};
+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';
-var defaultProps$9 = {
+const defaultProps$9 = {
   color: 'surface'
 };
 TabularPageContainer.defaultProps = defaultProps$9;
 
-var FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
+const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre0"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
 
-var defaultProps$8 = {
+const defaultProps$8 = {
   hideControls: false
 };
 
-var TabularModalPage = function TabularModalPage(props) {
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
+const TabularModalPage = props => {
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
 
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
@@ -1218,13 +1157,13 @@ TabularModalPage.FormDeleteButton = FormDeleteButton; // This is a convenience p
 
 TabularModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$7 = {
+const defaultProps$7 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
 
-var PageTopBar = function PageTopBar(props) {
-  var intl = reactIntl.useIntl();
+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, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
@@ -1243,22 +1182,22 @@ PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
 PageTopBar.defaultProps = defaultProps$7;
 
-var DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
 } )("background-color:", designTokens.backgroundColorForPageHeader, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designTokens.colorForPageHeaderBottomBorder, " solid;" + ("" ));
 
-var HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("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.
 
 
-var defaultProps$6 = {
+const defaultProps$6 = {
   hideControls: false
 };
 
-var CustomFormDetailPage = function CustomFormDetailPage(props) {
+const CustomFormDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(DetailPageContainer, {
@@ -1297,35 +1236,33 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton; // This is a convenien
 
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-var defaultProps$5 = {
+const defaultProps$5 = {
   hideControls: false
 };
 
-var FormDetailPage = function FormDetailPage(props) {
-  return jsxRuntime.jsx(CustomFormDetailPage, {
-    title: props.title,
-    subtitle: props.subtitle,
-    customTitleRow: props.customTitleRow,
-    previousPathLabel: props.previousPathLabel,
-    onPreviousPathClick: props.onPreviousPathClick,
-    hideControls: props.hideControls,
-    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
-        label: props.labelSecondaryButton,
-        onClick: props.onSecondaryButtonClick,
-        isDisabled: props.isSecondaryButtonDisabled,
-        dataAttributes: props.dataAttributesSecondaryButton,
-        iconLeft: props.iconLeftSecondaryButton
-      }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
-        label: props.labelPrimaryButton,
-        onClick: props.onPrimaryButtonClick,
-        isDisabled: props.isPrimaryButtonDisabled,
-        dataAttributes: props.dataAttributesPrimaryButton
-      })]
-    }),
-    children: props.children
-  });
-};
+const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  customTitleRow: props.customTitleRow,
+  previousPathLabel: props.previousPathLabel,
+  onPreviousPathClick: props.onPreviousPathClick,
+  hideControls: props.hideControls,
+  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
+      label: props.labelSecondaryButton,
+      onClick: props.onSecondaryButtonClick,
+      isDisabled: props.isSecondaryButtonDisabled,
+      dataAttributes: props.dataAttributesSecondaryButton,
+      iconLeft: props.iconLeftSecondaryButton
+    }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
+      label: props.labelPrimaryButton,
+      onClick: props.onPrimaryButtonClick,
+      isDisabled: props.isPrimaryButtonDisabled,
+      dataAttributes: props.dataAttributesPrimaryButton
+    })]
+  }),
+  children: props.children
+});
 
 FormDetailPage.propTypes = {};
 FormDetailPage.displayName = 'FormDetailPage';
@@ -1339,16 +1276,14 @@ FormDetailPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy
 
 FormDetailPage.Intl = i18n.sharedMessages;
 
-var InfoDetailPage = function InfoDetailPage(props) {
-  return jsxRuntime.jsx(CustomFormDetailPage, {
-    title: props.title,
-    subtitle: props.subtitle,
-    customTitleRow: props.customTitleRow,
-    previousPathLabel: props.previousPathLabel,
-    onPreviousPathClick: props.onPreviousPathClick,
-    children: props.children
-  });
-};
+const InfoDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  customTitleRow: props.customTitleRow,
+  previousPathLabel: props.previousPathLabel,
+  onPreviousPathClick: props.onPreviousPathClick,
+  children: props.children
+});
 
 InfoDetailPage.propTypes = {};
 InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configured page header title component to easily
@@ -1356,11 +1291,11 @@ InfoDetailPage.displayName = 'InfoDetailPage'; // Static export of pre-configure
 
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-var defaultProps$4 = {
+const defaultProps$4 = {
   hideControls: false
 };
 
-var TabularDetailPage = function TabularDetailPage(props) {
+const TabularDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
@@ -1402,28 +1337,26 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience pr
 
 TabularDetailPage.Intl = i18n.sharedMessages;
 
-var PublicPageLayout = /*#__PURE__*/react$1.lazy(function () {
-  return Promise.resolve().then(function () { return require('./public-page-layout-96139307.cjs.prod.js'
-  /* webpackChunkName: "public-page-layout" */
-  ); });
-});
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-05a6f657.cjs.prod.js'
+/* webpackChunkName: "public-page-layout" */
+); }));
 
-var MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
 } )("padding:", designTokens.paddingForMainPageHeader, ";" + ("" ));
-var Divider = /*#__PURE__*/_styled__default["default"]("hr", {
+const Divider = /*#__PURE__*/_styled__default["default"]("hr", {
   target: "ev8m2jf1"
 } )("background-color:", designTokens.backgroundColorForMainPageDivider, ";height:1px;border:0;" + ("" ));
-var MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
+const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;padding:", designTokens.paddingForPageContent, ";" + ("" ));
 
-var defaultProps$3 = {
+const defaultProps$3 = {
   hideControls: false,
   hideDivider: false
 };
 
-var CustomFormMainPage = function CustomFormMainPage(props) {
+const CustomFormMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsx(MainPageContainer, {
@@ -1459,11 +1392,11 @@ CustomFormMainPage.FormDeleteButton = FormDeleteButton; // This is a convenience
 
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
-var defaultProps$2 = {
+const defaultProps$2 = {
   hideControls: false
 };
 
-var FormMainPage = function FormMainPage(props) {
+const FormMainPage = props => {
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
@@ -1497,9 +1430,9 @@ FormMainPage.PageHeaderTitle = PageHeaderTitle; // This is a convenience proxy e
 
 FormMainPage.Intl = i18n.sharedMessages;
 
-var InfoMainPage = function InfoMainPage(props) {
-  var _useTheme = designSystem.useTheme(),
-      theme = _useTheme.theme;
+const InfoMainPage = props => {
+  const _useTheme = designSystem.useTheme(),
+        theme = _useTheme.theme;
 
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
@@ -1516,11 +1449,11 @@ InfoMainPage.displayName = 'InfoMainPage'; // Static export of pre-configured pa
 
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
-var defaultProps$1 = {
+const defaultProps$1 = {
   hideControls: false
 };
 
-var TabularMainPage = function TabularMainPage(props) {
+const TabularMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
@@ -1569,33 +1502,31 @@ var _ref2 = {
   styles: "display:grid;align-items:center;justify-content:center;height:100%;white-space:pre-wrap;text-align:center"
 } ;
 
-var MaintenancePageLayout = function MaintenancePageLayout(props) {
-  return jsxRuntime.jsx("div", {
-    css: _ref2,
-    children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
-      max: 10,
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        scale: "m",
-        children: [jsxRuntime.jsx("div", {
-          children: jsxRuntime.jsx("img", {
-            src: props.imageSrc,
-            alt: props.label
-          })
-        }), jsxRuntime.jsx(Text__default["default"].Headline, {
-          as: "h2",
-          children: props.title
-        }), jsxRuntime.jsx(Text__default["default"].Body, {
-          children: props.paragraph1
-        }), props.bodyContent && jsxRuntime.jsx("div", {
-          css: _ref$2,
-          children: props.bodyContent
-        }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
-          children: props.paragraph2
-        })]
-      })
+const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
+  css: _ref2,
+  children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: 10,
+    children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+      scale: "m",
+      children: [jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx("img", {
+          src: props.imageSrc,
+          alt: props.label
+        })
+      }), jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h2",
+        children: props.title
+      }), jsxRuntime.jsx(Text__default["default"].Body, {
+        children: props.paragraph1
+      }), props.bodyContent && jsxRuntime.jsx("div", {
+        css: _ref$2,
+        children: props.bodyContent
+      }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
+        children: props.paragraph2
+      })]
     })
-  });
-};
+  })
+});
 
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
@@ -1615,18 +1546,16 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 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; }
 
-var getLink = function getLink(msg) {
-  return jsxRuntime.jsx("a", {
-    href: constants.SUPPORT_PORTAL_URL,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    children: msg
-  });
-};
+const getLink = msg => jsxRuntime.jsx("a", {
+  href: constants.SUPPORT_PORTAL_URL,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  children: msg
+});
 
-var PageNotFound = function PageNotFound() {
-  var intl = reactIntl.useIntl();
-  var paragraph1Message = intl.formatMessage(messages$1.paragraph1, {
+const PageNotFound = () => {
+  const intl = reactIntl.useIntl();
+  const paragraph1Message = intl.formatMessage(messages$1.paragraph1, {
     a: getLink
   });
   return jsxRuntime.jsx(MaintenancePageLayout, {
@@ -1658,17 +1587,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 
 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; }
 
-var getSupportUrlLink = function getSupportUrlLink(msg) {
-  return jsxRuntime.jsx("a", {
-    href: constants.SUPPORT_PORTAL_URL,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    children: msg
-  });
-};
+const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
+  href: constants.SUPPORT_PORTAL_URL,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  children: msg
+});
 
-var PageUnauthorized = function PageUnauthorized() {
-  var intl = reactIntl.useIntl();
+const PageUnauthorized = () => {
+  const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: FailedAuthorizationSVG__default["default"],
     title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.title)),
@@ -1683,14 +1610,14 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
-var Content$1 = /*#__PURE__*/_styled__default["default"]("section", {
+const Content$1 = /*#__PURE__*/_styled__default["default"]("section", {
   target: "e1jvhtw81"
 } )({
   name: "1sxg93g",
   styles: "grid-area:content"
 } );
 
-var Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
+const Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1jvhtw80"
 } )({
   name: "1vpm32e",
@@ -1698,8 +1625,8 @@ var Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
 } );
 
 function PageContentNarrow(props) {
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
 
   if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: props.children
@@ -1713,11 +1640,9 @@ function PageContentNarrow(props) {
 
 PageContentNarrow.propTypes = {};
 
-var Content = /*#__PURE__*/_styled__default["default"]("section", {
+const Content = /*#__PURE__*/_styled__default["default"]("section", {
   target: "e1dg479f4"
-} )("grid-area:content;display:grid;grid-template-areas:", function (props) {
-  return props.columns === '1' ? 'none' : '"left-column right-column"';
-}, ";grid-template-columns:", function (props) {
+} )("grid-area:content;display:grid;grid-template-areas:", props => props.columns === '1' ? 'none' : '"left-column right-column"', ";grid-template-columns:", props => {
   switch (props.columns) {
     case '1/1':
       return '1fr 1fr';
@@ -1728,31 +1653,27 @@ var Content = /*#__PURE__*/_styled__default["default"]("section", {
     default:
       return '1fr';
   }
-}, ";gap:", function (props) {
-  return props.gapSize === '10' ? designSystem.designTokens.spacing50 : designSystem.designTokens.spacing70;
-}, ";width:100%;" + ("" ));
+}, ";gap:", props => props.gapSize === '10' ? designSystem.designTokens.spacing50 : designSystem.designTokens.spacing70, ";width:100%;" + ("" ));
 
-var LeftContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+const LeftContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f3"
 } )({
   name: "1ibwnup",
   styles: "grid-area:left-column"
 } );
 
-var RightContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+const RightContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f2"
 } )({
   name: "hjfyry",
   styles: "grid-area:right-column"
 } );
 
-var RightColumnContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const RightColumnContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f1"
-} )("top:0;position:", function (props) {
-  return props.columns === '2/1' ? 'sticky' : 'static';
-}, ";" + ("" ));
+} )("top:0;position:", props => props.columns === '2/1' ? 'sticky' : 'static', ";" + ("" ));
 
-var Container = /*#__PURE__*/_styled__default["default"]("div", {
+const Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dg479f0"
 } )({
   name: "5phl7w",
@@ -1760,13 +1681,13 @@ var Container = /*#__PURE__*/_styled__default["default"]("div", {
 } );
 
 function PageContentWide(props) {
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(props.themeParentSelector),
+        isNewTheme = _useTheme.isNewTheme;
 
-  var _Children$toArray = react$1.Children.toArray(props.children),
-      _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
-      leftChild = _Children$toArray2[0],
-      rightChild = _Children$toArray2[1];
+  const _Children$toArray = react$1.Children.toArray(props.children),
+        _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, {
@@ -1793,7 +1714,7 @@ function PageContentWide(props) {
 }
 
 PageContentWide.propTypes = {};
-var defaultProps = {
+const defaultProps = {
   columns: '1',
   gapSize: '20'
 };
@@ -1815,19 +1736,17 @@ function PageContentFull(props) {
 
 PageContentFull.propTypes = {};
 
-var _mutationObserver;
+let _mutationObserver;
 
-var getMutationObserver = function getMutationObserver(options) {
-  return !_mutationObserver ? _mutationObserver = createMutationObserver(options) : _mutationObserver;
-};
+const getMutationObserver = options => !_mutationObserver ? _mutationObserver = createMutationObserver(options) : _mutationObserver;
 
 function useMutationObserver(target, callback, options) {
-  var mutationObserver = getMutationObserver(options);
-  var storedCallback = useLatest__default["default"](callback);
-  react$1.useLayoutEffect(function () {
-    var didUnsubscribe = false;
-    var targetEl = target && 'current' in target ? target.current : target;
-    if (!targetEl) return function () {};
+  const mutationObserver = getMutationObserver(options);
+  const storedCallback = useLatest__default["default"](callback);
+  react$1.useLayoutEffect(() => {
+    let didUnsubscribe = false;
+    const targetEl = target && 'current' in target ? target.current : target;
+    if (!targetEl) return () => {};
 
     function cb(entry, observer) {
       if (didUnsubscribe) return;
@@ -1835,7 +1754,7 @@ function useMutationObserver(target, callback, options) {
     }
 
     mutationObserver.subscribe(targetEl, cb);
-    return function () {
+    return () => {
       didUnsubscribe = true;
       mutationObserver.unsubscribe(targetEl, cb);
     };
@@ -1844,33 +1763,29 @@ function useMutationObserver(target, callback, options) {
 }
 
 function createMutationObserver(options) {
-  var callbacks = new _Map__default["default"]();
-  var observer = new MutationObserver(rafSchd__default["default"](function (entries, obs) {
-    var _loop = function _loop(i) {
-      var cbs = callbacks.get(entries[i].target);
-      cbs === null || cbs === void 0 ? void 0 : _forEachInstanceProperty__default["default"](cbs).call(cbs, function (cb) {
-        return cb(entries[i], obs);
-      });
-    };
-
-    for (var i = 0; i < entries.length; i++) {
-      _loop(i);
+  const callbacks = new _Map__default["default"]();
+  const observer = new MutationObserver(rafSchd__default["default"]((entries, obs) => {
+    for (let i = 0; i < entries.length; i++) {
+      const cbs = callbacks.get(entries[i].target);
+      cbs === null || cbs === void 0 ? void 0 : _forEachInstanceProperty__default["default"](cbs).call(cbs, cb => cb(entries[i], obs));
     }
   }));
   return {
-    observer: observer,
-    subscribe: function subscribe(target, callback) {
+    observer,
+
+    subscribe(target, callback) {
       var _callbacks$get;
 
       observer.observe(target, options);
-      var cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
+      const cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
       cbs.push(callback);
       callbacks.set(target, cbs);
     },
-    unsubscribe: function unsubscribe(target, callback) {
+
+    unsubscribe(target, callback) {
       var _callbacks$get2;
 
-      var cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
+      const cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
 
       if (cbs.length === 1) {
         observer.disconnect();
@@ -1878,27 +1793,28 @@ function createMutationObserver(options) {
         return;
       }
 
-      var cbIndex = _indexOfInstanceProperty__default["default"](cbs).call(cbs, callback);
+      const cbIndex = _indexOfInstanceProperty__default["default"](cbs).call(cbs, callback);
 
       if (cbIndex !== -1) _spliceInstanceProperty__default["default"](cbs).call(cbs, cbIndex, 1);
       callbacks.set(target, cbs);
     }
+
   };
 }
 
 // The width of each indentation level.
-var indentationSize = '48px';
+const indentationSize = '48px';
 
-var useObserverElementDimensions = function useObserverElementDimensions(element) {
-  var _useState = react$1.useState({
+const useObserverElementDimensions = element => {
+  const _useState = react$1.useState({
     height: 0,
     width: 0
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      dimensions = _useState2[0],
-      setDimensions = _useState2[1];
+        _useState2 = _slicedToArray(_useState, 2),
+        dimensions = _useState2[0],
+        setDimensions = _useState2[1];
 
-  useResizeObserver__default["default"](element, function (entry) {
+  useResizeObserver__default["default"](element, entry => {
     setDimensions({
       height: entry.contentRect.height,
       width: entry.contentRect.width
@@ -1913,42 +1829,42 @@ var _ref = {
   styles: "display:flex;height:1px;margin-top:-1px"
 } ;
 
-var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
-  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _props$baseModalZInde, _current, _current2, _context2;
+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
   // as optional and we initialize the value here with the default values.
-  var offsetTop = (_props$offsetTop = props.offsetTop) !== null && _props$offsetTop !== void 0 ? _props$offsetTop : '0px';
-  var offsetLeft = (_props$offsetLeft = props.offsetLeft) !== null && _props$offsetLeft !== void 0 ? _props$offsetLeft : '0px';
-  var offsetLeftOnExpandedMenu = (_props$offsetLeftOnEx = props.offsetLeftOnExpandedMenu) !== null && _props$offsetLeftOnEx !== void 0 ? _props$offsetLeftOnEx : '0px';
-  var containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
-  var zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
-  var baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
-  var portalsContainerRef = react$1.useRef(null);
-  var globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
-  var pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 ? void 0 : (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
-
-  var _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
+  const offsetTop = (_props$offsetTop = props.offsetTop) !== null && _props$offsetTop !== void 0 ? _props$offsetTop : '0px';
+  const offsetLeft = (_props$offsetLeft = props.offsetLeft) !== null && _props$offsetLeft !== void 0 ? _props$offsetLeft : '0px';
+  const offsetLeftOnExpandedMenu = (_props$offsetLeftOnEx = props.offsetLeftOnExpandedMenu) !== null && _props$offsetLeftOnEx !== void 0 ? _props$offsetLeftOnEx : '0px';
+  const containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
+  const zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
+  const baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
+  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
   // removed from the portals container.
   // The stacking layers are then re-calculated.
 
 
-  useMutationObserver(portalsContainerRef, function (mutation) {
+  useMutationObserver(portalsContainerRef, mutation => {
     var _context;
 
-    var indentationLevel = 0;
-    var nextStackingLevels = [];
+    let indentationLevel = 0;
+    const nextStackingLevels = [];
 
-    _forEachInstanceProperty__default["default"](_context = mutation.target.childNodes).call(_context, function (node, index) {
+    _forEachInstanceProperty__default["default"](_context = mutation.target.childNodes).call(_context, (node, index) => {
       if (node instanceof HTMLElement) {
-        var stackingLevel = index + 1;
+        const stackingLevel = index + 1;
         node.dataset.level = String(stackingLevel);
-        var overlayNode = node.firstChild;
+        const overlayNode = node.firstChild;
 
         if (overlayNode instanceof HTMLElement) {
           if (overlayNode.dataset.role === 'modal-overlay') {
@@ -1957,8 +1873,8 @@ var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
         }
 
         nextStackingLevels.push({
-          stackingLevel: stackingLevel,
-          indentationLevel: indentationLevel
+          stackingLevel,
+          indentationLevel
         });
       }
     });
@@ -1971,15 +1887,14 @@ var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(react.Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
     , {
-      styles: _concatInstanceProperty__default["default"](_context2 = [/*#__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, ");}" + ("" ), "" )]).call(_context2, _toConsumableArray(_mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
+      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.
        * Furthermore, the "modal overlay" containers (not "dialog") get assigned
        * the correct indentation level width.
        */
-      function (stackingLayer) {
-        return /*#__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                  );}" + ("" ), "" );
-      })), ["" ])
+      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
@@ -1990,24 +1905,20 @@ var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
 });
 PortalsContainer.displayName = 'PortalsContainer';
 
-var useModalState = function useModalState() {
-  var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+const useModalState = function () {
+  let isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-  var _useState = react$1.useState(isInitiallyOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isModalOpen = _useState2[0],
-      setIsModalOpen = _useState2[1];
+  const _useState = react$1.useState(isInitiallyOpen),
+        _useState2 = _slicedToArray(_useState, 2),
+        isModalOpen = _useState2[0],
+        setIsModalOpen = _useState2[1];
 
-  var openModal = react$1.useCallback(function () {
-    return setIsModalOpen(true);
-  }, []);
-  var closeModal = react$1.useCallback(function () {
-    return setIsModalOpen(false);
-  }, []);
+  const openModal = react$1.useCallback(() => setIsModalOpen(true), []);
+  const closeModal = react$1.useCallback(() => setIsModalOpen(false), []);
   return {
-    isModalOpen: isModalOpen,
-    openModal: openModal,
-    closeModal: closeModal
+    isModalOpen,
+    openModal,
+    closeModal
   };
 };