@commercetools-frontend/application-components 22.38.0 → 22.38.2

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

@@ -33,23 +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 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.38.0";
+var version = "22.38.2";
 
 // 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.
@@ -117,9 +113,9 @@ 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;}}" + ("" ), "" )];
 
 const _excluded$k = ["isDisabled", "exactPathMatch"];
-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;
+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);
 };
@@ -145,7 +141,7 @@ const TabHeader = _ref2 => {
   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),
+    path: pathWithoutSearch(props.to),
     exact: exactPathMatch,
     strict: false
   }));
@@ -153,11 +149,11 @@ const TabHeader = _ref2 => {
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
-  warnIfMissingContent(_objectSpread$8({
+  warnIfMissingContent(_objectSpread$7({
     exactPathMatch,
     isDisabled
   }, props));
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -211,13 +207,13 @@ const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;positio
 `${props.zIndex} !important` : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
 const _excluded$j = ["size", "getParentSelector"];
-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; }
+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
 }));
@@ -248,10 +244,10 @@ const DialogContainer = _ref3 => {
         shouldCloseOnOverlayClick: Boolean(props.onClose),
         shouldCloseOnEsc: Boolean(props.onClose),
         overlayElement: getOverlayElement$1,
-        overlayClassName: makeClassName(getOverlayStyles$1(_objectSpread$7({
+        overlayClassName: makeClassName(getOverlayStyles$1(_objectSpread$6({
           size
         }, props))),
-        className: makeClassName(getModalContentStyles(_objectSpread$7({
+        className: makeClassName(getModalContentStyles(_objectSpread$6({
           size
         }, props))),
         contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
@@ -355,8 +351,8 @@ function filterDataAttributes(obj) {
 }
 
 const _excluded$i = ["isPrimaryButtonDisabled", "dataAttributesPrimaryButton", "dataAttributesSecondaryButton"];
-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; }
+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 = _ref => {
   let _ref$isPrimaryButtonD = _ref.isPrimaryButtonDisabled,
@@ -378,11 +374,11 @@ const DialogFooter = _ref => {
         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(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: isPrimaryButtonDisabled
@@ -476,7 +472,126 @@ 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-04a345e9.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"
@@ -487,7 +602,7 @@ const messages$5 = reactIntl.defineMessages({
   }
 });
 
-const _excluded$f = ["color", "previousPathLabel", "hidePathLabel"];
+const _excluded$e = ["color", "previousPathLabel", "hidePathLabel"];
 // Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
@@ -504,22 +619,22 @@ 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 = {};
-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 = _ref3 => {
   _ref3.color;
     let _ref3$previousPathLab = _ref3.previousPathLabel,
-    previousPathLabel = _ref3$previousPathLab === void 0 ? messages$5.back : _ref3$previousPathLab,
+    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$f);
+    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,
+      css: _ref$5,
       children: [!hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
@@ -540,7 +655,7 @@ const ModalPageTopBar = _ref3 => {
         })]
       })]
     }), 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, {})
@@ -588,489 +703,114 @@ 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 _excluded$e = ["size", "getParentSelector", "shouldDelayOnClose"];
-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 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), {}, {
-  "data-role": "modal-overlay",
-  children: contentElement
-}));
-
-// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
-// However, we need to explicitly define this otherwise the prop-types babel plugin
-// does not recognize the object shape.
-
-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$e);
-  const _useState = react$1.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    forceClose = _useState2[0],
-    setForceClose = _useState2[1];
-  const closingTimer = react$1.useRef();
-  react$1.useEffect(() => {
-    if (props.isOpen === true) setForceClose(false);
-    return () => {
-      if (closingTimer.current) {
-        clearTimeout(closingTimer.current);
-      }
-    };
-  }, [props.isOpen]);
-  const onClose = props.onClose;
-  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
-  const handleClose = react$1.useCallback(event => {
-    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`.
-      setForceClose(true);
-      closingTimer.current = _setTimeout__default["default"](() => {
-        onClose && onClose(event);
-      }, TRANSITION_DURATION);
-      return;
-    }
-    onClose && onClose(event);
-  }, [onClose, shouldDelayOnClose, TRANSITION_DURATION]);
-  return jsxRuntime.jsx(react.ClassNames, {
-    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(_objectSpread$5({
-            size
-          }, props))),
-          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
-          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
-        },
-        className: {
-          base: makeClassName(getContainerStyles(_objectSpread$5({
-            size
-          }, props))),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation(_objectSpread$5({
-            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]
-      });
-    }
-  });
-};
-ModalPage.propTypes = {};
-ModalPage.displayName = 'ModalPage';
-
-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
-  };
-};
+const getBeforeCloseOverlayAnimation = () => _ref$4;
 
+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 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 _excluded$d = ["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$d);
-  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$4 = {
-  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$4,
-    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 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$4(_objectSpread$4({}, props), {}, {
+  "data-role": "modal-overlay",
+  children: contentElement
+}));
 
-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
-    })]
+// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+// However, we need to explicitly define this otherwise the prop-types babel plugin
+// does not recognize the object shape.
+
+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],
+    setForceClose = _useState2[1];
+  const closingTimer = react$1.useRef();
+  react$1.useEffect(() => {
+    if (props.isOpen === true) setForceClose(false);
+    return () => {
+      if (closingTimer.current) {
+        clearTimeout(closingTimer.current);
+      }
+    };
+  }, [props.isOpen]);
+  const onClose = props.onClose;
+  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
+  const handleClose = react$1.useCallback(event => {
+    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`.
+      setForceClose(true);
+      closingTimer.current = _setTimeout__default["default"](() => {
+        onClose && onClose(event);
+      }, TRANSITION_DURATION);
+      return;
+    }
+    onClose && onClose(event);
+  }, [onClose, shouldDelayOnClose, TRANSITION_DURATION]);
+  return jsxRuntime.jsx(react.ClassNames, {
+    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(_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,
@@ -1231,26 +971,6 @@ FormModalPage.displayName = 'FormModalPage';
 // 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, ";" + ("" ));
@@ -1281,8 +1001,6 @@ const TabularModalPage = _ref => {
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$a);
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -1312,9 +1030,9 @@ const TabularModalPage = _ref => {
         })]
       })
     }), 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
