@commercetools-frontend/application-components 21.3.2 → 21.3.3

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

@@ -73,7 +73,7 @@ var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.3";
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -170,14 +170,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt__default["default"].bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -264,7 +264,7 @@ PageHeaderTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   subtitle: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].element])
 } : {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -313,10 +313,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt__default["default"].oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -444,7 +444,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -487,7 +487,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -510,7 +510,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -542,9 +542,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt__default["default"].func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -597,7 +597,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt__default["default"].func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -664,7 +664,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -761,7 +761,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -842,7 +842,7 @@ InfoDialog.displayName = 'InfoDialog';
 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 defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -887,9 +887,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt__default["default"].objectOf(_pt__default["default"].string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -944,12 +944,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -1004,7 +1004,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -1094,7 +1094,7 @@ var LargeIconWrapper = _styled__default["default"]("span", process.env.NODE_ENV
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1157,7 +1157,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt__default["default"].func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -1166,7 +1166,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1265,7 +1265,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1385,7 +1385,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1458,12 +1458,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1528,7 +1528,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1778,6 +1778,11 @@ var PageUnauthorized = function PageUnauthorized() {
 PageUnauthorized.displayName = 'PageUnauthorized';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  offsetTop: '0',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+}; // All modal components expect to be rendered inside this container.
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
@@ -1785,19 +1790,25 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJwb3J0YWxzLWNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbi8vIEFsbCBtb2RhbCBjb21wb25lbnRzIGV4cGVjdCB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhpcyBjb250YWluZXIuXG5jb25zdCBQb3J0YWxzQ29udGFpbmVyID0gKCkgPT4gKFxuICA8ZGl2XG4gICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBoZWlnaHQ6IDFweDtcbiAgICAgIG1hcmdpbi10b3A6IC0xcHg7XG4gICAgYH1cbiAgLz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRGMiLCJmaWxlIjoicG9ydGFscy1jb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbnR5cGUgVFBvcnRhbHNDb250YWluZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgdG9wLCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBoZWlnaHQgb2YgdGhlIGhlYWRlciBzZWN0aW9uLlxuICAgKi9cbiAgb2Zmc2V0VG9wOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgQ1NTIHNlbGVjdG9yIHRvIGFwcGx5IHRoZSBgb3ZlcmZsb3c6IGhpZGRlbmAgc3R5bGUgdG8gKHByZXZlbnRpbmcgc2Nyb2xsaW5nKVxuICAgKiB3aGVuIGEgbW9kYWwgY29udGFpbmVyIGlzIG9wZW4uXG4gICAqL1xuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbjogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGB6LWluZGV4YCB2YWx1ZSB0byBhcHBseSB0byB0aGUgcG9ydGFsIGNvbnRhaW5lci4gRGVmYXVsdCB0byBgMTAwMDBgLlxuICAgKi9cbiAgekluZGV4OiBudW1iZXI7XG59O1xuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUUG9ydGFsc0NvbnRhaW5lclByb3BzLFxuICAnb2Zmc2V0VG9wJyB8ICdjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbicgfCAnekluZGV4J1xuPiA9IHtcbiAgb2Zmc2V0VG9wOiAnMCcsXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiAnbWFpbicsXG4gIHpJbmRleDogMTAwMDAsXG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IChwcm9wczogVFBvcnRhbHNDb250YWluZXJQcm9wcykgPT4gKFxuICA8PlxuICAgIDxHbG9iYWxcbiAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5cbiAgICAgICAgICAke3Byb3BzLmNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRUb3B9KTtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICB0b3A6ICR7cHJvcHMub2Zmc2V0VG9wfTtcbiAgICAgICAgICBib3R0b206IDA7XG4gICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgIC8+XG4gICAgPGRpdlxuICAgICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgICAgLy8gVGhlIGNvbnRhaW5lciBuZWVkcyBhIGhlaWdodCBpbiBvcmRlciB0byBiZSB0YWJiYWJsZTogaHR0cHM6Ly9yZWFjdGpzL3JlYWN0LW1vZGFsIzc3NFxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGhlaWdodDogMXB4O1xuICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgYH1cbiAgICAvPlxuICA8Lz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuUG9ydGFsc0NvbnRhaW5lci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IFBvcnRhbHNDb250YWluZXI7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer() {
-  return jsxRuntime.jsx("div", {
-    id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
+var PortalsContainer = function PortalsContainer(props) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(react.Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    , {
+      styles: /*#__PURE__*/react.css(".ReactModal__Body--open ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(100% - ", props.offsetTop, ");width:100%;top:", props.offsetTop, ";bottom:0;z-index:", props.zIndex, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2lCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIHRvcCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBpcyBjb3JyZXNwb25kcyB0byB0aGUgaGVpZ2h0IG9mIHRoZSBoZWFkZXIgc2VjdGlvbi5cbiAgICovXG4gIG9mZnNldFRvcDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgJ29mZnNldFRvcCcgfCAnY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW4nIHwgJ3pJbmRleCdcbj4gPSB7XG4gIG9mZnNldFRvcDogJzAnLFxuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbjogJ21haW4nLFxuICB6SW5kZXg6IDEwMDAwLFxufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSAocHJvcHM6IFRQb3J0YWxzQ29udGFpbmVyUHJvcHMpID0+IChcbiAgPD5cbiAgICA8R2xvYmFsXG4gICAgICAvLyBBcHBseSBzb21lIGdsb2JhbCBzdHlsZXMsIGJhc2VkIG9uIHRoZSBgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5gIGNsYXNzLlxuICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgJHtwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbn0ge1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSk7XG4gICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgdG9wOiAke3Byb3BzLm9mZnNldFRvcH07XG4gICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgIHotaW5kZXg6ICR7cHJvcHMuekluZGV4fTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICAgIDxkaXZcbiAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBoZWlnaHQ6IDFweDtcbiAgICAgICAgbWFyZ2luLXRvcDogLTFweDtcbiAgICAgIGB9XG4gICAgLz5cbiAgPC8+XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+    }), jsxRuntime.jsx("div", {
+      id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
   });
 };
 
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

@@ -72,7 +72,7 @@ var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.3";
 
 var getBottomBorderStyles = function getBottomBorderStyles(background) {
   return /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:", designSystem.customProperties.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.customProperties.transitionEaseinout150Ms, ";}" + ("" ), "" );
@@ -153,13 +153,13 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -233,7 +233,7 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
 
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 var TabControls = _styled__default["default"]("div", {
   target: "elpldre1"
@@ -266,10 +266,10 @@ var TabularPageContainer = function TabularPageContainer(props) {
 
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled__default["default"]("div", {
   target: "elpldre0"
@@ -355,7 +355,7 @@ FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -388,7 +388,7 @@ var TabularMainPage = function TabularMainPage(props) {
 
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -411,7 +411,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -434,9 +434,9 @@ var PageTopBar = function PageTopBar(props) {
 
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -472,7 +472,7 @@ var TabularDetailPage = function TabularDetailPage(props) {
 
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -530,7 +530,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -606,7 +606,7 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 var _ref$4 = {
   name: "o5s7gs",
@@ -666,7 +666,7 @@ InfoDialog.displayName = 'InfoDialog';
 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 defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -695,9 +695,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -729,12 +729,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -766,7 +766,7 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = i18n.sharedMessages;
@@ -825,7 +825,7 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -874,7 +874,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -883,7 +883,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -964,7 +964,7 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1042,7 +1042,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1080,12 +1080,12 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1128,7 +1128,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1339,20 +1339,32 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
+var defaultProps = {
+  offsetTop: '0',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+}; // All modal components expect to be rendered inside this container.
+
 var _ref = {
   name: "qk9kof",
   styles: "display:flex;height:1px;margin-top:-1px"
 } ;
 
-var PortalsContainer = function PortalsContainer() {
-  return jsxRuntime.jsx("div", {
-    id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
+var PortalsContainer = function PortalsContainer(props) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(react.Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    , {
+      styles: /*#__PURE__*/react.css(".ReactModal__Body--open ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(100% - ", props.offsetTop, ");width:100%;top:", props.offsetTop, ";bottom:0;z-index:", props.zIndex, ";}" + ("" ), "" )
+    }), jsxRuntime.jsx("div", {
+      id: constants.PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
   });
 };
 
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/commercetools-frontend-application-components.esm.js

@@ -13,7 +13,7 @@ import startCase from 'lodash/startCase';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { warning } from '@commercetools-uikit/utils';
 import Text from '@commercetools-uikit/text';
-import { css, ClassNames } from '@emotion/react';
+import { css, ClassNames, Global } from '@emotion/react';
 import { customProperties } from '@commercetools-uikit/design-system';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import Spacings from '@commercetools-uikit/spacings';
@@ -39,7 +39,7 @@ import PageNotFoundSVG from '@commercetools-frontend/assets/images/desert-fox.sv
 import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.2";
+var version = "21.3.3";
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -136,14 +136,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt.bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$d = {
+var defaultProps$e = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$d;
+TabHeader.defaultProps = defaultProps$e;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var defaultProps$c = {
+var defaultProps$d = {
   titleSize: 'small',
   truncate: false
 };
@@ -230,7 +230,7 @@ PageHeaderTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   subtitle: _pt.oneOfType([_pt.string, _pt.element])
 } : {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$d;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -279,10 +279,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt.oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$b = {
+var defaultProps$c = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$b;
+TabularPageContainer.defaultProps = defaultProps$c;
 
 var FormControlsContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -410,7 +410,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$a = {
+var defaultProps$b = {
   hideControls: false
 };
 
@@ -453,7 +453,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -476,7 +476,7 @@ var messages$2 = defineMessages({
   }
 });
 
-var defaultProps$9 = {
+var defaultProps$a = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -508,9 +508,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt.func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$9;
+PageTopBar.defaultProps = defaultProps$a;
 
-var defaultProps$8 = {
+var defaultProps$9 = {
   hideControls: false
 };
 
@@ -563,7 +563,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt.func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -630,7 +630,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -727,7 +727,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$7;
+DialogContainer.defaultProps = defaultProps$8;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -808,7 +808,7 @@ InfoDialog.displayName = 'InfoDialog';
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var defaultProps$6 = {
+var defaultProps$7 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -853,9 +853,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt.objectOf(_pt.string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$6;
+DialogFooter.defaultProps = defaultProps$7;
 
-var defaultProps$5 = {
+var defaultProps$6 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.confirm
 };
@@ -910,12 +910,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 ConfirmationDialog.Intl = sharedMessages;
 
-var defaultProps$4 = {
+var defaultProps$5 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.save
 };
@@ -970,7 +970,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$4; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormDialog.Intl = sharedMessages;
@@ -1060,7 +1060,7 @@ var LargeIconWrapper = _styled("span", process.env.NODE_ENV === "production" ? {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$4 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1123,7 +1123,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt.func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$3;
+ModalPageTopBar.defaultProps = defaultProps$4;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
@@ -1132,7 +1132,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$2 = {
+var defaultProps$3 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1231,7 +1231,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$2;
+ModalPage.defaultProps = defaultProps$3;
 
 var PageHeader = function PageHeader(props) {
   return jsxs("div", {
@@ -1351,7 +1351,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = sharedMessages;
 
-var defaultProps$1 = {
+var defaultProps$2 = {
   hideControls: false
 };
 
@@ -1424,12 +1424,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$1; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 
 FormModalPage.Intl = sharedMessages;
 
-var defaultProps = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1494,7 +1494,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1744,6 +1744,11 @@ var PageUnauthorized = function PageUnauthorized() {
 PageUnauthorized.displayName = 'PageUnauthorized';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  offsetTop: '0',
+  containerSelectorToPreventScrollingOnOpen: 'main',
+  zIndex: 10000
+}; // All modal components expect to be rendered inside this container.
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
@@ -1751,19 +1756,25 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJwb3J0YWxzLWNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbi8vIEFsbCBtb2RhbCBjb21wb25lbnRzIGV4cGVjdCB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhpcyBjb250YWluZXIuXG5jb25zdCBQb3J0YWxzQ29udGFpbmVyID0gKCkgPT4gKFxuICA8ZGl2XG4gICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBoZWlnaHQ6IDFweDtcbiAgICAgIG1hcmdpbi10b3A6IC0xcHg7XG4gICAgYH1cbiAgLz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRGMiLCJmaWxlIjoicG9ydGFscy1jb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbnR5cGUgVFBvcnRhbHNDb250YWluZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgdG9wLCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBoZWlnaHQgb2YgdGhlIGhlYWRlciBzZWN0aW9uLlxuICAgKi9cbiAgb2Zmc2V0VG9wOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgQ1NTIHNlbGVjdG9yIHRvIGFwcGx5IHRoZSBgb3ZlcmZsb3c6IGhpZGRlbmAgc3R5bGUgdG8gKHByZXZlbnRpbmcgc2Nyb2xsaW5nKVxuICAgKiB3aGVuIGEgbW9kYWwgY29udGFpbmVyIGlzIG9wZW4uXG4gICAqL1xuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbjogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGB6LWluZGV4YCB2YWx1ZSB0byBhcHBseSB0byB0aGUgcG9ydGFsIGNvbnRhaW5lci4gRGVmYXVsdCB0byBgMTAwMDBgLlxuICAgKi9cbiAgekluZGV4OiBudW1iZXI7XG59O1xuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUUG9ydGFsc0NvbnRhaW5lclByb3BzLFxuICAnb2Zmc2V0VG9wJyB8ICdjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbicgfCAnekluZGV4J1xuPiA9IHtcbiAgb2Zmc2V0VG9wOiAnMCcsXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiAnbWFpbicsXG4gIHpJbmRleDogMTAwMDAsXG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IChwcm9wczogVFBvcnRhbHNDb250YWluZXJQcm9wcykgPT4gKFxuICA8PlxuICAgIDxHbG9iYWxcbiAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5cbiAgICAgICAgICAke3Byb3BzLmNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRUb3B9KTtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICB0b3A6ICR7cHJvcHMub2Zmc2V0VG9wfTtcbiAgICAgICAgICBib3R0b206IDA7XG4gICAgICAgICAgei1pbmRleDogJHtwcm9wcy56SW5kZXh9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgIC8+XG4gICAgPGRpdlxuICAgICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgICAgLy8gVGhlIGNvbnRhaW5lciBuZWVkcyBhIGhlaWdodCBpbiBvcmRlciB0byBiZSB0YWJiYWJsZTogaHR0cHM6Ly9yZWFjdGpzL3JlYWN0LW1vZGFsIzc3NFxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGhlaWdodDogMXB4O1xuICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgYH1cbiAgICAvPlxuICA8Lz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuUG9ydGFsc0NvbnRhaW5lci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IFBvcnRhbHNDb250YWluZXI7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer() {
-  return jsx("div", {
-    id: PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
-    ,
-    css: _ref
+var PortalsContainer = function PortalsContainer(props) {
+  return jsxs(Fragment, {
+    children: [jsx(Global // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    , {
+      styles: /*#__PURE__*/css(".ReactModal__Body--open ", props.containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", PORTALS_CONTAINER_ID, "{position:fixed;height:calc(100% - ", props.offsetTop, ");width:100%;top:", props.offsetTop, ";bottom:0;z-index:", props.zIndex, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2lCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIHRvcCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBpcyBjb3JyZXNwb25kcyB0byB0aGUgaGVpZ2h0IG9mIHRoZSBoZWFkZXIgc2VjdGlvbi5cbiAgICovXG4gIG9mZnNldFRvcDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVFBvcnRhbHNDb250YWluZXJQcm9wcyxcbiAgJ29mZnNldFRvcCcgfCAnY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW4nIHwgJ3pJbmRleCdcbj4gPSB7XG4gIG9mZnNldFRvcDogJzAnLFxuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbjogJ21haW4nLFxuICB6SW5kZXg6IDEwMDAwLFxufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSAocHJvcHM6IFRQb3J0YWxzQ29udGFpbmVyUHJvcHMpID0+IChcbiAgPD5cbiAgICA8R2xvYmFsXG4gICAgICAvLyBBcHBseSBzb21lIGdsb2JhbCBzdHlsZXMsIGJhc2VkIG9uIHRoZSBgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5gIGNsYXNzLlxuICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgJHtwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbn0ge1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSk7XG4gICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgdG9wOiAke3Byb3BzLm9mZnNldFRvcH07XG4gICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgIHotaW5kZXg6ICR7cHJvcHMuekluZGV4fTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICAgIDxkaXZcbiAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBoZWlnaHQ6IDFweDtcbiAgICAgICAgbWFyZ2luLXRvcDogLTFweDtcbiAgICAgIGB9XG4gICAgLz5cbiAgPC8+XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+    }), jsx("div", {
+      id: PORTALS_CONTAINER_ID // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
   });
 };
 
 PortalsContainer.displayName = 'PortalsContainer';
+PortalsContainer.defaultProps = defaultProps;
 
 var useModalState = function useModalState() {
   var isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/declarations/src/components/portals-container/portals-container.d.ts

@@ -1,5 +1,11 @@
+declare type TPortalsContainerProps = {
+    offsetTop: string;
+    containerSelectorToPreventScrollingOnOpen: string;
+    zIndex: number;
+};
 declare const PortalsContainer: {
-    (): import("@emotion/react/jsx-runtime").JSX.Element;
+    (props: TPortalsContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
+    defaultProps: Pick<TPortalsContainerProps, "zIndex" | "offsetTop" | "containerSelectorToPreventScrollingOnOpen">;
 };
 export default PortalsContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.3.2",
+  "version": "21.3.3",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {