@commercetools-frontend/application-components 22.12.0 → 22.13.0

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

@@ -40,9 +40,9 @@ var sentry = require('@commercetools-frontend/sentry');
 var Constraints = require('@commercetools-uikit/constraints');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
-var reactBroadcast = require('@flopflip/react-broadcast');
-var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var reactBroadcast = require('@flopflip/react-broadcast');
 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');
@@ -74,8 +74,8 @@ var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
-var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
@@ -83,7 +83,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.12.0";
+var version = "22.13.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -199,11 +199,11 @@ const TabHeader = props => {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-const defaultProps$i = {
+const defaultProps$j = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$i;
+TabHeader.defaultProps = defaultProps$j;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
@@ -255,7 +255,7 @@ jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
-const defaultProps$h = {
+const defaultProps$i = {
   // 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.
@@ -324,7 +324,7 @@ const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
 });
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$h;
+DialogContainer.defaultProps = defaultProps$i;
 
 // The overflow should be "auto", to make the container scrollable
 const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
@@ -381,7 +381,7 @@ function filterDataAttributes(obj) {
 
 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 defaultProps$g = {
+const defaultProps$h = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -409,9 +409,9 @@ const DialogFooter = props => {
 };
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$g;
+DialogFooter.defaultProps = defaultProps$h;
 
-const defaultProps$f = {
+const defaultProps$g = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -439,12 +439,12 @@ const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
 });
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$f;
+ConfirmationDialog.defaultProps = defaultProps$g;
 // 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;
 
-const defaultProps$e = {
+const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -473,12 +473,12 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
 });
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$e;
+FormDialog.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.
 FormDialog.Intl = i18n.sharedMessages;
 
-const defaultProps$d = {
+const defaultProps$e = {
   titleSize: 'small',
   truncate: false
 };
@@ -494,6 +494,13 @@ const Title = props => {
         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",
@@ -542,7 +549,7 @@ const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
 });
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$d;
+PageHeaderTitle.defaultProps = defaultProps$e;
 
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
@@ -568,24 +575,218 @@ const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "height:100%;display:flex;flex-direction:column"
 } );
 
+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',
+    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$4.back,
+  hidePathLabel: false
+};
+var _ref$4 = {
+  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:", 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,
+      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$4.close),
+      onClick: props.onClose,
+      icon: jsxRuntime.jsx(LargeIconWrapper, {
+        children: jsxRuntime.jsx(icons.CloseIcon, {})
+      }),
+      size: "big"
+    })]
+  });
+};
+ModalPageTopBar.propTypes = {};
+ModalPageTopBar.displayName = 'ModalPageTopBar';
+ModalPageTopBar.defaultProps = defaultProps$d;
+
+const defaultProps$c = {
+  size: 10,
+  hideControls: false,
+  onPrimaryButtonClick: () => {},
+  onSecondaryButtonClick: () => {}
+};
 const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1alzj9m0"
-} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
-function CustomPanel(props) {
-  return jsxRuntime.jsx(ModalPage, {
+  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,
-    isOpen: true,
+    hideTopBar: true,
     onClose: props.onClose,
     size: props.size,
     title: props.title,
-    children: jsxRuntime.jsx(ContentWrapper, {
+    afterOpenStyles: props.afterOpenStyles,
+    customViewLocatorCode: props.customViewLocatorCode,
+    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
-    })
+    })]
   });
 }
-CustomPanel.propTypes = {};
+Drawer.propTypes = {};
+Drawer.displayName = 'Drawer';
+Drawer.defaultProps = defaultProps$c;
+// Static export of pre-configured form control buttons to easily re-use
+// them in the custom controls.
+Drawer.FormPrimaryButton = FormPrimaryButton;
+Drawer.FormSecondaryButton = FormSecondaryButton;
+// This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
+// The Intl messages can be used for button labels.
+Drawer.Intl = i18n.sharedMessages;
 