@@ -1336,7 +1054,7 @@ const _excluded$9 = ["color", "previousPathLabel"];
 const PageTopBar = _ref => {
   _ref.color;
     let _ref$previousPathLabe = _ref.previousPathLabel,
-    previousPathLabel = _ref$previousPathLabe === void 0 ? messages$5.back : _ref$previousPathLabe,
+    previousPathLabel = _ref$previousPathLabe === void 0 ? messages$4.back : _ref$previousPathLabe,
     props = _objectWithoutProperties(_ref, _excluded$9);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
@@ -1382,7 +1100,7 @@ const CustomFormDetailPage = _ref => {
         title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
-      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      }), jsxRuntime.jsx(CustomViewSelector, {
         margin: getCustomViewsSelectorMargin(!hideControls && !!props.formControls),
         customViewLocatorCode: props.customViewLocatorCode
       }), !hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
@@ -1391,7 +1109,7 @@ const CustomFormDetailPage = _ref => {
           children: props.formControls
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(ContentWrapper$2, {
       children: props.children
     })]
   });
@@ -1471,8 +1189,6 @@ const TabularDetailPage = _ref => {
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$6);
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
@@ -1493,11 +1209,11 @@ const TabularDetailPage = _ref => {
         })
       })]
     }), 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
     })]
   });
@@ -1543,7 +1259,7 @@ const CustomFormMainPage = _ref => {
         title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
-      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      }), jsxRuntime.jsx(CustomViewSelector, {
         margin: headerRowMargin,
         customViewLocatorCode: props.customViewLocatorCode
       }), !hideControls && props.formControls && jsxRuntime.jsx("div", {
@@ -1638,8 +1354,6 @@ const TabularMainPage = _ref => {
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$3);
-  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
-    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1656,11 +1370,11 @@ const TabularMainPage = _ref => {
         })
       })]
     }), 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
     })]
@@ -1718,7 +1432,7 @@ 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"
@@ -1741,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
       }
@@ -1752,7 +1466,7 @@ 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"
@@ -1779,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
       }
@@ -1907,7 +1621,7 @@ function PageContentFull(props) {
 PageContentFull.propTypes = {};
 
 const _excluded$1 = ["size", "hideControls", "onPrimaryButtonClick", "onSecondaryButtonClick"];
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+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", {
@@ -1947,7 +1661,7 @@ function Drawer(_ref) {
               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, {})
@@ -1972,7 +1686,7 @@ function Drawer(_ref) {
           })]
         })]
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
@@ -1987,6 +1701,126 @@ 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",
@@ -2178,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;