@commercetools-frontend/application-components 22.37.0 → 22.38.1

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

@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('prop-types');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
@@ -32,24 +33,21 @@ var PrimaryButton = require('@commercetools-uikit/primary-button');
 var SecondaryButton = require('@commercetools-uikit/secondary-button');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
+var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var sentry = require('@commercetools-frontend/sentry');
-var AccessibleButton = require('@commercetools-uikit/accessible-button');
-var Constraints = require('@commercetools-uikit/constraints');
-var reactBroadcast = require('@flopflip/react-broadcast');
-var actionsGlobal = require('@commercetools-frontend/actions-global');
-var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
-var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var sentry = require('@commercetools-frontend/sentry');
 var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
 var Stamp = require('@commercetools-uikit/stamp');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
 
@@ -73,22 +71,20 @@ var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
 var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
-var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
-var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
-var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
 var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.37.0";
+var version = "22.38.1";
 
 // 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.
@@ -116,9 +112,10 @@ var _ref$8 = {
 } ;
 const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
 
-function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+const _excluded$k = ["isDisabled", "exactPathMatch"];
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](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__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
 };
@@ -134,22 +131,29 @@ const TabLabel = _ref => {
     children: children
   });
 };
-const TabHeader = props => {
+const TabHeader = _ref2 => {
+  let _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$exactPathMatch = _ref2.exactPathMatch,
+    exactPathMatch = _ref2$exactPathMatch === void 0 ? false : _ref2$exactPathMatch,
+    props = _objectWithoutProperties(_ref2, _excluded$k);
   const intl = reactIntl.useIntl();
   const location = reactRouterDom.useLocation();
   const isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
     // strip the search, otherwise the path won't match
-    path: pathWithoutSearch$1(props.to),
-    exact: props.exactPathMatch,
+    path: pathWithoutSearch(props.to),
+    exact: exactPathMatch,
     strict: false
   }));
-  const isDisabled = props.isDisabled;
   let label = props.label;
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
-  warnIfMissingContent(props);
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
+  warnIfMissingContent(_objectSpread$7({
+    exactPathMatch,
+    isDisabled
+  }, props));
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -162,11 +166,6 @@ const TabHeader = props => {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-const defaultProps$i = {
-  isDisabled: false,
-  exactPathMatch: false
-};
-TabHeader.defaultProps = defaultProps$i;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
@@ -207,24 +206,17 @@ const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;positio
 // 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;" + ("" ), "" );
 
-function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](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__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const _excluded$j = ["size", "getParentSelector"];
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.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>`.
-jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
-const defaultProps$h = {
-  // TODO: t-shirt sizes are deprecated but we need to keep using them for
-  // backwards compatibility and to help with styling migration
-  // After the migration is done, we should change this default value to 13.
-  // t-shirt sizes then can be removed in a next breaking change release
-  size: 'l',
-  getParentSelector: getDefaultParentSelector$1
-};
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
@@ -236,21 +228,30 @@ var _ref2$3 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
-const DialogContainer = props => {
+const DialogContainer = _ref3 => {
+  let _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 13 : _ref3$size,
+    _ref3$getParentSelect = _ref3.getParentSelector,
+    getParentSelector = _ref3$getParentSelect === void 0 ? getDefaultParentSelector$1 : _ref3$getParentSelect,
+    props = _objectWithoutProperties(_ref3, _excluded$j);
   utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
   return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref3 => {
-      let makeClassName = _ref3.css;
+    children: _ref4 => {
+      let makeClassName = _ref4.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: props.isOpen,
         onRequestClose: props.onClose,
         shouldCloseOnOverlayClick: Boolean(props.onClose),
         shouldCloseOnEsc: Boolean(props.onClose),
         overlayElement: getOverlayElement$1,
-        overlayClassName: makeClassName(getOverlayStyles$1(props)),
-        className: makeClassName(getModalContentStyles(props)),
+        overlayClassName: makeClassName(getOverlayStyles$1(_objectSpread$6({
+          size
+        }, props))),
+        className: makeClassName(getModalContentStyles(_objectSpread$6({
+          size
+        }, props))),
         contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
-        parentSelector: props.getParentSelector,
+        parentSelector: getParentSelector,
         ariaHideApp: false,
         children: [jsxRuntime.jsx(GridArea, {
           name: "top"
@@ -280,7 +281,6 @@ const DialogContainer = props => {
 };
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$h;
 
 // The overflow should be "auto", to make the container scrollable
 const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
@@ -350,15 +350,18 @@ function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
-function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const defaultProps$g = {
-  isPrimaryButtonDisabled: false,
-  dataAttributesPrimaryButton: {},
-  dataAttributesSecondaryButton: {}
-};
+const _excluded$i = ["isPrimaryButtonDisabled", "dataAttributesPrimaryButton", "dataAttributesSecondaryButton"];
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](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__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
-const DialogFooter = props => {
+const DialogFooter = _ref => {
+  let _ref$isPrimaryButtonD = _ref.isPrimaryButtonDisabled,
+    isPrimaryButtonDisabled = _ref$isPrimaryButtonD === void 0 ? false : _ref$isPrimaryButtonD,
+    _ref$dataAttributesPr = _ref.dataAttributesPrimaryButton,
+    dataAttributesPrimaryButton = _ref$dataAttributesPr === void 0 ? {} : _ref$dataAttributesPr,
+    _ref$dataAttributesSe = _ref.dataAttributesSecondaryButton,
+    dataAttributesSecondaryButton = _ref$dataAttributesSe === void 0 ? {} : _ref$dataAttributesSe,
+    props = _objectWithoutProperties(_ref, _excluded$i);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("margin-top:", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
@@ -371,53 +374,55 @@ const DialogFooter = props => {
         scale: "m",
         alignItems: "center",
         justifyContent: "flex-end",
-        children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$6({
+        children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
           label: getFormattedLabel(props.labelSecondary, intl),
           onClick: props.onCancel,
           iconLeft: props.iconLeftSecondaryButton
-        }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
+        }, filterDataAttributes(dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
           label: getFormattedLabel(props.labelPrimary, intl),
           onClick: props.onConfirm,
-          isDisabled: props.isPrimaryButtonDisabled
-        }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+          isDisabled: isPrimaryButtonDisabled
+        }, filterDataAttributes(dataAttributesPrimaryButton)))]
       })]
     })
   });
 };
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$g;
 
-const defaultProps$f = {
-  labelSecondary: i18n.sharedMessages.cancel,
-  labelPrimary: i18n.sharedMessages.confirm
-};
-const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
-  isOpen: props.isOpen,
-  onClose: props.onClose,
-  size: props.size,
-  zIndex: props.zIndex,
-  title: props.title,
-  "aria-label": props['aria-label'],
-  getParentSelector: props.getParentSelector,
-  children: [jsxRuntime.jsx(DialogHeader, {
+const _excluded$h = ["labelSecondary", "labelPrimary"];
+const ConfirmationDialog = _ref => {
+  let _ref$labelSecondary = _ref.labelSecondary,
+    labelSecondary = _ref$labelSecondary === void 0 ? i18n.sharedMessages.cancel : _ref$labelSecondary,
+    _ref$labelPrimary = _ref.labelPrimary,
+    labelPrimary = _ref$labelPrimary === void 0 ? i18n.sharedMessages.confirm : _ref$labelPrimary,
+    props = _objectWithoutProperties(_ref, _excluded$h);
+  return jsxRuntime.jsxs(DialogContainer, {
+    isOpen: props.isOpen,
+    onClose: props.onClose,
+    size: props.size,
+    zIndex: props.zIndex,
     title: props.title,
-    onClose: props.onClose
-  }), jsxRuntime.jsx(DialogContent, {
-    children: props.children
-  }), jsxRuntime.jsx(DialogFooter, {
-    labelSecondary: props.labelSecondary,
-    labelPrimary: props.labelPrimary,
-    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
-    onCancel: props.onCancel,
-    onConfirm: props.onConfirm,
-    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
-    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
-  })]
-});
+    "aria-label": props['aria-label'],
+    getParentSelector: props.getParentSelector,
+    children: [jsxRuntime.jsx(DialogHeader, {
+      title: props.title,
+      onClose: props.onClose
+    }), jsxRuntime.jsx(DialogContent, {
+      children: props.children
+    }), jsxRuntime.jsx(DialogFooter, {
+      labelSecondary: labelSecondary,
+      labelPrimary: labelPrimary,
+      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+      onCancel: props.onCancel,
+      onConfirm: props.onConfirm,
+      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
+    })]
+  });
+};
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$f;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 ConfirmationDialog.Intl = i18n.sharedMessages;
@@ -425,38 +430,41 @@ ConfirmationDialog.Intl = i18n.sharedMessages;
 // as the default dialog title.
 ConfirmationDialog.TextTitle = TextTitle;
 
-const defaultProps$e = {
-  labelSecondary: i18n.sharedMessages.cancel,
-  labelPrimary: i18n.sharedMessages.save
-};
-const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
-  isOpen: props.isOpen,
-  onClose: props.onClose,
-  size: props.size,
-  zIndex: props.zIndex,
-  title: props.title,
-  "aria-label": props['aria-label'],
-  getParentSelector: props.getParentSelector,
-  children: [jsxRuntime.jsx(DialogHeader, {
+const _excluded$g = ["labelSecondary", "labelPrimary"];
+const FormDialog = _ref => {
+  let _ref$labelSecondary = _ref.labelSecondary,
+    labelSecondary = _ref$labelSecondary === void 0 ? i18n.sharedMessages.cancel : _ref$labelSecondary,
+    _ref$labelPrimary = _ref.labelPrimary,
+    labelPrimary = _ref$labelPrimary === void 0 ? i18n.sharedMessages.save : _ref$labelPrimary,
+    props = _objectWithoutProperties(_ref, _excluded$g);
+  return jsxRuntime.jsxs(DialogContainer, {
+    isOpen: props.isOpen,
+    onClose: props.onClose,
+    size: props.size,
+    zIndex: props.zIndex,
     title: props.title,
-    onClose: props.onClose
-  }), jsxRuntime.jsx(DialogContent, {
-    children: props.children
-  }), jsxRuntime.jsx(DialogFooter, {
-    labelSecondary: props.labelSecondary,
-    labelPrimary: props.labelPrimary,
-    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
-    onCancel: props.onSecondaryButtonClick,
-    onConfirm: props.onPrimaryButtonClick,
-    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
-    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
-    iconLeftSecondaryButton: props.iconLeftSecondaryButton,
-    footerContent: props.footerContent
-  })]
-});
+    "aria-label": props['aria-label'],
+    getParentSelector: props.getParentSelector,
+    children: [jsxRuntime.jsx(DialogHeader, {
+      title: props.title,
+      onClose: props.onClose
+    }), jsxRuntime.jsx(DialogContent, {
+      children: props.children
+    }), jsxRuntime.jsx(DialogFooter, {
+      labelSecondary: labelSecondary,
+      labelPrimary: labelPrimary,
+      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+      onCancel: props.onSecondaryButtonClick,
+      onConfirm: props.onPrimaryButtonClick,
+      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
+      iconLeftSecondaryButton: props.iconLeftSecondaryButton,
+      footerContent: props.footerContent
+    })]
+  });
+};
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$e;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 FormDialog.Intl = i18n.sharedMessages;
@@ -464,17 +472,137 @@ FormDialog.Intl = i18n.sharedMessages;
 // as the default dialog title.
 FormDialog.TextTitle = TextTitle;
 
-const messages$5 = reactIntl.defineMessages({
+const CustomViewSelector = /*#__PURE__*/react$1.lazy(() => {
+  if (typeof window !== 'undefined' && typeof window.app !== 'undefined') {
+    return Promise.resolve().then(function () { return require('./custom-views-selector-efdd6e55.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
+  }
+  return _Promise__default["default"].resolve({
+    default: () => null
+  });
+});
+
+const _excluded$f = ["truncate"],
+  _excluded2$1 = ["titleSize", "truncate"];
+const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epaiodd0"
+} )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
+const Title = props => {
+  switch (props.titleSize) {
+    case 'big':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h1",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+    case 'medium':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h2",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+    default:
+      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+        as: "h4",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+  }
+};
+const Subtitle = _ref2 => {
+  let _ref2$truncate = _ref2.truncate,
+    truncate = _ref2$truncate === void 0 ? false : _ref2$truncate,
+    props = _objectWithoutProperties(_ref2, _excluded$f);
+  if (!props.subtitle) {
+    return null;
+  }
+  if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
+    return jsxRuntime.jsx(SubtitleWrapper, {
+      children: props.subtitle
+    });
+  }
+  return jsxRuntime.jsx(SubtitleWrapper, {
+    children: jsxRuntime.jsx(Text__default["default"].Body, {
+      title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
+      truncate: truncate,
+      tone: "secondary",
+      children: props.subtitle
+    })
+  });
+};
+Subtitle.propTypes = {};
+var _ref$6 = {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} ;
+const PageHeaderTitle = _ref3 => {
+  let _ref3$titleSize = _ref3.titleSize,
+    titleSize = _ref3$titleSize === void 0 ? 'small' : _ref3$titleSize,
+    _ref3$truncate = _ref3.truncate,
+    truncate = _ref3$truncate === void 0 ? false : _ref3$truncate,
+    props = _objectWithoutProperties(_ref3, _excluded2$1);
+  return jsxRuntime.jsxs("div", {
+    css: _ref$6,
+    children: [jsxRuntime.jsx(Title, {
+      title: props.title,
+      titleSize: titleSize,
+      truncate: truncate
+    }), jsxRuntime.jsx(Subtitle, {
+      subtitle: props.subtitle,
+      truncate: truncate
+    })]
+  });
+};
+PageHeaderTitle.propTypes = {};
+PageHeaderTitle.displayName = 'PageHeaderTitle';
+
+const PageHeader = props => {
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing55, ";padding:", designSystem.designTokens.spacing40, " 0 ", designSystem.designTokens.spacing40, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
+    children: [jsxRuntime.jsxs("div", {
+      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designSystem.designTokens.spacing50, ";}" + ("" ), "" ),
+      children: [jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title,
+        titleSize: "big",
+        subtitle: props.subtitle,
+        truncate: true
+      }), props.children]
+    }), jsxRuntime.jsx(CustomViewSelector, {
+      margin: `${designSystem.designTokens.spacing40} 0 0 0`,
+      customViewLocatorCode: props.customViewLocatorCode
+    })]
+  });
+};
+PageHeader.propTypes = {};
+PageHeader.displayName = 'PageHeader';
+
+const ContentWrapper$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn02"
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
+const ModalContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn01"
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designSystem.designTokens.spacing50, " ", designSystem.designTokens.spacing55, ";" + ("" ));
+const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn00"
+} )({
+  name: "kdbhus",
+  styles: "height:100%;display:flex;flex-direction:column"
+} );
+
+const messages$4 = reactIntl.defineMessages({
   back: {
-    id: 'Components.ModalPage.TopBar.Back',
-    defaultMessage: 'Go Back'
+    id: "Components.ModalPage.TopBar.Back",
+    defaultMessage: "Go Back"
   },
   close: {
-    id: 'Components.ModalPage.TopBar.Close',
-    defaultMessage: 'Close Modal Page'
+    id: "Components.ModalPage.TopBar.Close",
+    defaultMessage: "Close Modal Page"
   }
 });
 
+const _excluded$e = ["color", "previousPathLabel", "hidePathLabel"];
 // Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
@@ -491,24 +619,25 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 LargeIconWrapper.propTypes = {};
-const defaultProps$d = {
-  color: 'surface',
-  previousPathLabel: messages$5.back,
-  hidePathLabel: false
-};
-var _ref$6 = {
+var _ref$5 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
-const ModalPageTopBar = props => {
+const ModalPageTopBar = _ref3 => {
+  _ref3.color;
+    let _ref3$previousPathLab = _ref3.previousPathLabel,
+    previousPathLabel = _ref3$previousPathLab === void 0 ? messages$4.back : _ref3$previousPathLab,
+    _ref3$hidePathLabel = _ref3.hidePathLabel,
+    hidePathLabel = _ref3$hidePathLabel === void 0 ? false : _ref3$hidePathLabel,
+    props = _objectWithoutProperties(_ref3, _excluded$e);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$6,
-      children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
+      css: _ref$5,
+      children: [!hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
-        label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+        label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
         icon: jsxRuntime.jsx(icons.AngleLeftIcon, {
           size: "medium",
           color: "primary"
@@ -526,7 +655,7 @@ const ModalPageTopBar = props => {
         })]
       })]
     }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-      label: intl.formatMessage(messages$5.close),
+      label: intl.formatMessage(messages$4.close),
       onClick: props.onClose,
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -537,7 +666,6 @@ const ModalPageTopBar = props => {
 };
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$d;
 
 const stylesBySize = {
   '10': {
@@ -575,19 +703,20 @@ var _ref2$1 = {
 } ;
 const getAfterOpenOverlayAnimation = () => _ref2$1;
 const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$5 = {
+var _ref$4 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
-const getBeforeCloseOverlayAnimation = () => _ref$5;
+const getBeforeCloseOverlayAnimation = () => _ref$4;
 
-function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](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__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const _excluded$d = ["size", "getParentSelector", "shouldDelayOnClose"];
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector = () => document.querySelector(`#${constants.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>`.
-jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
 }));
@@ -596,12 +725,14 @@ jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 
-const defaultProps$c = {
-  size: 'scale',
-  getParentSelector: getDefaultParentSelector,
-  shouldDelayOnClose: true
-};
-const ModalPage = props => {
+const ModalPage = _ref => {
+  let _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'scale' : _ref$size,
+    _ref$getParentSelecto = _ref.getParentSelector,
+    getParentSelector = _ref$getParentSelecto === void 0 ? getDefaultParentSelector : _ref$getParentSelecto,
+    _ref$shouldDelayOnClo = _ref.shouldDelayOnClose,
+    shouldDelayOnClose = _ref$shouldDelayOnClo === void 0 ? true : _ref$shouldDelayOnClo,
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const _useState = react$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     forceClose = _useState2[0],
@@ -616,9 +747,9 @@ const ModalPage = props => {
     };
   }, [props.isOpen]);
   const onClose = props.onClose;
-  const TRANSITION_DURATION = stylesBySize[props.size].transitionTime;
+  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
   const handleClose = react$1.useCallback(event => {
-    if (props.shouldDelayOnClose) {
+    if (shouldDelayOnClose) {
       // In this case we want the closing animation to be shown
       // and therefore we need wait for it to be completed
       // before calling `onClose`.
@@ -629,423 +760,57 @@ const ModalPage = props => {
       return;
     }
     onClose && onClose(event);
-  }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
+  }, [onClose, shouldDelayOnClose, TRANSITION_DURATION]);
   return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref => {
-      let makeClassName = _ref.css;
+    children: _ref2 => {
+      let makeClassName = _ref2.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: forceClose === true ? false : props.isOpen,
         onRequestClose: handleClose,
-        shouldCloseOnOverlayClick: Boolean(props.onClose),
-        shouldCloseOnEsc: Boolean(props.onClose),
-        overlayElement: getOverlayElement,
-        overlayClassName: {
-          base: makeClassName(getOverlayStyles(props)),
-          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
-          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
-        },
-        className: {
-          base: makeClassName(getContainerStyles(props)),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
-        },
-        contentLabel: props.title,
-        parentSelector: props.getParentSelector,
-        ariaHideApp: false
-        // Adjust this value if the (beforeClose) animation duration is changed
-        ,
-        closeTimeoutMS: TRANSITION_DURATION,
-        style: {
-          // stylelint-disable-next-line selector-type-no-unknown
-          overlay: {
-            zIndex: props.zIndex
-          }
-        },
-        children: [!props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
-          color: props.topBarColor,
-          onClose: handleClose,
-          currentPathLabel: props.currentPathLabel,
-          previousPathLabel: props.previousPathLabel,
-          hidePathLabel: props.hidePathLabel
-        }), props.children]
-      });
-    }
-  });
-};
-ModalPage.propTypes = {};
-ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$c;
-
-const messages$4 = reactIntl.defineMessages({
-  loadError: {
-    id: 'CustomViewLoader.error.load',
-    defaultMessage: 'We could not load the Custom View. Please contact your administrator to check its configuration.'
-  }
-});
-
-const isIframeReady = iFrameElementRef => {
-  try {
-    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
-    // a URL from our very same domain (the custom view is proxied through our http-proxy service).
-    return false;
-  }
-};
-const ContentWrapper$2 = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "ewwxuwo1"
-} )({
-  name: "13udsys",
-  styles: "height:100%"
-} );
-const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
-  target: "ewwxuwo0"
-} )({
-  name: "174lt7a",
-  styles: "height:100%;width:100%;border:none"
-} );
-function CustomViewLoader(props) {
-  const iFrameElementRef = react$1.useRef(null);
-  const dataLocale = applicationShellConnectors.useApplicationContext(context => context.dataLocale);
-  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
-  const featureFlags = reactBroadcast.useAllFeatureToggles();
-  const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
-  const showNotification = actionsGlobal.useShowNotification();
-  const intl = reactIntl.useIntl();
-  const messageFromIFrameHandler = react$1.useCallback(event => {
-    if (event.data.origin === window.location.origin) {
-      switch (event.data.eventName) {
-        case constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_CLOSE:
-          props.onClose();
-          break;
-      }
-    }
-  }, [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 = react$1.useCallback(() => {
-    // Show error and block if the iFrame is not ready
-    // (error loading it)
-    if (!isIframeReady(iFrameElementRef.current)) {
-      showNotification({
-        domain: constants.DOMAINS.PAGE,
-        kind: constants.NOTIFICATION_KINDS_PAGE.error,
-        text: intl.formatMessage(messages$4.loadError)
-      });
-      return;
-    }
-
-    // Listen for messages from the iFrame
-    iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
-
-    // Transfer port2 to the iFrame so it can send messages back privately
-    iFrameElementRef.current?.contentWindow?.postMessage(constants.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: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
-      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
-      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
-      eventData: {
-        context: {
-          dataLocale,
-          projectKey,
-          featureFlags,
-          customViewConfig: props.customView,
-          hostUrl: props.hostUrl || window.location.href
-        }
-      }
-    });
-
-    // We want the effect to run only once so we don't need the dependencies array.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  react$1.useEffect(() => {
-    // Close the channel when the component unmounts
-    const communicationChannel = iFrameCommunicationChannel.current;
-    return () => {
-      communicationChannel?.port1.close();
-    };
-  }, []);
-
-  // Currently we only support custom panels
-  if (props.customView.type !== 'CustomPanel') {
-    sentry.reportErrorToSentry(new Error(`CustomViewLoader: Provided Custom View has an unsupported type: ${props.customView.type}. Supported types: ['CustomPanel'].`));
-    return null;
-  }
-  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
-  const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
-  return jsxRuntime.jsx(ModalPage, {
-    isOpen: true,
-    onClose: props.onClose,
-    size: panelSize === 'small' ? 10 : 30,
-    title: `Custom View: ${props.customView.defaultLabel}`,
-    hideTopBar: true,
-    children: jsxRuntime.jsx(ContentWrapper$2, {
-      children: jsxRuntime.jsx(CustomPanelIframe, {
-        id: `custom-view-${props.customView.id}`,
-        title: `Custom View: ${props.customView.defaultLabel}`,
-        ref: iFrameElementRef,
-        src: iFrameUrl,
-        onLoad: onLoadSuccessHandler
-      }, `custom-view-${props.customView.id}`)
-    })
-  });
-}
-CustomViewLoader.propTypes = {};
-
-var messages$3 = reactIntl.defineMessages({
-  title: {
-    id: 'CustomViewsSelector.title',
-    defaultMessage: 'Custom Views:'
-  }
-});
-
-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 => {
-  let customViewLocatorCode = _ref.customViewLocatorCode;
-  const enableCustomViews = reactBroadcast.useFlagVariation(constants.featureFlags.CUSTOM_VIEWS);
-  const areCustomViewsEnabled =
-  // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
-  (enableCustomViews?.value ?? enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
-  const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
-      variables: {
-        customViewLocatorCode
-      },
-      context: {
-        target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
-      },
-      skip: !areCustomViewsEnabled
-    }),
-    data = _useMcQuery.data,
-    error = _useMcQuery.error,
-    loading = _useMcQuery.loading;
-  return {
-    customViews: data?.allCustomViewsInstallationsByLocator?.map(installation => installation.customView) || [],
-    error,
-    loading
-  };
-};
-
-function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const COMPONENT_HEIGHT = '52px';
-const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e16cb3zv3"
-} )("height:", props => props.shouldRender ? COMPONENT_HEIGHT : '0', ";overflow:hidden;transition:margin 0.3s ease-in-out,height 0.3s ease-in-out;margin:", props => props.shouldRender ? props.margin : '0', ";" + ("" ));
-const Container$2 = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e16cb3zv2"
-} )("background-color:", designSystem.designTokens.colorNeutral98, ";padding:10px ", designSystem.designTokens.spacing30, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ));
-const hoverAndSelectedStateStyles = /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow1, ";background-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorPrimary30, ";" + ("" ), "" );
-const CustomViewSelectorItem = props => {
-  return jsxRuntime.jsx(AccessibleButton__default["default"], {
-    css: /*#__PURE__*/react.css("display:flex;align-items:center;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing25, ";height:30px;border-radius:", designSystem.designTokens.borderRadius6, ";color:", designSystem.designTokens.colorPrimary, ";", props.selected && hoverAndSelectedStateStyles, " :hover{", hoverAndSelectedStateStyles, ";}" + ("" ), "" ),
-    onClick: props.onClick,
-    label: props.label,
-    children: jsxRuntime.jsx(Text__default["default"].Detail, {
-      tone: "inherit",
-      fontWeight: props.selected ? 'bold' : 'regular',
-      children: props.label
-    })
-  });
-};
-CustomViewSelectorItem.propTypes = {};
-const SelectorLabel = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e16cb3zv1"
-} )({
-  name: "1i68o0s",
-  styles: "display:flex;align-items:center;gap:6px;div{font-weight:300;}"
-} );
-const Separator = /*#__PURE__*/_styled__default["default"]("span", {
-  target: "e16cb3zv0"
-} )({
-  name: "1lsblg0",
-  styles: "width:1px;height:18px;background-color:#cccccc"
-} );
-function CustomViewSelector(props) {
-  const _useState = react$1.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedCustomView = _useState2[0],
-    setSelectedCustomView = _useState2[1];
-  const _useCustomViewsConnec = useCustomViewsConnector({
-      customViewLocatorCode: props.customViewLocatorCode
-    }),
-    customViews = _useCustomViewsConnec.customViews,
-    error = _useCustomViewsConnec.error,
-    loading = _useCustomViewsConnec.loading;
-  const onCustomViewsResolved = props.onCustomViewsResolved;
-  react$1.useEffect(() => {
-    if (!loading && !error && onCustomViewsResolved) {
-      onCustomViewsResolved(customViews);
-    }
-  }, [customViews, error, loading, onCustomViewsResolved]);
-  if (error) {
-    sentry.reportErrorToSentry(error, {
-      extra: {
-        customViewLocatorCode: props.customViewLocatorCode
-      }
-    });
-    return null;
-  }
-  return jsxRuntime.jsx(Wrapper, {
-    shouldRender: customViews.length > 0,
-    margin: props.margin || '0',
-    children: jsxRuntime.jsx(Container$2, {
-      children: jsxRuntime.jsxs(Constraints__default["default"].Horizontal, {
-        max: "scale",
-        children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-          scale: "s",
-          justifyContent: "flex-start",
-          alignItems: "center",
-          children: [jsxRuntime.jsxs(SelectorLabel, {
-            children: [jsxRuntime.jsx(icons.WindowEyeIcon, {
-              size: "medium",
-              color: "neutral60"
-            }), jsxRuntime.jsx(Text__default["default"].Detail, {
-              tone: "secondary",
-              intlMessage: messages$3.title
-            })]
-          }), _mapInstanceProperty__default["default"](customViews).call(customViews, (customView, index) => {
-            const isNotLastItem = index !== customViews.length - 1;
-            return jsxRuntime.jsxs(react$1.Fragment, {
-              children: [jsxRuntime.jsx(CustomViewSelectorItem, {
-                selected: selectedCustomView?.id === customView.id,
-                onClick: () => {
-                  setSelectedCustomView(customView);
-                },
-                label: customView.defaultLabel
-              }), isNotLastItem && jsxRuntime.jsx(Separator, {})]
-            }, customView.id);
-          })]
-        }), selectedCustomView && jsxRuntime.jsx(CustomViewLoader, {
-          customView: selectedCustomView,
-          onClose: () => {
-            setSelectedCustomView(null);
-          }
-        })]
-      })
-    })
-  });
-}
-CustomViewSelector.propTypes = {};
-CustomViewSelector.displayName = 'CustomViewSelector';
-const CustomViewSelectorOrNothing = props => {
-  if (!props.customViewLocatorCode) {
-    return null;
-  }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    customViewLocatorCode: props.customViewLocatorCode
-  }));
-};
-CustomViewSelectorOrNothing.propTypes = {};
-
-const defaultProps$b = {
-  titleSize: 'small',
-  truncate: false
-};
-const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "epaiodd0"
-} )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
-const Title = props => {
-  switch (props.titleSize) {
-    case 'big':
-      return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: "h1",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-    case 'medium':
-      return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: "h2",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-    default:
-      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-        as: "h4",
-        title: props.title,
-        truncate: props.truncate,
-        children: props.title
-      });
-  }
-};
-const Subtitle = props => {
-  if (!props.subtitle) {
-    return null;
-  }
-  if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
-    return jsxRuntime.jsx(SubtitleWrapper, {
-      children: props.subtitle
-    });
-  }
-  return jsxRuntime.jsx(SubtitleWrapper, {
-    children: jsxRuntime.jsx(Text__default["default"].Body, {
-      title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
-      truncate: props.truncate,
-      tone: "secondary",
-      children: props.subtitle
-    })
-  });
-};
-Subtitle.propTypes = {};
-Subtitle.defaultProps = {
-  truncate: false
-};
-var _ref$4 = {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} ;
-const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
-  css: _ref$4,
-  children: [jsxRuntime.jsx(Title, {
-    title: props.title,
-    titleSize: props.titleSize,
-    truncate: props.truncate
-  }), jsxRuntime.jsx(Subtitle, {
-    subtitle: props.subtitle,
-    truncate: props.truncate
-  })]
-});
-PageHeaderTitle.propTypes = {};
-PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$b;
-
-const PageHeader = props => {
-  return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing55, ";padding:", designSystem.designTokens.spacing40, " 0 ", designSystem.designTokens.spacing40, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
-    children: [jsxRuntime.jsxs("div", {
-      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designSystem.designTokens.spacing50, ";}" + ("" ), "" ),
-      children: [jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title,
-        titleSize: "big",
-        subtitle: props.subtitle,
-        truncate: true
-      }), props.children]
-    }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      margin: `${designSystem.designTokens.spacing40} 0 0 0`,
-      customViewLocatorCode: props.customViewLocatorCode
-    })]
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement,
+        overlayClassName: {
+          base: makeClassName(getOverlayStyles(_objectSpread$4({
+            size
+          }, props))),
+          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
+          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
+        },
+        className: {
+          base: makeClassName(getContainerStyles(_objectSpread$4({
+            size
+          }, props))),
+          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
+          beforeClose: makeClassName(getBeforeCloseContainerAnimation(_objectSpread$4({
+            size
+          }, props)))
+        },
+        contentLabel: props.title,
+        parentSelector: getParentSelector,
+        ariaHideApp: false
+        // Adjust this value if the (beforeClose) animation duration is changed
+        ,
+        closeTimeoutMS: TRANSITION_DURATION,
+        style: {
+          // stylelint-disable-next-line selector-type-no-unknown
+          overlay: {
+            zIndex: props.zIndex
+          }
+        },
+        children: [!props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
+          color: props.topBarColor,
+          onClose: handleClose,
+          currentPathLabel: props.currentPathLabel,
+          previousPathLabel: props.previousPathLabel,
+          hidePathLabel: props.hidePathLabel
+        }), props.children]
+      });
+    }
   });
 };
-PageHeader.propTypes = {};
-PageHeader.displayName = 'PageHeader';
-
-const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn02"
-} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
-const ModalContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;overflow:auto;margin:", designSystem.designTokens.spacing50, " ", designSystem.designTokens.spacing55, ";" + ("" ));
-const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn00"
-} )({
-  name: "kdbhus",
-  styles: "height:100%;display:flex;flex-direction:column"
-} );
+ModalPage.propTypes = {};
+ModalPage.displayName = 'ModalPage';
 
 const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
   title: props.title,
@@ -1068,63 +833,69 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
+const _excluded$c = ["label", "isDisabled", "dataAttributes"],
+  _excluded2 = ["label", "isDisabled", "dataAttributes"],
+  _excluded3 = ["label", "isDisabled", "dataAttributes"];
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const primaryDefaultProps = {
-  label: i18n.sharedMessages.confirm,
-  isDisabled: false,
-  dataAttributes: {}
-};
 const useFormattedLabel = label => {
   const intl = reactIntl.useIntl();
   return typeof label === 'string' ? label : intl.formatMessage(label);
 };
-const FormPrimaryButton = props => {
-  const label = useFormattedLabel(props.label);
+const FormPrimaryButton = _ref => {
+  let _ref$label = _ref.label,
+    label = _ref$label === void 0 ? i18n.sharedMessages.confirm : _ref$label,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled,
+    isDisabled: isDisabled,
     iconLeft: props.iconLeft
-  }, filterDataAttributes(props.dataAttributes)));
+  }, filterDataAttributes(dataAttributes)));
 };
 FormPrimaryButton.propTypes = {};
 FormPrimaryButton.displayName = 'FormPrimaryButton';
