@commercetools-frontend/application-components 0.0.0-FEC-157-preview-releases-20241126230331

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

@@ -0,0 +1,2168 @@
+'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');
+require('prop-types');
+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 react$1 = require('react');
+var _styled = require('@emotion/styled/base');
+var Modal = require('react-modal');
+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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var sentry = require('@commercetools-frontend/sentry');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var Constraints = require('@commercetools-uikit/constraints');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var IconButton = require('@commercetools-uikit/icon-button');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
+var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
+var Stamp = require('@commercetools-uikit/stamp');
+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 Modal__default = /*#__PURE__*/_interopDefault(Modal);
+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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
+var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "22.35.1";
+
+// We keep these tokens as they are related to page layout components which should have
+// a slightly different layout (margins/paddings) when used within a Custom View panel.
+// 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$8 = {
+  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$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
+
+function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+const 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 = props => {
+  const intl = reactIntl.useIntl();
+  const location = reactRouterDom.useLocation();
+  const isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
+    // strip the search, otherwise the path won't match
+    path: pathWithoutSearch$1(props.to),
+    exact: props.exactPathMatch,
+    strict: false
+  }));
+  const isDisabled = props.isDisabled;
+  let label = props.label;
+  if (props.intlMessage) {
+    label = intl.formatMessage(props.intlMessage);
+  }
+  warnIfMissingContent(props);
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
+    role: "tab",
+    "aria-selected": isActive,
+    to: props.to,
+    css: getLinkStyles(isActive, isDisabled)
+  }, getDisabledLinkAtributes(isDisabled)), {}, {
+    children: jsxRuntime.jsx(TabLabel, {
+      children: label
+    })
+  }));
+};
+TabHeader.propTypes = {};
+TabHeader.displayName = 'TabHeader';
+const defaultProps$i = {
+  isDisabled: false,
+  exactPathMatch: false
+};
+TabHeader.defaultProps = defaultProps$i;
+
+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;pointer-events:none;", gridStyle, ";" + ("" ), "" );
+  return baseStyles;
+};
+const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ?
+// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+`${props.zIndex} !important` : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
+
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+const getOverlayElement$1 = (props, contentElement) =>
+// Assign the `data-role` to the overlay container, which is used as
+// the CSS selector in the `<PortalsContainer>`.
+jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, props), {}, {
+  "data-role": "dialog-overlay",
+  children: contentElement
+}));
+const defaultProps$h = {
+  // TODO: t-shirt sizes are deprecated but we need to keep using them for
+  // backwards compatibility and to help with styling migration
+  // After the migration is done, we should change this default value to 13.
+  // t-shirt sizes then can be removed in a next breaking change release
+  size: 'l',
+  getParentSelector: getDefaultParentSelector$1
+};
+const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elx55gk0"
+} )("grid-area:", props => props.name, ";" + ("" ));
+var _ref$7 = {
+  name: "1daj17f",
+  styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
+} ;
+var _ref2$3 = {
+  name: "1187q51",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
+} ;
+const DialogContainer = props => {
+  utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
+  return jsxRuntime.jsx(react.ClassNames, {
+    children: _ref3 => {
+      let makeClassName = _ref3.css;
+      return jsxRuntime.jsxs(Modal__default["default"], {
+        isOpen: props.isOpen,
+        onRequestClose: props.onClose,
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement$1,
+        overlayClassName: makeClassName(getOverlayStyles$1(props)),
+        className: makeClassName(getModalContentStyles(props)),
+        contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
+        parentSelector: props.getParentSelector,
+        ariaHideApp: false,
+        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$3,
+          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$7,
+              children: props.children
+            })
+          })
+        })]
+      });
+    }
+  });
+};
+DialogContainer.propTypes = {};
+DialogContainer.displayName = 'DialogContainer';
+DialogContainer.defaultProps = defaultProps$h;
+
+// The overflow should be "auto", to make the container scrollable
+const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
+  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
+});
+TextTitle.propTypes = {};
+const Title$1 = props => {
+  if (typeof props.title === 'string') {
+    return jsxRuntime.jsx(TextTitle, {
+      title: props.title
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.title
+    });
+  }
+};
+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.propTypes = {};
+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.propTypes = {};
+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-'));
+}
+
+function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const defaultProps$g = {
+  isPrimaryButtonDisabled: false,
+  dataAttributesPrimaryButton: {},
+  dataAttributesSecondaryButton: {}
+};
+const getFormattedLabel = (label, intl) => typeof label === 'string' ? label : intl.formatMessage(label);
+const DialogFooter = props => {
+  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$6({
+          label: getFormattedLabel(props.labelSecondary, intl),
+          onClick: props.onCancel,
+          iconLeft: props.iconLeftSecondaryButton
+        }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
+          label: getFormattedLabel(props.labelPrimary, intl),
+          onClick: props.onConfirm,
+          isDisabled: props.isPrimaryButtonDisabled
+        }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+      })]
+    })
+  });
+};
+DialogFooter.propTypes = {};
+DialogFooter.displayName = 'DialogFooter';
+DialogFooter.defaultProps = defaultProps$g;
+
+const defaultProps$f = {
+  labelSecondary: i18n.sharedMessages.cancel,
+  labelPrimary: i18n.sharedMessages.confirm
+};
+const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
+  isOpen: props.isOpen,
+  onClose: props.onClose,
+  size: props.size,
+  zIndex: props.zIndex,
+  title: props.title,
+  "aria-label": props['aria-label'],
+  getParentSelector: props.getParentSelector,
+  children: [jsxRuntime.jsx(DialogHeader, {
+    title: props.title,
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  }), jsxRuntime.jsx(DialogFooter, {
+    labelSecondary: props.labelSecondary,
+    labelPrimary: props.labelPrimary,
+    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+    onCancel: props.onCancel,
+    onConfirm: props.onConfirm,
+    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
+  })]
+});
+ConfirmationDialog.propTypes = {};
+ConfirmationDialog.displayName = 'ConfirmationDialog';
+ConfirmationDialog.defaultProps = defaultProps$f;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// The Intl messages can be used for button labels.
+ConfirmationDialog.Intl = i18n.sharedMessages;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+ConfirmationDialog.TextTitle = TextTitle;
+
+const defaultProps$e = {
+  labelSecondary: i18n.sharedMessages.cancel,
+  labelPrimary: i18n.sharedMessages.save
+};
+const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
+  isOpen: props.isOpen,
+  onClose: props.onClose,
+  size: props.size,
+  zIndex: props.zIndex,
+  title: props.title,
+  "aria-label": props['aria-label'],
+  getParentSelector: props.getParentSelector,
+  children: [jsxRuntime.jsx(DialogHeader, {
+    title: props.title,
+    onClose: props.onClose
+  }), jsxRuntime.jsx(DialogContent, {
+    children: props.children
+  }), jsxRuntime.jsx(DialogFooter, {
+    labelSecondary: props.labelSecondary,
+    labelPrimary: props.labelPrimary,
+    isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+    onCancel: props.onSecondaryButtonClick,
+    onConfirm: props.onPrimaryButtonClick,
+    dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+    dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
+    iconLeftSecondaryButton: props.iconLeftSecondaryButton,
+    footerContent: props.footerContent
+  })]
+});
+FormDialog.propTypes = {};
+FormDialog.displayName = 'FormDialog';
+FormDialog.defaultProps = defaultProps$e;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// The Intl messages can be used for button labels.
+FormDialog.Intl = i18n.sharedMessages;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+FormDialog.TextTitle = TextTitle;
+
+const messages$5 = reactIntl.defineMessages({
+  back: {
+    id: 'Components.ModalPage.TopBar.Back',
+    defaultMessage: 'Go Back'
+  },
+  close: {
+    id: 'Components.ModalPage.TopBar.Close',
+    defaultMessage: 'Close Modal Page'
+  }
+});
+
+// Component to have a larger clickable surface
+var _ref2$2 = {
+  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$2,
+  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.
+LargeIconWrapper.propTypes = {};
+const defaultProps$d = {
+  color: 'surface',
+  previousPathLabel: messages$5.back,
+  hidePathLabel: false
+};
+var _ref$6 = {
+  name: "uvw8rn",
+  styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
+} ;
+const ModalPageTopBar = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
+    children: [jsxRuntime.jsxs("div", {
+      css: _ref$6,
+      children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
+        tone: "primary",
+        label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.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$5.close),
+      onClick: props.onClose,
+      icon: jsxRuntime.jsx(LargeIconWrapper, {
+        children: jsxRuntime.jsx(icons.CloseIcon, {})
+      }),
+      size: "40"
+    })]
+  });
+};
+ModalPageTopBar.propTypes = {};
+ModalPageTopBar.displayName = 'ModalPageTopBar';
+ModalPageTopBar.defaultProps = defaultProps$d;
+
+const stylesBySize = {
+  '10': {
+    width: '600px',
+    transitionTime: 200
+  },
+  '20': {
+    width: '900px',
+    transitionTime: 200
+  },
+  '30': {
+    width: '1200px',
+    transitionTime: 200
+  },
+  scale: {
+    width: '100%',
+    transitionTime: 300
+  }
+};
+const getContainerStyles = props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ?
+// In case we're using a specific size, we want it to be used until there's no space left.
+// In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+`min(${stylesBySize[props.size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ?
+// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+`${props.zIndex} !important` : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+var _ref3 = {
+  name: "1ffv7m4",
+  styles: "transform:translate3d(0, 0, 0)!important"
+} ;
+const getAfterOpenContainerAnimation = () => _ref3;
+var _ref2$1 = {
+  name: "1d9ftqx",
+  styles: "opacity:1!important"
+} ;
+const getAfterOpenOverlayAnimation = () => _ref2$1;
+const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
+var _ref$5 = {
+  name: "728dx5",
+  styles: "opacity:0!important"
+} ;
+const getBeforeCloseOverlayAnimation = () => _ref$5;
+
+function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getDefaultParentSelector = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+const getOverlayElement = (props, contentElement) =>
+// Assign the `data-role` to the overlay container, which is used as
+// the CSS selector in the `<PortalsContainer>`.
+jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
+  "data-role": "modal-overlay",
+  children: contentElement
+}));
+
+// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+// However, we need to explicitly define this otherwise the prop-types babel plugin
+// does not recognize the object shape.
+
+const defaultProps$c = {
+  size: 'scale',
+  getParentSelector: getDefaultParentSelector,
+  shouldDelayOnClose: true
+};
+const ModalPage = props => {
+  const _useState = react$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceClose = _useState2[0],
+    setForceClose = _useState2[1];
+  const closingTimer = react$1.useRef();
+  react$1.useEffect(() => {
+    if (props.isOpen === true) setForceClose(false);
+    return () => {
+      if (closingTimer.current) {
+        clearTimeout(closingTimer.current);
+      }
+    };
+  }, [props.isOpen]);
+  const onClose = props.onClose;
+  const TRANSITION_DURATION = stylesBySize[props.size].transitionTime;
+  const handleClose = react$1.useCallback(event => {
+    if (props.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, props.shouldDelayOnClose, TRANSITION_DURATION]);
+  return jsxRuntime.jsx(react.ClassNames, {
+    children: _ref => {
+      let makeClassName = _ref.css;
+      return jsxRuntime.jsxs(Modal__default["default"], {
+        isOpen: forceClose === true ? false : props.isOpen,
+        onRequestClose: handleClose,
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement,
+        overlayClassName: {
+          base: makeClassName(getOverlayStyles(props)),
+          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
+          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
+        },
+        className: {
+          base: makeClassName(getContainerStyles(props)),
+          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
+          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
+        },
+        contentLabel: props.title,
+        parentSelector: props.getParentSelector,
+        ariaHideApp: false
+        // Adjust this value if the (beforeClose) animation duration is changed
+        ,
+        closeTimeoutMS: TRANSITION_DURATION,
+        style: {
+          // stylelint-disable-next-line selector-type-no-unknown
+          overlay: {
+            zIndex: props.zIndex
+          }
+        },
+        children: [!props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
+          color: props.topBarColor,
+          onClose: handleClose,
+          currentPathLabel: props.currentPathLabel,
+          previousPathLabel: props.previousPathLabel,
+          hidePathLabel: props.hidePathLabel
+        }), props.children]
+      });
+    }
+  });
+};
+ModalPage.propTypes = {};
+ModalPage.displayName = 'ModalPage';
+ModalPage.defaultProps = defaultProps$c;
+
+const messages$4 = reactIntl.defineMessages({
+  loadError: {
+    id: 'CustomViewLoader.error.load',
+    defaultMessage: 'We could not load the Custom View. Please contact your administrator to check its configuration.'
+  }
+});
+
+const isIframeReady = iFrameElementRef => {
+  try {
+    return iFrameElementRef?.contentWindow?.document.readyState === 'complete';
+  } catch {
+    // Trying to access the contentWindow of a cross-origin iFrame will throw an error.
+    // We are not supposed to even get here because the iFrame must use
+    // a URL from our very same domain (the custom view is proxied through our http-proxy service).
+    return false;
+  }
+};
+const ContentWrapper$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ewwxuwo1"
+} )({
+  name: "13udsys",
+  styles: "height:100%"
+} );
+const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
+  target: "ewwxuwo0"
+} )({
+  name: "174lt7a",
+  styles: "height:100%;width:100%;border:none"
+} );
+function CustomViewLoader(props) {
+  const iFrameElementRef = react$1.useRef(null);
+  const dataLocale = applicationShellConnectors.useApplicationContext(context => context.dataLocale);
+  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
+  const featureFlags = reactBroadcast.useAllFeatureToggles();
+  const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
+  const showNotification = actionsGlobal.useShowNotification();
+  const intl = reactIntl.useIntl();
+  const messageFromIFrameHandler = react$1.useCallback(event => {
+    if (event.data.origin === window.location.origin) {
+      switch (event.data.eventName) {
+        case constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_CLOSE:
+          props.onClose();
+          break;
+      }
+    }
+  }, [props]);
+
+  // onLoad handler is called from the iFrame even where the URL is not valid
+  // (blocked by CORS, 404, etc.) so we need to make sure the iFrame is ready
+  const onLoadSuccessHandler = react$1.useCallback(() => {
+    // Show error and block if the iFrame is not ready
+    // (error loading it)
+    if (!isIframeReady(iFrameElementRef.current)) {
+      showNotification({
+        domain: constants.DOMAINS.PAGE,
+        kind: constants.NOTIFICATION_KINDS_PAGE.error,
+        text: intl.formatMessage(messages$4.loadError)
+      });
+      return;
+    }
+
+    // Listen for messages from the iFrame
+    iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
+
+    // Transfer port2 to the iFrame so it can send messages back privately
+    iFrameElementRef.current?.contentWindow?.postMessage(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
+
+    // Send the initialization message to the iFrame
+    iFrameCommunicationChannel.current.port1.postMessage({
+      source: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
+      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
+      eventData: {
+        context: {
+          dataLocale,
+          projectKey,
+          featureFlags,
+          customViewConfig: props.customView,
+          hostUrl: props.hostUrl || window.location.href
+        }
+      }
+    });
+
+    // We want the effect to run only once so we don't need the dependencies array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  react$1.useEffect(() => {
+    // Close the channel when the component unmounts
+    const communicationChannel = iFrameCommunicationChannel.current;
+    return () => {
+      communicationChannel?.port1.close();
+    };
+  }, []);
+
+  // Currently we only support custom panels
+  if (props.customView.type !== 'CustomPanel') {
+    sentry.reportErrorToSentry(new Error(`CustomViewLoader: Provided Custom View has an unsupported type: ${props.customView.type}. Supported types: ['CustomPanel'].`));
+    return null;
+  }
+  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
+  const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
+  return jsxRuntime.jsx(ModalPage, {
+    isOpen: true,
+    onClose: props.onClose,
+    size: panelSize === 'small' ? 10 : 30,
+    title: `Custom View: ${props.customView.defaultLabel}`,
+    hideTopBar: true,
+    children: jsxRuntime.jsx(ContentWrapper$2, {
+      children: jsxRuntime.jsx(CustomPanelIframe, {
+        id: `custom-view-${props.customView.id}`,
+        title: `Custom View: ${props.customView.defaultLabel}`,
+        ref: iFrameElementRef,
+        src: iFrameUrl,
+        onLoad: onLoadSuccessHandler
+      }, `custom-view-${props.customView.id}`)
+    })
+  });
+}
+CustomViewLoader.propTypes = {};
+
+var messages$3 = reactIntl.defineMessages({
+  title: {
+    id: 'CustomViewsSelector.title',
+    defaultMessage: 'Custom Views:'
+  }
+});
+
+var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const useCustomViewsConnector = _ref => {
+  let customViewLocatorCode = _ref.customViewLocatorCode;
+  const enableCustomViews = reactBroadcast.useFlagVariation(constants.featureFlags.CUSTOM_VIEWS);
+  const areCustomViewsEnabled =
+  // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
+  (enableCustomViews?.value ?? enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
+      variables: {
+        customViewLocatorCode
+      },
+      context: {
+        target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
+      },
+      skip: !areCustomViewsEnabled
+    }),
+    data = _useMcQuery.data,
+    error = _useMcQuery.error,
+    loading = _useMcQuery.loading;
+  return {
+    customViews: data?.allCustomViewsInstallationsByLocator?.map(installation => installation.customView) || [],
+    error,
+    loading
+  };
+};
+
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const COMPONENT_HEIGHT = '52px';
+const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv3"
+} )("height:", props => props.shouldRender ? COMPONENT_HEIGHT : '0', ";overflow:hidden;transition:margin 0.3s ease-in-out,height 0.3s ease-in-out;margin:", props => props.shouldRender ? props.margin : '0', ";" + ("" ));
+const Container$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv2"
+} )("background-color:", designSystem.designTokens.colorNeutral98, ";padding:10px ", designSystem.designTokens.spacing30, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ));
+const hoverAndSelectedStateStyles = /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow1, ";background-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorPrimary30, ";" + ("" ), "" );
+const CustomViewSelectorItem = props => {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
+    css: /*#__PURE__*/react.css("display:flex;align-items:center;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing25, ";height:30px;border-radius:", designSystem.designTokens.borderRadius6, ";color:", designSystem.designTokens.colorPrimary, ";", props.selected && hoverAndSelectedStateStyles, " :hover{", hoverAndSelectedStateStyles, ";}" + ("" ), "" ),
+    onClick: props.onClick,
+    label: props.label,
+    children: jsxRuntime.jsx(Text__default["default"].Detail, {
+      tone: "inherit",
+      fontWeight: props.selected ? 'bold' : 'regular',
+      children: props.label
+    })
+  });
+};
+CustomViewSelectorItem.propTypes = {};
+const SelectorLabel = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv1"
+} )({
+  name: "1i68o0s",
+  styles: "display:flex;align-items:center;gap:6px;div{font-weight:300;}"
+} );
+const Separator = /*#__PURE__*/_styled__default["default"]("span", {
+  target: "e16cb3zv0"
+} )({
+  name: "1lsblg0",
+  styles: "width:1px;height:18px;background-color:#cccccc"
+} );
+function CustomViewSelector(props) {
+  const _useState = react$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCustomView = _useState2[0],
+    setSelectedCustomView = _useState2[1];
+  const _useCustomViewsConnec = useCustomViewsConnector({
+      customViewLocatorCode: props.customViewLocatorCode
+    }),
+    customViews = _useCustomViewsConnec.customViews,
+    error = _useCustomViewsConnec.error,
+    loading = _useCustomViewsConnec.loading;
+  const onCustomViewsResolved = props.onCustomViewsResolved;
+  react$1.useEffect(() => {
+    if (!loading && !error && onCustomViewsResolved) {
+      onCustomViewsResolved(customViews);
+    }
+  }, [customViews, error, loading, onCustomViewsResolved]);
+  if (error) {
+    sentry.reportErrorToSentry(error, {
+      extra: {
+        customViewLocatorCode: props.customViewLocatorCode
+      }
+    });
+    return null;
+  }
+  return jsxRuntime.jsx(Wrapper, {
+    shouldRender: customViews.length > 0,
+    margin: props.margin || '0',
+    children: jsxRuntime.jsx(Container$2, {
+      children: jsxRuntime.jsxs(Constraints__default["default"].Horizontal, {
+        max: "scale",
+        children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: "s",
+          justifyContent: "flex-start",
+          alignItems: "center",
+          children: [jsxRuntime.jsxs(SelectorLabel, {
+            children: [jsxRuntime.jsx(icons.WindowEyeIcon, {
+              size: "medium",
+              color: "neutral60"
+            }), jsxRuntime.jsx(Text__default["default"].Detail, {
+              tone: "secondary",
+              intlMessage: messages$3.title
+            })]
+          }), _mapInstanceProperty__default["default"](customViews).call(customViews, (customView, index) => {
+            const isNotLastItem = index !== customViews.length - 1;
+            return jsxRuntime.jsxs(react$1.Fragment, {
+              children: [jsxRuntime.jsx(CustomViewSelectorItem, {
+                selected: selectedCustomView?.id === customView.id,
+                onClick: () => {
+                  setSelectedCustomView(customView);
+                },
+                label: customView.defaultLabel
+              }), isNotLastItem && jsxRuntime.jsx(Separator, {})]
+            }, customView.id);
+          })]
+        }), selectedCustomView && jsxRuntime.jsx(CustomViewLoader, {
+          customView: selectedCustomView,
+          onClose: () => {
+            setSelectedCustomView(null);
+          }
+        })]
+      })
+    })
+  });
+}
+CustomViewSelector.propTypes = {};
+CustomViewSelector.displayName = 'CustomViewSelector';
+const CustomViewSelectorOrNothing = props => {
+  if (!props.customViewLocatorCode) {
+    return null;
+  }
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    customViewLocatorCode: props.customViewLocatorCode
+  }));
+};
+CustomViewSelectorOrNothing.propTypes = {};
+
+const defaultProps$b = {
+  titleSize: 'small',
+  truncate: false
+};
+const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epaiodd0"
+} )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
+const Title = props => {
+  switch (props.titleSize) {
+    case 'big':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h1",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+    case 'medium':
+      return jsxRuntime.jsx(Text__default["default"].Headline, {
+        as: "h2",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+    default:
+      return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+        as: "h4",
+        title: props.title,
+        truncate: props.truncate,
+        children: props.title
+      });
+  }
+};
+const Subtitle = props => {
+  if (!props.subtitle) {
+    return null;
+  }
+  if ( /*#__PURE__*/react$1.isValidElement(props.subtitle)) {
+    return jsxRuntime.jsx(SubtitleWrapper, {
+      children: props.subtitle
+    });
+  }
+  return jsxRuntime.jsx(SubtitleWrapper, {
+    children: jsxRuntime.jsx(Text__default["default"].Body, {
+      title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
+      truncate: props.truncate,
+      tone: "secondary",
+      children: props.subtitle
+    })
+  });
+};
+Subtitle.propTypes = {};
+Subtitle.defaultProps = {
+  truncate: false
+};
+var _ref$4 = {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} ;
+const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
+  css: _ref$4,
+  children: [jsxRuntime.jsx(Title, {
+    title: props.title,
+    titleSize: props.titleSize,
+    truncate: props.truncate
+  }), jsxRuntime.jsx(Subtitle, {
+    subtitle: props.subtitle,
+    truncate: props.truncate
+  })]
+});
+PageHeaderTitle.propTypes = {};
+PageHeaderTitle.displayName = 'PageHeaderTitle';
+PageHeaderTitle.defaultProps = defaultProps$b;
+
+const PageHeader = props => {
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react.css("margin:0 ", designSystem.designTokens.spacing55, ";padding:", designSystem.designTokens.spacing40, " 0 ", designSystem.designTokens.spacing40, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
+    children: [jsxRuntime.jsxs("div", {
+      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designSystem.designTokens.spacing50, ";}" + ("" ), "" ),
+      children: [jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title,
+        titleSize: "big",
+        subtitle: props.subtitle,
+        truncate: true
+      }), props.children]
+    }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      margin: `${designSystem.designTokens.spacing40} 0 0 0`,
+      customViewLocatorCode: props.customViewLocatorCode
+    })]
+  });
+};
+PageHeader.propTypes = {};
+PageHeader.displayName = 'PageHeader';
+
+const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn02"
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
+const ModalContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn01"
+} )("flex:1;flex-basis:0;overflow:auto;margin:", designSystem.designTokens.spacing50, " ", designSystem.designTokens.spacing55, ";" + ("" ));
+const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn00"
+} )({
+  name: "kdbhus",
+  styles: "height:100%;display:flex;flex-direction:column"
+} );
+
+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,
+    customViewLocatorCode: props.customViewLocatorCode
+  }), jsxRuntime.jsx(ModalContentWrapper, {
+    children: props.children
+  })]
+});
+InfoModalPage.propTypes = {};
+InfoModalPage.displayName = 'InfoModalPage';
+
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const primaryDefaultProps = {
+  label: i18n.sharedMessages.confirm,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const useFormattedLabel = label => {
+  const intl = reactIntl.useIntl();
+  return typeof label === 'string' ? label : intl.formatMessage(label);
+};
+const FormPrimaryButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormPrimaryButton.propTypes = {};
+FormPrimaryButton.displayName = 'FormPrimaryButton';
+FormPrimaryButton.defaultProps = primaryDefaultProps;
+const secondaryDefaultProps = {
+  label: i18n.sharedMessages.cancel,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const FormSecondaryButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormSecondaryButton.propTypes = {};
+FormSecondaryButton.displayName = 'FormSecondaryButton';
+FormSecondaryButton.defaultProps = secondaryDefaultProps;
+const deleteDefaultProps = {
+  label: i18n.sharedMessages.delete,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const FormDeleteButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
+    icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormDeleteButton.propTypes = {};
+FormDeleteButton.displayName = 'FormDeleteButton';
+FormDeleteButton.defaultProps = deleteDefaultProps;
+
+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.propTypes = {};
+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 defaultProps$a = {
+  hideControls: false
+};
+const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  isOpen: props.isOpen,
+  zIndex: props.zIndex,
+  onClose: props.onClose,
+  topBarCurrentPathLabel: props.topBarCurrentPathLabel,
+  topBarPreviousPathLabel: props.topBarPreviousPathLabel,
+  getParentSelector: props.getParentSelector,
+  shouldDelayOnClose: props.shouldDelayOnClose,
+  hideControls: props.hideControls,
+  afterOpenStyles: props.afterOpenStyles,
+  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
+      label: props.labelSecondaryButton,
+      onClick: props.onSecondaryButtonClick,
+      isDisabled: props.isSecondaryButtonDisabled,
+      dataAttributes: props.dataAttributesSecondaryButton,
+      iconLeft: props.iconLeftSecondaryButton
+    }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
+      label: props.labelPrimaryButton,
+      onClick: props.onPrimaryButtonClick,
+      isDisabled: props.isPrimaryButtonDisabled,
+      dataAttributes: props.dataAttributesPrimaryButton
+    })]
+  }),
+  customViewLocatorCode: props.customViewLocatorCode,
+  children: props.children
+});
+FormModalPage.propTypes = {};
+FormModalPage.displayName = 'FormModalPage';
+FormModalPage.defaultProps = defaultProps$a;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// The Intl messages can be used for button labels.
+FormModalPage.Intl = i18n.sharedMessages;
+
+const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+const useCustomViewLocatorSelector = function () {
+  var _context;
+  let customViewLocatorCodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const location = reactRouterDom.useLocation();
+  const customViewLocator = _findInstanceProperty__default["default"](_context = _Object$entries__default["default"](customViewLocatorCodes)).call(_context, _ref => {
+    let _ref2 = _slicedToArray(_ref, 2),
+      locator = _ref2[1];
+    return reactRouterDom.matchPath(location.pathname, {
+      // strip the search, otherwise the path won't match
+      path: pathWithoutSearch(locator),
+      exact: true,
+      strict: false
+    });
+  });
+  return {
+    currentCustomViewLocatorCode: customViewLocator?.[0]
+  };
+};
+
+const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre4"
+} )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
+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.propTypes = {};
+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 defaultProps$9 = {
+  hideControls: false
+};
+const TabularModalPage = props => {
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+  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: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+              alignItems: "flex-end",
+              children: props.formControls
+            })
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ModalContentWrapper, {
+      children: props.children
+    })]
+  });
+};
+TabularModalPage.propTypes = {};
+TabularModalPage.displayName = 'TabularModalPage';
+TabularModalPage.defaultProps = defaultProps$9;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularModalPage.FormPrimaryButton = FormPrimaryButton;
+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 defaultProps$8 = {
+  color: 'surface',
+  previousPathLabel: messages$5.back
+};
+const PageTopBar = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx("div", {
+    css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designSystem.designTokens.spacing40, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
+    children: jsxRuntime.jsx(FlatButton__default["default"], {
+      tone: "primary",
+      label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+      icon: jsxRuntime.jsx(icons.ListIcon, {
+        size: "medium",
+        color: "primary"
+      }),
+      onClick: props.onClick
+    })
+  });
+};
+PageTopBar.propTypes = {};
+PageTopBar.displayName = 'PageTopBar';
+PageTopBar.defaultProps = defaultProps$8;
+
+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 defaultProps$7 = {
+  hideControls: false
+};
+const CustomFormDetailPage = props => {
+  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(CustomViewSelectorOrNothing, {
+        margin: getCustomViewsSelectorMargin(!props.hideControls && !!props.formControls),
+        customViewLocatorCode: props.customViewLocatorCode
+      }), !props.hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+        children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          justifyContent: "flex-end",
+          children: props.formControls
+        })
+      })]
+    }), jsxRuntime.jsx(ContentWrapper$1, {
+      children: props.children
+    })]
+  });
+};
+CustomFormDetailPage.propTypes = {};
+CustomFormDetailPage.displayName = 'CustomFormDetailPage';
+CustomFormDetailPage.defaultProps = defaultProps$7;
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+CustomFormDetailPage.PageHeaderTitle = PageHeaderTitle;
+// 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 defaultProps$6 = {
+  hideControls: false
+};
+const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
+  title: props.title,
+  subtitle: props.subtitle,
+  customTitleRow: props.customTitleRow,
+  customViewLocatorCode: props.customViewLocatorCode,
+  previousPathLabel: props.previousPathLabel,
+  onPreviousPathClick: props.onPreviousPathClick,
+  hideControls: props.hideControls,
+  formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
+      label: props.labelSecondaryButton,
+      onClick: props.onSecondaryButtonClick,
+      isDisabled: props.isSecondaryButtonDisabled,
+      dataAttributes: props.dataAttributesSecondaryButton,
+      iconLeft: props.iconLeftSecondaryButton
+    }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
+      label: props.labelPrimaryButton,
+      onClick: props.onPrimaryButtonClick,
+      isDisabled: props.isPrimaryButtonDisabled,
+      dataAttributes: props.dataAttributesPrimaryButton
+    })]
+  }),
+  children: props.children
+});
+FormDetailPage.propTypes = {};
+FormDetailPage.displayName = 'FormDetailPage';
+FormDetailPage.defaultProps = defaultProps$6;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// The Intl messages can be used for button labels.
+// Static export of pre-configured page header title component to easily
+// 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.propTypes = {};
+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 defaultProps$5 = {
+  hideControls: false
+};
+const TabularDetailPage = props => {
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+  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: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            alignItems: "flex-end",
+            children: props.formControls
+          })
+        })
+      })]
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ContentWrapper$1, {
+      children: props.children
+    })]
+  });
+};
+TabularDetailPage.propTypes = {};
+TabularDetailPage.displayName = 'TabularDetailPage';
+TabularDetailPage.defaultProps = defaultProps$5;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
+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-d365f38f.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 headerRowMargin = `${designSystem.designTokens.spacing40} 0 0 0`;
+const CustomFormMainPage = props => {
+  return jsxRuntime.jsxs(PageWrapper, {
+    children: [jsxRuntime.jsxs(MainPageContainer, {
+      children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title ?? '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: headerRowMargin,
+        customViewLocatorCode: props.customViewLocatorCode
+      }), !props.hideControls && props.formControls && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react.css("margin:", headerRowMargin, ";" + ("" ), "" ),
+        children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          justifyContent: "flex-end",
+          children: props.formControls
+        })
+      }), !props.hideDivider && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react.css("&>", Divider, "{margin:", headerRowMargin, ";}" + ("" ), "" ),
+        children: jsxRuntime.jsx(Divider, {})
+      })]
+    }), jsxRuntime.jsx(MainPageContent, {
+      children: props.children
+    })]
+  });
+};
+CustomFormMainPage.propTypes = {};
+const defaultProps$4 = {
+  hideControls: false,
+  hideDivider: false
+};
+CustomFormMainPage.displayName = 'CustomFormMainPage';
+CustomFormMainPage.defaultProps = defaultProps$4;
+
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+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 defaultProps$3 = {
+  hideControls: false
+};
+const FormMainPage = props => {
+  return jsxRuntime.jsx(CustomFormMainPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
+    hideControls: props.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.propTypes = {};
+FormMainPage.displayName = 'FormMainPage';
+FormMainPage.defaultProps = defaultProps$3;
+
+// Static export of pre-configured page header title component to easily
+// use as part of a custom title row
+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.propTypes = {};
+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 defaultProps$2 = {
+  hideControls: false
+};
+const TabularMainPage = props => {
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
+  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: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            alignItems: "flex-end",
+            children: props.formControls
+          })
+        })
+      })]
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ContentWrapper$1, {
+      css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
+      children: props.children
+    })]
+  });
+};
+TabularMainPage.propTypes = {};
+TabularMainPage.displayName = 'TabularMainPage';
+TabularMainPage.defaultProps = defaultProps$2;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+TabularMainPage.FormPrimaryButton = FormPrimaryButton;
+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.propTypes = {};
+MaintenancePageLayout.displayName = 'MaintenancePageLayout';
+
+var messages$2 = 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
+});
+const PageNotFound = () => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(MaintenancePageLayout, {
+    imageSrc: PageNotFoundSVG__default["default"],
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$2.title)),
+    label: intl.formatMessage(messages$2.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$2.paragraph1), {}, {
+      values: {
+        a: getLink
+      }
+    }))
+  });
+};
+PageNotFound.displayName = 'PageNotFound';
+
+var messages$1 = 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
+});
+const PageUnauthorized = () => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsx(MaintenancePageLayout, {
+    imageSrc: FailedAuthorizationSVG__default["default"],
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
+    label: intl.formatMessage(messages$1.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.paragraph1)),
+    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph2), {}, {
+      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
+    })
+  });
+}
+PageContentNarrow.propTypes = {};
+
+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(props) {
+  const _Children$toArray = react$1.Children.toArray(props.children),
+    _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
+    leftChild = _Children$toArray2[0],
+    rightChild = _Children$toArray2[1];
+  const childrenCount = react$1.Children.count(props.children);
+  const isOneColumnAndMoreThanOneChild = props.columns === '1' && childrenCount > 1;
+  const isTwoColumnsAndMoreThanTwoChildren = props.columns !== '1' && childrenCount > 2;
+  utils.useWarning(!isOneColumnAndMoreThanOneChild, 'PageContentWide: This component only renders its first children when using a single column but you provided more than one.');
+  utils.useWarning(!isTwoColumnsAndMoreThanTwoChildren, 'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more than two.');
+  return jsxRuntime.jsx(Container, {
+    children: jsxRuntime.jsx(Content, {
+      columns: props.columns,
+      gapSize: props.gapSize,
+      children: props.columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: leftChild
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(LeftContentColumn, {
+          children: leftChild
+        }), jsxRuntime.jsx(RightContentColumn, {
+          children: jsxRuntime.jsx(RightColumnContentWrapper, {
+            columns: props.columns,
+            children: rightChild
+          })
+        })]
+      })
+    })
+  });
+}
+PageContentWide.propTypes = {};
+const defaultProps$1 = {
+  columns: '1',
+  gapSize: '20'
+};
+PageContentWide.defaultProps = defaultProps$1;
+
+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
+    })
+  });
+}
+PageContentFull.propTypes = {};
+
+const defaultProps = {
+  size: 10,
+  hideControls: false,
+  onPrimaryButtonClick: () => {},
+  onSecondaryButtonClick: () => {}
+};
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e18jo6y41"
+} )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
+const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e18jo6y40"
+} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
+function Drawer(props) {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs(ModalPage, {
+    isOpen: props.isOpen,
+    hidePathLabel: true,
+    hideTopBar: true,
+    onClose: props.onClose,
+    size: props.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$5.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: [!props.hideControls && props.formControls && props.formControls, !props.hideControls && !props.formControls && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(FormSecondaryButton, {
+              label: props.labelSecondaryButton,
+              onClick: props.onSecondaryButtonClick,
+              isDisabled: props.isSecondaryButtonDisabled,
+              dataAttributes: props.dataAttributesSecondaryButton,
+              iconLeft: props.iconLeftSecondaryButton
+            }), jsxRuntime.jsx(FormPrimaryButton, {
+              label: props.labelPrimaryButton,
+              onClick: props.onPrimaryButtonClick,
+              isDisabled: props.isPrimaryButtonDisabled,
+              dataAttributes: props.dataAttributesPrimaryButton
+            })]
+          })]
+        })]
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
+      children: props.children
+    })]
+  });
+}
+Drawer.propTypes = {};
+Drawer.displayName = 'Drawer';
+Drawer.defaultProps = defaultProps;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+Drawer.FormPrimaryButton = FormPrimaryButton;
+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;
+
+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
+  });
+}
+CustomStamp.propTypes = {};
+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);
+        const overlayNode = node.firstChild;
+        if (overlayNode instanceof HTMLElement) {
+          if (overlayNode.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
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(react.Global
+    // Apply some global styles, based on the `.ReactModal__Body--open` class.
+    , {
+      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";transition:", modalWidthTransition, ";}.ReactModal__Body--open.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, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[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 = CustomViewSelectorOrNothing;
+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;