@commercetools-frontend/application-components 0.0.0-CRAFT-1791-20251006162610

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

@@ -0,0 +1,2108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+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');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var Text = require('@commercetools-uikit/text');
+var utils = require('@commercetools-uikit/utils');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+var react$1 = require('react');
+var reactDialog = require('@radix-ui/react-dialog');
+var constants = require('@commercetools-frontend/constants');
+var Card = require('@commercetools-uikit/card');
+var icons = require('@commercetools-uikit/icons');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var Spacings = require('@commercetools-uikit/spacings');
+var i18n = require('@commercetools-frontend/i18n');
+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 _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 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');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var Card__default = /*#__PURE__*/_interopDefault(Card);
+var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+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 _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+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 = "24.7.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.
+// https://github.com/commercetools/merchant-center-application-kit/pull/3353
+const themesOverrides = {
+  default: {
+    marginForCustomViewsSelectorAsTabular: `0 ${designSystem.designTokens.spacing55}`,
+    marginForPageContent: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55}`,
+    paddingForDetailPageHeader: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55} ${designSystem.designTokens.spacing40}`,
+    paddingForMainPageHeader: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55} 0`,
+    paddingForTabularPageHeader: `${designSystem.designTokens.spacing40} ${designSystem.designTokens.spacing55} 0`,
+    backgroundColorForNavbar: designSystem.designTokens.colorPrimary10,
+    backgroundColorForNavbarHeader: designSystem.designTokens.colorPrimary10,
+    fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary
+  }
+};
+const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
+  includeDefaultValue: false
+});
+
+const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
+var _ref$7 = {
+  name: "1u0tiat",
+  styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
+} ;
+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$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
+
+const _excluded$k = ["isDisabled", "exactPathMatch"];
+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 pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+const warnIfMissingContent = props => {
+  Boolean(props.intlMessage) || Boolean(props.label);
+};
+const getDisabledLinkAtributes = isDisabled => isDisabled ? {
+  tabIndex: -1,
+  'aria-disabled': true
+} : {};
+const TabLabel = _ref => {
+  let children = _ref.children;
+  return jsxRuntime.jsx(Text__default["default"].Headline, {
+    as: "h3",
+    truncate: true,
+    children: children
+  });
+};
+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(props.to),
+    exact: exactPathMatch,
+    strict: false
+  }));
+  let label = props.label;
+  if (props.intlMessage) {
+    label = intl.formatMessage(props.intlMessage);
+  }
+  warnIfMissingContent(_objectSpread$5({
+    exactPathMatch,
+    isDisabled
+  }, props));
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$5(_objectSpread$5({
+    role: "tab",
+    "aria-selected": isActive,
+    to: props.to,
+    css: getLinkStyles(isActive, isDisabled)
+  }, getDisabledLinkAtributes(isDisabled)), {}, {
+    children: jsxRuntime.jsx(TabLabel, {
+      children: label
+    })
+  }));
+};
+TabHeader.displayName = 'TabHeader';
+
+const getConstraintForGridStyle = size => {
+  switch (size) {
+    case 7:
+      return designSystem.designTokens.constraint7;
+    case 8:
+      return designSystem.designTokens.constraint8;
+    case 9:
+    case 'm':
+      return designSystem.designTokens.constraint9;
+    case 10:
+      return designSystem.designTokens.constraint10;
+    case 11:
+      return designSystem.designTokens.constraint11;
+    case 12:
+      return designSystem.designTokens.constraint12;
+    case 13:
+    case 'l':
+      return designSystem.designTokens.constraint13;
+    case 16:
+      return designSystem.designTokens.constraint16;
+    case 'scale':
+      return designSystem.designTokens.constraintScale;
+    default:
+      return designSystem.designTokens.constraintScale;
+  }
+};
+const getModalContentStyles = props => {
+  const sizeConstraint = getConstraintForGridStyle(props.size);
+  const gridStyle = props.size === 'scale' ? /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row3-end]/", designSystem.designTokens.spacingXl, " 1fr ", designSystem.designTokens.spacingXl, ";" + ("" ), "" ) : /*#__PURE__*/react.css("grid:[row1-start] 'top top top' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row1-end] [row2-start] 'left main right' minmax(0, 100%) [row2-end] [row3-start] 'bottom bottom bottom' minmax(\n              ", designSystem.designTokens.spacingXl, ",\n              1fr\n            ) [row3-end]/minmax(", designSystem.designTokens.spacingXl, ", 1fr) ", sizeConstraint, " minmax(", designSystem.designTokens.spacingXl, ", 1fr);" + ("" ), "" );
+
+  // To ensure that the mouse click on the overlay surface goes "through"
+  // and triggers the modal to close, we need to turn off the pointer events.
+  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;position:relative;pointer-events:none;z-index:", typeof props.zIndex === 'number' ?
+  // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+  // We're assigning value 1 unit higher than the overlay to ensure the content is on top.
+  // It's safe to do that since the modal is topmost in the stacking layer.
+  `${props.zIndex + 1} !important` : 'auto', ";", gridStyle, ";" + ("" ), "" );
+  return baseStyles;
+};
+const ClickableDialogContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
+  target: "e1nocpaa2"
+} )(props => getModalContentStyles(props), ";" + ("" ));
+const DialogOverlay = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1nocpaa1"
+} )("display:flex;position:absolute;z-index:", _ref => {
+  let zIndex = _ref.zIndex;
+  return (
+    // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+    typeof zIndex === 'number' ? `${zIndex} !important` : 'auto'
+  );
+}, ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ));
+const DialogContent$1 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1nocpaa0"
+} )({
+  name: "vyh6ik",
+  styles: "position:absolute;width:100%;height:100%;top:0"
+} );
+
+const _excluded$j = ["size", "getParentSelector"];
+const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elx55gk0"
+} )("grid-area:", props => props.name, ";" + ("" ));
+var _ref$6 = {
+  name: "1daj17f",
+  styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
+} ;
+var _ref2$2 = {
+  name: "1187q51",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
+} ;
+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.');
+  const _useState = react$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    portalContainer = _useState2[0],
+    setPortalContainer = _useState2[1];
+  react$1.useEffect(() => {
+    const container = getParentSelector();
+    if (container) {
+      setPortalContainer(container);
+    }
+  }, []);
+  const dialogAccessibleLabel = typeof props.title === 'string' ? props.title : props['aria-label'];
+  return jsxRuntime.jsx(reactDialog.Root, {
+    open: props.isOpen,
+    modal: false,
+    children: jsxRuntime.jsx(reactDialog.Portal, {
+      container: portalContainer,
+      children: jsxRuntime.jsx(DialogOverlay, {
+        "data-role": "dialog-overlay",
+        zIndex: props.zIndex,
+        children: jsxRuntime.jsx(DialogContent$1, {
+          children: jsxRuntime.jsxs(ClickableDialogContent, {
+            size: size,
+            onEscapeKeyDown: props.onClose,
+            onPointerDownOutside: props.onClose,
+            "aria-describedby": undefined,
+            "aria-labelledby": undefined,
+            "aria-label": dialogAccessibleLabel,
+            id: undefined,
+            children: [jsxRuntime.jsx(GridArea, {
+              name: "top"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "left"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "right"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "bottom"
+            }), jsxRuntime.jsx(GridArea, {
+              name: "main",
+              css: _ref2$2,
+              children: jsxRuntime.jsx(Card__default["default"]
+              // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
+              // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
+              , {
+                css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+                children: jsxRuntime.jsx("div", {
+                  css: _ref$6,
+                  children: props.children
+                })
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+DialogContainer.displayName = 'DialogContainer';
+
+// The overflow should be "auto", to make the container scrollable
+const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "eo6zkz80"
+} )("border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:", designSystem.designTokens.spacing40, " 0 0;flex:1;overflow:auto;" + ("" ));
+
+const TextTitle = props => jsxRuntime.jsx(Text__default["default"].Headline, {
+  as: "h3",
+  title: props.title,
+  truncate: true,
+  children: props.title
+});
+const HiddenEmptyDialogTitle$1 = () => jsxRuntime.jsx("div", {
+  "aria-hidden": true,
+  style: {
+    display: 'none'
+  },
+  children: jsxRuntime.jsx(reactDialog.Title, {})
+});
+const Title$1 = props => {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [typeof props.title === 'string' ? jsxRuntime.jsx(TextTitle, {
+      title: props.title
+    }) : props.title, jsxRuntime.jsx(HiddenEmptyDialogTitle$1, {})]
+  });
+};
+const DialogHeader = props => jsxRuntime.jsx("div", {
+  css: /*#__PURE__*/react.css("flex:0 1 auto;display:flex;flex-direction:column;margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
+  children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+    scale: "m",
+    alignItems: "center",
+    justifyContent: "space-between",
+    children: [jsxRuntime.jsx(Title$1, {
+      title: props.title
+    }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+      label: "Close dialog",
+      onClick: props.onClose,
+      icon: jsxRuntime.jsx(icons.CloseIcon, {}),
+      size: "30"
+    })]
+  })
+});
+DialogHeader.displayName = 'DialogHeader';
+
+const InfoDialog = 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, {
+    title: props.title,
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  })]
+});
+InfoDialog.displayName = 'InfoDialog';
+
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+InfoDialog.TextTitle = TextTitle;
+
+function filterDataAttributes(obj) {
+  return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
+}
+
+const _excluded$i = ["isPrimaryButtonDisabled", "dataAttributesPrimaryButton", "dataAttributesSecondaryButton"];
+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 getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
+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, ";" + ("" ), "" ),
+    children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [jsxRuntime.jsx("div", {
+        children: props.footerContent
+      }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "m",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+          label: getFormattedLabel(props.labelSecondary, intl),
+          onClick: props.onCancel,
+          iconLeft: props.iconLeftSecondaryButton
+        }, filterDataAttributes(dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+          label: getFormattedLabel(props.labelPrimary, intl),
+          iconLeft: props.iconLeftPrimaryButton,
+          onClick: props.onConfirm,
+          isDisabled: isPrimaryButtonDisabled
+        }, filterDataAttributes(dataAttributesPrimaryButton)))]
+      })]
+    })
+  });
+};
+DialogFooter.displayName = 'DialogFooter';
+
+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,
+    "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.displayName = 'ConfirmationDialog';
+// 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;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+ConfirmationDialog.TextTitle = TextTitle;
+
+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,
+    "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,
+      iconLeftPrimaryButton: props.iconLeftPrimaryButton,
+      footerContent: props.footerContent
+    })]
+  });
+};
+FormDialog.displayName = 'FormDialog';
+// 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;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+FormDialog.TextTitle = TextTitle;
+
+const CustomViewSelector = /*#__PURE__*/react$1.lazy(() => {
+  if (typeof window !== 'undefined' && typeof window.app !== 'undefined') {
+    return Promise.resolve().then(function () { return require('./custom-views-selector-03d0524e.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
+    })
+  });
+};
+var _ref$5 = {
+  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$5,
+    children: [jsxRuntime.jsx(Title, {
+      title: props.title,
+      titleSize: titleSize,
+      truncate: truncate
+    }), jsxRuntime.jsx(Subtitle, {
+      subtitle: props.subtitle,
+      truncate: truncate
+    })]
+  });
+};
+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: [props.customTitleRow || 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.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'
+  },
+  close: {
+    id: 'Components.ModalPage.TopBar.Close',
+    defaultMessage: 'Close Modal Page'
+  }
+});
+
+const _excluded$e = ["color", "previousPathLabel", "hidePathLabel"];
+// Component to have a larger clickable surface
+var _ref2$1 = {
+  name: "1rxhroq",
+  styles: "display:flex;align-items:center;justify-content:center;&::after{content:'';position:absolute;height:35px;width:48px;top:0;right:0;}"
+} ;
+const LargeIconWrapper = props => jsxRuntime.jsx("span", {
+  css: _ref2$1,
+  children: /*#__PURE__*/react$1.cloneElement(props.children, {
+    size: props.size
+  })
+});
+
+// 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.
+var _ref$4 = {
+  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$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$4,
+      children: [!hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
+        tone: "primary",
+        label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
+        icon: jsxRuntime.jsx(icons.AngleLeftIcon, {
+          size: "medium",
+          color: "primary"
+        }),
+        onClick: props.onClose
+      }), props.currentPathLabel && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Text__default["default"].Detail, {
+          as: "span",
+          children: "/"
+        }), jsxRuntime.jsx(Text__default["default"].Detail, {
+          as: "span",
+          title: props.currentPathLabel,
+          truncate: true,
+          children: props.currentPathLabel
+        })]
+      })]
+    }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+      label: intl.formatMessage(messages$4.close),
+      onClick: props.onClose,
+      icon: jsxRuntime.jsx(LargeIconWrapper, {
+        children: jsxRuntime.jsx(icons.CloseIcon, {})
+      }),
+      size: "40"
+    })]
+  });
+};
+ModalPageTopBar.displayName = 'ModalPageTopBar';
+
+const stylesBySize = {
+  '10': {
+    width: '600px',
+    transitionTime: 200
+  },
+  '20': {
+    width: '900px',
+    transitionTime: 200
+  },
+  '30': {
+    width: '1200px',
+    transitionTime: 200
+  },
+  scale: {
+    width: '100%',
+    transitionTime: 300
+  }
+};
+const overlayShow = react.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+// we can't use Overlay from Radix-ui because it doesn't appear in DOM when Dialog.Root is rendered with `modal={false}`
+const ModalOverlay = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1jbmsa1"
+} )("position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);z-index:", _ref => {
+  let zIndex = _ref.zIndex;
+  return (
+    // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+    typeof zIndex === 'number' ? `${zIndex} !important` : 'inherit'
+  );
+}, ";opacity:0;", _ref2 => {
+  let size = _ref2.size;
+  const transitionDuration = stylesBySize[size].transitionTime;
+  return /*#__PURE__*/react.css("animation:", overlayShow, " ", transitionDuration, "ms ease-out forwards;" + ("" ), "" );
+}, ";" + ("" ));
+const getContentShowAnimation = size => react.keyframes({
+  '0%': {
+    opacity: 0,
+    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+  },
+  '100%': {
+    opacity: 1,
+    transform: `translate3d(0, 0, 0)`
+  }
+});
+const getContentHideAnimation = size => react.keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translate3d(0, 0, 0)`
+  },
+  '100%': {
+    opacity: 0,
+    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+  }
+});
+const ModalContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
+  shouldForwardProp: prop => prop !== 'size',
+  target: "e1jbmsa0"
+} )("position:absolute;top:0;right:0;height:100%;width:", _ref3 => {
+  let size = _ref3.size;
+  return size !== 'scale' ?
+  // In case we're using a specific size, we want it to be used until there's no space left.
+  // In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+  `min(${stylesBySize[size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width;
+}, ";display:flex;flex-direction:column;background-color:", designSystem.designTokens.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;z-index:inherit;&[data-state='open']{animation:", _ref4 => {
+  let size = _ref4.size;
+  return getContentShowAnimation(size);
+}, " 300ms ease forwards;}&[data-state='closed']{animation:", _ref5 => {
+  let size = _ref5.size;
+  return getContentHideAnimation(size);
+}, " 300ms ease forwards;}" + ("" ));
+
+const _excluded$d = ["size", "getParentSelector", "shouldDelayOnClose"];
+const HiddenEmptyDialogTitle = () => jsxRuntime.jsx("div", {
+  "aria-hidden": true,
+  style: {
+    display: 'none'
+  },
+  children: jsxRuntime.jsx(reactDialog.Title, {})
+});
+
+// When running tests, we don't render the AppShell. Instead we mock the
+// application context to make the data available to the application under
+// test. However, this also means that the AppShell tree is not rendered,
+// which contains among other things the <div id="portals-container" />
+// element, used to render the modal content.
+// Apparently though, when the <Modal> component unmounts between tests, it
+// tries to remove the child elements within the parent selector
+// ("portals-container") which may have been cleaned up by another test,
+// resulting in the <Modal> to throw an NotFoundError.
+// To solve this, we can simply use "document.body" as the parent selector
+// instead of a specific element that will be cleaned up, resulting in
+// console errors (even though the test passes). We only need to to this in
+// test environment.
+const getDefaultParentSelector = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+
+// 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(undefined);
+  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
+  react$1.useEffect(() => {
+    if (props.isOpen === true) setForceClose(false);
+    return () => {
+      if (closingTimer.current) {
+        clearTimeout(closingTimer.current);
+      }
+    };
+  }, [props.isOpen]);
+  const onClose = props.onClose;
+  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]);
+  const _useState3 = react$1.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    portalContainer = _useState4[0],
+    setPortalContainer = _useState4[1];
+  react$1.useEffect(() => {
+    const container = getParentSelector();
+    if (container) {
+      setPortalContainer(container);
+    }
+  }, []);
+  return jsxRuntime.jsx(reactDialog.Root, {
+    open: props.isOpen && !forceClose,
+    onOpenChange: handleClose,
+    modal: false // `true` would apply aria-hidden to all other elements when the modal is open
+    ,
+    children: jsxRuntime.jsx(reactDialog.Portal, {
+      container: portalContainer,
+      children: jsxRuntime.jsxs("div", {
+        // Assign the `data-role` to the overlay container, which is used as
+        // the CSS selector in the `<PortalsContainer>`.
+        "data-role": "modal-overlay",
+        children: [jsxRuntime.jsx(ModalOverlay, {
+          size: size,
+          "data-role": "modal-overlay-clickable",
+          onClick: handleClose
+        }), jsxRuntime.jsxs(ModalContent, {
+          size: size,
+          "aria-describedby": undefined,
+          onInteractOutside: e => {
+            // Prevent only the modal from closing, handle all other events
+            const overlay = document.querySelector('[data-role="modal-overlay-clickable"]');
+            if (!overlay?.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          "aria-labelledby": undefined,
+          "aria-label": props.title,
+          id: undefined,
+          children: [jsxRuntime.jsx(HiddenEmptyDialogTitle, {}), !props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
+            color: props.topBarColor,
+            onClose: handleClose,
+            currentPathLabel: props.currentPathLabel,
+            previousPathLabel: props.previousPathLabel,
+            hidePathLabel: props.hidePathLabel
+          }), props.children]
+        })]
+      })
+    })
+  });
+};
+ModalPage.displayName = 'ModalPage';
+
+const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
+  title: props.title,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  currentPathLabel: props.topBarCurrentPathLabel || props.title,
+  previousPathLabel: props.topBarPreviousPathLabel,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  getParentSelector: props.getParentSelector,
+  afterOpenStyles: props.afterOpenStyles,
+  children: [jsxRuntime.jsx(PageHeader, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode
+  }), jsxRuntime.jsx(ModalContentWrapper, {
+    children: props.children
+  })]
+});
+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 useFormattedLabel = label => {
+  const intl = reactIntl.useIntl();
+  return typeof label === 'string' ? label : intl.formatMessage(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,
+    onClick: props.onClick,
+    isDisabled: isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(dataAttributes)));
+};
+FormPrimaryButton.displayName = 'FormPrimaryButton';
+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,
+    onClick: props.onClick,
+    isDisabled: isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(dataAttributes)));
+};
+FormSecondaryButton.displayName = 'FormSecondaryButton';
+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,
+    onClick: props.onClick,
+    isDisabled: isDisabled
+  }, filterDataAttributes(dataAttributes)));
+};
+FormDeleteButton.displayName = 'FormDeleteButton';
+
+const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
+  title: props.title,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  currentPathLabel: props.topBarCurrentPathLabel || props.title,
+  previousPathLabel: props.topBarPreviousPathLabel,
+  getParentSelector: props.getParentSelector,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  afterOpenStyles: props.afterOpenStyles,
+  children: [jsxRuntime.jsx(PageHeader, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customViewLocatorCode: props.customViewLocatorCode,
+    children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+      alignItems: "flex-end",
+      children: props.formControls
+    })
+  }), jsxRuntime.jsx(ModalContentWrapper, {
+    children: props.children
+  })]
+});
+CustomFormModalPage.displayName = 'CustomFormModalPage';
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+CustomFormModalPage.FormPrimaryButton = FormPrimaryButton;
+CustomFormModalPage.FormSecondaryButton = FormSecondaryButton;
+CustomFormModalPage.FormDeleteButton = FormDeleteButton;
+// 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.
+CustomFormModalPage.Intl = i18n.sharedMessages;
+
+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
+  });
+};
+FormModalPage.displayName = 'FormModalPage';
+// 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 TabControls = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre4"
+} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
+const ControlsContainter = props => jsxRuntime.jsxs("div", {
+  css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designSystem.designTokens.spacing40, ";" + ("" ), "" ),
+  children: [jsxRuntime.jsx(TabControls, {
+    role: "tablist",
+    children: props.tabControls
+  }), props.formControls]
+});
+ControlsContainter.displayName = 'ControlsContainter';
+const TabularPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre3"
+} )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
+const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre2"
+} )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
+const CustomViewsSelectorWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre1"
+} )("margin:", designTokens.marginForCustomViewsSelectorAsTabular, ";" + ("" ));
+const TabularModalPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre0"
+} )(TabularPageContainer, "{padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;}" + ("" ));
+
+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,
+    zIndex: props.zIndex,
+    onClose: props.onClose,
+    topBarColor: "neutral",
+    currentPathLabel: props.topBarCurrentPathLabel || props.title,
+    previousPathLabel: props.topBarPreviousPathLabel,
+    getParentSelector: props.getParentSelector,
+    shouldDelayOnClose: props.shouldDelayOnClose,
+    afterOpenStyles: props.afterOpenStyles,
+    children: [jsxRuntime.jsx(TabularModalPageContainer, {
+      children: jsxRuntime.jsxs(TabularPageContainer, {
+        children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+          title: props.title,
+          titleSize: "big",
+          subtitle: props.subtitle,
+          truncate: true
+        }), jsxRuntime.jsx(ControlsContainter, {
+          tabControls: props.tabControls,
+          formControls: jsxRuntime.jsx(FormControlsContainer, {
+            children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+              alignItems: "flex-end",
+              children: props.formControls
+            })
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCodes: props.customViewLocatorCodes
+      })
+    }), jsxRuntime.jsx(ModalContentWrapper, {
+      children: props.children
+    })]
+  });
+};
+TabularModalPage.displayName = 'TabularModalPage';
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularModalPage.FormPrimaryButton = FormPrimaryButton;
+TabularModalPage.FormSecondaryButton = FormSecondaryButton;
+TabularModalPage.FormDeleteButton = FormDeleteButton;
+// 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.
+TabularModalPage.Intl = i18n.sharedMessages;
+
+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 previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
+      icon: jsxRuntime.jsx(icons.ListIcon, {
+        size: "medium",
+        color: "primary"
+      }),
+      onClick: props.onClick
+    })
+  });
+};
+PageTopBar.displayName = 'PageTopBar';
+
+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;" + ("" ));
+const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "etkdonc0"
+} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
+const getCustomViewsSelectorMargin = hasContentBelow => `${designSystem.designTokens.spacing40} 0 ${hasContentBelow ? designSystem.designTokens.spacing40 : '0'} 0`;
+
+// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+// However, we need to explicitly define this otherwise the prop-types babel plugin
+// does not recognize the object shape.
+
+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, {
+        color: "neutral",
+        previousPathLabel: props.previousPathLabel,
+        onClick: props.onPreviousPathClick
+      }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title ?? '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), jsxRuntime.jsx(CustomViewSelector, {
+        margin: getCustomViewsSelectorMargin(!hideControls && !!props.formControls),
+        customViewLocatorCode: props.customViewLocatorCode
+      }), !hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+        children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          justifyContent: "flex-end",
+          children: props.formControls
+        })
+      })]
+    }), jsxRuntime.jsx(ContentWrapper$2, {
+      children: props.children
+    })]
+  });
+};
+CustomFormDetailPage.displayName = 'CustomFormDetailPage';
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+CustomFormDetailPage.PageHeaderTitle = PageHeaderTitle;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+CustomFormDetailPage.FormPrimaryButton = FormPrimaryButton;
+CustomFormDetailPage.FormSecondaryButton = FormSecondaryButton;
+CustomFormDetailPage.FormDeleteButton = FormDeleteButton;
+// 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.
+CustomFormDetailPage.Intl = i18n.sharedMessages;
+
+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
+  });
+};
+FormDetailPage.displayName = 'FormDetailPage';
+// 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
+// use as part of a custom title row
+FormDetailPage.PageHeaderTitle = PageHeaderTitle;
+// 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.
+FormDetailPage.Intl = i18n.sharedMessages;
+
+const InfoDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  customTitleRow: props.customTitleRow,
+  previousPathLabel: props.previousPathLabel,
+  customViewLocatorCode: props.customViewLocatorCode,
+  onPreviousPathClick: props.onPreviousPathClick,
+  children: props.children
+});
+InfoDetailPage.displayName = 'InfoDetailPage';
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
+
+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, {
+        color: "neutral",
+        previousPathLabel: props.previousPathLabel,
+        onClick: props.onPreviousPathClick
+      }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title ?? '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), jsxRuntime.jsx(ControlsContainter, {
+        tabControls: props.tabControls,
+        formControls: jsxRuntime.jsx(FormControlsContainer, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            alignItems: "flex-end",
+            children: props.formControls
+          })
+        })
+      })]
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCodes: props.customViewLocatorCodes
+      })
+    }), jsxRuntime.jsx(ContentWrapper$2, {
+      children: props.children
+    })]
+  });
+};
+TabularDetailPage.displayName = 'TabularDetailPage';
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
+TabularDetailPage.FormSecondaryButton = FormSecondaryButton;
+TabularDetailPage.FormDeleteButton = FormDeleteButton;
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+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-b182d2dd.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+
+const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ev8m2jf2"
+} )("padding:", designTokens.paddingForMainPageHeader, ";" + ("" ));
+const Divider = /*#__PURE__*/_styled__default["default"]("hr", {
+  target: "ev8m2jf1"
+} )("background-color:", designSystem.designTokens.colorNeutral90, ";height:1px;border:0;" + ("" ));
+
+// NOTE: do not change "margin" to "padding" as this breaks sticky DataTable styles
+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 = _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(CustomViewSelector, {
+        margin: headerRowMargin,
+        customViewLocatorCode: props.customViewLocatorCode
+      }), !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
+        })
+      }), !hideDivider && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react.css("&>", Divider, "{margin:", headerRowMargin, ";}" + ("" ), "" ),
+        children: jsxRuntime.jsx(Divider, {})
+      })]
+    }), jsxRuntime.jsx(MainPageContent, {
+      children: props.children
+    })]
+  });
+};
+CustomFormMainPage.displayName = 'CustomFormMainPage';
+
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+CustomFormMainPage.PageHeaderTitle = PageHeaderTitle;
+
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+CustomFormMainPage.FormPrimaryButton = FormPrimaryButton;
+CustomFormMainPage.FormSecondaryButton = FormSecondaryButton;
+CustomFormMainPage.FormDeleteButton = FormDeleteButton;
+
+// 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.
+CustomFormMainPage.Intl = i18n.sharedMessages;
+
+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: hideControls,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormMainPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormMainPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    children: props.children
+  });
+};
+FormMainPage.displayName = 'FormMainPage';
+
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+FormMainPage.PageHeaderTitle = PageHeaderTitle;
+
+// 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.
+FormMainPage.Intl = i18n.sharedMessages;
+
+const InfoMainPage = props => {
+  return jsxRuntime.jsx(CustomFormMainPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
+    hideDivider: true,
+    children: props.children
+  });
+};
+InfoMainPage.displayName = 'InfoMainPage';
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+InfoMainPage.PageHeaderTitle = PageHeaderTitle;
+
+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, {
+        title: props.title ?? '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), jsxRuntime.jsx(ControlsContainter, {
+        tabControls: props.tabControls,
+        formControls: jsxRuntime.jsx(FormControlsContainer, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            alignItems: "flex-end",
+            children: props.formControls
+          })
+        })
+      })]
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelector, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCodes: props.customViewLocatorCodes
+      })
+    }), jsxRuntime.jsx(ContentWrapper$2, {
+      css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
+      children: props.children
+    })]
+  });
+};
+TabularMainPage.displayName = 'TabularMainPage';
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularMainPage.FormPrimaryButton = FormPrimaryButton;
+TabularMainPage.FormSecondaryButton = FormSecondaryButton;
+TabularMainPage.FormDeleteButton = FormDeleteButton;
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+TabularMainPage.PageHeaderTitle = PageHeaderTitle;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+TabularMainPage.Intl = i18n.sharedMessages;
+
+var _ref$3 = {
+  name: "zl1inp",
+  styles: "display:flex;justify-content:center"
+} ;
+var _ref2 = {
+  name: "10lgefo",
+  styles: "display:grid;align-items:center;justify-content:center;height:100%;white-space:pre-wrap;text-align:center"
+} ;
+const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
+  css: _ref2,
+  children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: 10,
+    children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+      scale: "m",
+      children: [jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx("img", {
+          style: {
+            height: designSystem.designTokens.constraint7
+          },
+          src: props.imageSrc,
+          alt: props.label
+        })
+      }), jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h2",
+        children: props.title
+      }), jsxRuntime.jsx(Text__default["default"].Body, {
+        children: props.paragraph1
+      }), props.bodyContent && jsxRuntime.jsx("div", {
+        css: _ref$3,
+        children: props.bodyContent
+      }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
+        children: props.paragraph2
+      })]
+    })
+  })
+});
+MaintenancePageLayout.displayName = 'MaintenancePageLayout';
+
+var messages$3 = reactIntl.defineMessages({
+  title: {
+    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.'
+  }
+});
+
+function ownKeys$2(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$2(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$2(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$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getLink = msg => jsxRuntime.jsx("a", {
+  href: constants.SUPPORT_PORTAL_URL,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  children: msg
+}, "support-portal-url");
+const PageNotFound = () => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(MaintenancePageLayout, {
+    imageSrc: PageNotFoundSVG__default["default"],
+    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
+      }
+    }))
+  });
+};
+PageNotFound.displayName = 'PageNotFound';
+
+var messages$2 = reactIntl.defineMessages({
+  title: {
+    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.'
+  },
+  paragraph2: {
+    id: 'PageUnauthorized.paragraph2',
+    defaultMessage: 'Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions.'
+  }
+});
+
+function ownKeys$1(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$1(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$1(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$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
+  href: constants.SUPPORT_PORTAL_URL,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  children: msg
+}, "support-portal-url");
+const PageUnauthorized = () => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(MaintenancePageLayout, {
+    imageSrc: FailedAuthorizationSVG__default["default"],
+    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
+      }
+    }))
+  });
+};
+PageUnauthorized.displayName = 'PageUnauthorized';
+
+const Content$1 = /*#__PURE__*/_styled__default["default"]("section", {
+  target: "e1jvhtw81"
+} )({
+  name: "1sxg93g",
+  styles: "grid-area:content"
+} );
+const Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1jvhtw80"
+} )({
+  name: "1vpm32e",
+  styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(400px, 742px) 1fr;width:100%"
+} );
+function PageContentNarrow(props) {
+  return jsxRuntime.jsx(Container$1, {
+    children: jsxRuntime.jsx(Content$1, {
+      children: props.children
+    })
+  });
+}
+
+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 => {
+  // NOTE: using only `?fr` can cause the layout the "break" as `fr`
+  // is all about distribution of the available space.
+  // If the content of a column becomes "bigger", the system tries
+  // to compensate for the lack of space by reducing the width of the
+  // other column (it does not overflow).
+  // To fix that, we can use `minmax` to instruct the system that
+  // the column size has to be maintained. However, this will cause
+  // some overflow if the content is bigger.
+  // For us, it's important to ensure that the columns layout maintains
+  // the correct dimensions and sizes, thus using `minmax`.
+  switch (props.columns) {
+    case '1/1':
+      return 'repeat(2, minmax(0, 1fr))';
+    case '2/1':
+      return 'minmax(0, 2fr) minmax(0, 1fr)';
+    default:
+      return 'minmax(0, 1fr)';
+  }
+}, ";gap:", props => props.gapSize === '10' ? designSystem.designTokens.spacing50 : designSystem.designTokens.spacing70, ";width:100%;" + ("" ));
+const LeftContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f3"
+} )({
+  name: "1ibwnup",
+  styles: "grid-area:left-column"
+} );
+const RightContentColumn = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f2"
+} )({
+  name: "hjfyry",
+  styles: "grid-area:right-column"
+} );
+const RightColumnContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f1"
+} )("top:0;position:", props => props.columns === '2/1' ? 'sticky' : 'static', ";" + ("" ));
+const Container = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1dg479f0"
+} )({
+  name: "5phl7w",
+  styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(800px, 1200px) 1fr;width:100%"
+} );
+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 = 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: 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: columns,
+            children: rightChild
+          })
+        })]
+      })
+    })
+  });
+}
+
+var _ref$2 = {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} ;
+function PageContentFull(props) {
+  return jsxRuntime.jsx("div", {
+    css: _ref$2,
+    children: jsxRuntime.jsx("section", {
+      children: props.children
+    })
+  });
+}
+
+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(_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: size,
+    title: props.title,
+    afterOpenStyles: props.afterOpenStyles,
+    getParentSelector: props.getParentSelector,
+    shouldDelayOnClose: props.shouldDelayOnClose,
+    topBarColor: props.topBarColor,
+    zIndex: props.zIndex,
+    children: [jsxRuntime.jsx(HeaderWrapper, {
+      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+        children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(PageHeaderTitle, {
+            title: props.title,
+            titleSize: "medium",
+            subtitle: props.subtitle && jsxRuntime.jsx(Text__default["default"].Detail, {
+              children: props.subtitle
+            })
+          }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+            label: intl.formatMessage(messages$4.close),
+            onClick: props.onClose,
+            icon: jsxRuntime.jsx(LargeIconWrapper, {
+              children: jsxRuntime.jsx(icons.CloseIcon, {})
+            }),
+            size: "40"
+          })]
+        }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          justifyContent: "flex-end",
+          children: [!hideControls && props.formControls && props.formControls, !hideControls && !props.formControls && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(FormSecondaryButton, {
+              label: props.labelSecondaryButton,
+              onClick: onSecondaryButtonClick,
+              isDisabled: props.isSecondaryButtonDisabled,
+              dataAttributes: props.dataAttributesSecondaryButton,
+              iconLeft: props.iconLeftSecondaryButton
+            }), jsxRuntime.jsx(FormPrimaryButton, {
+              label: props.labelPrimaryButton,
+              onClick: onPrimaryButtonClick,
+              isDisabled: props.isPrimaryButtonDisabled,
+              dataAttributes: props.dataAttributesPrimaryButton
+            })]
+          })]
+        })]
+      })
+    }), jsxRuntime.jsx(ContentWrapper$1, {
+      children: props.children
+    })]
+  });
+}
+Drawer.displayName = 'Drawer';
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+Drawer.FormPrimaryButton = FormPrimaryButton;
+Drawer.FormSecondaryButton = FormSecondaryButton;
+// 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.
+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 hasSentInitializationMessages = react$1.useRef(false);
+  const sendInitializationMessages = react$1.useCallback(() => {
+    // If we have already sent the initialization messages, do not send them again.
+    // The message can be sent either as a response to the CUSTOM_VIEW_READY message
+    // or as a result of a setTimeout after 500ms. In any case, this message should be sent only once.
+    if (hasSentInitializationMessages.current) {
+      return;
+    }
+
+    // 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
+        }
+      }
+    });
+    hasSentInitializationMessages.current = true;
+  }, [dataLocale, featureFlags, props.customView, props.hostUrl, projectKey]);
+  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();
+          if (props.locatorCode) {
+            window.dispatchEvent(new CustomEvent(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_ON_CLOSE_AFTER, {
+              detail: {
+                originLocatorCode: props.locatorCode
+              }
+            }));
+          }
+          break;
+        // This message will only be sent by custom view shell older than v24.x
+        // For backwards compatibility we will send the initialization messages
+        // after 500ms if this message was not received by then.
+        case constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_READY:
+          {
+            sendInitializationMessages();
+          }
+      }
+    }
+  }, [props, sendInitializationMessages]);
+
+  // 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;
+    }
+
+    // This is for backwards compatibility with custom view shell older than v24.0.0
+    // where the custom-view-shell does not send the CUSTOM_VIEW_READY message yet.
+    _setTimeout__default["default"](() => {
+      sendInitializationMessages();
+    }, 500);
+
+    // 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;
+
+    // Listen for messages from the iFrame
+    iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
+    window.addEventListener('message', messageFromIFrameHandler);
+    return () => {
+      window.removeEventListener('message', messageFromIFrameHandler);
+      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}`)
+    })
+  });
+}
+
+var messages = reactIntl.defineMessages({
+  ProjectProduction: {
+    id: 'ProjectStamp.production',
+    defaultMessage: 'Production'
+  },
+  ProjectSuspended: {
+    id: 'ProjectStamp.suspended',
+    defaultMessage: 'Suspended'
+  },
+  ProjectExpired: {
+    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}}'
+  }
+});
+
+const _excluded = ["values"];
+function ownKeys(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(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(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(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function CustomStamp(props) {
+  const intl = reactIntl.useIntl();
+  const _props$label = props.label,
+    values = _valuesInstanceProperty__default["default"](_props$label),
+    message = _objectWithoutProperties(_props$label, _excluded);
+  return jsxRuntime.jsx(Stamp__default["default"], {
+    tone: props.tone,
+    isCondensed: true,
+    label: intl.formatMessage(message, values || {}),
+    icon: props.icon
+  });
+}
+var _ref$1 = {
+  name: "ph6b5m",
+  styles: "height:18px;svg{height:18px;width:12px;}"
+} ;
+const IsProduction = () => {
+  return jsxRuntime.jsx(CustomStamp, {
+    tone: "positive",
+    label: messages.ProjectProduction,
+    icon: jsxRuntime.jsx("div", {
+      css: _ref$1,
+      children: jsxRuntime.jsx(icons.DotIcon, {
+        color: "success"
+      })
+    })
+  });
+};
+const IsSuspended = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectSuspended
+});
+const IsExpired = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectExpired
+});
+const WillExpire = props => jsxRuntime.jsx(CustomStamp, {
+  tone: "information",
+  label: _objectSpread(_objectSpread({}, messages.ProjectWillExpire), {}, {
+    values: {
+      daysLeft: props.daysLeft
+    }
+  })
+});
+const ProjectStamp = {
+  IsProduction,
+  IsSuspended,
+  IsExpired,
+  WillExpire
+};
+
+const useObserverElementDimensions = element => {
+  const _useState = react$1.useState({
+      height: 0,
+      width: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  useResizeObserver__default["default"](element, entry => {
+    setDimensions({
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    });
+  });
+  return dimensions;
+};
+
+// All modal components expect to be rendered inside this container.
+var _ref = {
+  name: "qk9kof",
+  styles: "display:flex;height:1px;margin-top:-1px"
+} ;
+const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
+  // Initialize props with default values.
+  // NOTE: using `defaultProps` with `forwardRef` results in the type declarations
+  // to ignore the `defaultProps`. Therefore, the default props are typed
+  // as optional and we initialize the value here with the default values.
+  const offsetTop = props.offsetTop ?? '0px';
+  const offsetLeft = props.offsetLeft ?? '0px';
+  const offsetLeftOnExpandedMenu = props.offsetLeftOnExpandedMenu ?? '0px';
+  const containerSelectorToPreventScrollingOnOpen = props.containerSelectorToPreventScrollingOnOpen ?? 'main';
+  const zIndex = props.zIndex ?? 10000;
+  const baseModalZIndex = props.baseModalZIndex ?? 1000;
+  const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
+  const portalsContainerRef = react$1.useRef(null);
+  const globalNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsGlobalRef);
+  const pageNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsPageRef);
+  const _useState3 = react$1.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    stackingLayers = _useState4[0],
+    setStackingLayers = _useState4[1];
+  // The mutation observer gets triggered every time a child node gets added or
+  // removed from the portals container.
+  // The stacking layers are then re-calculated.
+  hooks.useMutationObserver(portalsContainerRef, mutationList => {
+    var _context;
+    // We expect only a single element in the mutation list as we configured the
+    // observer to only listen to `childList` changes.
+    const _mutationList = _slicedToArray(mutationList, 1),
+      mutationEvent = _mutationList[0];
+    let indentationLevel = 0;
+    const nextStackingLevels = [];
+    _forEachInstanceProperty__default["default"](_context = mutationEvent.target.childNodes).call(_context, (node, index) => {
+      if (node instanceof HTMLElement) {
+        const stackingLevel = index + 1;
+        node.dataset.level = String(stackingLevel);
+        if (node.dataset.role === 'modal-overlay') {
+          indentationLevel += 1;
+        }
+        nextStackingLevels.push({
+          stackingLevel,
+          indentationLevel
+        });
+      }
+    });
+    setStackingLayers(nextStackingLevels);
+  }, {
+    // Only subscribe to changes to the child nodes of the portals container.
+    childList: true
+  });
+  const isModalOpen = stackingLayers.length > 0;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(react.Global, {
+      styles: [isModalOpen && /*#__PURE__*/react.css(containerSelectorToPreventScrollingOnOpen, "{overflow:hidden!important;}#", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                    100% - ", offsetTop, " -\n                      ", globalNotificationsElementDimensions.height, "px -\n                      ", pageNotificationsElementDimensions.height, "px\n                  );width:calc(100% - ", offsetLeft, ");top:calc(\n                    ", offsetTop, " +\n                      ", globalNotificationsElementDimensions.height, "px +\n                      ", pageNotificationsElementDimensions.height, "px\n                  );right:0;bottom:0;z-index:", zIndex, ";transition:", modalWidthTransition, ";}.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");transition:", modalWidthTransition, ";}" + ("" ), "" ),
+      // Apply styles for stacking layers.
+      ..._mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
+      /**
+       * Every "overlay" container gets assigned a sequential `z-index` level.
+       * Furthermore, the "modal overlay" containers (not "dialog") get assigned
+       * the correct indentation level width.
+       */
+      stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " [data-level='", stackingLayer.stackingLevel, "'][data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " [data-level='", stackingLayer.stackingLevel, "'][data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (\n                        ", constants.PORTALS_CONTAINER_INDENTATION_SIZE, " *\n                          ", stackingLayer.indentationLevel, "\n                      )\n                  );}" + ("" ), "" )), "" ]
+    }), jsxRuntime.jsx("div", {
+      id: constants.PORTALS_CONTAINER_ID,
+      ref: portalsContainerRef
+      // The container needs a height in order to be tabbable: https://reactjs/react-modal#774
+      ,
+      css: _ref
+    })]
+  });
+});
+PortalsContainer.displayName = 'PortalsContainer';
+
+const useModalState = function () {
+  let isInitiallyOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const _useState = react$1.useState(isInitiallyOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
+  const openModal = react$1.useCallback(() => setIsModalOpen(true), []);
+  const closeModal = react$1.useCallback(() => setIsModalOpen(false), []);
+  return {
+    isModalOpen,
+    openModal,
+    closeModal
+  };
+};
+
+exports.ConfirmationDialog = ConfirmationDialog;
+exports.CustomFormDetailPage = CustomFormDetailPage;
+exports.CustomFormMainPage = CustomFormMainPage;
+exports.CustomFormModalPage = CustomFormModalPage;
+exports.CustomViewLoader = CustomViewLoader;
+exports.CustomViewsSelector = CustomViewSelector;
+exports.Drawer = Drawer;
+exports.FormDetailPage = FormDetailPage;
+exports.FormDialog = FormDialog;
+exports.FormMainPage = FormMainPage;
+exports.FormModalPage = FormModalPage;
+exports.InfoDetailPage = InfoDetailPage;
+exports.InfoDialog = InfoDialog;
+exports.InfoMainPage = InfoMainPage;
+exports.InfoModalPage = InfoModalPage;
+exports.MaintenancePageLayout = MaintenancePageLayout;
+exports.ModalPageTopBar = ModalPageTopBar;
+exports.PageContentFull = PageContentFull;
+exports.PageContentNarrow = PageContentNarrow;
+exports.PageContentWide = PageContentWide;
+exports.PageNotFound = PageNotFound;
+exports.PageUnauthorized = PageUnauthorized;
+exports.PortalsContainer = PortalsContainer;
+exports.ProjectStamp = ProjectStamp;
+exports.PublicPageLayout = PublicPageLayout;
+exports.TabHeader = TabHeader;
+exports.TabularDetailPage = TabularDetailPage;
+exports.TabularMainPage = TabularMainPage;
+exports.TabularModalPage = TabularModalPage;
+exports.designTokens = designTokens;
+exports.themesOverrides = themesOverrides;
+exports.useModalState = useModalState;
+exports.version = version;