@commercetools-frontend/application-components 22.30.3 → 22.32.0

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

@@ -14,7 +14,6 @@ import Text from '@commercetools-uikit/text';
 import { warning, useWarning } from '@commercetools-uikit/utils';
 import { css, ClassNames, Global } from '@emotion/react';
 import { designTokens as designTokens$1, transformTokensToCssVarsReferences, customProperties } from '@commercetools-uikit/design-system';
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { cloneElement, useState, useRef, useEffect, useCallback, Fragment as Fragment$1, isValidElement, lazy, Children, forwardRef } from 'react';
 import _styled from '@emotion/styled/base';
@@ -51,20 +50,18 @@ import useResizeObserver from '@react-hook/resize-observer';
 import { useMutationObserver } from '@commercetools-uikit/hooks';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.30.3";
-
-var _context, _context2, _context3, _context4, _context5;
+var version = "22.32.0";
 
 // We keep these tokens as they are related to page layout components which should have
 // a slightly different layout (margins/paddings) when used within a Custom View panel.
 // https://github.com/commercetools/merchant-center-application-kit/pull/3353
 const themesOverrides = {
   default: {
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(designTokens$1.spacing55),
-    marginForPageContent: _concatInstanceProperty(_context = "".concat(designTokens$1.spacing50, " ")).call(_context, designTokens$1.spacing55),
-    paddingForDetailPageHeader: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(designTokens$1.spacing50, " ")).call(_context3, designTokens$1.spacing55, " ")).call(_context2, designTokens$1.spacing40),
-    paddingForMainPageHeader: _concatInstanceProperty(_context4 = "".concat(designTokens$1.spacing50, " ")).call(_context4, designTokens$1.spacing55, " 0"),
-    paddingForTabularPageHeader: _concatInstanceProperty(_context5 = "".concat(designTokens$1.spacing40, " ")).call(_context5, designTokens$1.spacing55, " 0"),
+    marginForCustomViewsSelectorAsTabular: `0 ${designTokens$1.spacing55}`,
+    marginForPageContent: `${designTokens$1.spacing50} ${designTokens$1.spacing55}`,
+    paddingForDetailPageHeader: `${designTokens$1.spacing50} ${designTokens$1.spacing55} ${designTokens$1.spacing40}`,
+    paddingForMainPageHeader: `${designTokens$1.spacing50} ${designTokens$1.spacing55} 0`,
+    paddingForTabularPageHeader: `${designTokens$1.spacing40} ${designTokens$1.spacing55} 0`,
     backgroundColorForNavbar: designTokens$1.colorPrimary10,
     backgroundColorForNavbarHeader: designTokens$1.colorPrimary10,
     fontColorForTabLabelWhenActive: designTokens$1.colorPrimary
@@ -183,13 +180,14 @@ const getModalContentStyles = props => {
   const baseStyles = /*#__PURE__*/css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0V3QiIsImZpbGUiOiJkaWFsb2cuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCB0eXBlIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgYXMgdWlLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBTdHlsZVByb3BzID0ge1xuICBzaXplOiAnbScgfCAnbCcgfCA3IHwgOCB8IDkgfCAxMCB8IDExIHwgMTIgfCAxMyB8IDE2IHwgJ3NjYWxlJztcbiAgekluZGV4PzogbnVtYmVyO1xufTtcblxuY29uc3QgZ2V0Q29uc3RyYWludEZvckdyaWRTdHlsZSA9IChzaXplOiBTdHlsZVByb3BzWydzaXplJ10pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSA3OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnQ3O1xuICAgIGNhc2UgODpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50ODtcbiAgICBjYXNlIDk6XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gdWlLaXREZXNpZ25Ub2tlbnMuY29uc3RyYWludDk7XG4gICAgY2FzZSAxMDpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTA7XG4gICAgY2FzZSAxMTpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTE7XG4gICAgY2FzZSAxMjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTI7XG4gICAgY2FzZSAxMzpcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTM7XG4gICAgY2FzZSAxNjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTY7XG4gICAgY2FzZSAnc2NhbGUnOlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IGdldE1vZGFsQ29udGVudFN0eWxlcyA9IChwcm9wczogU3R5bGVQcm9wcyk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4ge1xuICBjb25zdCBzaXplQ29uc3RyYWludCA9IGdldENvbnN0cmFpbnRGb3JHcmlkU3R5bGUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGdyaWRTdHlsZSA9XG4gICAgcHJvcHMuc2l6ZSA9PT0gJ3NjYWxlJ1xuICAgICAgPyBjc3NgXG4gICAgICAgICAgZ3JpZDpcbiAgICAgICAgICAgIFtyb3cxLXN0YXJ0XSAndG9wIHRvcCB0b3AnIG1pbm1heChcbiAgICAgICAgICAgICAgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9LFxuICAgICAgICAgICAgICAxZnJcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIFtyb3cxLWVuZF1cbiAgICAgICAgICAgIFtyb3cyLXN0YXJ0XSAnbGVmdCBtYWluIHJpZ2h0JyBtaW5tYXgoMCwgMTAwJSkgW3JvdzItZW5kXVxuICAgICAgICAgICAgW3JvdzMtc3RhcnRdICdib3R0b20gYm90dG9tIGJvdHRvbScgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzMtZW5kXSAvICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSAxZnIgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBncmlkOlxuICAgICAgICAgICAgW3JvdzEtc3RhcnRdICd0b3AgdG9wIHRvcCcgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzEtZW5kXVxuICAgICAgICAgICAgW3JvdzItc3RhcnRdICdsZWZ0IG1haW4gcmlnaHQnIG1pbm1heCgwLCAxMDAlKSBbcm93Mi1lbmRdXG4gICAgICAgICAgICBbcm93My1zdGFydF0gJ2JvdHRvbSBib3R0b20gYm90dG9tJyBtaW5tYXgoXG4gICAgICAgICAgICAgICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSxcbiAgICAgICAgICAgICAgMWZyXG4gICAgICAgICAgICApXG4gICAgICAgICAgICBbcm93My1lbmRdIC8gbWlubWF4KCR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSwgMWZyKVxuICAgICAgICAgICAgJHtzaXplQ29uc3RyYWludH1cbiAgICAgICAgICAgIG1pbm1heCgke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sIDFmcik7XG4gICAgICAgIGA7XG5cbiAgLy8gVG8gZW5zdXJlIHRoYXQgdGhlIG1vdXNlIGNsaWNrIG9uIHRoZSBvdmVybGF5IHN1cmZhY2UgZ29lcyBcInRocm91Z2hcIlxuICAvLyBhbmQgdHJpZ2dlcnMgdGhlIG1vZGFsIHRvIGNsb3NlLCB3ZSBuZWVkIHRvIHR1cm4gb2ZmIHRoZSBwb2ludGVyIGV2ZW50cy5cbiAgY29uc3QgYmFzZVN0eWxlcyA9IGNzc2BcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgJHtncmlkU3R5bGV9O1xuICBgO1xuICByZXR1cm4gYmFzZVN0eWxlcztcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgzMiwgNjIsIDcyLCAwLjUpO1xuICBvcGFjaXR5OiAxO1xuYDtcbiJdfQ== */");
   return baseStyles;
 };
