@commercetools-frontend/application-components 22.13.1 → 22.13.2

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

@@ -40,10 +40,10 @@ var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
-var IconButton = require('@commercetools-uikit/icon-button');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var reactBroadcast = require('@flopflip/react-broadcast');
+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');
@@ -75,9 +75,9 @@ 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 IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 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);
@@ -85,7 +85,7 @@ var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthori
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.13.1";
+var version = "22.13.2";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -481,63 +481,6 @@ FormDialog.defaultProps = defaultProps$f;
 // The Intl messages can be used for button labels.
 FormDialog.Intl = i18n.sharedMessages;
 
-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 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$4({
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, 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$4({
-    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$4({
-    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 messages$4 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
@@ -549,79 +492,6 @@ const messages$4 = reactIntl.defineMessages({
   }
 });
 
-const defaultProps$e = {
-  titleSize: 'small',
-  truncate: false
-};
-const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "epaiodd0"
-} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
-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$5 = {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} ;
-const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
-  css: _ref$5,
-  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$e;
-
 // Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
@@ -638,12 +508,12 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 LargeIconWrapper.propTypes = {};
-const defaultProps$d = {
+const defaultProps$e = {
   color: 'surface',
   previousPathLabel: messages$4.back,
   hidePathLabel: false
 };
-var _ref$4 = {
+var _ref$5 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -652,7 +522,7 @@ const ModalPageTopBar = props => {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
-      css: _ref$4,
+      css: _ref$5,
       children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -684,7 +554,7 @@ const ModalPageTopBar = props => {
 };
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$d;
+ModalPageTopBar.defaultProps = defaultProps$e;
 
 const stylesBySize = {
   '10': {
@@ -718,19 +588,19 @@ var _ref2$1 = {
 } ;
 const getAfterOpenOverlayAnimation = () => _ref2$1;
 const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$3 = {
+var _ref$4 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
-const getBeforeCloseOverlayAnimation = () => _ref$3;
+const getBeforeCloseOverlayAnimation = () => _ref$4;
 
-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; }
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector = () => document.querySelector("#".concat(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$3(_objectSpread$3({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
 }));
@@ -738,7 +608,7 @@ jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
 // 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 = {
+const defaultProps$d = {
   size: 'scale',
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
@@ -817,85 +687,7 @@ const ModalPage = props => {
 };
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$c;
-
-const defaultProps$b = {
-  size: 10,
-  hideControls: false,
-  onPrimaryButtonClick: () => {},
-  onSecondaryButtonClick: () => {}
-};
-const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e18jo6y41"
-} )("height:100%;padding:", designSystem.designTokens.spacing50, ";" + ("" ));
-const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e18jo6y40"
-} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ));
-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$4.close),
-            onClick: props.onClose,
-            icon: jsxRuntime.jsx(LargeIconWrapper, {
-              children: jsxRuntime.jsx(icons.CloseIcon, {})
-            }),
-            size: "big"
-          })]
-        }), 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$1, {
-      children: props.children
-    })]
-  });
-}
-Drawer.propTypes = {};
-Drawer.displayName = 'Drawer';
-Drawer.defaultProps = defaultProps$b;
-// 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;
+ModalPage.defaultProps = defaultProps$d;
 
 const messages$3 = reactIntl.defineMessages({
   loadError: {
@@ -915,6 +707,9 @@ const isIframeReady = iFrameElementRef => {
     return false;
   }
 };
+const ContentWrapper$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ewwxuwo1"
+} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
 const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
   target: "ewwxuwo0"
 } )({
@@ -992,18 +787,21 @@ function CustomViewLoader(props) {
   }
   const panelSize = ((_props$customView$typ = props.customView.typeSettings) === null || _props$customView$typ === void 0 || (_props$customView$typ = _props$customView$typ.size) === null || _props$customView$typ === void 0 ? void 0 : _props$customView$typ.toLocaleLowerCase()) || 'large';
   const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
-  return jsxRuntime.jsx(Drawer, {
+  return jsxRuntime.jsx(ModalPage, {
     isOpen: true,
-    title: "Custom View: ".concat(props.customView.defaultLabel),
     onClose: props.onClose,
     size: panelSize === 'small' ? 10 : 30,
-    children: jsxRuntime.jsx(CustomPanelIframe, {
-      id: "custom-view-".concat(props.customView.id),
-      title: "Custom View: ".concat(props.customView.defaultLabel),
-      ref: iFrameElementRef,
-      src: iFrameUrl,
-      onLoad: onLoadSuccessHandler
-    }, "custom-view-".concat(props.customView.id))
+    title: "Custom View: ".concat(props.customView.defaultLabel),
+    hidePathLabel: true,
+    children: jsxRuntime.jsx(ContentWrapper$2, {
+      children: jsxRuntime.jsx(CustomPanelIframe, {
+        id: "custom-view-".concat(props.customView.id),
+        title: "Custom View: ".concat(props.customView.defaultLabel),
+        ref: iFrameElementRef,
+        src: iFrameUrl,
+        onLoad: onLoadSuccessHandler
+      }, "custom-view-".concat(props.customView.id))
+    })
   });
 }
 CustomViewLoader.propTypes = {};
@@ -1039,8 +837,8 @@ const useCustomViewsConnector = _ref => {
   };
 };
 
-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; }
+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 COMPONENT_HEIGHT = '52px';
 const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e16cb3zv3"
@@ -1145,12 +943,85 @@ const CustomViewSelectorOrNothing = props => {
   if (!props.customViewLocatorCode) {
     return null;
   }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$3(_objectSpread$3({}, props), {}, {
     customViewLocatorCode: props.customViewLocatorCode
   }));
 };
 CustomViewSelectorOrNothing.propTypes = {};
 