-FormPrimaryButton.defaultProps = primaryDefaultProps;
-const secondaryDefaultProps = {
-  label: i18n.sharedMessages.cancel,
-  isDisabled: false,
-  dataAttributes: {}
-};
-const FormSecondaryButton = props => {
-  const label = useFormattedLabel(props.label);
+const FormSecondaryButton = _ref2 => {
+  let _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? i18n.sharedMessages.cancel : _ref2$label,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$dataAttributes = _ref2.dataAttributes,
+    dataAttributes = _ref2$dataAttributes === void 0 ? {} : _ref2$dataAttributes,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled,
+    isDisabled: isDisabled,
     iconLeft: props.iconLeft
-  }, filterDataAttributes(props.dataAttributes)));
+  }, filterDataAttributes(dataAttributes)));
 };
 FormSecondaryButton.propTypes = {};
 FormSecondaryButton.displayName = 'FormSecondaryButton';
-FormSecondaryButton.defaultProps = secondaryDefaultProps;
-const deleteDefaultProps = {
-  label: i18n.sharedMessages.delete,
-  isDisabled: false,
-  dataAttributes: {}
-};
-const FormDeleteButton = props => {
-  const label = useFormattedLabel(props.label);
+const FormDeleteButton = _ref3 => {
+  let _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? i18n.sharedMessages.delete : _ref3$label,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$dataAttributes = _ref3.dataAttributes,
+    dataAttributes = _ref3$dataAttributes === void 0 ? {} : _ref3$dataAttributes,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
+    isDisabled: isDisabled
+  }, filterDataAttributes(dataAttributes)));
 };
 FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
-FormDeleteButton.defaultProps = deleteDefaultProps;
 
 const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
   title: props.title,
@@ -1159,65 +930,47 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$a = {
-  hideControls: false
+const _excluded$b = ["hideControls"];
+const FormModalPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  return jsxRuntime.jsx(CustomFormModalPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    isOpen: props.isOpen,
+    zIndex: props.zIndex,
+    onClose: props.onClose,
+    topBarCurrentPathLabel: props.topBarCurrentPathLabel,
+    topBarPreviousPathLabel: props.topBarPreviousPathLabel,
+    getParentSelector: props.getParentSelector,
+    shouldDelayOnClose: props.shouldDelayOnClose,
+    hideControls: hideControls,
+    afterOpenStyles: props.afterOpenStyles,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    customViewLocatorCode: props.customViewLocatorCode,
+    children: props.children
+  });
 };
-const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
-  title: props.title,
-  subtitle: props.subtitle,
-  isOpen: props.isOpen,
-  zIndex: props.zIndex,
-  onClose: props.onClose,
-  topBarCurrentPathLabel: props.topBarCurrentPathLabel,
-  topBarPreviousPathLabel: props.topBarPreviousPathLabel,
-  getParentSelector: props.getParentSelector,
-  shouldDelayOnClose: props.shouldDelayOnClose,
-  hideControls: props.hideControls,
-  afterOpenStyles: props.afterOpenStyles,
-  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
-      label: props.labelSecondaryButton,
-      onClick: props.onSecondaryButtonClick,
-      isDisabled: props.isSecondaryButtonDisabled,
-      dataAttributes: props.dataAttributesSecondaryButton,
-      iconLeft: props.iconLeftSecondaryButton
-    }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
-      label: props.labelPrimaryButton,
-      onClick: props.onPrimaryButtonClick,
-      isDisabled: props.isPrimaryButtonDisabled,
-      dataAttributes: props.dataAttributesPrimaryButton
-    })]
-  }),
-  customViewLocatorCode: props.customViewLocatorCode,
-  children: props.children
-});
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$a;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 FormModalPage.Intl = i18n.sharedMessages;
 