-const getOverlayStyles$1 = props => /*#__PURE__*/css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-"".concat(props.zIndex, " !important") : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + (process.env.NODE_ENV === "production" ? "" : ";label:getOverlayStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0Y0RSIsImZpbGUiOiJkaWFsb2cuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCB0eXBlIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgYXMgdWlLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBTdHlsZVByb3BzID0ge1xuICBzaXplOiAnbScgfCAnbCcgfCA3IHwgOCB8IDkgfCAxMCB8IDExIHwgMTIgfCAxMyB8IDE2IHwgJ3NjYWxlJztcbiAgekluZGV4PzogbnVtYmVyO1xufTtcblxuY29uc3QgZ2V0Q29uc3RyYWludEZvckdyaWRTdHlsZSA9IChzaXplOiBTdHlsZVByb3BzWydzaXplJ10pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSA3OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnQ3O1xuICAgIGNhc2UgODpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50ODtcbiAgICBjYXNlIDk6XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gdWlLaXREZXNpZ25Ub2tlbnMuY29uc3RyYWludDk7XG4gICAgY2FzZSAxMDpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTA7XG4gICAgY2FzZSAxMTpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTE7XG4gICAgY2FzZSAxMjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTI7XG4gICAgY2FzZSAxMzpcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTM7XG4gICAgY2FzZSAxNjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTY7XG4gICAgY2FzZSAnc2NhbGUnOlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IGdldE1vZGFsQ29udGVudFN0eWxlcyA9IChwcm9wczogU3R5bGVQcm9wcyk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4ge1xuICBjb25zdCBzaXplQ29uc3RyYWludCA9IGdldENvbnN0cmFpbnRGb3JHcmlkU3R5bGUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGdyaWRTdHlsZSA9XG4gICAgcHJvcHMuc2l6ZSA9PT0gJ3NjYWxlJ1xuICAgICAgPyBjc3NgXG4gICAgICAgICAgZ3JpZDpcbiAgICAgICAgICAgIFtyb3cxLXN0YXJ0XSAndG9wIHRvcCB0b3AnIG1pbm1heChcbiAgICAgICAgICAgICAgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9LFxuICAgICAgICAgICAgICAxZnJcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIFtyb3cxLWVuZF1cbiAgICAgICAgICAgIFtyb3cyLXN0YXJ0XSAnbGVmdCBtYWluIHJpZ2h0JyBtaW5tYXgoMCwgMTAwJSkgW3JvdzItZW5kXVxuICAgICAgICAgICAgW3JvdzMtc3RhcnRdICdib3R0b20gYm90dG9tIGJvdHRvbScgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzMtZW5kXSAvICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSAxZnIgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBncmlkOlxuICAgICAgICAgICAgW3JvdzEtc3RhcnRdICd0b3AgdG9wIHRvcCcgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzEtZW5kXVxuICAgICAgICAgICAgW3JvdzItc3RhcnRdICdsZWZ0IG1haW4gcmlnaHQnIG1pbm1heCgwLCAxMDAlKSBbcm93Mi1lbmRdXG4gICAgICAgICAgICBbcm93My1zdGFydF0gJ2JvdHRvbSBib3R0b20gYm90dG9tJyBtaW5tYXgoXG4gICAgICAgICAgICAgICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSxcbiAgICAgICAgICAgICAgMWZyXG4gICAgICAgICAgICApXG4gICAgICAgICAgICBbcm93My1lbmRdIC8gbWlubWF4KCR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSwgMWZyKVxuICAgICAgICAgICAgJHtzaXplQ29uc3RyYWludH1cbiAgICAgICAgICAgIG1pbm1heCgke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sIDFmcik7XG4gICAgICAgIGA7XG5cbiAgLy8gVG8gZW5zdXJlIHRoYXQgdGhlIG1vdXNlIGNsaWNrIG9uIHRoZSBvdmVybGF5IHN1cmZhY2UgZ29lcyBcInRocm91Z2hcIlxuICAvLyBhbmQgdHJpZ2dlcnMgdGhlIG1vZGFsIHRvIGNsb3NlLCB3ZSBuZWVkIHRvIHR1cm4gb2ZmIHRoZSBwb2ludGVyIGV2ZW50cy5cbiAgY29uc3QgYmFzZVN0eWxlcyA9IGNzc2BcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgJHtncmlkU3R5bGV9O1xuICBgO1xuICByZXR1cm4gYmFzZVN0eWxlcztcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgzMiwgNjIsIDcyLCAwLjUpO1xuICBvcGFjaXR5OiAxO1xuYDtcbiJdfQ== */");
+const getOverlayStyles$1 = props => /*#__PURE__*/css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ?
+// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+`${props.zIndex} !important` : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + (process.env.NODE_ENV === "production" ? "" : ";label:getOverlayStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0Y0RSIsImZpbGUiOiJkaWFsb2cuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCB0eXBlIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgYXMgdWlLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxudHlwZSBTdHlsZVByb3BzID0ge1xuICBzaXplOiAnbScgfCAnbCcgfCA3IHwgOCB8IDkgfCAxMCB8IDExIHwgMTIgfCAxMyB8IDE2IHwgJ3NjYWxlJztcbiAgekluZGV4PzogbnVtYmVyO1xufTtcblxuY29uc3QgZ2V0Q29uc3RyYWludEZvckdyaWRTdHlsZSA9IChzaXplOiBTdHlsZVByb3BzWydzaXplJ10pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSA3OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnQ3O1xuICAgIGNhc2UgODpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50ODtcbiAgICBjYXNlIDk6XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gdWlLaXREZXNpZ25Ub2tlbnMuY29uc3RyYWludDk7XG4gICAgY2FzZSAxMDpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTA7XG4gICAgY2FzZSAxMTpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTE7XG4gICAgY2FzZSAxMjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTI7XG4gICAgY2FzZSAxMzpcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTM7XG4gICAgY2FzZSAxNjpcbiAgICAgIHJldHVybiB1aUtpdERlc2lnblRva2Vucy5jb25zdHJhaW50MTY7XG4gICAgY2FzZSAnc2NhbGUnOlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHVpS2l0RGVzaWduVG9rZW5zLmNvbnN0cmFpbnRTY2FsZTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IGdldE1vZGFsQ29udGVudFN0eWxlcyA9IChwcm9wczogU3R5bGVQcm9wcyk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4ge1xuICBjb25zdCBzaXplQ29uc3RyYWludCA9IGdldENvbnN0cmFpbnRGb3JHcmlkU3R5bGUocHJvcHMuc2l6ZSk7XG4gIGNvbnN0IGdyaWRTdHlsZSA9XG4gICAgcHJvcHMuc2l6ZSA9PT0gJ3NjYWxlJ1xuICAgICAgPyBjc3NgXG4gICAgICAgICAgZ3JpZDpcbiAgICAgICAgICAgIFtyb3cxLXN0YXJ0XSAndG9wIHRvcCB0b3AnIG1pbm1heChcbiAgICAgICAgICAgICAgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9LFxuICAgICAgICAgICAgICAxZnJcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIFtyb3cxLWVuZF1cbiAgICAgICAgICAgIFtyb3cyLXN0YXJ0XSAnbGVmdCBtYWluIHJpZ2h0JyBtaW5tYXgoMCwgMTAwJSkgW3JvdzItZW5kXVxuICAgICAgICAgICAgW3JvdzMtc3RhcnRdICdib3R0b20gYm90dG9tIGJvdHRvbScgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzMtZW5kXSAvICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSAxZnIgJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nWGx9O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBncmlkOlxuICAgICAgICAgICAgW3JvdzEtc3RhcnRdICd0b3AgdG9wIHRvcCcgbWlubWF4KFxuICAgICAgICAgICAgICAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sXG4gICAgICAgICAgICAgIDFmclxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgW3JvdzEtZW5kXVxuICAgICAgICAgICAgW3JvdzItc3RhcnRdICdsZWZ0IG1haW4gcmlnaHQnIG1pbm1heCgwLCAxMDAlKSBbcm93Mi1lbmRdXG4gICAgICAgICAgICBbcm93My1zdGFydF0gJ2JvdHRvbSBib3R0b20gYm90dG9tJyBtaW5tYXgoXG4gICAgICAgICAgICAgICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSxcbiAgICAgICAgICAgICAgMWZyXG4gICAgICAgICAgICApXG4gICAgICAgICAgICBbcm93My1lbmRdIC8gbWlubWF4KCR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZ1hsfSwgMWZyKVxuICAgICAgICAgICAgJHtzaXplQ29uc3RyYWludH1cbiAgICAgICAgICAgIG1pbm1heCgke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmdYbH0sIDFmcik7XG4gICAgICAgIGA7XG5cbiAgLy8gVG8gZW5zdXJlIHRoYXQgdGhlIG1vdXNlIGNsaWNrIG9uIHRoZSBvdmVybGF5IHN1cmZhY2UgZ29lcyBcInRocm91Z2hcIlxuICAvLyBhbmQgdHJpZ2dlcnMgdGhlIG1vZGFsIHRvIGNsb3NlLCB3ZSBuZWVkIHRvIHR1cm4gb2ZmIHRoZSBwb2ludGVyIGV2ZW50cy5cbiAgY29uc3QgYmFzZVN0eWxlcyA9IGNzc2BcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgJHtncmlkU3R5bGV9O1xuICBgO1xuICByZXR1cm4gYmFzZVN0eWxlcztcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgzMiwgNjIsIDcyLCAwLjUpO1xuICBvcGFjaXR5OiAxO1xuYDtcbiJdfQ== */");
 
 function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__$c() { 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)."; }
-const getDefaultParentSelector$1 = () => process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
+const getDefaultParentSelector$1 = () => process.env.NODE_ENV === 'test' ? document.body : document.querySelector(`#${PORTALS_CONTAINER_ID}`);
 const getOverlayElement$1 = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