+const defaultProps$c = {
+  titleSize: 'small',
+  truncate: false
+};
+const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "epaiodd0"
+} )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
+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$3 = {
+  name: "d3v9zr",
+  styles: "overflow:hidden"
+} ;
+const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
+  css: _ref$3,
+  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$c;
+
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ), "" ),
@@ -1171,7 +1042,7 @@ const PageHeader = props => {
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
 } )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
@@ -1195,13 +1066,70 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     subtitle: props.subtitle,
     customViewLocatorCode: props.customViewLocatorCode
-  }), jsxRuntime.jsx(ContentWrapper, {
+  }), jsxRuntime.jsx(ContentWrapper$1, {
     children: props.children
   })]
 });
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
+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 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$2({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, 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$2({
+    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$2({
+    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,
@@ -1220,7 +1148,7 @@ const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
       alignItems: "flex-end",
       children: props.formControls
     })
-  }), jsxRuntime.jsx(ContentWrapper, {
+  }), jsxRuntime.jsx(ContentWrapper$1, {
     children: props.children
   })]
 });
@@ -1235,7 +1163,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$a = {
+const defaultProps$b = {
   hideControls: false
 };
 const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
@@ -1269,7 +1197,7 @@ const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
 });
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$a;
+FormModalPage.defaultProps = defaultProps$b;
 // 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;
@@ -1312,10 +1240,10 @@ const TabularPageContainer = props => jsxRuntime.jsx("div", {
 });
 TabularPageContainer.propTypes = {};
 TabularPageContainer.displayName = 'TabularPageContainer';
-const defaultProps$9 = {
+const defaultProps$a = {
   color: 'surface'
 };
-TabularPageContainer.defaultProps = defaultProps$9;
+TabularPageContainer.defaultProps = defaultProps$a;
 const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre1"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
@@ -1323,7 +1251,7 @@ const CustomViewsSelectorWrapper = /*#__PURE__*/_styled__default["default"]("div
   target: "elpldre0"
 } )("margin:", designTokens.marginForCustomViewsSelectorAsTabular, ";" + ("" ));
 