-const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
-const useCustomViewLocatorSelector = function () {
-  var _context;
-  let customViewLocatorCodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const location = reactRouterDom.useLocation();
-  const customViewLocator = _findInstanceProperty__default["default"](_context = _Object$entries__default["default"](customViewLocatorCodes)).call(_context, _ref => {
-    let _ref2 = _slicedToArray(_ref, 2),
-      locator = _ref2[1];
-    return reactRouterDom.matchPath(location.pathname, {
-      // strip the search, otherwise the path won't match
-      path: pathWithoutSearch(locator),
-      exact: true,
-      strict: false
-    });
-  });
-  return {
-    currentCustomViewLocatorCode: customViewLocator?.[0]
-  };
-};
-
 const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre4"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
@@ -1243,12 +996,11 @@ const TabularModalPageContainer = /*#__PURE__*/_styled__default["default"]("div"
   target: "elpldre0"
 } )(TabularPageContainer, "{padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;}" + ("" ));
 
-const defaultProps$9 = {
-  hideControls: false
-};
-const TabularModalPage = props => {
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+const _excluded$a = ["hideControls"];
+const TabularModalPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -1270,7 +1022,7 @@ const TabularModalPage = props => {
         }), jsxRuntime.jsx(ControlsContainter, {
           tabControls: props.tabControls,
           formControls: jsxRuntime.jsx(FormControlsContainer, {
-            children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
               alignItems: "flex-end",
               children: props.formControls
             })
@@ -1278,9 +1030,9 @@ const TabularModalPage = props => {
         })]
       })
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
-      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
         margin: `${designSystem.designTokens.spacing30} 0 0 0`,