@@ -380,20 +378,26 @@ const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : i
 const DialogFooter = props => {
   const intl = useIntl();
   return jsx("div", {
-    css: /*#__PURE__*/css("margin-top:", designTokens$1.spacing50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:DialogFooter;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy1mb290ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDYyIsImZpbGUiOiJkaWFsb2ctZm9vdGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgUmVhY3RFbGVtZW50LCBTeW50aGV0aWNFdmVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwsIHR5cGUgSW50bFNoYXBlIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgYXMgdWlLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBQcmltYXJ5QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3ByaW1hcnktYnV0dG9uJztcbmltcG9ydCBTZWNvbmRhcnlCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2Vjb25kYXJ5LWJ1dHRvbic7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IGZpbHRlckRhdGFBdHRyaWJ1dGVzIGZyb20gJy4uLy4uLy4uL3V0aWxzL2ZpbHRlci1kYXRhLWF0dHJpYnV0ZXMnO1xuXG4vLyBOT1RFOiB0aGUgYE1lc3NhZ2VEZXNjcmlwdG9yYCB0eXBlIGlzIGV4cG9zZWQgYnkgYHJlYWN0LWludGxgLlxuLy8gSG93ZXZlciwgd2UgbmVlZCB0byBleHBsaWNpdGx5IGRlZmluZSB0aGlzIG90aGVyd2lzZSB0aGUgcHJvcC10eXBlcyBiYWJlbCBwbHVnaW5cbi8vIGRvZXMgbm90IHJlY29nbml6ZSB0aGUgb2JqZWN0IHNoYXBlLlxudHlwZSBNZXNzYWdlRGVzY3JpcHRvciA9IHtcbiAgaWQ6IHN0cmluZztcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmcgfCBvYmplY3Q7XG4gIGRlZmF1bHRNZXNzYWdlPzogc3RyaW5nO1xufTtcbnR5cGUgTGFiZWwgPSBzdHJpbmcgfCBNZXNzYWdlRGVzY3JpcHRvcjtcbnR5cGUgUHJvcHMgPSB7XG4gIGxhYmVsU2Vjb25kYXJ5OiBMYWJlbDtcbiAgbGFiZWxQcmltYXJ5OiBMYWJlbDtcbiAgb25DYW5jZWw6IChldmVudDogU3ludGhldGljRXZlbnQpID0+IHZvaWQ7XG4gIG9uQ29uZmlybTogKGV2ZW50OiBTeW50aGV0aWNFdmVudCkgPT4gdm9pZDtcbiAgaXNQcmltYXJ5QnV0dG9uRGlzYWJsZWQ6IGJvb2xlYW47XG4gIGRhdGFBdHRyaWJ1dGVzUHJpbWFyeUJ1dHRvbjogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfTtcbiAgZGF0YUF0dHJpYnV0ZXNTZWNvbmRhcnlCdXR0b246IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH07XG4gIGNoaWxkcmVuPzogbmV2ZXI7XG4gIGljb25MZWZ0U2Vjb25kYXJ5QnV0dG9uPzogUmVhY3RFbGVtZW50O1xufTtcbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgUHJvcHMsXG4gIHwgJ2lzUHJpbWFyeUJ1dHRvbkRpc2FibGVkJ1xuICB8ICdkYXRhQXR0cmlidXRlc1ByaW1hcnlCdXR0b24nXG4gIHwgJ2RhdGFBdHRyaWJ1dGVzU2Vjb25kYXJ5QnV0dG9uJ1xuPiA9IHtcbiAgaXNQcmltYXJ5QnV0dG9uRGlzYWJsZWQ6IGZhbHNlLFxuICBkYXRhQXR0cmlidXRlc1ByaW1hcnlCdXR0b246IHt9LFxuICBkYXRhQXR0cmlidXRlc1NlY29uZGFyeUJ1dHRvbjoge30sXG59O1xuXG5jb25zdCBnZXRGb3JtYXR0ZWRMYWJlbCA9IChsYWJlbDogTGFiZWwsIGludGw6IEludGxTaGFwZSkgPT5cbiAgdHlwZW9mIGxhYmVsID09PSAnc3RyaW5nJyA/IGxhYmVsIDogaW50bC5mb3JtYXRNZXNzYWdlKGxhYmVsKTtcblxuY29uc3QgRGlhbG9nRm9vdGVyID0gKHByb3BzOiBQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBtYXJnaW4tdG9wOiAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmc1MH07XG4gICAgICBgfVxuICAgID5cbiAgICAgIDxTcGFjaW5ncy5JbmxpbmUgc2NhbGU9XCJtXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiIGp1c3RpZnlDb250ZW50PVwiZmxleC1lbmRcIj5cbiAgICAgICAgPFNlY29uZGFyeUJ1dHRvblxuICAgICAgICAgIGxhYmVsPXtnZXRGb3JtYXR0ZWRMYWJlbChwcm9wcy5sYWJlbFNlY29uZGFyeSwgaW50bCl9XG4gICAgICAgICAgb25DbGljaz17cHJvcHMub25DYW5jZWx9XG4gICAgICAgICAgaWNvbkxlZnQ9e3Byb3BzLmljb25MZWZ0U2Vjb25kYXJ5QnV0dG9ufVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcy5kYXRhQXR0cmlidXRlc1NlY29uZGFyeUJ1dHRvbil9XG4gICAgICAgIC8+XG4gICAgICAgIDxQcmltYXJ5QnV0dG9uXG4gICAgICAgICAgbGFiZWw9e2dldEZvcm1hdHRlZExhYmVsKHByb3BzLmxhYmVsUHJpbWFyeSwgaW50bCl9XG4gICAgICAgICAgb25DbGljaz17cHJvcHMub25Db25maXJtfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzUHJpbWFyeUJ1dHRvbkRpc2FibGVkfVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcy5kYXRhQXR0cmlidXRlc1ByaW1hcnlCdXR0b24pfVxuICAgICAgICAvPlxuICAgICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuRGlhbG9nRm9vdGVyLmRpc3BsYXlOYW1lID0gJ0RpYWxvZ0Zvb3Rlcic7XG5EaWFsb2dGb290ZXIuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBEaWFsb2dGb290ZXI7XG4iXX0= */"),
+    css: /*#__PURE__*/css("margin-top:", designTokens$1.spacing50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:DialogFooter;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRpYWxvZy1mb290ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEYyIsImZpbGUiOiJkaWFsb2ctZm9vdGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgUmVhY3RFbGVtZW50LCBTeW50aGV0aWNFdmVudCwgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlSW50bCwgdHlwZSBJbnRsU2hhcGUgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGRlc2lnblRva2VucyBhcyB1aUtpdERlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvcHJpbWFyeS1idXR0b24nO1xuaW1wb3J0IFNlY29uZGFyeUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zZWNvbmRhcnktYnV0dG9uJztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgZmlsdGVyRGF0YUF0dHJpYnV0ZXMgZnJvbSAnLi4vLi4vLi4vdXRpbHMvZmlsdGVyLWRhdGEtYXR0cmlidXRlcyc7XG5cbi8vIE5PVEU6IHRoZSBgTWVzc2FnZURlc2NyaXB0b3JgIHR5cGUgaXMgZXhwb3NlZCBieSBgcmVhY3QtaW50bGAuXG4vLyBIb3dldmVyLCB3ZSBuZWVkIHRvIGV4cGxpY2l0bHkgZGVmaW5lIHRoaXMgb3RoZXJ3aXNlIHRoZSBwcm9wLXR5cGVzIGJhYmVsIHBsdWdpblxuLy8gZG9lcyBub3QgcmVjb2duaXplIHRoZSBvYmplY3Qgc2hhcGUuXG50eXBlIE1lc3NhZ2VEZXNjcmlwdG9yID0ge1xuICBpZDogc3RyaW5nO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZyB8IG9iamVjdDtcbiAgZGVmYXVsdE1lc3NhZ2U/OiBzdHJpbmc7XG59O1xudHlwZSBMYWJlbCA9IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xudHlwZSBQcm9wcyA9IHtcbiAgbGFiZWxTZWNvbmRhcnk6IExhYmVsO1xuICBsYWJlbFByaW1hcnk6IExhYmVsO1xuICBvbkNhbmNlbDogKGV2ZW50OiBTeW50aGV0aWNFdmVudCkgPT4gdm9pZDtcbiAgb25Db25maXJtOiAoZXZlbnQ6IFN5bnRoZXRpY0V2ZW50KSA9PiB2b2lkO1xuICBpc1ByaW1hcnlCdXR0b25EaXNhYmxlZDogYm9vbGVhbjtcbiAgZGF0YUF0dHJpYnV0ZXNQcmltYXJ5QnV0dG9uOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xuICBkYXRhQXR0cmlidXRlc1NlY29uZGFyeUJ1dHRvbjogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfTtcbiAgY2hpbGRyZW4/OiBuZXZlcjtcbiAgaWNvbkxlZnRTZWNvbmRhcnlCdXR0b24/OiBSZWFjdEVsZW1lbnQ7XG4gIGZvb3RlckNvbnRlbnQ/OiBSZWFjdE5vZGU7XG59O1xuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBQcm9wcyxcbiAgfCAnaXNQcmltYXJ5QnV0dG9uRGlzYWJsZWQnXG4gIHwgJ2RhdGFBdHRyaWJ1dGVzUHJpbWFyeUJ1dHRvbidcbiAgfCAnZGF0YUF0dHJpYnV0ZXNTZWNvbmRhcnlCdXR0b24nXG4+ID0ge1xuICBpc1ByaW1hcnlCdXR0b25EaXNhYmxlZDogZmFsc2UsXG4gIGRhdGFBdHRyaWJ1dGVzUHJpbWFyeUJ1dHRvbjoge30sXG4gIGRhdGFBdHRyaWJ1dGVzU2Vjb25kYXJ5QnV0dG9uOiB7fSxcbn07XG5cbmNvbnN0IGdldEZvcm1hdHRlZExhYmVsID0gKGxhYmVsOiBMYWJlbCwgaW50bDogSW50bFNoYXBlKSA9PlxuICB0eXBlb2YgbGFiZWwgPT09ICdzdHJpbmcnID8gbGFiZWwgOiBpbnRsLmZvcm1hdE1lc3NhZ2UobGFiZWwpO1xuXG5jb25zdCBEaWFsb2dGb290ZXIgPSAocHJvcHM6IFByb3BzKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIG1hcmdpbi10b3A6ICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZzUwfTtcbiAgICAgIGB9XG4gICAgPlxuICAgICAgPFNwYWNpbmdzLklubGluZSBhbGlnbkl0ZW1zPVwiY2VudGVyXCIganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCI+XG4gICAgICAgIDxkaXY+e3Byb3BzLmZvb3RlckNvbnRlbnR9PC9kaXY+XG4gICAgICAgIDxTcGFjaW5ncy5JbmxpbmVcbiAgICAgICAgICBzY2FsZT1cIm1cIlxuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiZmxleC1lbmRcIlxuICAgICAgICA+XG4gICAgICAgICAgPFNlY29uZGFyeUJ1dHRvblxuICAgICAgICAgICAgbGFiZWw9e2dldEZvcm1hdHRlZExhYmVsKHByb3BzLmxhYmVsU2Vjb25kYXJ5LCBpbnRsKX1cbiAgICAgICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ2FuY2VsfVxuICAgICAgICAgICAgaWNvbkxlZnQ9e3Byb3BzLmljb25MZWZ0U2Vjb25kYXJ5QnV0dG9ufVxuICAgICAgICAgICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzLmRhdGFBdHRyaWJ1dGVzU2Vjb25kYXJ5QnV0dG9uKX1cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxQcmltYXJ5QnV0dG9uXG4gICAgICAgICAgICBsYWJlbD17Z2V0Rm9ybWF0dGVkTGFiZWwocHJvcHMubGFiZWxQcmltYXJ5LCBpbnRsKX1cbiAgICAgICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uQ29uZmlybX1cbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzUHJpbWFyeUJ1dHRvbkRpc2FibGVkfVxuICAgICAgICAgICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzLmRhdGFBdHRyaWJ1dGVzUHJpbWFyeUJ1dHRvbil9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICAgICA8L1NwYWNpbmdzLklubGluZT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5EaWFsb2dGb290ZXIuZGlzcGxheU5hbWUgPSAnRGlhbG9nRm9vdGVyJztcbkRpYWxvZ0Zvb3Rlci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IERpYWxvZ0Zvb3RlcjtcbiJdfQ== */"),
     children: jsxs(Spacings.Inline, {
-      scale: "m",
       alignItems: "center",
-      justifyContent: "flex-end",
-      children: [jsx(SecondaryButton, _objectSpread$6({
-        label: getFormattedLabel(props.labelSecondary, intl),
-        onClick: props.onCancel,
-        iconLeft: props.iconLeftSecondaryButton
-      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsx(PrimaryButton, _objectSpread$6({
-        label: getFormattedLabel(props.labelPrimary, intl),
-        onClick: props.onConfirm,
-        isDisabled: props.isPrimaryButtonDisabled
-      }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+      justifyContent: "space-between",
+      children: [jsx("div", {
+        children: props.footerContent
+      }), jsxs(Spacings.Inline, {
+        scale: "m",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        children: [jsx(SecondaryButton, _objectSpread$6({
+          label: getFormattedLabel(props.labelSecondary, intl),
+          onClick: props.onCancel,
+          iconLeft: props.iconLeftSecondaryButton
+        }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsx(PrimaryButton, _objectSpread$6({
+          label: getFormattedLabel(props.labelPrimary, intl),
+          onClick: props.onConfirm,
+          isDisabled: props.isPrimaryButtonDisabled
+        }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+      })]
     })
   });
 };
@@ -413,7 +417,8 @@ DialogFooter.propTypes = process.env.NODE_ENV !== "production" ? {
   isPrimaryButtonDisabled: _pt.bool.isRequired,
   dataAttributesPrimaryButton: _pt.objectOf(_pt.string).isRequired,
   dataAttributesSecondaryButton: _pt.objectOf(_pt.string).isRequired,
-  iconLeftSecondaryButton: _pt.element
+  iconLeftSecondaryButton: _pt.element,
+  footerContent: _pt.node
 } : {};
 DialogFooter.displayName = 'DialogFooter';
 DialogFooter.defaultProps = defaultProps$g;
@@ -504,7 +509,8 @@ const FormDialog = props => jsxs(DialogContainer, {
     onConfirm: props.onPrimaryButtonClick,
     dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
     dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
-    iconLeftSecondaryButton: props.iconLeftSecondaryButton
+    iconLeftSecondaryButton: props.iconLeftSecondaryButton,
+    footerContent: props.footerContent
   })]
 });
 FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -531,7 +537,8 @@ FormDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   dataAttributesSecondaryButton: _pt.objectOf(_pt.string),
   dataAttributesPrimaryButton: _pt.objectOf(_pt.string),
   getParentSelector: _pt.func,
-  iconLeftSecondaryButton: _pt.element
+  iconLeftSecondaryButton: _pt.element,
+  footerContent: _pt.node
 } : {};
 FormDialog.displayName = 'FormDialog';
 FormDialog.defaultProps = defaultProps$e;
@@ -659,14 +666,13 @@ const stylesBySize = {
     transitionTime: 300
   }
 };
-const getContainerStyles = props => {
-  var _context;
-  return /*#__PURE__*/css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ? // In case we're using a specific size, we want it to be used until there's no space left.
-  // In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
-  _concatInstanceProperty(_context = "min(".concat(stylesBySize[props.size].width, ", calc(100% - ")).call(_context, PORTALS_CONTAINER_INDENTATION_SIZE, ")) !important") : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + (process.env.NODE_ENV === "production" ? "" : ";label:getContainerStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZGFsLXBhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCOEUiLCJmaWxlIjoibW9kYWwtcGFnZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHR5cGUgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFBPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkUgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUTW9kYWxQYWdlU2l6ZSB9IGZyb20gJy4vbW9kYWwtcGFnZSc7XG5cbnR5cGUgU3R5bGVQcm9wcyA9IHtcbiAgekluZGV4PzogbnVtYmVyO1xuICBzaXplOiBUTW9kYWxQYWdlU2l6ZTtcbn07XG5cbmV4cG9ydCBjb25zdCBzdHlsZXNCeVNpemUgPSB7XG4gICcxMCc6IHtcbiAgICB3aWR0aDogJzYwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICAnMjAnOiB7XG4gICAgd2lkdGg6ICc5MDBweCcsXG4gICAgdHJhbnNpdGlvblRpbWU6IDIwMCxcbiAgfSxcbiAgJzMwJzoge1xuICAgIHdpZHRoOiAnMTIwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICBzY2FsZToge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgdHJhbnNpdGlvblRpbWU6IDMwMCxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFN0eWxlUHJvcHMpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAke3Byb3BzLnNpemUgIT09ICdzY2FsZSdcbiAgICA/IC8vIEluIGNhc2Ugd2UncmUgdXNpbmcgYSBzcGVjaWZpYyBzaXplLCB3ZSB3YW50IGl0IHRvIGJlIHVzZWQgdW50aWwgdGhlcmUncyBubyBzcGFjZSBsZWZ0LlxuICAgICAgLy8gSW4gc3VjaCBzY2VuYXJpbywgd2Ugd2FudCB0aGUgbW9kYWwgdG8gYmUgYXMgd2lkZSBhcyBwb3NzaWJsZSwgYnV0IHVzaW5nIHRoZSBzaGFyZWQgaW5kZW50YXRpb24gd2lkdGggc2l6ZS5cbiAgICAgIGBtaW4oJHtcbiAgICAgICAgc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoXG4gICAgICB9LCBjYWxjKDEwMCUgLSAke1BPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkV9KSkgIWltcG9ydGFudGBcbiAgICA6IHN0eWxlc0J5U2l6ZS5zY2FsZS53aWR0aH07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y3VzdG9tUHJvcGVydGllcy5jb2xvclN1cmZhY2V9O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDQwcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgb3V0bGluZTogMDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZChcbiAgICAke3Byb3BzLnNpemUgIT09ICdzY2FsZScgPyBzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0ud2lkdGggOiAnMzBweCd9LFxuICAgIDAsXG4gICAgMFxuICApO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0udHJhbnNpdGlvblRpbWV9bXMgZWFzZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogaHNsYSgxOTUsIDM1JSwgMjAlLCAwLjA1KTtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7c3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLnRyYW5zaXRpb25UaW1lfW1zIGVhc2U7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuQ29udGFpbmVyQW5pbWF0aW9uID0gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApICFpbXBvcnRhbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuT3ZlcmxheUFuaW1hdGlvbiA9ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJlZm9yZUNsb3NlQ29udGFpbmVyQW5pbWF0aW9uID0gKFxuICBwcm9wczogU3R5bGVQcm9wc1xuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoXG4gICAgJHtwcm9wcy5zaXplICE9PSAnc2NhbGUnID8gc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoIDogJzMwcHgnfSxcbiAgICAsXG4gICAgMCxcbiAgICAwXG4gICkgIWltcG9ydGFudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCZWZvcmVDbG9zZU92ZXJsYXlBbmltYXRpb24gPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG9wYWNpdHk6IDAgIWltcG9ydGFudDtcbmA7XG4iXX0= */");
-};
-const getOverlayStyles = props => /*#__PURE__*/css("position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-"".concat(props.zIndex, " !important") : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + (process.env.NODE_ENV === "production" ? "" : ";label:getOverlayStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZGFsLXBhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNENEUiLCJmaWxlIjoibW9kYWwtcGFnZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHR5cGUgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFBPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkUgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUTW9kYWxQYWdlU2l6ZSB9IGZyb20gJy4vbW9kYWwtcGFnZSc7XG5cbnR5cGUgU3R5bGVQcm9wcyA9IHtcbiAgekluZGV4PzogbnVtYmVyO1xuICBzaXplOiBUTW9kYWxQYWdlU2l6ZTtcbn07XG5cbmV4cG9ydCBjb25zdCBzdHlsZXNCeVNpemUgPSB7XG4gICcxMCc6IHtcbiAgICB3aWR0aDogJzYwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICAnMjAnOiB7XG4gICAgd2lkdGg6ICc5MDBweCcsXG4gICAgdHJhbnNpdGlvblRpbWU6IDIwMCxcbiAgfSxcbiAgJzMwJzoge1xuICAgIHdpZHRoOiAnMTIwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICBzY2FsZToge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgdHJhbnNpdGlvblRpbWU6IDMwMCxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFN0eWxlUHJvcHMpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAke3Byb3BzLnNpemUgIT09ICdzY2FsZSdcbiAgICA/IC8vIEluIGNhc2Ugd2UncmUgdXNpbmcgYSBzcGVjaWZpYyBzaXplLCB3ZSB3YW50IGl0IHRvIGJlIHVzZWQgdW50aWwgdGhlcmUncyBubyBzcGFjZSBsZWZ0LlxuICAgICAgLy8gSW4gc3VjaCBzY2VuYXJpbywgd2Ugd2FudCB0aGUgbW9kYWwgdG8gYmUgYXMgd2lkZSBhcyBwb3NzaWJsZSwgYnV0IHVzaW5nIHRoZSBzaGFyZWQgaW5kZW50YXRpb24gd2lkdGggc2l6ZS5cbiAgICAgIGBtaW4oJHtcbiAgICAgICAgc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoXG4gICAgICB9LCBjYWxjKDEwMCUgLSAke1BPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkV9KSkgIWltcG9ydGFudGBcbiAgICA6IHN0eWxlc0J5U2l6ZS5zY2FsZS53aWR0aH07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y3VzdG9tUHJvcGVydGllcy5jb2xvclN1cmZhY2V9O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDQwcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgb3V0bGluZTogMDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZChcbiAgICAke3Byb3BzLnNpemUgIT09ICdzY2FsZScgPyBzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0ud2lkdGggOiAnMzBweCd9LFxuICAgIDAsXG4gICAgMFxuICApO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0udHJhbnNpdGlvblRpbWV9bXMgZWFzZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogaHNsYSgxOTUsIDM1JSwgMjAlLCAwLjA1KTtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7c3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLnRyYW5zaXRpb25UaW1lfW1zIGVhc2U7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuQ29udGFpbmVyQW5pbWF0aW9uID0gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApICFpbXBvcnRhbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuT3ZlcmxheUFuaW1hdGlvbiA9ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJlZm9yZUNsb3NlQ29udGFpbmVyQW5pbWF0aW9uID0gKFxuICBwcm9wczogU3R5bGVQcm9wc1xuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoXG4gICAgJHtwcm9wcy5zaXplICE9PSAnc2NhbGUnID8gc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoIDogJzMwcHgnfSxcbiAgICAsXG4gICAgMCxcbiAgICAwXG4gICkgIWltcG9ydGFudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCZWZvcmVDbG9zZU92ZXJsYXlBbmltYXRpb24gPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG9wYWNpdHk6IDAgIWltcG9ydGFudDtcbmA7XG4iXX0= */");
+const getContainerStyles = props => /*#__PURE__*/css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ?
+// In case we're using a specific size, we want it to be used until there's no space left.
+// In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+`min(${stylesBySize[props.size].width}, calc(100% - ${PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + (process.env.NODE_ENV === "production" ? "" : ";label:getContainerStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZGFsLXBhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCOEUiLCJmaWxlIjoibW9kYWwtcGFnZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHR5cGUgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFBPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkUgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUTW9kYWxQYWdlU2l6ZSB9IGZyb20gJy4vbW9kYWwtcGFnZSc7XG5cbnR5cGUgU3R5bGVQcm9wcyA9IHtcbiAgekluZGV4PzogbnVtYmVyO1xuICBzaXplOiBUTW9kYWxQYWdlU2l6ZTtcbn07XG5cbmV4cG9ydCBjb25zdCBzdHlsZXNCeVNpemUgPSB7XG4gICcxMCc6IHtcbiAgICB3aWR0aDogJzYwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICAnMjAnOiB7XG4gICAgd2lkdGg6ICc5MDBweCcsXG4gICAgdHJhbnNpdGlvblRpbWU6IDIwMCxcbiAgfSxcbiAgJzMwJzoge1xuICAgIHdpZHRoOiAnMTIwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICBzY2FsZToge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgdHJhbnNpdGlvblRpbWU6IDMwMCxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFN0eWxlUHJvcHMpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAke3Byb3BzLnNpemUgIT09ICdzY2FsZSdcbiAgICA/IC8vIEluIGNhc2Ugd2UncmUgdXNpbmcgYSBzcGVjaWZpYyBzaXplLCB3ZSB3YW50IGl0IHRvIGJlIHVzZWQgdW50aWwgdGhlcmUncyBubyBzcGFjZSBsZWZ0LlxuICAgICAgLy8gSW4gc3VjaCBzY2VuYXJpbywgd2Ugd2FudCB0aGUgbW9kYWwgdG8gYmUgYXMgd2lkZSBhcyBwb3NzaWJsZSwgYnV0IHVzaW5nIHRoZSBzaGFyZWQgaW5kZW50YXRpb24gd2lkdGggc2l6ZS5cbiAgICAgIGBtaW4oJHtcbiAgICAgICAgc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoXG4gICAgICB9LCBjYWxjKDEwMCUgLSAke1BPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkV9KSkgIWltcG9ydGFudGBcbiAgICA6IHN0eWxlc0J5U2l6ZS5zY2FsZS53aWR0aH07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y3VzdG9tUHJvcGVydGllcy5jb2xvclN1cmZhY2V9O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDQwcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgb3V0bGluZTogMDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZChcbiAgICAke3Byb3BzLnNpemUgIT09ICdzY2FsZScgPyBzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0ud2lkdGggOiAnMzBweCd9LFxuICAgIDAsXG4gICAgMFxuICApO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0udHJhbnNpdGlvblRpbWV9bXMgZWFzZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogaHNsYSgxOTUsIDM1JSwgMjAlLCAwLjA1KTtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7c3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLnRyYW5zaXRpb25UaW1lfW1zIGVhc2U7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuQ29udGFpbmVyQW5pbWF0aW9uID0gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApICFpbXBvcnRhbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuT3ZlcmxheUFuaW1hdGlvbiA9ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJlZm9yZUNsb3NlQ29udGFpbmVyQW5pbWF0aW9uID0gKFxuICBwcm9wczogU3R5bGVQcm9wc1xuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoXG4gICAgJHtwcm9wcy5zaXplICE9PSAnc2NhbGUnID8gc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoIDogJzMwcHgnfSxcbiAgICAsXG4gICAgMCxcbiAgICAwXG4gICkgIWltcG9ydGFudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCZWZvcmVDbG9zZU92ZXJsYXlBbmltYXRpb24gPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG9wYWNpdHk6IDAgIWltcG9ydGFudDtcbmA7XG4iXX0= */");
+const getOverlayStyles = props => /*#__PURE__*/css("position:absolute;z-index:", typeof props.zIndex === 'number' ?
+// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+`${props.zIndex} !important` : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + (process.env.NODE_ENV === "production" ? "" : ";label:getOverlayStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZGFsLXBhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNENEUiLCJmaWxlIjoibW9kYWwtcGFnZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHR5cGUgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFBPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkUgfSBmcm9tICdAY29tbWVyY2V0b29scy1mcm9udGVuZC9jb25zdGFudHMnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBUTW9kYWxQYWdlU2l6ZSB9IGZyb20gJy4vbW9kYWwtcGFnZSc7XG5cbnR5cGUgU3R5bGVQcm9wcyA9IHtcbiAgekluZGV4PzogbnVtYmVyO1xuICBzaXplOiBUTW9kYWxQYWdlU2l6ZTtcbn07XG5cbmV4cG9ydCBjb25zdCBzdHlsZXNCeVNpemUgPSB7XG4gICcxMCc6IHtcbiAgICB3aWR0aDogJzYwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICAnMjAnOiB7XG4gICAgd2lkdGg6ICc5MDBweCcsXG4gICAgdHJhbnNpdGlvblRpbWU6IDIwMCxcbiAgfSxcbiAgJzMwJzoge1xuICAgIHdpZHRoOiAnMTIwMHB4JyxcbiAgICB0cmFuc2l0aW9uVGltZTogMjAwLFxuICB9LFxuICBzY2FsZToge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgdHJhbnNpdGlvblRpbWU6IDMwMCxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRDb250YWluZXJTdHlsZXMgPSAocHJvcHM6IFN0eWxlUHJvcHMpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHJpZ2h0OiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAke3Byb3BzLnNpemUgIT09ICdzY2FsZSdcbiAgICA/IC8vIEluIGNhc2Ugd2UncmUgdXNpbmcgYSBzcGVjaWZpYyBzaXplLCB3ZSB3YW50IGl0IHRvIGJlIHVzZWQgdW50aWwgdGhlcmUncyBubyBzcGFjZSBsZWZ0LlxuICAgICAgLy8gSW4gc3VjaCBzY2VuYXJpbywgd2Ugd2FudCB0aGUgbW9kYWwgdG8gYmUgYXMgd2lkZSBhcyBwb3NzaWJsZSwgYnV0IHVzaW5nIHRoZSBzaGFyZWQgaW5kZW50YXRpb24gd2lkdGggc2l6ZS5cbiAgICAgIGBtaW4oJHtcbiAgICAgICAgc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoXG4gICAgICB9LCBjYWxjKDEwMCUgLSAke1BPUlRBTFNfQ09OVEFJTkVSX0lOREVOVEFUSU9OX1NJWkV9KSkgIWltcG9ydGFudGBcbiAgICA6IHN0eWxlc0J5U2l6ZS5zY2FsZS53aWR0aH07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y3VzdG9tUHJvcGVydGllcy5jb2xvclN1cmZhY2V9O1xuICBib3gtc2hhZG93OiAwcHggMHB4IDQwcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgb3V0bGluZTogMDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZChcbiAgICAke3Byb3BzLnNpemUgIT09ICdzY2FsZScgPyBzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0ud2lkdGggOiAnMzBweCd9LFxuICAgIDAsXG4gICAgMFxuICApO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtzdHlsZXNCeVNpemVbcHJvcHMuc2l6ZV0udHJhbnNpdGlvblRpbWV9bXMgZWFzZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRPdmVybGF5U3R5bGVzID0gKHByb3BzOiBTdHlsZVByb3BzKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogJHt0eXBlb2YgcHJvcHMuekluZGV4ID09PSAnbnVtYmVyJ1xuICAgID8gLy8gVXNlIGAhaW1wb3J0YW50YCB0byBvdmVyd3JpdGUgdGhlIGRlZmF1bHQgdmFsdWUgYXNzaWduZWQgYnkgdGhlIFN0YWNraW5nIExheWVyIFN5c3RlbS5cbiAgICAgIGAke3Byb3BzLnpJbmRleH0gIWltcG9ydGFudGBcbiAgICA6ICdhdXRvJ307XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogaHNsYSgxOTUsIDM1JSwgMjAlLCAwLjA1KTtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7c3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLnRyYW5zaXRpb25UaW1lfW1zIGVhc2U7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuQ29udGFpbmVyQW5pbWF0aW9uID0gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApICFpbXBvcnRhbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0QWZ0ZXJPcGVuT3ZlcmxheUFuaW1hdGlvbiA9ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJlZm9yZUNsb3NlQ29udGFpbmVyQW5pbWF0aW9uID0gKFxuICBwcm9wczogU3R5bGVQcm9wc1xuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoXG4gICAgJHtwcm9wcy5zaXplICE9PSAnc2NhbGUnID8gc3R5bGVzQnlTaXplW3Byb3BzLnNpemVdLndpZHRoIDogJzMwcHgnfSxcbiAgICAsXG4gICAgMCxcbiAgICAwXG4gICkgIWltcG9ydGFudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCZWZvcmVDbG9zZU92ZXJsYXlBbmltYXRpb24gPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG9wYWNpdHk6IDAgIWltcG9ydGFudDtcbmA7XG4iXX0= */");
 var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "1ffv7m4",
   styles: "transform:translate3d(0, 0, 0)!important"
@@ -701,7 +707,7 @@ const getBeforeCloseOverlayAnimation = () => _ref$5;
 
 function ownKeys$5(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const getDefaultParentSelector = () => process.env.NODE_ENV === 'test' ? document.body : document.querySelector("#".concat(PORTALS_CONTAINER_ID));
+const getDefaultParentSelector = () => process.env.NODE_ENV === 'test' ? document.body : document.querySelector(`#${PORTALS_CONTAINER_ID}`);
 const getOverlayElement = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
@@ -750,7 +756,6 @@ const ModalPage = props => {
   }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
   return jsx(ClassNames, {
     children: _ref => {
-      var _props$afterOpenStyle;
       let makeClassName = _ref.css;
       return jsxs(Modal, {
         isOpen: forceClose === true ? false : props.isOpen,
@@ -765,7 +770,7 @@ const ModalPage = props => {
         },
         className: {
           base: makeClassName(getContainerStyles(props)),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
+          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
           beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
         },
         contentLabel: props.title,
@@ -826,8 +831,7 @@ const messages$4 = defineMessages({
 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)."; }
 const isIframeReady = iFrameElementRef => {
   try {
-    var _iFrameElementRef$con;
-    return (iFrameElementRef === null || iFrameElementRef === void 0 || (_iFrameElementRef$con = iFrameElementRef.contentWindow) === null || _iFrameElementRef$con === void 0 ? void 0 : _iFrameElementRef$con.document.readyState) === 'complete';
+    return iFrameElementRef?.contentWindow?.document.readyState === 'complete';
   } catch {
     // Trying to access the contentWindow of a cross-origin iFrame will throw an error.
     // We are not supposed to even get here because the iFrame must use
@@ -864,13 +868,9 @@ const CustomPanelIframe = /*#__PURE__*/_styled("iframe", process.env.NODE_ENV ==
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 });
 function CustomViewLoader(props) {
-  var _props$customView$typ;
   const iFrameElementRef = useRef(null);
   const dataLocale = useApplicationContext(context => context.dataLocale);
-  const projectKey = useApplicationContext(context => {
-    var _context$project;
-    return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
-  });
+  const projectKey = useApplicationContext(context => context.project?.key);
   const featureFlags = useAllFeatureToggles();
   const iFrameCommunicationChannel = useRef(new MessageChannel());
   const showNotification = useShowNotification();
@@ -888,7 +888,6 @@ function CustomViewLoader(props) {
   // onLoad handler is called from the iFrame even where the URL is not valid
   // (blocked by CORS, 404, etc.) so we need to make sure the iFrame is ready
   const onLoadSuccessHandler = useCallback(() => {
-    var _iFrameElementRef$cur, _context;
     // Show error and block if the iFrame is not ready
     // (error loading it)
     if (!isIframeReady(iFrameElementRef.current)) {
@@ -904,12 +903,12 @@ function CustomViewLoader(props) {
     iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
 
     // Transfer port2 to the iFrame so it can send messages back privately
-    (_iFrameElementRef$cur = iFrameElementRef.current) === null || _iFrameElementRef$cur === void 0 || (_iFrameElementRef$cur = _iFrameElementRef$cur.contentWindow) === null || _iFrameElementRef$cur === void 0 || _iFrameElementRef$cur.postMessage(CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
+    iFrameElementRef.current?.contentWindow?.postMessage(CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
 
     // Send the initialization message to the iFrame
     iFrameCommunicationChannel.current.port1.postMessage({
       source: CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
-      destination: _concatInstanceProperty(_context = "".concat(CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX)).call(_context, props.customView.id),
+      destination: `${CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
       eventName: CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
       eventData: {
         context: {
@@ -929,31 +928,31 @@ function CustomViewLoader(props) {
     // Close the channel when the component unmounts
     const communicationChannel = iFrameCommunicationChannel.current;
     return () => {
-      communicationChannel === null || communicationChannel === void 0 || communicationChannel.port1.close();
+      communicationChannel?.port1.close();
     };
   }, []);
 
   // Currently we only support custom panels
   if (props.customView.type !== 'CustomPanel') {
-    reportErrorToSentry(new Error("CustomViewLoader: Provided Custom View has an unsupported type: ".concat(props.customView.type, ". Supported types: ['CustomPanel'].")));
+    reportErrorToSentry(new Error(`CustomViewLoader: Provided Custom View has an unsupported type: ${props.customView.type}. Supported types: ['CustomPanel'].`));
     return null;
   }
-  const panelSize = ((_props$customView$typ = props.customView.typeSettings) === null || _props$customView$typ === void 0 || (_props$customView$typ = _props$customView$typ.size) === null || _props$customView$typ === void 0 ? void 0 : _props$customView$typ.toLocaleLowerCase()) || 'large';
+  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
   const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
   return jsx(ModalPage, {
     isOpen: true,
     onClose: props.onClose,
     size: panelSize === 'small' ? 10 : 30,
-    title: "Custom View: ".concat(props.customView.defaultLabel),
+    title: `Custom View: ${props.customView.defaultLabel}`,
     hideTopBar: true,
     children: jsx(ContentWrapper$2, {
       children: jsx(CustomPanelIframe, {
-        id: "custom-view-".concat(props.customView.id),
-        title: "Custom View: ".concat(props.customView.defaultLabel),
+        id: `custom-view-${props.customView.id}`,
+        title: `Custom View: ${props.customView.defaultLabel}`,
         ref: iFrameElementRef,
         src: iFrameUrl,
         onLoad: onLoadSuccessHandler
-      }, "custom-view-".concat(props.customView.id))
+      }, `custom-view-${props.customView.id}`)
     })
   });
 }
@@ -972,12 +971,11 @@ var messages$3 = defineMessages({
 
 var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useCustomViewsConnector = _ref => {
-  var _enableCustomViews$va, _data$allCustomViewsI;
   let customViewLocatorCode = _ref.customViewLocatorCode;
   const enableCustomViews = useFlagVariation(featureFlags.CUSTOM_VIEWS);
   const areCustomViewsEnabled =
   // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
-  ((_enableCustomViews$va = enableCustomViews === null || enableCustomViews === void 0 ? void 0 : enableCustomViews.value) !== null && _enableCustomViews$va !== void 0 ? _enableCustomViews$va : enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  (enableCustomViews?.value ?? enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
   const _useMcQuery = useMcQuery(FetchCustomViewsQuery, {
       variables: {
         customViewLocatorCode
@@ -991,7 +989,7 @@ const useCustomViewsConnector = _ref => {
     error = _useMcQuery.error,
     loading = _useMcQuery.loading;
   return {
-    customViews: (data === null || data === void 0 || (_data$allCustomViewsI = data.allCustomViewsInstallationsByLocator) === null || _data$allCustomViewsI === void 0 ? void 0 : _mapInstanceProperty(_data$allCustomViewsI).call(_data$allCustomViewsI, installation => installation.customView)) || [],
+    customViews: data?.allCustomViewsInstallationsByLocator?.map(installation => installation.customView) || [],
     error,
     loading
   };
@@ -1106,7 +1104,7 @@ function CustomViewSelector(props) {
             const isNotLastItem = index !== customViews.length - 1;
             return jsxs(Fragment$1, {
               children: [jsx(CustomViewSelectorItem, {
-                selected: (selectedCustomView === null || selectedCustomView === void 0 ? void 0 : selectedCustomView.id) === customView.id,
+                selected: selectedCustomView?.id === customView.id,
                 onClick: () => {
                   setSelectedCustomView(customView);
                 },
@@ -1246,7 +1244,7 @@ const PageHeader = props => {
         truncate: true
       }), props.children]
     }), jsx(CustomViewSelectorOrNothing, {
-      margin: "".concat(designTokens$1.spacing40, " 0 0 0"),
+      margin: `${designTokens$1.spacing40} 0 0 0`,
       customViewLocatorCode: props.customViewLocatorCode
     })]
   });
@@ -1560,7 +1558,7 @@ const useCustomViewLocatorSelector = function () {
     });
   });
   return {
-    currentCustomViewLocatorCode: customViewLocator === null || customViewLocator === void 0 ? void 0 : customViewLocator[0]
+    currentCustomViewLocatorCode: customViewLocator?.[0]
   };
 };
 
@@ -1643,7 +1641,7 @@ const TabularModalPage = props => {
       })
     }), jsx(CustomViewsSelectorWrapper, {
       children: jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designTokens$1.spacing30, " 0 0 0"),
+        margin: `${designTokens$1.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsx(ModalContentWrapper, {
@@ -1730,10 +1728,7 @@ const HeaderControlsWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV =
   target: "etkdonc0",
   label: "HeaderControlsWrapper"
 })("margin-top:", designTokens$1.spacingS, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS1mb3JtLWRldGFpbC1wYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QndDIiwiZmlsZSI6ImN1c3RvbS1mb3JtLWRldGFpbC1wYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgUmVhY3RFbGVtZW50LCBSZWFjdE5vZGUsIE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzaGFyZWRNZXNzYWdlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLWZyb250ZW5kL2kxOG4nO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIGFzIHVpS2l0RGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IHsgd2FybmluZyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcbmltcG9ydCB7IGRlc2lnblRva2VucyBhcyBhcHBLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICcuLi8uLi8uLi90aGVtaW5nJztcbmltcG9ydCBDdXN0b21WaWV3c1NlbGVjdG9yIGZyb20gJy4uLy4uL2N1c3RvbS12aWV3cy9jdXN0b20tdmlld3Mtc2VsZWN0b3InO1xuaW1wb3J0IHtcbiAgRm9ybVByaW1hcnlCdXR0b24sXG4gIEZvcm1TZWNvbmRhcnlCdXR0b24sXG4gIEZvcm1EZWxldGVCdXR0b24sXG59IGZyb20gJy4uLy4uL2ludGVybmFscy9kZWZhdWx0LWZvcm0tYnV0dG9ucyc7XG5pbXBvcnQgUGFnZUhlYWRlclRpdGxlIGZyb20gJy4uLy4uL2ludGVybmFscy9wYWdlLWhlYWRlci10aXRsZSc7XG5pbXBvcnQgUGFnZVRvcEJhciBmcm9tICcuLi8uLi9pbnRlcm5hbHMvcGFnZS10b3AtYmFyJztcbmltcG9ydCB7IENvbnRlbnRXcmFwcGVyLCBQYWdlV3JhcHBlciB9IGZyb20gJy4uLy4uL2ludGVybmFscy9wYWdlLnN0eWxlcyc7XG5cbmNvbnN0IERldGFpbFBhZ2VDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VpS2l0RGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gIHBhZGRpbmc6ICR7YXBwS2l0RGVzaWduVG9rZW5zLnBhZGRpbmdGb3JEZXRhaWxQYWdlSGVhZGVyfTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4ICR7dWlLaXREZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTB9IHNvbGlkO1xuYDtcblxuY29uc3QgSGVhZGVyQ29udHJvbHNXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLXRvcDogJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nU307XG5gO1xuXG5jb25zdCBnZXRDdXN0b21WaWV3c1NlbGVjdG9yTWFyZ2luID0gKGhhc0NvbnRlbnRCZWxvdzogYm9vbGVhbikgPT5cbiAgYCR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZzQwfSAwICR7XG4gICAgaGFzQ29udGVudEJlbG93ID8gdWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZzQwIDogJzAnXG4gIH0gMGA7XG5cbi8vIE5PVEU6IHRoZSBgTWVzc2FnZURlc2NyaXB0b3JgIHR5cGUgaXMgZXhwb3NlZCBieSBgcmVhY3QtaW50bGAuXG4vLyBIb3dldmVyLCB3ZSBuZWVkIHRvIGV4cGxpY2l0bHkgZGVmaW5lIHRoaXMgb3RoZXJ3aXNlIHRoZSBwcm9wLXR5cGVzIGJhYmVsIHBsdWdpblxuLy8gZG9lcyBub3QgcmVjb2duaXplIHRoZSBvYmplY3Qgc2hhcGUuXG50eXBlIE1lc3NhZ2VEZXNjcmlwdG9yID0ge1xuICBpZDogc3RyaW5nO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZyB8IG9iamVjdDtcbiAgZGVmYXVsdE1lc3NhZ2U/OiBzdHJpbmc7XG4gIHZhbHVlcz86IFJlY29yZDxzdHJpbmcsIFJlYWN0Tm9kZT47XG59O1xuXG50eXBlIEN1c3RvbUZvcm1EZXRhaWxQYWdlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgdGl0bGUgb2YgdGhlIHBhZ2UuXG4gICAqL1xuICB0aXRsZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBzdWJ0aXRsZSBvZiB0aGUgcGFnZS5cbiAgICovXG4gIHN1YnRpdGxlPzogc3RyaW5nIHwgUmVhY3RFbGVtZW50O1xuICAvKipcbiAgICogUmVwbGFjZXMgdGhlIHRpdGxlL3N1YnRpdGxlIHJvdyB3aXRoIGEgY3VzdG9tIG9uZSAoZm9yIHNwZWNpYWwgdXNlIGNhc2VzKVxuICAgKi9cbiAgY3VzdG9tVGl0bGVSb3c/OiBSZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBBbnkgUmVhY3Qgbm9kZSBkaXNwbGF5ZWQgYXMgdGhlIGNvbnRlbnQgd2l0aGluIHRoZSBwYWdlLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcblxuICAvLyBDb250cm9scyBQcm9wc1xuICAvKipcbiAgICogQW55IFJlYWN0IG5vZGUgdG8gYmUgcmVuZGVyZWQgYXMgdGhlIGZvcm0gY29udHJvbHNcbiAgICovXG4gIGZvcm1Db250cm9scz86IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIERldGVybWluZXMgaWYgdGhlIGZvcm0gY29udHJvbHMgc2hvdWxkIGJlIHJlbmRlcmVkLlxuICAgKi9cbiAgaGlkZUNvbnRyb2xzPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEEgcmV0dXJuIHJvdXRlIHBhdGggbGFiZWwuXG4gICAqL1xuICBwcmV2aW91c1BhdGhMYWJlbD86IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xuICAvKipcbiAgICogVGhpcyBjb2RlIGlzIHVzZWQgdG8gY29uZmlndXJlIHdoaWNoIEN1c3RvbSBWaWV3cyBhcmUgYXZhaWxhYmxlIGZvciB0aGlzIHBhZ2UuXG4gICAqL1xuICBjdXN0b21WaWV3TG9jYXRvckNvZGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBGdW5jdGlvbiBjYWxsZWQgd2hlbiBiYWNrIGJ1dHRvbiBpcyBwcmVzc2VkLlxuICAgKi9cbiAgb25QcmV2aW91c1BhdGhDbGljazogKFxuICAgIGV2ZW50OiBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PiB8IEtleWJvYXJkRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+XG4gICkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxDdXN0b21Gb3JtRGV0YWlsUGFnZVByb3BzLCAnaGlkZUNvbnRyb2xzJz4gPSB7XG4gIGhpZGVDb250cm9sczogZmFsc2UsXG59O1xuXG5jb25zdCBDdXN0b21Gb3JtRGV0YWlsUGFnZSA9IChwcm9wczogQ3VzdG9tRm9ybURldGFpbFBhZ2VQcm9wcykgPT4ge1xuICB3YXJuaW5nKFxuICAgIHByb3BzLnRpdGxlICE9PSB1bmRlZmluZWQgfHwgcHJvcHMuY3VzdG9tVGl0bGVSb3cgIT09IHVuZGVmaW5lZCxcbiAgICAnRGV0YWlsUGFnZTogb25lIG9mIGVpdGhlciBgdGl0bGVgIG9yIGBjdXN0b21UaXRsZVJvd2AgaXMgcmVxdWlyZWQgYnV0IGJvdGggdGhlaXIgdmFsdWVzIGFyZSBgdW5kZWZpbmVkYCdcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxQYWdlV3JhcHBlcj5cbiAgICAgIDxEZXRhaWxQYWdlQ29udGFpbmVyPlxuICAgICAgICA8UGFnZVRvcEJhclxuICAgICAgICAgIGNvbG9yPVwibmV1dHJhbFwiXG4gICAgICAgICAgcHJldmlvdXNQYXRoTGFiZWw9e3Byb3BzLnByZXZpb3VzUGF0aExhYmVsfVxuICAgICAgICAgIG9uQ2xpY2s9e3Byb3BzLm9uUHJldmlvdXNQYXRoQ2xpY2t9XG4gICAgICAgIC8+XG4gICAgICAgIHtwcm9wcy5jdXN0b21UaXRsZVJvdyB8fCAoXG4gICAgICAgICAgPFBhZ2VIZWFkZXJUaXRsZVxuICAgICAgICAgICAgdGl0bGU9e3Byb3BzLnRpdGxlID8/ICcnfVxuICAgICAgICAgICAgc3VidGl0bGU9e3Byb3BzLnN1YnRpdGxlfVxuICAgICAgICAgICAgdGl0bGVTaXplPVwiYmlnXCJcbiAgICAgICAgICAvPlxuICAgICAgICApfVxuICAgICAgICA8Q3VzdG9tVmlld3NTZWxlY3RvclxuICAgICAgICAgIG1hcmdpbj17Z2V0Q3VzdG9tVmlld3NTZWxlY3Rvck1hcmdpbihcbiAgICAgICAgICAgICFwcm9wcy5oaWRlQ29udHJvbHMgJiYgISFwcm9wcy5mb3JtQ29udHJvbHNcbiAgICAgICAgICApfVxuICAgICAgICAgIGN1c3RvbVZpZXdMb2NhdG9yQ29kZT17cHJvcHMuY3VzdG9tVmlld0xvY2F0b3JDb2RlfVxuICAgICAgICAvPlxuICAgICAgICB7IXByb3BzLmhpZGVDb250cm9scyAmJiBwcm9wcy5mb3JtQ29udHJvbHMgJiYgKFxuICAgICAgICAgIDxIZWFkZXJDb250cm9sc1dyYXBwZXI+XG4gICAgICAgICAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwiZmxleC1lbmRcIj5cbiAgICAgICAgICAgICAge3Byb3BzLmZvcm1Db250cm9sc31cbiAgICAgICAgICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICAgICAgICAgIDwvSGVhZGVyQ29udHJvbHNXcmFwcGVyPlxuICAgICAgICApfVxuICAgICAgPC9EZXRhaWxQYWdlQ29udGFpbmVyPlxuICAgICAgPENvbnRlbnRXcmFwcGVyPntwcm9wcy5jaGlsZHJlbn08L0NvbnRlbnRXcmFwcGVyPlxuICAgIDwvUGFnZVdyYXBwZXI+XG4gICk7XG59O1xuQ3VzdG9tRm9ybURldGFpbFBhZ2UuZGlzcGxheU5hbWUgPSAnQ3VzdG9tRm9ybURldGFpbFBhZ2UnO1xuQ3VzdG9tRm9ybURldGFpbFBhZ2UuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuLy8gU3RhdGljIGV4cG9ydCBvZiBwcmUtY29uZmlndXJlZCBwYWdlIGhlYWRlciB0aXRsZSBjb21wb25lbnQgdG8gZWFzaWx5XG4vLyB1c2UgYXMgcGFydCBvZiBhIGN1c3RvbSB0aXRsZSByb3dcbkN1c3RvbUZvcm1EZXRhaWxQYWdlLlBhZ2VIZWFkZXJUaXRsZSA9IFBhZ2VIZWFkZXJUaXRsZTtcbi8vIFN0YXRpYyBleHBvcnQgb2YgcHJlLWNvbmZpZ3VyZWQgZm9ybSBjb250cm9sIGJ1dHRvbnMgdG8gZWFzaWx5IHJlLXVzZVxuLy8gdGhlbSBpbiB0aGUgY3VzdG9tIGNvbnRyb2xzLlxuQ3VzdG9tRm9ybURldGFpbFBhZ2UuRm9ybVByaW1hcnlCdXR0b24gPSBGb3JtUHJpbWFyeUJ1dHRvbjtcbkN1c3RvbUZvcm1EZXRhaWxQYWdlLkZvcm1TZWNvbmRhcnlCdXR0b24gPSBGb3JtU2Vjb25kYXJ5QnV0dG9uO1xuQ3VzdG9tRm9ybURldGFpbFBhZ2UuRm9ybURlbGV0ZUJ1dHRvbiA9IEZvcm1EZWxldGVCdXR0b247XG4vLyBUaGlzIGlzIGEgY29udmVuaWVuY2UgcHJveHkgZXhwb3J0IHRvIGV4cG9zZSBwcmUtZGVmaW5lZCBJbnRsIG1lc3NhZ2VzIGRlZmluZWQgaW4gdGhlIGBAY29tbWVyY2V0b29scy1mcm9udGVuZC9pMThuYCBwYWNrYWdlLlxuLy8gVGhlIEludGwgbWVzc2FnZXMgY2FuIGJlIHVzZWQgZm9yIGJ1dHRvbiBsYWJlbHMuXG5DdXN0b21Gb3JtRGV0YWlsUGFnZS5JbnRsID0gc2hhcmVkTWVzc2FnZXM7XG5cbmV4cG9ydCBkZWZhdWx0IEN1c3RvbUZvcm1EZXRhaWxQYWdlO1xuIl19 */"));
-const getCustomViewsSelectorMargin = hasContentBelow => {
-  var _context;
-  return _concatInstanceProperty(_context = "".concat(designTokens$1.spacing40, " 0 ")).call(_context, hasContentBelow ? designTokens$1.spacing40 : '0', " 0");
-};
+const getCustomViewsSelectorMargin = hasContentBelow => `${designTokens$1.spacing40} 0 ${hasContentBelow ? designTokens$1.spacing40 : '0'} 0`;
 
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
@@ -1743,7 +1738,6 @@ const defaultProps$7 = {
   hideControls: false
 };
 const CustomFormDetailPage = props => {
-  var _props$title;
   process.env.NODE_ENV !== "production" ? warning(props.title !== undefined || props.customTitleRow !== undefined, 'DetailPage: one of either `title` or `customTitleRow` is required but both their values are `undefined`') : void 0;
   return jsxs(PageWrapper, {
     children: [jsxs(DetailPageContainer, {
@@ -1752,7 +1746,7 @@ const CustomFormDetailPage = props => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsx(CustomViewSelectorOrNothing, {
@@ -1900,7 +1894,6 @@ const defaultProps$5 = {
   hideControls: false
 };
 const TabularDetailPage = props => {
-  var _props$title;
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   process.env.NODE_ENV !== "production" ? warning(props.title !== undefined || props.customTitleRow !== undefined, 'TabularDetailPage: one of either `title` or `customTitleRow` is required but both their values are `undefined`') : void 0;
@@ -1911,7 +1904,7 @@ const TabularDetailPage = props => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsx(ControlsContainter, {
@@ -1925,7 +1918,7 @@ const TabularDetailPage = props => {
       })]
     }), jsx(CustomViewsSelectorWrapper, {
       children: jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designTokens$1.spacing30, " 0 0 0"),
+        margin: `${designTokens$1.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsx(ContentWrapper$1, {
@@ -1963,7 +1956,7 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularDetailPage.Intl = sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/lazy(() => import('./public-page-layout-684509fb.esm.js' /* webpackChunkName: "public-page-layout" */));
+const PublicPageLayout = /*#__PURE__*/lazy(() => import('./public-page-layout-68f434aa.esm.js' /* webpackChunkName: "public-page-layout" */));
 
 const MainPageContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ev8m2jf2"
@@ -1986,14 +1979,13 @@ const MainPageContent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pr
   label: "MainPageContent"
 })("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4tcGFnZS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXlDIiwiZmlsZSI6Im1haW4tcGFnZS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgYXMgdWlLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGRlc2lnblRva2VucyBhcyBhcHBLaXREZXNpZ25Ub2tlbnMgfSBmcm9tICcuLi8uLi8uLi90aGVtaW5nJztcblxuZXhwb3J0IGNvbnN0IE1haW5QYWdlQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgcGFkZGluZzogJHthcHBLaXREZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck1haW5QYWdlSGVhZGVyfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyID0gc3R5bGVkLmhyYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VpS2l0RGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgaGVpZ2h0OiAxcHg7XG4gIGJvcmRlcjogMDtcbmA7XG5cbi8vIE5PVEU6IGRvIG5vdCBjaGFuZ2UgXCJtYXJnaW5cIiB0byBcInBhZGRpbmdcIiBhcyB0aGlzIGJyZWFrcyBzdGlja3kgRGF0YVRhYmxlIHN0eWxlc1xuZXhwb3J0IGNvbnN0IE1haW5QYWdlQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gIGZsZXg6IDE7XG4gIGZsZXgtYmFzaXM6IDA7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBtYXJnaW46ICR7YXBwS2l0RGVzaWduVG9rZW5zLm1hcmdpbkZvclBhZ2VDb250ZW50fTtcbmA7XG4iXX0= */"));
 
-const headerRowMargin = "".concat(designTokens$1.spacing40, " 0 0 0");
+const headerRowMargin = `${designTokens$1.spacing40} 0 0 0`;
 const CustomFormMainPage = props => {
-  var _props$title;
   process.env.NODE_ENV !== "production" ? warning(props.title !== undefined || props.customTitleRow !== undefined, 'CustomFormMainPage: one of either `title` or `customTitleRow` is required but both their values are `undefined`') : void 0;
   return jsxs(PageWrapper, {
     children: [jsxs(MainPageContainer, {
       children: [props.customTitleRow || jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsx(CustomViewSelectorOrNothing, {
@@ -2134,14 +2126,13 @@ const defaultProps$2 = {
   hideControls: false
 };
 const TabularMainPage = props => {
-  var _props$title;
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   process.env.NODE_ENV !== "production" ? warning(props.title !== undefined || props.customTitleRow !== undefined, 'TabularMainPage: one of either `title` or `customTitleRow` is required but both their values are `undefined`') : void 0;
   return jsxs(PageWrapper, {
     children: [jsxs(TabularPageContainer, {
       children: [props.customTitleRow || jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsx(ControlsContainter, {
@@ -2155,7 +2146,7 @@ const TabularMainPage = props => {
       })]
     }), jsx(CustomViewsSelectorWrapper, {
       children: jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designTokens$1.spacing30, " 0 0 0"),
+        margin: `${designTokens$1.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsx(ContentWrapper$1, {
@@ -2724,21 +2715,20 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const PortalsContainer = /*#__PURE__*/forwardRef((props, ref) => {
-  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _props$baseModalZInde, _current, _current2;
   // Initialize props with default values.
   // NOTE: using `defaultProps` with `forwardRef` results in the type declarations
   // to ignore the `defaultProps`. Therefore, the default props are typed
   // as optional and we initialize the value here with the default values.
-  const offsetTop = (_props$offsetTop = props.offsetTop) !== null && _props$offsetTop !== void 0 ? _props$offsetTop : '0px';
-  const offsetLeft = (_props$offsetLeft = props.offsetLeft) !== null && _props$offsetLeft !== void 0 ? _props$offsetLeft : '0px';
-  const offsetLeftOnExpandedMenu = (_props$offsetLeftOnEx = props.offsetLeftOnExpandedMenu) !== null && _props$offsetLeftOnEx !== void 0 ? _props$offsetLeftOnEx : '0px';
-  const containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
-  const zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
-  const baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
+  const offsetTop = props.offsetTop ?? '0px';
+  const offsetLeft = props.offsetLeft ?? '0px';
+  const offsetLeftOnExpandedMenu = props.offsetLeftOnExpandedMenu ?? '0px';
+  const containerSelectorToPreventScrollingOnOpen = props.containerSelectorToPreventScrollingOnOpen ?? 'main';
+  const zIndex = props.zIndex ?? 10000;
+  const baseModalZIndex = props.baseModalZIndex ?? 1000;
   const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
   const portalsContainerRef = useRef(null);
-  const globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
-  const pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+  const globalNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsGlobalRef);
+  const pageNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsPageRef);
   const _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     stackingLayers = _useState4[0],

package/dist/declarations/src/components/detail-pages/custom-form-detail-page/custom-form-detail-page.d.ts

@@ -6,14 +6,41 @@ type MessageDescriptor = {
     values?: Record<string, ReactNode>;
 };
 type CustomFormDetailPageProps = {
+    /**
+     * The title of the page.
+     */
     title?: string;
+    /**
+     * The subtitle of the page.
+     */
     subtitle?: string | ReactElement;
+    /**
+     * Replaces the title/subtitle row with a custom one (for special use cases)
+     */
     customTitleRow?: ReactNode;
+    /**
+     * Any React node displayed as the content within the page.
+     */
     children: ReactNode;
+    /**
+     * Any React node to be rendered as the form controls
+     */
     formControls?: ReactNode;
+    /**
+     * Determines if the form controls should be rendered.
+     */
     hideControls?: boolean;
+    /**
+     * A return route path label.
+     */
     previousPathLabel?: string | MessageDescriptor;
+    /**
+     * This code is used to configure which Custom Views are available for this page.
+     */
     customViewLocatorCode?: string;
+    /**
+     * Function called when back button is pressed.
+     */
     onPreviousPathClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 declare const CustomFormDetailPage: {
@@ -99,7 +126,9 @@ declare const CustomFormDetailPage: {
                 [key: string]: string;
             };
             children?: undefined;
-        }, "label" | "isDisabled" | "dataAttributes">;
+        }, "label" | "isDisabled" | "dataAttributes">; /**
+         * Function called when back button is pressed.
+         */
     };
     FormDeleteButton: {
         (props: {