-const messages$4 = reactIntl.defineMessages({
+const messages$3 = reactIntl.defineMessages({
   loadError: {
     id: 'CustomViewLoader.error.load',
     defaultMessage: 'We could not load the Custom View. Please contact your administrator to check its configuration.'
@@ -636,7 +837,7 @@ function CustomViewLoader(props) {
       showNotification({
         domain: constants.DOMAINS.PAGE,
         kind: constants.NOTIFICATION_KINDS_PAGE.error,
-        text: intl.formatMessage(messages$4.loadError)
+        text: intl.formatMessage(messages$3.loadError)
       });
       return;
     }
@@ -680,10 +881,11 @@ 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(CustomPanel, {
+  return jsxRuntime.jsx(Drawer, {
+    isOpen: true,
     title: "Custom View: ".concat(props.customView.defaultLabel),
     onClose: props.onClose,
-    size: panelSize,
+    size: panelSize === 'small' ? 10 : 30,
     children: jsxRuntime.jsx(CustomPanelIframe, {
       id: "custom-view-".concat(props.customView.id),
       title: "Custom View: ".concat(props.customView.defaultLabel),
@@ -695,7 +897,7 @@ function CustomViewLoader(props) {
 }
 CustomViewLoader.propTypes = {};
 
-var messages$3 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
     id: 'CustomViewsSelector.title',
     defaultMessage: 'Custom Views:'
@@ -726,8 +928,8 @@ const useCustomViewsConnector = _ref => {
   };
 };
 
-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; }
+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 = '56px';
 const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e16cb3zv1"
@@ -777,7 +979,7 @@ function CustomViewSelector(props) {
               color: "neutral60"
             }), jsxRuntime.jsx(Text__default["default"].Detail, {
               tone: "secondary",
-              intlMessage: messages$3.title
+              intlMessage: messages$2.title
             })]
           }), _mapInstanceProperty__default["default"](customViews).call(customViews, customView => jsxRuntime.jsx(SecondaryButton__default["default"], {
             label: customView.defaultLabel,
@@ -801,119 +1003,57 @@ const CustomViewSelectorOrNothing = props => {
   if (!props.customViewLocatorCode) {
     return null;
   }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$3(_objectSpread$3({}, props), {}, {
     customViewLocatorCode: props.customViewLocatorCode
   }));
 };
 CustomViewSelectorOrNothing.propTypes = {};
 
-const messages$2 = reactIntl.defineMessages({
-  back: {
-    id: 'Components.ModalPage.TopBar.Back',
-    defaultMessage: 'Go Back'
+const stylesBySize = {
+  '10': {
+    width: '600px',
+    transitionTime: 200
   },
-  close: {
-    id: 'Components.ModalPage.TopBar.Close',
-    defaultMessage: 'Close Modal Page'
+  '20': {
+    width: '900px',
+    transitionTime: 200
+  },
+  '30': {
+    width: '1200px',
+    transitionTime: 200
+  },
+  scale: {
+    width: '100%',
+    transitionTime: 300
   }
-});
-
-// 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$c = {
-  color: 'surface',
-  previousPathLabel: messages$2.back,
-  hidePathLabel: false
-};
-var _ref$4 = {
-  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:", 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,
-      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$2.close),
-      onClick: props.onClose,
-      icon: jsxRuntime.jsx(LargeIconWrapper, {
-        children: jsxRuntime.jsx(icons.CloseIcon, {})
-      }),
-      size: "big"
-    })]
-  });
 };
-ModalPageTopBar.propTypes = {};
-ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$c;
-
-const TRANSITION_DURATION = 200;
-const getContainerStyles = _props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", _props.size === 'small' ? '600px !important' : '100%', ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
+const getContainerStyles = props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ? "".concat(stylesBySize[props.size].width, " !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.
-"".concat(props.zIndex, " !important") : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:0;transition:opacity ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
-var _ref4 = {
+"".concat(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 = () => _ref4;
-var _ref3 = {
+const getAfterOpenContainerAnimation = () => _ref3;
+var _ref2$1 = {
   name: "1d9ftqx",
   styles: "opacity:1!important"
 } ;
-const getAfterOpenOverlayAnimation = () => _ref3;
-var _ref2$1 = {
-  name: "110wxen",
-  styles: "transform:translate3d(30px, 0, 0)!important"
-} ;
-const getBeforeCloseContainerAnimation = () => _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 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
 const getBeforeCloseOverlayAnimation = () => _ref$3;
 
-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$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 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$2(_objectSpread$2({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
 }));
@@ -922,9 +1062,9 @@ jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
 // However, we need to explicitly define this otherwise the prop-types babel plugin
 // does not recognize the object shape.
 const defaultProps$b = {
+  size: 'scale',
   getParentSelector: getDefaultParentSelector,
-  shouldDelayOnClose: true,
-  size: 'large'
+  shouldDelayOnClose: true
 };
 const ModalPage = props => {
   const _useState = react$1.useState(false),
@@ -941,6 +1081,7 @@ const ModalPage = props => {
     };
   }, [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
@@ -953,7 +1094,7 @@ const ModalPage = props => {
       return;
     }
     onClose && onClose(event);
-  }, [onClose, props.shouldDelayOnClose]);
+  }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
   return jsxRuntime.jsx(react.ClassNames, {
     children: _ref => {
       var _props$afterOpenStyle;
@@ -972,7 +1113,7 @@ const ModalPage = props => {
         className: {
           base: makeClassName(getContainerStyles(props)),
           afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation())
+          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
         },
         contentLabel: props.title,
         parentSelector: props.getParentSelector,
@@ -988,7 +1129,7 @@ const ModalPage = props => {
         },
         children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
           customViewLocatorCode: props.customViewLocatorCode
-        }), jsxRuntime.jsx(ModalPageTopBar, {
+        }), !props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
           color: props.topBarColor,
           onClose: handleClose,
           currentPathLabel: props.currentPathLabel,
@@ -1024,63 +1165,6 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
 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,
@@ -1252,7 +1336,7 @@ TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$7 = {
   color: 'surface',
-  previousPathLabel: messages$2.back
+  previousPathLabel: messages$4.back
 };
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
@@ -1428,7 +1512,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-0e1daa2e.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-295bf2b5.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1918,9 +2002,9 @@ exports.ConfirmationDialog = ConfirmationDialog;
 exports.CustomFormDetailPage = CustomFormDetailPage;
 exports.CustomFormMainPage = CustomFormMainPage;
 exports.CustomFormModalPage = CustomFormModalPage;
-exports.CustomPanel = CustomPanel;
 exports.CustomViewLoader = CustomViewLoader;
 exports.CustomViewsSelector = CustomViewSelectorOrNothing;
+exports.Drawer = Drawer;
 exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;
 exports.FormMainPage = FormMainPage;