-        customViewLocatorCode: currentCustomViewLocatorCode
+        customViewLocatorCodes: props.customViewLocatorCodes
       })
     }), jsxRuntime.jsx(ModalContentWrapper, {
       children: props.children
@@ -1289,7 +1041,6 @@ const TabularModalPage = props => {
 };
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$9;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1299,17 +1050,18 @@ TabularModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 TabularModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$8 = {
-  color: 'surface',
-  previousPathLabel: messages$5.back
-};
-const PageTopBar = props => {
+const _excluded$9 = ["color", "previousPathLabel"];
+const PageTopBar = _ref => {
+  _ref.color;
+    let _ref$previousPathLabe = _ref.previousPathLabel,
+    previousPathLabel = _ref$previousPathLabe === void 0 ? messages$4.back : _ref$previousPathLabe,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designSystem.designTokens.spacing40, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
       tone: "primary",
-      label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+      label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
       icon: jsxRuntime.jsx(icons.ListIcon, {
         size: "medium",
         color: "primary"
@@ -1320,8 +1072,8 @@ const PageTopBar = props => {
 };
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$8;
 
+const _excluded$8 = ["hideControls"];
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
 } )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designSystem.designTokens.colorNeutral90, " solid;" + ("" ));
@@ -1334,10 +1086,10 @@ const getCustomViewsSelectorMargin = hasContentBelow => `${designSystem.designTo
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 
-const defaultProps$7 = {
-  hideControls: false
-};
-const CustomFormDetailPage = props => {
+const CustomFormDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(DetailPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
@@ -1348,23 +1100,22 @@ const CustomFormDetailPage = props => {
         title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
-      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-        margin: getCustomViewsSelectorMargin(!props.hideControls && !!props.formControls),
+      }), jsxRuntime.jsx(CustomViewSelector, {
+        margin: getCustomViewsSelectorMargin(!hideControls && !!props.formControls),
         customViewLocatorCode: props.customViewLocatorCode
-      }), !props.hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+      }), !hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
         children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(ContentWrapper$2, {
       children: props.children
     })]
   });
 };
 CustomFormDetailPage.propTypes = {};
 CustomFormDetailPage.displayName = 'CustomFormDetailPage';
-CustomFormDetailPage.defaultProps = defaultProps$7;
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
 CustomFormDetailPage.PageHeaderTitle = PageHeaderTitle;
@@ -1377,36 +1128,38 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-const defaultProps$6 = {
-  hideControls: false
+const _excluded$7 = ["hideControls"];
+const FormDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return jsxRuntime.jsx(CustomFormDetailPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
+    previousPathLabel: props.previousPathLabel,
+    onPreviousPathClick: props.onPreviousPathClick,
+    hideControls: hideControls,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    children: props.children
+  });
 };
-const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
-  title: props.title,
-  subtitle: props.subtitle,
-  customTitleRow: props.customTitleRow,
-  customViewLocatorCode: props.customViewLocatorCode,
-  previousPathLabel: props.previousPathLabel,
-  onPreviousPathClick: props.onPreviousPathClick,
-  hideControls: props.hideControls,
-  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
-      label: props.labelSecondaryButton,
-      onClick: props.onSecondaryButtonClick,
-      isDisabled: props.isSecondaryButtonDisabled,
-      dataAttributes: props.dataAttributesSecondaryButton,
-      iconLeft: props.iconLeftSecondaryButton
-    }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
-      label: props.labelPrimaryButton,
-      onClick: props.onPrimaryButtonClick,
-      isDisabled: props.isPrimaryButtonDisabled,
-      dataAttributes: props.dataAttributesPrimaryButton
-    })]
-  }),
-  children: props.children
-});
 FormDetailPage.propTypes = {};
 FormDetailPage.displayName = 'FormDetailPage';
-FormDetailPage.defaultProps = defaultProps$6;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 // The Intl messages can be used for button labels.
 // Static export of pre-configured page header title component to easily
@@ -1431,12 +1184,11 @@ InfoDetailPage.displayName = 'InfoDetailPage';
 // use as part of a custom title row
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$5 = {
-  hideControls: false
-};
-const TabularDetailPage = props => {
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+const _excluded$6 = ["hideControls"];
+const TabularDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
@@ -1450,25 +1202,24 @@ const TabularDetailPage = props => {
       }), jsxRuntime.jsx(ControlsContainter, {
         tabControls: props.tabControls,
         formControls: jsxRuntime.jsx(FormControlsContainer, {
-          children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
             alignItems: "flex-end",
             children: props.formControls
           })
         })
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
-      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
         margin: `${designSystem.designTokens.spacing30} 0 0 0`,
-        customViewLocatorCode: currentCustomViewLocatorCode
+        customViewLocatorCodes: props.customViewLocatorCodes
       })
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(ContentWrapper$2, {
       children: props.children
     })]
   });
 };
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$5;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -1480,7 +1231,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 = i18n.sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-d365f38f.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-2326dd98.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1494,24 +1245,30 @@ const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
+const _excluded$5 = ["hideControls", "hideDivider"];
 const headerRowMargin = `${designSystem.designTokens.spacing40} 0 0 0`;
-const CustomFormMainPage = props => {
+const CustomFormMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    _ref$hideDivider = _ref.hideDivider,
+    hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(MainPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
-      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      }), jsxRuntime.jsx(CustomViewSelector, {
         margin: headerRowMargin,
         customViewLocatorCode: props.customViewLocatorCode
-      }), !props.hideControls && props.formControls && jsxRuntime.jsx("div", {
+      }), !hideControls && props.formControls && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react.css("margin:", headerRowMargin, ";" + ("" ), "" ),
         children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
         })
-      }), !props.hideDivider && jsxRuntime.jsx("div", {
+      }), !hideDivider && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react.css("&>", Divider, "{margin:", headerRowMargin, ";}" + ("" ), "" ),
         children: jsxRuntime.jsx(Divider, {})
       })]
@@ -1521,12 +1278,7 @@ const CustomFormMainPage = props => {
   });
 };
 CustomFormMainPage.propTypes = {};
-const defaultProps$4 = {
-  hideControls: false,
-  hideDivider: false
-};
 CustomFormMainPage.displayName = 'CustomFormMainPage';
-CustomFormMainPage.defaultProps = defaultProps$4;
 
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
@@ -1542,16 +1294,17 @@ CustomFormMainPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
-const defaultProps$3 = {
-  hideControls: false
-};
-const FormMainPage = props => {
+const _excluded$4 = ["hideControls"];
+const FormMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
     customViewLocatorCode: props.customViewLocatorCode,
-    hideControls: props.hideControls,
+    hideControls: hideControls,
     formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(CustomFormMainPage.FormSecondaryButton, {
         label: props.labelSecondaryButton,
@@ -1571,7 +1324,6 @@ const FormMainPage = props => {
 };
 FormMainPage.propTypes = {};
 FormMainPage.displayName = 'FormMainPage';
-FormMainPage.defaultProps = defaultProps$3;
 
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
@@ -1597,12 +1349,11 @@ InfoMainPage.displayName = 'InfoMainPage';
 // use as part of a custom title row
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$2 = {
-  hideControls: false
-};
-const TabularMainPage = props => {
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+const _excluded$3 = ["hideControls"];
+const TabularMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1612,18 +1363,18 @@ const TabularMainPage = props => {
       }), jsxRuntime.jsx(ControlsContainter, {
         tabControls: props.tabControls,
         formControls: jsxRuntime.jsx(FormControlsContainer, {
-          children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
             alignItems: "flex-end",
             children: props.formControls
           })
         })
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
-      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
         margin: `${designSystem.designTokens.spacing30} 0 0 0`,
-        customViewLocatorCode: currentCustomViewLocatorCode
+        customViewLocatorCodes: props.customViewLocatorCodes
       })
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(ContentWrapper$2, {
       css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
       children: props.children
     })]
@@ -1631,7 +1382,6 @@ const TabularMainPage = props => {
 };
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$2;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -1682,14 +1432,14 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   title: {
-    id: 'PageNotFound.title',
-    defaultMessage: 'We could not find what you are looking for'
+    id: "PageNotFound.title",
+    defaultMessage: "We could not find what you are looking for"
   },
   paragraph1: {
-    id: 'PageNotFound.paragraph1',
-    defaultMessage: 'The item you are looking for may have been deleted, does not exist, or the URL was entered incorrectly. Check the URL and try again.\n\nPlease contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions.'
+    id: "PageNotFound.paragraph1",
+    defaultMessage: "The item you are looking for may have been deleted, does not exist, or the URL was entered incorrectly. Check the URL and try again. Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions."
   }
 });
 
@@ -1705,9 +1455,9 @@ const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: PageNotFoundSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$2.title)),
-    label: intl.formatMessage(messages$2.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$2.paragraph1), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$3.title)),
+    label: intl.formatMessage(messages$3.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$3.paragraph1), {}, {
       values: {
         a: getLink
       }
@@ -1716,18 +1466,18 @@ const PageNotFound = () => {
 };
 PageNotFound.displayName = 'PageNotFound';
 
-var messages$1 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
-    id: 'PageUnauthorized.title',
-    defaultMessage: 'We could not find what you are looking for'
+    id: "PageUnauthorized.title",
+    defaultMessage: "We could not find what you are looking for"
   },
   paragraph1: {
-    id: 'PageUnauthorized.paragraph1',
-    defaultMessage: 'The Module you are looking for either does not exist for this Project or you are not authorized to view it.'
+    id: "PageUnauthorized.paragraph1",
+    defaultMessage: "The Module you are looking for either does not exist for this Project or you are not authorized to view it."
   },
   paragraph2: {
-    id: 'PageUnauthorized.paragraph2',
-    defaultMessage: 'Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions.'
+    id: "PageUnauthorized.paragraph2",
+    defaultMessage: "Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions."
   }
 });
 
@@ -1743,10 +1493,10 @@ const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: FailedAuthorizationSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
-    label: intl.formatMessage(messages$1.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.paragraph1)),
-    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph2), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$2.title)),
+    label: intl.formatMessage(messages$2.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$2.paragraph1)),
+    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$2.paragraph2), {}, {
       values: {
         a: getSupportUrlLink
       }
@@ -1776,6 +1526,7 @@ function PageContentNarrow(props) {
 }
 PageContentNarrow.propTypes = {};
 
+const _excluded$2 = ["columns", "gapSize"];
 const Content = /*#__PURE__*/_styled__default["default"]("section", {
   target: "e1dg479f4"
 } )("grid-area:content;display:grid;grid-template-areas:", props => props.columns === '1' ? 'none' : '"left-column right-column"', ";grid-template-columns:", props => {
@@ -1819,28 +1570,33 @@ const Container = /*#__PURE__*/_styled__default["default"]("div", {
   name: "5phl7w",
   styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(800px, 1200px) 1fr;width:100%"
 } );
-function PageContentWide(props) {
+function PageContentWide(_ref) {
+  let _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? '1' : _ref$columns,
+    _ref$gapSize = _ref.gapSize,
+    gapSize = _ref$gapSize === void 0 ? '20' : _ref$gapSize,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const _Children$toArray = react$1.Children.toArray(props.children),
     _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
     leftChild = _Children$toArray2[0],
     rightChild = _Children$toArray2[1];
   const childrenCount = react$1.Children.count(props.children);
-  const isOneColumnAndMoreThanOneChild = props.columns === '1' && childrenCount > 1;
-  const isTwoColumnsAndMoreThanTwoChildren = props.columns !== '1' && childrenCount > 2;
+  const isOneColumnAndMoreThanOneChild = columns === '1' && childrenCount > 1;
+  const isTwoColumnsAndMoreThanTwoChildren = columns !== '1' && childrenCount > 2;
   utils.useWarning(!isOneColumnAndMoreThanOneChild, 'PageContentWide: This component only renders its first children when using a single column but you provided more than one.');
   utils.useWarning(!isTwoColumnsAndMoreThanTwoChildren, 'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more than two.');
   return jsxRuntime.jsx(Container, {
     children: jsxRuntime.jsx(Content, {
-      columns: props.columns,
-      gapSize: props.gapSize,
-      children: props.columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+      columns: columns,
+      gapSize: gapSize,
+      children: columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: leftChild
       }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(LeftContentColumn, {
           children: leftChild
         }), jsxRuntime.jsx(RightContentColumn, {
           children: jsxRuntime.jsx(RightColumnContentWrapper, {
-            columns: props.columns,
+            columns: columns,
             children: rightChild
           })
         })]
@@ -1849,11 +1605,6 @@ function PageContentWide(props) {
   });
 }
 PageContentWide.propTypes = {};
-const defaultProps$1 = {
-  columns: '1',
-  gapSize: '20'
-};
-PageContentWide.defaultProps = defaultProps$1;
 
 var _ref$2 = {
   name: "1d3w5wq",
@@ -1869,26 +1620,30 @@ function PageContentFull(props) {
 }
 PageContentFull.propTypes = {};
 
-const defaultProps = {
-  size: 10,
-  hideControls: false,
-  onPrimaryButtonClick: () => {},
-  onSecondaryButtonClick: () => {}
-};
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const _excluded$1 = ["size", "hideControls", "onPrimaryButtonClick", "onSecondaryButtonClick"];
+const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y41"
 } )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y40"
 } )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
-function Drawer(props) {
+function Drawer(_ref) {
+  let _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 10 : _ref$size,
+    _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    _ref$onPrimaryButtonC = _ref.onPrimaryButtonClick,
+    onPrimaryButtonClick = _ref$onPrimaryButtonC === void 0 ? () => {} : _ref$onPrimaryButtonC,
+    _ref$onSecondaryButto = _ref.onSecondaryButtonClick,
+    onSecondaryButtonClick = _ref$onSecondaryButto === void 0 ? () => {} : _ref$onSecondaryButto,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs(ModalPage, {
     isOpen: props.isOpen,
     hidePathLabel: true,
     hideTopBar: true,
     onClose: props.onClose,
-    size: props.size,
+    size: size,
     title: props.title,
     afterOpenStyles: props.afterOpenStyles,
     getParentSelector: props.getParentSelector,
@@ -1906,7 +1661,7 @@ function Drawer(props) {
               children: props.subtitle
             })
           }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-            label: intl.formatMessage(messages$5.close),
+            label: intl.formatMessage(messages$4.close),
             onClick: props.onClose,
             icon: jsxRuntime.jsx(LargeIconWrapper, {
               children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -1915,30 +1670,29 @@ function Drawer(props) {
           })]
         }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
-          children: [!props.hideControls && props.formControls && props.formControls, !props.hideControls && !props.formControls && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [!hideControls && props.formControls && props.formControls, !hideControls && !props.formControls && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsx(FormSecondaryButton, {
               label: props.labelSecondaryButton,
-              onClick: props.onSecondaryButtonClick,
+              onClick: onSecondaryButtonClick,
               isDisabled: props.isSecondaryButtonDisabled,
               dataAttributes: props.dataAttributesSecondaryButton,
               iconLeft: props.iconLeftSecondaryButton
             }), jsxRuntime.jsx(FormPrimaryButton, {
               label: props.labelPrimaryButton,
-              onClick: props.onPrimaryButtonClick,
+              onClick: onPrimaryButtonClick,
               isDisabled: props.isPrimaryButtonDisabled,
               dataAttributes: props.dataAttributesPrimaryButton
             })]
           })]
         })]
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
 }
 Drawer.propTypes = {};
 Drawer.displayName = 'Drawer';
-Drawer.defaultProps = defaultProps;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 Drawer.FormPrimaryButton = FormPrimaryButton;
@@ -1947,22 +1701,142 @@ Drawer.FormSecondaryButton = FormSecondaryButton;
 // The Intl messages can be used for button labels.
 Drawer.Intl = i18n.sharedMessages;
 
+const messages$1 = reactIntl.defineMessages({
+  loadError: {
+    id: "CustomViewLoader.error.load",
+    defaultMessage: "We could not load the Custom View. Please contact your administrator to check its configuration."
+  }
+});
+
+const isIframeReady = iFrameElementRef => {
+  try {
+    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
+    // a URL from our very same domain (the custom view is proxied through our http-proxy service).
+    return false;
+  }
+};
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ewwxuwo1"
+} )({
+  name: "13udsys",
+  styles: "height:100%"
+} );
+const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
+  target: "ewwxuwo0"
+} )({
+  name: "174lt7a",
+  styles: "height:100%;width:100%;border:none"
+} );
+function CustomViewLoader(props) {
+  const iFrameElementRef = react$1.useRef(null);
+  const dataLocale = applicationShellConnectors.useApplicationContext(context => context.dataLocale);
+  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
+  const featureFlags = reactBroadcast.useAllFeatureToggles();
+  const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
+  const showNotification = actionsGlobal.useShowNotification();
+  const intl = reactIntl.useIntl();
+  const messageFromIFrameHandler = react$1.useCallback(event => {
+    if (event.data.origin === window.location.origin) {
+      switch (event.data.eventName) {
+        case constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_CLOSE:
+          props.onClose();
+          break;
+      }
+    }
+  }, [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 = react$1.useCallback(() => {
+    // Show error and block if the iFrame is not ready
+    // (error loading it)
+    if (!isIframeReady(iFrameElementRef.current)) {
+      showNotification({
+        domain: constants.DOMAINS.PAGE,
+        kind: constants.NOTIFICATION_KINDS_PAGE.error,
+        text: intl.formatMessage(messages$1.loadError)
+      });
+      return;
+    }
+
+    // Listen for messages from the iFrame
+    iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
+
+    // Transfer port2 to the iFrame so it can send messages back privately
+    iFrameElementRef.current?.contentWindow?.postMessage(constants.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: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
+      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
+      eventData: {
+        context: {
+          dataLocale,
+          projectKey,
+          featureFlags,
+          customViewConfig: props.customView,
+          hostUrl: props.hostUrl || window.location.href
+        }
+      }
+    });
+
+    // We want the effect to run only once so we don't need the dependencies array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  react$1.useEffect(() => {
+    // Close the channel when the component unmounts
+    const communicationChannel = iFrameCommunicationChannel.current;
+    return () => {
+      communicationChannel?.port1.close();
+    };
+  }, []);
+
+  // Currently we only support custom panels
+  if (props.customView.type !== 'CustomPanel') {
+    sentry.reportErrorToSentry(new Error(`CustomViewLoader: Provided Custom View has an unsupported type: ${props.customView.type}. Supported types: ['CustomPanel'].`));
+    return null;
+  }
+  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
+  const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
+  return jsxRuntime.jsx(ModalPage, {
+    isOpen: true,
+    onClose: props.onClose,
+    size: panelSize === 'small' ? 10 : 30,
+    title: `Custom View: ${props.customView.defaultLabel}`,
+    hideTopBar: true,
+    children: jsxRuntime.jsx(ContentWrapper, {
+      children: jsxRuntime.jsx(CustomPanelIframe, {
+        id: `custom-view-${props.customView.id}`,
+        title: `Custom View: ${props.customView.defaultLabel}`,
+        ref: iFrameElementRef,
+        src: iFrameUrl,
+        onLoad: onLoadSuccessHandler
+      }, `custom-view-${props.customView.id}`)
+    })
+  });
+}
+CustomViewLoader.propTypes = {};
+
 var messages = reactIntl.defineMessages({
   ProjectProduction: {
-    id: 'ProjectStamp.production',
-    defaultMessage: 'Production'
+    id: "ProjectStamp.production",
+    defaultMessage: "Production"
   },
   ProjectSuspended: {
-    id: 'ProjectStamp.suspended',
-    defaultMessage: 'Suspended'
+    id: "ProjectStamp.suspended",
+    defaultMessage: "Suspended"
   },
   ProjectExpired: {
-    id: 'ProjectStamp.expired',
-    defaultMessage: 'Trial expired'
+    id: "ProjectStamp.expired",
+    defaultMessage: "Trial expired"
   },
   ProjectWillExpire: {
-    id: 'ProjectStamp.willExpire',
-    defaultMessage: '{daysLeft, select, 0 {Trial ends today} 1 {Trial ends in 1 day} other {Trial ends in {daysLeft} days}}'
+    id: "ProjectStamp.willExpire",
+    defaultMessage: "{daysLeft, select, 0 {Trial ends today} 1 {Trial ends in 1 day} other {Trial ends in {daysLeft} days}}"
   }
 });
 
@@ -2138,7 +2012,7 @@ exports.CustomFormDetailPage = CustomFormDetailPage;
 exports.CustomFormMainPage = CustomFormMainPage;
 exports.CustomFormModalPage = CustomFormModalPage;
 exports.CustomViewLoader = CustomViewLoader;
-exports.CustomViewsSelector = CustomViewSelectorOrNothing;
+exports.CustomViewsSelector = CustomViewSelector;
 exports.Drawer = Drawer;
 exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;