-const defaultProps$8 = {
+const defaultProps$9 = {
   hideControls: false
 };
 const TabularModalPage = props => {
@@ -1361,14 +1289,14 @@ const TabularModalPage = props => {
         margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCode: currentCustomViewLocatorCode
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
 };
 TabularModalPage.propTypes = {};
 TabularModalPage.displayName = 'TabularModalPage';
-TabularModalPage.defaultProps = defaultProps$8;
+TabularModalPage.defaultProps = defaultProps$9;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularModalPage.FormPrimaryButton = FormPrimaryButton;
@@ -1378,7 +1306,7 @@ TabularModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 TabularModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$7 = {
+const defaultProps$8 = {
   color: 'surface',
   previousPathLabel: messages$4.back
 };
@@ -1399,7 +1327,7 @@ const PageTopBar = props => {
 };
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$7;
+PageTopBar.defaultProps = defaultProps$8;
 
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
@@ -1415,7 +1343,7 @@ const getCustomViewsSelectorMargin = hasContentBelow => {
 // 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$6 = {
+const defaultProps$7 = {
   hideControls: false
 };
 const CustomFormDetailPage = props => {
@@ -1439,14 +1367,14 @@ const CustomFormDetailPage = props => {
           children: props.formControls
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
 };
 CustomFormDetailPage.propTypes = {};
 CustomFormDetailPage.displayName = 'CustomFormDetailPage';
-CustomFormDetailPage.defaultProps = defaultProps$6;
+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;
@@ -1459,7 +1387,7 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-const defaultProps$5 = {
+const defaultProps$6 = {
   hideControls: false
 };
 const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
@@ -1488,7 +1416,7 @@ const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
 });
 FormDetailPage.propTypes = {};
 FormDetailPage.displayName = 'FormDetailPage';
-FormDetailPage.defaultProps = defaultProps$5;
+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
@@ -1513,7 +1441,7 @@ InfoDetailPage.displayName = 'InfoDetailPage';
 // use as part of a custom title row
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$4 = {
+const defaultProps$5 = {
   hideControls: false
 };
 const TabularDetailPage = props => {
@@ -1545,14 +1473,14 @@ const TabularDetailPage = props => {
         margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCode: currentCustomViewLocatorCode
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
 };
 TabularDetailPage.propTypes = {};
 TabularDetailPage.displayName = 'TabularDetailPage';
-TabularDetailPage.defaultProps = defaultProps$4;
+TabularDetailPage.defaultProps = defaultProps$5;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularDetailPage.FormPrimaryButton = FormPrimaryButton;
@@ -1564,7 +1492,7 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularDetailPage.Intl = i18n.sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-609304bf.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-f84502f6.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1604,12 +1532,12 @@ const CustomFormMainPage = props => {
   });
 };
 CustomFormMainPage.propTypes = {};
-const defaultProps$3 = {
+const defaultProps$4 = {
   hideControls: false,
   hideDivider: false
 };
 CustomFormMainPage.displayName = 'CustomFormMainPage';
-CustomFormMainPage.defaultProps = defaultProps$3;
+CustomFormMainPage.defaultProps = defaultProps$4;
 
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
@@ -1625,7 +1553,7 @@ CustomFormMainPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
-const defaultProps$2 = {
+const defaultProps$3 = {
   hideControls: false
 };
 const FormMainPage = props => {
@@ -1654,7 +1582,7 @@ const FormMainPage = props => {
 };
 FormMainPage.propTypes = {};
 FormMainPage.displayName = 'FormMainPage';
-FormMainPage.defaultProps = defaultProps$2;
+FormMainPage.defaultProps = defaultProps$3;
 
 // Static export of pre-configured page header title component to easily
 // use as part of a custom title row
@@ -1680,7 +1608,7 @@ InfoMainPage.displayName = 'InfoMainPage';
 // use as part of a custom title row
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$1 = {
+const defaultProps$2 = {
   hideControls: false
 };
 const TabularMainPage = props => {
@@ -1708,7 +1636,7 @@ const TabularMainPage = props => {
         margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCode: currentCustomViewLocatorCode
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
       children: props.children
     })]
@@ -1716,7 +1644,7 @@ const TabularMainPage = props => {
 };
 TabularMainPage.propTypes = {};
 TabularMainPage.displayName = 'TabularMainPage';
-TabularMainPage.defaultProps = defaultProps$1;
+TabularMainPage.defaultProps = defaultProps$2;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 TabularMainPage.FormPrimaryButton = FormPrimaryButton;
@@ -1924,11 +1852,11 @@ function PageContentWide(props) {
   });
 }
 PageContentWide.propTypes = {};
-const defaultProps = {
+const defaultProps$1 = {
   columns: '1',
   gapSize: '20'
 };
-PageContentWide.defaultProps = defaultProps;
+PageContentWide.defaultProps = defaultProps$1;
 
 var _ref$1 = {
   name: "1d3w5wq",
@@ -1944,6 +1872,84 @@ function PageContentFull(props) {
 }
 PageContentFull.propTypes = {};
 
+const defaultProps = {
+  size: 10,
+  hideControls: false,
+  onPrimaryButtonClick: () => {},
+  onSecondaryButtonClick: () => {}
+};
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e18jo6y41"
+} )("height:100%;padding:", designSystem.designTokens.spacing50, ";" + ("" ));
+const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e18jo6y40"
+} )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ));
+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$4.close),
+            onClick: props.onClose,
+            icon: jsxRuntime.jsx(LargeIconWrapper, {
+              children: jsxRuntime.jsx(icons.CloseIcon, {})
+            }),
+            size: "big"
+          })]
+        }), 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;
+
 // The width of each indentation level.
 const indentationSize = '48px';
 const useObserverElementDimensions = element => {