@commercetools-frontend/application-components 21.3.4 → 21.5.0

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

@@ -41,6 +41,7 @@ var CommercetoolsLogoSvg = require('@commercetools-frontend/assets/logos/commerc
 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 useResizeObserver = require('@react-hook/resize-observer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -71,9 +72,10 @@ var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLo
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.5.0";
 
 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 +172,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt__default["default"].bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$e = {
+var defaultProps$d = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$e;
+TabHeader.defaultProps = defaultProps$d;
 
 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$d = {
+var defaultProps$c = {
   titleSize: 'small',
   truncate: false
 };
@@ -264,7 +266,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$d;
+PageHeaderTitle.defaultProps = defaultProps$c;
 
 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 +315,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt__default["default"].oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$c = {
+var defaultProps$b = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$c;
+TabularPageContainer.defaultProps = defaultProps$b;
 
 var FormControlsContainer = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -444,7 +446,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$b = {
+var defaultProps$a = {
   hideControls: false
 };
 
@@ -487,7 +489,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -510,7 +512,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$a = {
+var defaultProps$9 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -542,9 +544,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt__default["default"].func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$a;
+PageTopBar.defaultProps = defaultProps$9;
 
-var defaultProps$9 = {
+var defaultProps$8 = {
   hideControls: false
 };
 
@@ -597,7 +599,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt__default["default"].func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -664,7 +666,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -761,7 +763,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$8;
+DialogContainer.defaultProps = defaultProps$7;
 
 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 +844,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$7 = {
+var defaultProps$6 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -887,9 +889,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt__default["default"].objectOf(_pt__default["default"].string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$7;
+DialogFooter.defaultProps = defaultProps$6;
 
-var defaultProps$6 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -944,12 +946,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.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.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$5 = {
+var defaultProps$4 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -1004,7 +1006,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt__default["default"].func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$4; // 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 +1096,7 @@ var LargeIconWrapper = _styled__default["default"]("span", process.env.NODE_ENV
 // does not recognize the object shape.
 
 
-var defaultProps$4 = {
+var defaultProps$3 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1157,7 +1159,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt__default["default"].func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$4;
+ModalPageTopBar.defaultProps = defaultProps$3;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -1166,7 +1168,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$2 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1265,7 +1267,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$3;
+ModalPage.defaultProps = defaultProps$2;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1385,7 +1387,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$2 = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1458,12 +1460,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$1; // 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$1 = {
+var defaultProps = {
   hideControls: false
 };
 
@@ -1528,7 +1530,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt__default["default"].bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1778,39 +1780,62 @@ 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',
-  offsetLeft: '0',
-  offsetLeftOnExpandedMenu: '0',
-  containerSelectorToPreventScrollingOnOpen: 'main',
-  zIndex: 10000
+
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = react$1.useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver__default["default"](element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
 }; // All modal components expect to be rendered inside this container.
 
+
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
   styles: "display:flex;height:1px;margin-top:-1px"
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRWMiLCJmaWxlIjoicG9ydGFscy1jb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbnR5cGUgVFBvcnRhbHNDb250YWluZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgdG9wLCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBoZWlnaHQgb2YgdGhlIGhlYWRlciBzZWN0aW9uLlxuICAgKi9cbiAgb2Zmc2V0VG9wOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIGxlZnQsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIG1pbiB3aWR0aCBvZiB0aGUgbmF2IG1lbnUuXG4gICAqL1xuICBvZmZzZXRMZWZ0OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIGxlZnQsIHdoZW4gb3BlbmVkLlxuICAgKiBUaGUgdmFsdWUgaXMgb25seSBhcHBsaWVkIHdoZW4gdGhlIGAuYm9keV9fbWVudS1vcGVuYCBnbG9iYWwgY2xhc3MgaXMgYWRkZWQgdG8gdGhlIERPTS5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSB3aWR0aCBvZiB0aGUgZXhwYW5kZWQgbmF2IG1lbnUuXG4gICAqL1xuICBvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnU6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBDU1Mgc2VsZWN0b3IgdG8gYXBwbHkgdGhlIGBvdmVyZmxvdzogaGlkZGVuYCBzdHlsZSB0byAocHJldmVudGluZyBzY3JvbGxpbmcpXG4gICAqIHdoZW4gYSBtb2RhbCBjb250YWluZXIgaXMgb3Blbi5cbiAgICovXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYHotaW5kZXhgIHZhbHVlIHRvIGFwcGx5IHRvIHRoZSBwb3J0YWwgY29udGFpbmVyLiBEZWZhdWx0IHRvIGAxMDAwMGAuXG4gICAqL1xuICB6SW5kZXg6IG51bWJlcjtcbn07XG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8XG4gIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMsXG4gIHwgJ29mZnNldFRvcCdcbiAgfCAnb2Zmc2V0TGVmdCdcbiAgfCAnb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51J1xuICB8ICdjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbidcbiAgfCAnekluZGV4J1xuPiA9IHtcbiAgb2Zmc2V0VG9wOiAnMCcsXG4gIG9mZnNldExlZnQ6ICcwJyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMCcsXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiAnbWFpbicsXG4gIHpJbmRleDogMTAwMDAsXG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IChwcm9wczogVFBvcnRhbHNDb250YWluZXJQcm9wcykgPT4gKFxuICA8PlxuICAgIDxHbG9iYWxcbiAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5cbiAgICAgICAgICAke3Byb3BzLmNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRUb3B9KTtcbiAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgdG9wOiAke3Byb3BzLm9mZnNldFRvcH07XG4gICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgIHotaW5kZXg6ICR7cHJvcHMuekluZGV4fTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuLmJvZHlfX21lbnUtb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAke3Byb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudX0pO1xuICAgICAgICB9XG4gICAgICBgfVxuICAgIC8+XG4gICAgPGRpdlxuICAgICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgICAgLy8gVGhlIGNvbnRhaW5lciBuZWVkcyBhIGhlaWdodCBpbiBvcmRlciB0byBiZSB0YWJiYWJsZTogaHR0cHM6Ly9yZWFjdGpzL3JlYWN0LW1vZGFsIzc3NFxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGhlaWdodDogMXB4O1xuICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgYH1cbiAgICAvPlxuICA8Lz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuUG9ydGFsc0NvbnRhaW5lci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IFBvcnRhbHNDb250YWluZXI7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3SGtCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcblxuY29uc3QgdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyA9IChcbiAgZWxlbWVudDogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PiB8IG51bGxcbik6IFRPYnNlcnZhYmxlRWxlbWVudERpbWVuc2lvbnMgPT4ge1xuICBjb25zdCBbZGltZW5zaW9ucywgc2V0RGltZW5zaW9uc10gPSB1c2VTdGF0ZTxUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zPih7XG4gICAgaGVpZ2h0OiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KTtcblxuICB1c2VSZXNpemVPYnNlcnZlcjxIVE1MRGl2RWxlbWVudD4oZWxlbWVudCwgKGVudHJ5KSA9PiB7XG4gICAgc2V0RGltZW5zaW9ucyh7XG4gICAgICBoZWlnaHQ6IGVudHJ5LmNvbnRlbnRSZWN0LmhlaWdodCxcbiAgICAgIHdpZHRoOiBlbnRyeS5jb250ZW50UmVjdC53aWR0aCxcbiAgICB9KTtcbiAgfSk7XG5cbiAgcmV0dXJuIGRpbWVuc2lvbnM7XG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IGZvcndhcmRSZWY8VExheW91dFJlZnMsIFRQb3J0YWxzQ29udGFpbmVyUHJvcHM+KFxuICAocHJvcHMsIHJlZikgPT4ge1xuICAgIC8vIEluaXRpYWxpemUgcHJvcHMgd2l0aCBkZWZhdWx0IHZhbHVlcy5cbiAgICAvLyBOT1RFOiB1c2luZyBgZGVmYXVsdFByb3BzYCB3aXRoIGBmb3J3YXJkUmVmYCByZXN1bHRzIGluIHRoZSB0eXBlIGRlY2xhcmF0aW9uc1xuICAgIC8vIHRvIGlnbm9yZSB0aGUgYGRlZmF1bHRQcm9wc2AuIFRoZXJlZm9yZSwgdGhlIGRlZmF1bHQgcHJvcHMgYXJlIHR5cGVkXG4gICAgLy8gYXMgb3B0aW9uYWwgYW5kIHdlIGluaXRpYWxpemUgdGhlIHZhbHVlIGhlcmUgd2l0aCB0aGUgZGVmYXVsdCB2YWx1ZXMuXG4gICAgY29uc3Qgb2Zmc2V0VG9wID0gcHJvcHMub2Zmc2V0VG9wID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnQgPSBwcm9wcy5vZmZzZXRMZWZ0ID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA9IHByb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA/PyAnMHB4JztcbiAgICBjb25zdCBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA9XG4gICAgICBwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA/PyAnbWFpbic7XG4gICAgY29uc3QgekluZGV4ID0gcHJvcHMuekluZGV4ID8/IDEwMDAwO1xuXG4gICAgY29uc3QgZ2xvYmFsTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zR2xvYmFsUmVmXG4gICAgKTtcbiAgICBjb25zdCBwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zUGFnZVJlZlxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlblxuICAgICAgICAgICAgICAke2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKFxuICAgICAgICAgICAgICAgIDEwMCUgLSAke29mZnNldFRvcH0gLVxuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4IC1cbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdH0pO1xuICAgICAgICAgICAgICB0b3A6IGNhbGMoXG4gICAgICAgICAgICAgICAgJHtvZmZzZXRUb3B9ICsgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblxuZXhwb3J0IGRlZmF1bHQgUG9ydGFsc0NvbnRhaW5lcjtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer(props) {
+var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _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 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);
   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:calc(100% - ", props.offsetLeft, ");top:", props.offsetTop, ";right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRGlCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIHRvcCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgaGVpZ2h0IG9mIHRoZSBoZWFkZXIgc2VjdGlvbi5cbiAgICovXG4gIG9mZnNldFRvcDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSBsZWZ0LCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBtaW4gd2lkdGggb2YgdGhlIG5hdiBtZW51LlxuICAgKi9cbiAgb2Zmc2V0TGVmdDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSBsZWZ0LCB3aGVuIG9wZW5lZC5cbiAgICogVGhlIHZhbHVlIGlzIG9ubHkgYXBwbGllZCB3aGVuIHRoZSBgLmJvZHlfX21lbnUtb3BlbmAgZ2xvYmFsIGNsYXNzIGlzIGFkZGVkIHRvIHRoZSBET00uXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgd2lkdGggb2YgdGhlIGV4cGFuZGVkIG5hdiBtZW51LlxuICAgKi9cbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgQ1NTIHNlbGVjdG9yIHRvIGFwcGx5IHRoZSBgb3ZlcmZsb3c6IGhpZGRlbmAgc3R5bGUgdG8gKHByZXZlbnRpbmcgc2Nyb2xsaW5nKVxuICAgKiB3aGVuIGEgbW9kYWwgY29udGFpbmVyIGlzIG9wZW4uXG4gICAqL1xuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbjogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGB6LWluZGV4YCB2YWx1ZSB0byBhcHBseSB0byB0aGUgcG9ydGFsIGNvbnRhaW5lci4gRGVmYXVsdCB0byBgMTAwMDBgLlxuICAgKi9cbiAgekluZGV4OiBudW1iZXI7XG59O1xuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUUG9ydGFsc0NvbnRhaW5lclByb3BzLFxuICB8ICdvZmZzZXRUb3AnXG4gIHwgJ29mZnNldExlZnQnXG4gIHwgJ29mZnNldExlZnRPbkV4cGFuZGVkTWVudSdcbiAgfCAnY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW4nXG4gIHwgJ3pJbmRleCdcbj4gPSB7XG4gIG9mZnNldFRvcDogJzAnLFxuICBvZmZzZXRMZWZ0OiAnMCcsXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogJzAnLFxuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbjogJ21haW4nLFxuICB6SW5kZXg6IDEwMDAwLFxufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSAocHJvcHM6IFRQb3J0YWxzQ29udGFpbmVyUHJvcHMpID0+IChcbiAgPD5cbiAgICA8R2xvYmFsXG4gICAgICAvLyBBcHBseSBzb21lIGdsb2JhbCBzdHlsZXMsIGJhc2VkIG9uIHRoZSBgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5gIGNsYXNzLlxuICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgJHtwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbn0ge1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSk7XG4gICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdH0pO1xuICAgICAgICAgIHRvcDogJHtwcm9wcy5vZmZzZXRUb3B9O1xuICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICB6LWluZGV4OiAke3Byb3BzLnpJbmRleH07XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnV9KTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICAgIDxkaXZcbiAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBoZWlnaHQ6IDFweDtcbiAgICAgICAgbWFyZ2luLXRvcDogLTFweDtcbiAgICAgIGB9XG4gICAgLz5cbiAgPC8+XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+      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, " + ", 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, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RnFCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcblxuY29uc3QgdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyA9IChcbiAgZWxlbWVudDogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PiB8IG51bGxcbik6IFRPYnNlcnZhYmxlRWxlbWVudERpbWVuc2lvbnMgPT4ge1xuICBjb25zdCBbZGltZW5zaW9ucywgc2V0RGltZW5zaW9uc10gPSB1c2VTdGF0ZTxUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zPih7XG4gICAgaGVpZ2h0OiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KTtcblxuICB1c2VSZXNpemVPYnNlcnZlcjxIVE1MRGl2RWxlbWVudD4oZWxlbWVudCwgKGVudHJ5KSA9PiB7XG4gICAgc2V0RGltZW5zaW9ucyh7XG4gICAgICBoZWlnaHQ6IGVudHJ5LmNvbnRlbnRSZWN0LmhlaWdodCxcbiAgICAgIHdpZHRoOiBlbnRyeS5jb250ZW50UmVjdC53aWR0aCxcbiAgICB9KTtcbiAgfSk7XG5cbiAgcmV0dXJuIGRpbWVuc2lvbnM7XG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IGZvcndhcmRSZWY8VExheW91dFJlZnMsIFRQb3J0YWxzQ29udGFpbmVyUHJvcHM+KFxuICAocHJvcHMsIHJlZikgPT4ge1xuICAgIC8vIEluaXRpYWxpemUgcHJvcHMgd2l0aCBkZWZhdWx0IHZhbHVlcy5cbiAgICAvLyBOT1RFOiB1c2luZyBgZGVmYXVsdFByb3BzYCB3aXRoIGBmb3J3YXJkUmVmYCByZXN1bHRzIGluIHRoZSB0eXBlIGRlY2xhcmF0aW9uc1xuICAgIC8vIHRvIGlnbm9yZSB0aGUgYGRlZmF1bHRQcm9wc2AuIFRoZXJlZm9yZSwgdGhlIGRlZmF1bHQgcHJvcHMgYXJlIHR5cGVkXG4gICAgLy8gYXMgb3B0aW9uYWwgYW5kIHdlIGluaXRpYWxpemUgdGhlIHZhbHVlIGhlcmUgd2l0aCB0aGUgZGVmYXVsdCB2YWx1ZXMuXG4gICAgY29uc3Qgb2Zmc2V0VG9wID0gcHJvcHMub2Zmc2V0VG9wID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnQgPSBwcm9wcy5vZmZzZXRMZWZ0ID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA9IHByb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA/PyAnMHB4JztcbiAgICBjb25zdCBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA9XG4gICAgICBwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA/PyAnbWFpbic7XG4gICAgY29uc3QgekluZGV4ID0gcHJvcHMuekluZGV4ID8/IDEwMDAwO1xuXG4gICAgY29uc3QgZ2xvYmFsTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zR2xvYmFsUmVmXG4gICAgKTtcbiAgICBjb25zdCBwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zUGFnZVJlZlxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlblxuICAgICAgICAgICAgICAke2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKFxuICAgICAgICAgICAgICAgIDEwMCUgLSAke29mZnNldFRvcH0gLVxuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4IC1cbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdH0pO1xuICAgICAgICAgICAgICB0b3A6IGNhbGMoXG4gICAgICAgICAgICAgICAgJHtvZmZzZXRUb3B9ICsgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblxuZXhwb3J0IGRlZmF1bHQgUG9ydGFsc0NvbnRhaW5lcjtcbiJdfQ== */")
     }), 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

@@ -41,6 +41,7 @@ var CommercetoolsLogoSvg = require('@commercetools-frontend/assets/logos/commerc
 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 useResizeObserver = require('@react-hook/resize-observer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -70,9 +71,10 @@ var CommercetoolsLogoSvg__default = /*#__PURE__*/_interopDefault(CommercetoolsLo
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.5.0";
 
 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 +155,13 @@ var TabHeader = function TabHeader(props) {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$e = {
+var defaultProps$d = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$e;
+TabHeader.defaultProps = defaultProps$d;
 
-var defaultProps$d = {
+var defaultProps$c = {
   titleSize: 'small',
   truncate: false
 };
@@ -233,7 +235,7 @@ var PageHeaderTitle = function PageHeaderTitle(props) {
 
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$d;
+PageHeaderTitle.defaultProps = defaultProps$c;
 
 var TabControls = _styled__default["default"]("div", {
   target: "elpldre1"
@@ -266,10 +268,10 @@ var TabularPageContainer = function TabularPageContainer(props) {
 
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$c = {
+var defaultProps$b = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$c;
+TabularPageContainer.defaultProps = defaultProps$b;
 
 var FormControlsContainer = _styled__default["default"]("div", {
   target: "elpldre0"
@@ -355,7 +357,7 @@ FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$b = {
+var defaultProps$a = {
   hideControls: false
 };
 
@@ -388,7 +390,7 @@ var TabularMainPage = function TabularMainPage(props) {
 
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -411,7 +413,7 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-var defaultProps$a = {
+var defaultProps$9 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -434,9 +436,9 @@ var PageTopBar = function PageTopBar(props) {
 
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$a;
+PageTopBar.defaultProps = defaultProps$9;
 
-var defaultProps$9 = {
+var defaultProps$8 = {
   hideControls: false
 };
 
@@ -472,7 +474,7 @@ var TabularDetailPage = function TabularDetailPage(props) {
 
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -530,7 +532,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -606,7 +608,7 @@ var DialogContainer = function DialogContainer(props) {
 
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$8;
+DialogContainer.defaultProps = defaultProps$7;
 
 var _ref$4 = {
   name: "o5s7gs",
@@ -666,7 +668,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$7 = {
+var defaultProps$6 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -695,9 +697,9 @@ var DialogFooter = function DialogFooter(props) {
 
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$7;
+DialogFooter.defaultProps = defaultProps$6;
 
-var defaultProps$6 = {
+var defaultProps$5 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -729,12 +731,12 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
 
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.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.
 
 ConfirmationDialog.Intl = i18n.sharedMessages;
 
-var defaultProps$5 = {
+var defaultProps$4 = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -766,7 +768,7 @@ var FormDialog = function FormDialog(props) {
 
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$4; // 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 +827,7 @@ var LargeIconWrapper = _styled__default["default"]("span", {
 // does not recognize the object shape.
 
 
-var defaultProps$4 = {
+var defaultProps$3 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -874,7 +876,7 @@ var ModalPageTopBar = function ModalPageTopBar(props) {
 
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$4;
+ModalPageTopBar.defaultProps = defaultProps$3;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
@@ -883,7 +885,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$2 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -964,7 +966,7 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$3;
+ModalPage.defaultProps = defaultProps$2;
 
 var PageHeader = function PageHeader(props) {
   return jsxRuntime.jsxs("div", {
@@ -1042,7 +1044,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-var defaultProps$2 = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1080,12 +1082,12 @@ var FormModalPage = function FormModalPage(props) {
 
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$1; // 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$1 = {
+var defaultProps = {
   hideControls: false
 };
 
@@ -1128,7 +1130,7 @@ var TabularModalPage = function TabularModalPage(props) {
 
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1339,34 +1341,56 @@ var PageUnauthorized = function PageUnauthorized() {
 };
 PageUnauthorized.displayName = 'PageUnauthorized';
 
-var defaultProps = {
-  offsetTop: '0',
-  offsetLeft: '0',
-  offsetLeftOnExpandedMenu: '0',
-  containerSelectorToPreventScrollingOnOpen: 'main',
-  zIndex: 10000
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = react$1.useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver__default["default"](element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
 }; // 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(props) {
+var PortalsContainer = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _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 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);
   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:calc(100% - ", props.offsetLeft, ");top:", props.offsetTop, ";right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + ("" ), "" )
+      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, " + ", 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, ");}" + ("" ), "" )
     }), 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

@@ -19,7 +19,7 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import Spacings from '@commercetools-uikit/spacings';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import _styled from '@emotion/styled/base';
-import { isValidElement, useState, useRef, useEffect, useCallback } from 'react';
+import { isValidElement, useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 import IconButton from '@commercetools-uikit/icon-button';
@@ -37,9 +37,10 @@ import CommercetoolsLogoSvg from '@commercetools-frontend/assets/logos/commercet
 import Constraints from '@commercetools-uikit/constraints';
 import PageNotFoundSVG from '@commercetools-frontend/assets/images/desert-fox.svg';
 import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import useResizeObserver from '@react-hook/resize-observer';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.5.0";
 
 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 +137,14 @@ TabHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   exactPathMatch: _pt.bool.isRequired
 } : {};
 TabHeader.displayName = 'TabHeader';
-var defaultProps$e = {
+var defaultProps$d = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$e;
+TabHeader.defaultProps = defaultProps$d;
 
 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$d = {
+var defaultProps$c = {
   titleSize: 'small',
   truncate: false
 };
@@ -230,7 +231,7 @@ PageHeaderTitle.propTypes = process.env.NODE_ENV !== "production" ? {
   subtitle: _pt.oneOfType([_pt.string, _pt.element])
 } : {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$d;
+PageHeaderTitle.defaultProps = defaultProps$c;
 
 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 +280,10 @@ TabularPageContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   color: _pt.oneOf(['surface', 'neutral']).isRequired
 } : {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-var defaultProps$c = {
+var defaultProps$b = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$c;
+TabularPageContainer.defaultProps = defaultProps$b;
 
 var FormControlsContainer = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "elpldre0"
@@ -410,7 +411,7 @@ FormDeleteButton.propTypes = process.env.NODE_ENV !== "production" ? {
 FormDeleteButton.displayName = 'FormDeleteButton';
 FormDeleteButton.defaultProps = deleteDefaultProps;
 
-var defaultProps$b = {
+var defaultProps$a = {
   hideControls: false
 };
 
@@ -453,7 +454,7 @@ TabularMainPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$b; // Static export of pre-configured form control buttons to easily re-use
+TabularMainPage.defaultProps = defaultProps$a; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -476,7 +477,7 @@ var messages$2 = defineMessages({
   }
 });
 
-var defaultProps$a = {
+var defaultProps$9 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -508,9 +509,9 @@ PageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _pt.func.isRequired
 } : {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$a;
+PageTopBar.defaultProps = defaultProps$9;
 
-var defaultProps$9 = {
+var defaultProps$8 = {
   hideControls: false
 };
 
@@ -563,7 +564,7 @@ TabularDetailPage.propTypes = process.env.NODE_ENV !== "production" ? {
   onPreviousPathClick: _pt.func.isRequired
 } : {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$9; // Static export of pre-configured form control buttons to easily re-use
+TabularDetailPage.defaultProps = defaultProps$8; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -630,7 +631,7 @@ var getDefaultParentSelector$1 = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
 };
 
-var defaultProps$8 = {
+var defaultProps$7 = {
   size: 10,
   zIndex: 1000,
   getParentSelector: getDefaultParentSelector$1
@@ -727,7 +728,7 @@ DialogContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.any.isRequired
 } : {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$8;
+DialogContainer.defaultProps = defaultProps$7;
 
 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 +809,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$7 = {
+var defaultProps$6 = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -853,9 +854,9 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt.objectOf(_pt.string).isRequired
 } : {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$7;
+DialogFooter.defaultProps = defaultProps$6;
 
-var defaultProps$6 = {
+var defaultProps$5 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.confirm
 };
@@ -910,12 +911,12 @@ ConfirmationDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$6; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+ConfirmationDialog.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.
 
 ConfirmationDialog.Intl = sharedMessages;
 
-var defaultProps$5 = {
+var defaultProps$4 = {
   labelSecondary: sharedMessages.cancel,
   labelPrimary: sharedMessages.save
 };
@@ -970,7 +971,7 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   getParentSelector: _pt.func
 } : {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$5; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormDialog.defaultProps = defaultProps$4; // 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 +1061,7 @@ var LargeIconWrapper = _styled("span", process.env.NODE_ENV === "production" ? {
 // does not recognize the object shape.
 
 
-var defaultProps$4 = {
+var defaultProps$3 = {
   color: 'surface',
   previousPathLabel: messages$2.back
 };
@@ -1123,7 +1124,7 @@ ModalPageTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onClose: _pt.func.isRequired
 } : {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$4;
+ModalPageTopBar.defaultProps = defaultProps$3;
 
 var getDefaultParentSelector = function getDefaultParentSelector() {
   return process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
@@ -1132,7 +1133,7 @@ var getDefaultParentSelector = function getDefaultParentSelector() {
 // does not recognize the object shape.
 
 
-var defaultProps$3 = {
+var defaultProps$2 = {
   level: 1,
   baseZIndex: 1000,
   getParentSelector: getDefaultParentSelector,
@@ -1231,7 +1232,7 @@ ModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   })])
 } : {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$3;
+ModalPage.defaultProps = defaultProps$2;
 
 var PageHeader = function PageHeader(props) {
   return jsxs("div", {
@@ -1351,7 +1352,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton; // This is a convenienc
 
 CustomFormModalPage.Intl = sharedMessages;
 
-var defaultProps$2 = {
+var defaultProps$1 = {
   hideControls: false
 };
 
@@ -1424,12 +1425,12 @@ FormModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$2; // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+FormModalPage.defaultProps = defaultProps$1; // 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$1 = {
+var defaultProps = {
   hideControls: false
 };
 
@@ -1494,7 +1495,7 @@ TabularModalPage.propTypes = process.env.NODE_ENV !== "production" ? {
   hideControls: _pt.bool.isRequired
 } : {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$1; // Static export of pre-configured form control buttons to easily re-use
+TabularModalPage.defaultProps = defaultProps; // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1744,39 +1745,62 @@ 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',
-  offsetLeft: '0',
-  offsetLeftOnExpandedMenu: '0',
-  containerSelectorToPreventScrollingOnOpen: 'main',
-  zIndex: 10000
+
+var useObserverElementDimensions = function useObserverElementDimensions(element) {
+  var _useState = useState({
+    height: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  useResizeObserver(element, function (entry) {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
 }; // All modal components expect to be rendered inside this container.
 
+
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "qk9kof",
   styles: "display:flex;height:1px;margin-top:-1px"
 } : {
   name: "14eqpg3-PortalsContainer",
   styles: "display:flex;height:1px;margin-top:-1px;label:PortalsContainer;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRWMiLCJmaWxlIjoicG9ydGFscy1jb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBQT1JUQUxTX0NPTlRBSU5FUl9JRCB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2NvbnN0YW50cyc7XG5cbnR5cGUgVFBvcnRhbHNDb250YWluZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgdG9wLCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBoZWlnaHQgb2YgdGhlIGhlYWRlciBzZWN0aW9uLlxuICAgKi9cbiAgb2Zmc2V0VG9wOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIGxlZnQsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIG1pbiB3aWR0aCBvZiB0aGUgbmF2IG1lbnUuXG4gICAqL1xuICBvZmZzZXRMZWZ0OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIGxlZnQsIHdoZW4gb3BlbmVkLlxuICAgKiBUaGUgdmFsdWUgaXMgb25seSBhcHBsaWVkIHdoZW4gdGhlIGAuYm9keV9fbWVudS1vcGVuYCBnbG9iYWwgY2xhc3MgaXMgYWRkZWQgdG8gdGhlIERPTS5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSB3aWR0aCBvZiB0aGUgZXhwYW5kZWQgbmF2IG1lbnUuXG4gICAqL1xuICBvZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnU6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBDU1Mgc2VsZWN0b3IgdG8gYXBwbHkgdGhlIGBvdmVyZmxvdzogaGlkZGVuYCBzdHlsZSB0byAocHJldmVudGluZyBzY3JvbGxpbmcpXG4gICAqIHdoZW4gYSBtb2RhbCBjb250YWluZXIgaXMgb3Blbi5cbiAgICovXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYHotaW5kZXhgIHZhbHVlIHRvIGFwcGx5IHRvIHRoZSBwb3J0YWwgY29udGFpbmVyLiBEZWZhdWx0IHRvIGAxMDAwMGAuXG4gICAqL1xuICB6SW5kZXg6IG51bWJlcjtcbn07XG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8XG4gIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMsXG4gIHwgJ29mZnNldFRvcCdcbiAgfCAnb2Zmc2V0TGVmdCdcbiAgfCAnb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51J1xuICB8ICdjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbidcbiAgfCAnekluZGV4J1xuPiA9IHtcbiAgb2Zmc2V0VG9wOiAnMCcsXG4gIG9mZnNldExlZnQ6ICcwJyxcbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiAnMCcsXG4gIGNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVuOiAnbWFpbicsXG4gIHpJbmRleDogMTAwMDAsXG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IChwcm9wczogVFBvcnRhbHNDb250YWluZXJQcm9wcykgPT4gKFxuICA8PlxuICAgIDxHbG9iYWxcbiAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5cbiAgICAgICAgICAke3Byb3BzLmNvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRUb3B9KTtcbiAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0fSk7XG4gICAgICAgICAgdG9wOiAke3Byb3BzLm9mZnNldFRvcH07XG4gICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgIHotaW5kZXg6ICR7cHJvcHMuekluZGV4fTtcbiAgICAgICAgfVxuXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuLmJvZHlfX21lbnUtb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAke3Byb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudX0pO1xuICAgICAgICB9XG4gICAgICBgfVxuICAgIC8+XG4gICAgPGRpdlxuICAgICAgaWQ9e1BPUlRBTFNfQ09OVEFJTkVSX0lEfVxuICAgICAgLy8gVGhlIGNvbnRhaW5lciBuZWVkcyBhIGhlaWdodCBpbiBvcmRlciB0byBiZSB0YWJiYWJsZTogaHR0cHM6Ly9yZWFjdGpzL3JlYWN0LW1vZGFsIzc3NFxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGhlaWdodDogMXB4O1xuICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgYH1cbiAgICAvPlxuICA8Lz5cbik7XG5Qb3J0YWxzQ29udGFpbmVyLmRpc3BsYXlOYW1lID0gJ1BvcnRhbHNDb250YWluZXInO1xuUG9ydGFsc0NvbnRhaW5lci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IFBvcnRhbHNDb250YWluZXI7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3SGtCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcblxuY29uc3QgdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyA9IChcbiAgZWxlbWVudDogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PiB8IG51bGxcbik6IFRPYnNlcnZhYmxlRWxlbWVudERpbWVuc2lvbnMgPT4ge1xuICBjb25zdCBbZGltZW5zaW9ucywgc2V0RGltZW5zaW9uc10gPSB1c2VTdGF0ZTxUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zPih7XG4gICAgaGVpZ2h0OiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KTtcblxuICB1c2VSZXNpemVPYnNlcnZlcjxIVE1MRGl2RWxlbWVudD4oZWxlbWVudCwgKGVudHJ5KSA9PiB7XG4gICAgc2V0RGltZW5zaW9ucyh7XG4gICAgICBoZWlnaHQ6IGVudHJ5LmNvbnRlbnRSZWN0LmhlaWdodCxcbiAgICAgIHdpZHRoOiBlbnRyeS5jb250ZW50UmVjdC53aWR0aCxcbiAgICB9KTtcbiAgfSk7XG5cbiAgcmV0dXJuIGRpbWVuc2lvbnM7XG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IGZvcndhcmRSZWY8VExheW91dFJlZnMsIFRQb3J0YWxzQ29udGFpbmVyUHJvcHM+KFxuICAocHJvcHMsIHJlZikgPT4ge1xuICAgIC8vIEluaXRpYWxpemUgcHJvcHMgd2l0aCBkZWZhdWx0IHZhbHVlcy5cbiAgICAvLyBOT1RFOiB1c2luZyBgZGVmYXVsdFByb3BzYCB3aXRoIGBmb3J3YXJkUmVmYCByZXN1bHRzIGluIHRoZSB0eXBlIGRlY2xhcmF0aW9uc1xuICAgIC8vIHRvIGlnbm9yZSB0aGUgYGRlZmF1bHRQcm9wc2AuIFRoZXJlZm9yZSwgdGhlIGRlZmF1bHQgcHJvcHMgYXJlIHR5cGVkXG4gICAgLy8gYXMgb3B0aW9uYWwgYW5kIHdlIGluaXRpYWxpemUgdGhlIHZhbHVlIGhlcmUgd2l0aCB0aGUgZGVmYXVsdCB2YWx1ZXMuXG4gICAgY29uc3Qgb2Zmc2V0VG9wID0gcHJvcHMub2Zmc2V0VG9wID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnQgPSBwcm9wcy5vZmZzZXRMZWZ0ID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA9IHByb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA/PyAnMHB4JztcbiAgICBjb25zdCBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA9XG4gICAgICBwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA/PyAnbWFpbic7XG4gICAgY29uc3QgekluZGV4ID0gcHJvcHMuekluZGV4ID8/IDEwMDAwO1xuXG4gICAgY29uc3QgZ2xvYmFsTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zR2xvYmFsUmVmXG4gICAgKTtcbiAgICBjb25zdCBwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zUGFnZVJlZlxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlblxuICAgICAgICAgICAgICAke2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKFxuICAgICAgICAgICAgICAgIDEwMCUgLSAke29mZnNldFRvcH0gLVxuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4IC1cbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdH0pO1xuICAgICAgICAgICAgICB0b3A6IGNhbGMoXG4gICAgICAgICAgICAgICAgJHtvZmZzZXRUb3B9ICsgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblxuZXhwb3J0IGRlZmF1bHQgUG9ydGFsc0NvbnRhaW5lcjtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var PortalsContainer = function PortalsContainer(props) {
+var PortalsContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _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 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);
   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:calc(100% - ", props.offsetLeft, ");top:", props.offsetTop, ";right:0;bottom:0;z-index:", props.zIndex, ";}.ReactModal__Body--open.body__menu-open #", PORTALS_CONTAINER_ID, "{width:calc(100% - ", props.offsetLeftOnExpandedMenu, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRGlCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRQb3J0YWxzQ29udGFpbmVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgb2Zmc2V0IHZhbHVlIGZvciBwb3NpdGlvbmluZyB0aGUgY29udGFpbmVyIGZyb20gdGhlIHRvcCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgaGVpZ2h0IG9mIHRoZSBoZWFkZXIgc2VjdGlvbi5cbiAgICovXG4gIG9mZnNldFRvcDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSBsZWZ0LCB3aGVuIG9wZW5lZC5cbiAgICogVXN1YWxseSB0aGlzIGNvcnJlc3BvbmRzIHRvIHRoZSBtaW4gd2lkdGggb2YgdGhlIG5hdiBtZW51LlxuICAgKi9cbiAgb2Zmc2V0TGVmdDogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSBsZWZ0LCB3aGVuIG9wZW5lZC5cbiAgICogVGhlIHZhbHVlIGlzIG9ubHkgYXBwbGllZCB3aGVuIHRoZSBgLmJvZHlfX21lbnUtb3BlbmAgZ2xvYmFsIGNsYXNzIGlzIGFkZGVkIHRvIHRoZSBET00uXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgd2lkdGggb2YgdGhlIGV4cGFuZGVkIG5hdiBtZW51LlxuICAgKi9cbiAgb2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgQ1NTIHNlbGVjdG9yIHRvIGFwcGx5IHRoZSBgb3ZlcmZsb3c6IGhpZGRlbmAgc3R5bGUgdG8gKHByZXZlbnRpbmcgc2Nyb2xsaW5nKVxuICAgKiB3aGVuIGEgbW9kYWwgY29udGFpbmVyIGlzIG9wZW4uXG4gICAqL1xuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbjogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGB6LWluZGV4YCB2YWx1ZSB0byBhcHBseSB0byB0aGUgcG9ydGFsIGNvbnRhaW5lci4gRGVmYXVsdCB0byBgMTAwMDBgLlxuICAgKi9cbiAgekluZGV4OiBudW1iZXI7XG59O1xuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUUG9ydGFsc0NvbnRhaW5lclByb3BzLFxuICB8ICdvZmZzZXRUb3AnXG4gIHwgJ29mZnNldExlZnQnXG4gIHwgJ29mZnNldExlZnRPbkV4cGFuZGVkTWVudSdcbiAgfCAnY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW4nXG4gIHwgJ3pJbmRleCdcbj4gPSB7XG4gIG9mZnNldFRvcDogJzAnLFxuICBvZmZzZXRMZWZ0OiAnMCcsXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogJzAnLFxuICBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbjogJ21haW4nLFxuICB6SW5kZXg6IDEwMDAwLFxufTtcblxuLy8gQWxsIG1vZGFsIGNvbXBvbmVudHMgZXhwZWN0IHRvIGJlIHJlbmRlcmVkIGluc2lkZSB0aGlzIGNvbnRhaW5lci5cbmNvbnN0IFBvcnRhbHNDb250YWluZXIgPSAocHJvcHM6IFRQb3J0YWxzQ29udGFpbmVyUHJvcHMpID0+IChcbiAgPD5cbiAgICA8R2xvYmFsXG4gICAgICAvLyBBcHBseSBzb21lIGdsb2JhbCBzdHlsZXMsIGJhc2VkIG9uIHRoZSBgLlJlYWN0TW9kYWxfX0JvZHktLW9wZW5gIGNsYXNzLlxuICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuXG4gICAgICAgICAgJHtwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3Blbn0ge1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbiAjJHtQT1JUQUxTX0NPTlRBSU5FUl9JRH0ge1xuICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0VG9wfSk7XG4gICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7cHJvcHMub2Zmc2V0TGVmdH0pO1xuICAgICAgICAgIHRvcDogJHtwcm9wcy5vZmZzZXRUb3B9O1xuICAgICAgICAgIHJpZ2h0OiAwO1xuICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICB6LWluZGV4OiAke3Byb3BzLnpJbmRleH07XG4gICAgICAgIH1cblxuICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtwcm9wcy5vZmZzZXRMZWZ0T25FeHBhbmRlZE1lbnV9KTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAvPlxuICAgIDxkaXZcbiAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgIC8vIFRoZSBjb250YWluZXIgbmVlZHMgYSBoZWlnaHQgaW4gb3JkZXIgdG8gYmUgdGFiYmFibGU6IGh0dHBzOi8vcmVhY3Rqcy9yZWFjdC1tb2RhbCM3NzRcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBoZWlnaHQ6IDFweDtcbiAgICAgICAgbWFyZ2luLXRvcDogLTFweDtcbiAgICAgIGB9XG4gICAgLz5cbiAgPC8+XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblBvcnRhbHNDb250YWluZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBQb3J0YWxzQ29udGFpbmVyO1xuIl19 */")
+      styles: /*#__PURE__*/css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", 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, " + ", globalNotificationsElementDimensions.height, "px +\n                  ", pageNotificationsElementDimensions.height, "px\n              );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:PortalsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcnRhbHMtY29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RnFCIiwiZmlsZSI6InBvcnRhbHMtY29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgTXV0YWJsZVJlZk9iamVjdCxcbiAgdHlwZSBSZWZPYmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB1c2VSZXNpemVPYnNlcnZlciBmcm9tICdAcmVhY3QtaG9vay9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHsgUE9SVEFMU19DT05UQUlORVJfSUQgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuXG50eXBlIFRMYXlvdXRSZWZzID0ge1xuICBub3RpZmljYXRpb25zR2xvYmFsUmVmOiBNdXRhYmxlUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbm90aWZpY2F0aW9uc1BhZ2VSZWY6IE11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQ+O1xufTtcbnR5cGUgVE9ic2VydmFibGVFbGVtZW50RGltZW5zaW9ucyA9IHtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG59O1xudHlwZSBUUG9ydGFsc0NvbnRhaW5lclByb3BzID0ge1xuICAvKipcbiAgICogVGhlIG9mZnNldCB2YWx1ZSBmb3IgcG9zaXRpb25pbmcgdGhlIGNvbnRhaW5lciBmcm9tIHRoZSB0b3AsIHdoZW4gb3BlbmVkLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHNlY3Rpb24uXG4gICAqL1xuICBvZmZzZXRUb3A6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFVzdWFsbHkgdGhpcyBjb3JyZXNwb25kcyB0byB0aGUgbWluIHdpZHRoIG9mIHRoZSBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBvZmZzZXQgdmFsdWUgZm9yIHBvc2l0aW9uaW5nIHRoZSBjb250YWluZXIgZnJvbSB0aGUgbGVmdCwgd2hlbiBvcGVuZWQuXG4gICAqIFRoZSB2YWx1ZSBpcyBvbmx5IGFwcGxpZWQgd2hlbiB0aGUgYC5ib2R5X19tZW51LW9wZW5gIGdsb2JhbCBjbGFzcyBpcyBhZGRlZCB0byB0aGUgRE9NLlxuICAgKiBVc3VhbGx5IHRoaXMgY29ycmVzcG9uZHMgdG8gdGhlIHdpZHRoIG9mIHRoZSBleHBhbmRlZCBuYXYgbWVudS5cbiAgICovXG4gIG9mZnNldExlZnRPbkV4cGFuZGVkTWVudTogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIENTUyBzZWxlY3RvciB0byBhcHBseSB0aGUgYG92ZXJmbG93OiBoaWRkZW5gIHN0eWxlIHRvIChwcmV2ZW50aW5nIHNjcm9sbGluZylcbiAgICogd2hlbiBhIG1vZGFsIGNvbnRhaW5lciBpcyBvcGVuLlxuICAgKi9cbiAgY29udGFpbmVyU2VsZWN0b3JUb1ByZXZlbnRTY3JvbGxpbmdPbk9wZW46IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBgei1pbmRleGAgdmFsdWUgdG8gYXBwbHkgdG8gdGhlIHBvcnRhbCBjb250YWluZXIuIERlZmF1bHQgdG8gYDEwMDAwYC5cbiAgICovXG4gIHpJbmRleDogbnVtYmVyO1xufTtcblxuY29uc3QgdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyA9IChcbiAgZWxlbWVudDogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PiB8IG51bGxcbik6IFRPYnNlcnZhYmxlRWxlbWVudERpbWVuc2lvbnMgPT4ge1xuICBjb25zdCBbZGltZW5zaW9ucywgc2V0RGltZW5zaW9uc10gPSB1c2VTdGF0ZTxUT2JzZXJ2YWJsZUVsZW1lbnREaW1lbnNpb25zPih7XG4gICAgaGVpZ2h0OiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KTtcblxuICB1c2VSZXNpemVPYnNlcnZlcjxIVE1MRGl2RWxlbWVudD4oZWxlbWVudCwgKGVudHJ5KSA9PiB7XG4gICAgc2V0RGltZW5zaW9ucyh7XG4gICAgICBoZWlnaHQ6IGVudHJ5LmNvbnRlbnRSZWN0LmhlaWdodCxcbiAgICAgIHdpZHRoOiBlbnRyeS5jb250ZW50UmVjdC53aWR0aCxcbiAgICB9KTtcbiAgfSk7XG5cbiAgcmV0dXJuIGRpbWVuc2lvbnM7XG59O1xuXG4vLyBBbGwgbW9kYWwgY29tcG9uZW50cyBleHBlY3QgdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoaXMgY29udGFpbmVyLlxuY29uc3QgUG9ydGFsc0NvbnRhaW5lciA9IGZvcndhcmRSZWY8VExheW91dFJlZnMsIFRQb3J0YWxzQ29udGFpbmVyUHJvcHM+KFxuICAocHJvcHMsIHJlZikgPT4ge1xuICAgIC8vIEluaXRpYWxpemUgcHJvcHMgd2l0aCBkZWZhdWx0IHZhbHVlcy5cbiAgICAvLyBOT1RFOiB1c2luZyBgZGVmYXVsdFByb3BzYCB3aXRoIGBmb3J3YXJkUmVmYCByZXN1bHRzIGluIHRoZSB0eXBlIGRlY2xhcmF0aW9uc1xuICAgIC8vIHRvIGlnbm9yZSB0aGUgYGRlZmF1bHRQcm9wc2AuIFRoZXJlZm9yZSwgdGhlIGRlZmF1bHQgcHJvcHMgYXJlIHR5cGVkXG4gICAgLy8gYXMgb3B0aW9uYWwgYW5kIHdlIGluaXRpYWxpemUgdGhlIHZhbHVlIGhlcmUgd2l0aCB0aGUgZGVmYXVsdCB2YWx1ZXMuXG4gICAgY29uc3Qgb2Zmc2V0VG9wID0gcHJvcHMub2Zmc2V0VG9wID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnQgPSBwcm9wcy5vZmZzZXRMZWZ0ID8/ICcwcHgnO1xuICAgIGNvbnN0IG9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA9IHByb3BzLm9mZnNldExlZnRPbkV4cGFuZGVkTWVudSA/PyAnMHB4JztcbiAgICBjb25zdCBjb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA9XG4gICAgICBwcm9wcy5jb250YWluZXJTZWxlY3RvclRvUHJldmVudFNjcm9sbGluZ09uT3BlbiA/PyAnbWFpbic7XG4gICAgY29uc3QgekluZGV4ID0gcHJvcHMuekluZGV4ID8/IDEwMDAwO1xuXG4gICAgY29uc3QgZ2xvYmFsTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zR2xvYmFsUmVmXG4gICAgKTtcbiAgICBjb25zdCBwYWdlTm90aWZpY2F0aW9uc0VsZW1lbnREaW1lbnNpb25zID0gdXNlT2JzZXJ2ZXJFbGVtZW50RGltZW5zaW9ucyhcbiAgICAgIChyZWYgYXMgTXV0YWJsZVJlZk9iamVjdDxUTGF5b3V0UmVmcz4pPy5jdXJyZW50Py5ub3RpZmljYXRpb25zUGFnZVJlZlxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIC8vIEFwcGx5IHNvbWUgZ2xvYmFsIHN0eWxlcywgYmFzZWQgb24gdGhlIGAuUmVhY3RNb2RhbF9fQm9keS0tb3BlbmAgY2xhc3MuXG4gICAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3BlblxuICAgICAgICAgICAgICAke2NvbnRhaW5lclNlbGVjdG9yVG9QcmV2ZW50U2Nyb2xsaW5nT25PcGVufSB7XG4gICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC5SZWFjdE1vZGFsX19Cb2R5LS1vcGVuICMke1BPUlRBTFNfQ09OVEFJTkVSX0lEfSB7XG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgICAgaGVpZ2h0OiBjYWxjKFxuICAgICAgICAgICAgICAgIDEwMCUgLSAke29mZnNldFRvcH0gLVxuICAgICAgICAgICAgICAgICAgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4IC1cbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdH0pO1xuICAgICAgICAgICAgICB0b3A6IGNhbGMoXG4gICAgICAgICAgICAgICAgJHtvZmZzZXRUb3B9ICsgJHtnbG9iYWxOb3RpZmljYXRpb25zRWxlbWVudERpbWVuc2lvbnMuaGVpZ2h0fXB4ICtcbiAgICAgICAgICAgICAgICAgICR7cGFnZU5vdGlmaWNhdGlvbnNFbGVtZW50RGltZW5zaW9ucy5oZWlnaHR9cHhcbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgcmlnaHQ6IDA7XG4gICAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAuUmVhY3RNb2RhbF9fQm9keS0tb3Blbi5ib2R5X19tZW51LW9wZW4gIyR7UE9SVEFMU19DT05UQUlORVJfSUR9IHtcbiAgICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7b2Zmc2V0TGVmdE9uRXhwYW5kZWRNZW51fSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGlkPXtQT1JUQUxTX0NPTlRBSU5FUl9JRH1cbiAgICAgICAgICAvLyBUaGUgY29udGFpbmVyIG5lZWRzIGEgaGVpZ2h0IGluIG9yZGVyIHRvIGJlIHRhYmJhYmxlOiBodHRwczovL3JlYWN0anMvcmVhY3QtbW9kYWwjNzc0XG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgaGVpZ2h0OiAxcHg7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAtMXB4O1xuICAgICAgICAgIGB9XG4gICAgICAgIC8+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuUG9ydGFsc0NvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdQb3J0YWxzQ29udGFpbmVyJztcblxuZXhwb3J0IGRlZmF1bHQgUG9ydGFsc0NvbnRhaW5lcjtcbiJdfQ== */")
     }), 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,3 +1,8 @@
+import { type MutableRefObject } from 'react';
+declare type TLayoutRefs = {
+    notificationsGlobalRef: MutableRefObject<HTMLDivElement>;
+    notificationsPageRef: MutableRefObject<HTMLDivElement>;
+};
 declare type TPortalsContainerProps = {
     offsetTop: string;
     offsetLeft: string;
@@ -5,9 +10,5 @@ declare type TPortalsContainerProps = {
     containerSelectorToPreventScrollingOnOpen: string;
     zIndex: number;
 };
-declare const PortalsContainer: {
-    (props: TPortalsContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-    defaultProps: Pick<TPortalsContainerProps, "zIndex" | "offsetTop" | "offsetLeft" | "offsetLeftOnExpandedMenu" | "containerSelectorToPreventScrollingOnOpen">;
-};
+declare const PortalsContainer: import("react").ForwardRefExoticComponent<TPortalsContainerProps & import("react").RefAttributes<TLayoutRefs>>;
 export default PortalsContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-components",
-  "version": "21.3.4",
+  "version": "21.5.0",
   "description": "Generic components for building Merchant Center applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -32,23 +32,24 @@
     "@commercetools-frontend/application-shell-connectors": "21.3.4",
     "@commercetools-frontend/assets": "21.0.0",
     "@commercetools-frontend/constants": "21.3.4",
-    "@commercetools-frontend/i18n": "21.3.4",
+    "@commercetools-frontend/i18n": "21.4.0",
     "@commercetools-frontend/l10n": "21.3.4",
-    "@commercetools-uikit/card": "^14.0.1",
-    "@commercetools-uikit/constraints": "^14.0.1",
-    "@commercetools-uikit/design-system": "^14.0.0",
-    "@commercetools-uikit/flat-button": "^14.0.6",
-    "@commercetools-uikit/icon-button": "^14.0.6",
-    "@commercetools-uikit/icons": "^14.0.1",
-    "@commercetools-uikit/messages": "^14.0.1",
-    "@commercetools-uikit/primary-button": "^14.0.6",
-    "@commercetools-uikit/secondary-button": "^14.0.6",
-    "@commercetools-uikit/secondary-icon-button": "^14.0.6",
-    "@commercetools-uikit/spacings": "^14.0.6",
-    "@commercetools-uikit/text": "^14.0.1",
-    "@commercetools-uikit/utils": "^14.0.1",
+    "@commercetools-uikit/card": "^15.0.0",
+    "@commercetools-uikit/constraints": "^15.0.0",
+    "@commercetools-uikit/design-system": "^15.0.0",
+    "@commercetools-uikit/flat-button": "^15.0.0",
+    "@commercetools-uikit/icon-button": "^15.0.0",
+    "@commercetools-uikit/icons": "^15.0.0",
+    "@commercetools-uikit/messages": "^15.0.0",
+    "@commercetools-uikit/primary-button": "^15.0.0",
+    "@commercetools-uikit/secondary-button": "^15.0.0",
+    "@commercetools-uikit/secondary-icon-button": "^15.0.0",
+    "@commercetools-uikit/spacings": "^15.0.0",
+    "@commercetools-uikit/text": "^15.0.0",
+    "@commercetools-uikit/utils": "^15.0.0",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
+    "@react-hook/resize-observer": "1.2.5",
     "@types/history": "4.7.11",
     "@types/lodash": "^4.14.181",
     "@types/prop-types": "^15.7.5",
@@ -63,7 +64,7 @@
   "devDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "5.24.8",
+    "react-intl": "^5.25.0",
     "react-router-dom": "5.3.0"
   },
   "peerDependencies": {