@commercetools-frontend/application-components 22.37.0 → 22.38.0

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

@@ -11,6 +11,7 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('prop-types');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
@@ -47,7 +48,6 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 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');
@@ -88,7 +88,7 @@ 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.37.0";
+var version = "22.38.0";
 
 // 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.
@@ -116,6 +116,7 @@ var _ref$8 = {
 } ;
 const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h3{color:", designTokens.fontColorForTabLabelWhenActive, "!important;}}" + ("" ), "" )];
 
+const _excluded$k = ["isDisabled", "exactPathMatch"];
 function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
@@ -134,21 +135,28 @@ const TabLabel = _ref => {
     children: children
   });
 };
-const TabHeader = props => {
+const TabHeader = _ref2 => {
+  let _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$exactPathMatch = _ref2.exactPathMatch,
+    exactPathMatch = _ref2$exactPathMatch === void 0 ? false : _ref2$exactPathMatch,
+    props = _objectWithoutProperties(_ref2, _excluded$k);
   const intl = reactIntl.useIntl();
   const location = reactRouterDom.useLocation();
   const isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
     // strip the search, otherwise the path won't match
     path: pathWithoutSearch$1(props.to),
-    exact: props.exactPathMatch,
+    exact: exactPathMatch,
     strict: false
   }));
-  const isDisabled = props.isDisabled;
   let label = props.label;
   if (props.intlMessage) {
     label = intl.formatMessage(props.intlMessage);
   }
-  warnIfMissingContent(props);
+  warnIfMissingContent(_objectSpread$8({
+    exactPathMatch,
+    isDisabled
+  }, props));
   return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
     role: "tab",
     "aria-selected": isActive,
@@ -162,11 +170,6 @@ const TabHeader = props => {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-const defaultProps$i = {
-  isDisabled: false,
-  exactPathMatch: false
-};
-TabHeader.defaultProps = defaultProps$i;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
@@ -207,6 +210,7 @@ const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;positio
 // 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;" + ("" ), "" );
 
+const _excluded$j = ["size", "getParentSelector"];
 function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
@@ -217,14 +221,6 @@ 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, ";" + ("" ));
@@ -236,21 +232,30 @@ var _ref2$3 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
-const DialogContainer = props => {
+const DialogContainer = _ref3 => {
+  let _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 13 : _ref3$size,
+    _ref3$getParentSelect = _ref3.getParentSelector,
+    getParentSelector = _ref3$getParentSelect === void 0 ? getDefaultParentSelector$1 : _ref3$getParentSelect,
+    props = _objectWithoutProperties(_ref3, _excluded$j);
   utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
   return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref3 => {
-      let makeClassName = _ref3.css;
+    children: _ref4 => {
+      let makeClassName = _ref4.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)),
+        overlayClassName: makeClassName(getOverlayStyles$1(_objectSpread$7({
+          size
+        }, props))),
+        className: makeClassName(getModalContentStyles(_objectSpread$7({
+          size
+        }, props))),
         contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
-        parentSelector: props.getParentSelector,
+        parentSelector: getParentSelector,
         ariaHideApp: false,
         children: [jsxRuntime.jsx(GridArea, {
           name: "top"
@@ -280,7 +285,6 @@ const DialogContainer = props => {
 };
 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", {
@@ -350,15 +354,18 @@ function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
+const _excluded$i = ["isPrimaryButtonDisabled", "dataAttributesPrimaryButton", "dataAttributesSecondaryButton"];
 function ownKeys$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 DialogFooter = _ref => {
+  let _ref$isPrimaryButtonD = _ref.isPrimaryButtonDisabled,
+    isPrimaryButtonDisabled = _ref$isPrimaryButtonD === void 0 ? false : _ref$isPrimaryButtonD,
+    _ref$dataAttributesPr = _ref.dataAttributesPrimaryButton,
+    dataAttributesPrimaryButton = _ref$dataAttributesPr === void 0 ? {} : _ref$dataAttributesPr,
+    _ref$dataAttributesSe = _ref.dataAttributesSecondaryButton,
+    dataAttributesSecondaryButton = _ref$dataAttributesSe === void 0 ? {} : _ref$dataAttributesSe,
+    props = _objectWithoutProperties(_ref, _excluded$i);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("margin-top:", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
@@ -375,49 +382,51 @@ const DialogFooter = props => {
           label: getFormattedLabel(props.labelSecondary, intl),
           onClick: props.onCancel,
           iconLeft: props.iconLeftSecondaryButton
-        }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
+        }, filterDataAttributes(dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
           label: getFormattedLabel(props.labelPrimary, intl),
           onClick: props.onConfirm,
-          isDisabled: props.isPrimaryButtonDisabled
-        }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+          isDisabled: isPrimaryButtonDisabled
+        }, filterDataAttributes(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, {
+const _excluded$h = ["labelSecondary", "labelPrimary"];
+const ConfirmationDialog = _ref => {
+  let _ref$labelSecondary = _ref.labelSecondary,
+    labelSecondary = _ref$labelSecondary === void 0 ? i18n.sharedMessages.cancel : _ref$labelSecondary,
+    _ref$labelPrimary = _ref.labelPrimary,
+    labelPrimary = _ref$labelPrimary === void 0 ? i18n.sharedMessages.confirm : _ref$labelPrimary,
+    props = _objectWithoutProperties(_ref, _excluded$h);
+  return jsxRuntime.jsxs(DialogContainer, {
+    isOpen: props.isOpen,
+    onClose: props.onClose,
+    size: props.size,
+    zIndex: props.zIndex,
     title: props.title,
-    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
-  })]
-});
+    "aria-label": props['aria-label'],
+    getParentSelector: props.getParentSelector,
+    children: [jsxRuntime.jsx(DialogHeader, {
+      title: props.title,
+      onClose: props.onClose
+    }), jsxRuntime.jsx(DialogContent, {
+      children: props.children
+    }), jsxRuntime.jsx(DialogFooter, {
+      labelSecondary: labelSecondary,
+      labelPrimary: labelPrimary,
+      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+      onCancel: props.onCancel,
+      onConfirm: props.onConfirm,
+      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton
+    })]
+  });
+};
 ConfirmationDialog.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;
@@ -425,38 +434,41 @@ ConfirmationDialog.Intl = i18n.sharedMessages;
 // 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, {
+const _excluded$g = ["labelSecondary", "labelPrimary"];
+const FormDialog = _ref => {
+  let _ref$labelSecondary = _ref.labelSecondary,
+    labelSecondary = _ref$labelSecondary === void 0 ? i18n.sharedMessages.cancel : _ref$labelSecondary,
+    _ref$labelPrimary = _ref.labelPrimary,
+    labelPrimary = _ref$labelPrimary === void 0 ? i18n.sharedMessages.save : _ref$labelPrimary,
+    props = _objectWithoutProperties(_ref, _excluded$g);
+  return jsxRuntime.jsxs(DialogContainer, {
+    isOpen: props.isOpen,
+    onClose: props.onClose,
+    size: props.size,
+    zIndex: props.zIndex,
     title: props.title,
-    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
-  })]
-});
+    "aria-label": props['aria-label'],
+    getParentSelector: props.getParentSelector,
+    children: [jsxRuntime.jsx(DialogHeader, {
+      title: props.title,
+      onClose: props.onClose
+    }), jsxRuntime.jsx(DialogContent, {
+      children: props.children
+    }), jsxRuntime.jsx(DialogFooter, {
+      labelSecondary: labelSecondary,
+      labelPrimary: labelPrimary,
+      isPrimaryButtonDisabled: props.isPrimaryButtonDisabled,
+      onCancel: props.onSecondaryButtonClick,
+      onConfirm: props.onPrimaryButtonClick,
+      dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
+      dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
+      iconLeftSecondaryButton: props.iconLeftSecondaryButton,
+      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;
@@ -466,15 +478,16 @@ FormDialog.TextTitle = TextTitle;
 
 const messages$5 = reactIntl.defineMessages({
   back: {
-    id: 'Components.ModalPage.TopBar.Back',
-    defaultMessage: 'Go Back'
+    id: "Components.ModalPage.TopBar.Back",
+    defaultMessage: "Go Back"
   },
   close: {
-    id: 'Components.ModalPage.TopBar.Close',
-    defaultMessage: 'Close Modal Page'
+    id: "Components.ModalPage.TopBar.Close",
+    defaultMessage: "Close Modal Page"
   }
 });
 
+const _excluded$f = ["color", "previousPathLabel", "hidePathLabel"];
 // Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
@@ -491,24 +504,25 @@ 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 = {
-  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 ModalPageTopBar = _ref3 => {
+  _ref3.color;
+    let _ref3$previousPathLab = _ref3.previousPathLabel,
+    previousPathLabel = _ref3$previousPathLab === void 0 ? messages$5.back : _ref3$previousPathLab,
+    _ref3$hidePathLabel = _ref3.hidePathLabel,
+    hidePathLabel = _ref3$hidePathLabel === void 0 ? false : _ref3$hidePathLabel,
+    props = _objectWithoutProperties(_ref3, _excluded$f);
   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"], {
+      children: [!hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
-        label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+        label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
         icon: jsxRuntime.jsx(icons.AngleLeftIcon, {
           size: "medium",
           color: "primary"
@@ -537,7 +551,6 @@ const ModalPageTopBar = props => {
 };
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$d;
 
 const stylesBySize = {
   '10': {
@@ -581,6 +594,7 @@ var _ref$5 = {
 } ;
 const getBeforeCloseOverlayAnimation = () => _ref$5;
 
+const _excluded$e = ["size", "getParentSelector", "shouldDelayOnClose"];
 function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
@@ -596,12 +610,14 @@ jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
 // 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 ModalPage = _ref => {
+  let _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'scale' : _ref$size,
+    _ref$getParentSelecto = _ref.getParentSelector,
+    getParentSelector = _ref$getParentSelecto === void 0 ? getDefaultParentSelector : _ref$getParentSelecto,
+    _ref$shouldDelayOnClo = _ref.shouldDelayOnClose,
+    shouldDelayOnClose = _ref$shouldDelayOnClo === void 0 ? true : _ref$shouldDelayOnClo,
+    props = _objectWithoutProperties(_ref, _excluded$e);
   const _useState = react$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     forceClose = _useState2[0],
@@ -616,9 +632,9 @@ const ModalPage = props => {
     };
   }, [props.isOpen]);
   const onClose = props.onClose;
-  const TRANSITION_DURATION = stylesBySize[props.size].transitionTime;
+  const TRANSITION_DURATION = stylesBySize[size].transitionTime;
   const handleClose = react$1.useCallback(event => {
-    if (props.shouldDelayOnClose) {
+    if (shouldDelayOnClose) {
       // In this case we want the closing animation to be shown
       // and therefore we need wait for it to be completed
       // before calling `onClose`.
@@ -629,10 +645,10 @@ const ModalPage = props => {
       return;
     }
     onClose && onClose(event);
-  }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
+  }, [onClose, shouldDelayOnClose, TRANSITION_DURATION]);
   return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref => {
-      let makeClassName = _ref.css;
+    children: _ref2 => {
+      let makeClassName = _ref2.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: forceClose === true ? false : props.isOpen,
         onRequestClose: handleClose,
@@ -640,17 +656,23 @@ const ModalPage = props => {
         shouldCloseOnEsc: Boolean(props.onClose),
         overlayElement: getOverlayElement,
         overlayClassName: {
-          base: makeClassName(getOverlayStyles(props)),
+          base: makeClassName(getOverlayStyles(_objectSpread$5({
+            size
+          }, props))),
           afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
           beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
         },
         className: {
-          base: makeClassName(getContainerStyles(props)),
+          base: makeClassName(getContainerStyles(_objectSpread$5({
+            size
+          }, props))),
           afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
+          beforeClose: makeClassName(getBeforeCloseContainerAnimation(_objectSpread$5({
+            size
+          }, props)))
         },
         contentLabel: props.title,
-        parentSelector: props.getParentSelector,
+        parentSelector: getParentSelector,
         ariaHideApp: false
         // Adjust this value if the (beforeClose) animation duration is changed
         ,
@@ -674,12 +696,11 @@ const ModalPage = props => {
 };
 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.'
+    id: "CustomViewLoader.error.load",
+    defaultMessage: "We could not load the Custom View. Please contact your administrator to check its configuration."
   }
 });
 
@@ -798,8 +819,8 @@ CustomViewLoader.propTypes = {};
 
 var messages$3 = reactIntl.defineMessages({
   title: {
-    id: 'CustomViewsSelector.title',
-    defaultMessage: 'Custom Views:'
+    id: "CustomViewsSelector.title",
+    defaultMessage: "Custom Views:"
   }
 });
 
@@ -941,10 +962,8 @@ const CustomViewSelectorOrNothing = props => {
 };
 CustomViewSelectorOrNothing.propTypes = {};
 
-const defaultProps$b = {
-  titleSize: 'small',
-  truncate: false
-};
+const _excluded$d = ["truncate"],
+  _excluded2$1 = ["titleSize", "truncate"];
 const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
 } )("margin-top:", designSystem.designTokens.spacing20, ";" + ("" ));
@@ -973,7 +992,10 @@ const Title = props => {
       });
   }
 };
-const Subtitle = props => {
+const Subtitle = _ref2 => {
+  let _ref2$truncate = _ref2.truncate,
+    truncate = _ref2$truncate === void 0 ? false : _ref2$truncate,
+    props = _objectWithoutProperties(_ref2, _excluded$d);
   if (!props.subtitle) {
     return null;
   }
@@ -985,34 +1007,37 @@ const Subtitle = props => {
   return jsxRuntime.jsx(SubtitleWrapper, {
     children: jsxRuntime.jsx(Text__default["default"].Body, {
       title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
-      truncate: props.truncate,
+      truncate: 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
-  })]
-});
+const PageHeaderTitle = _ref3 => {
+  let _ref3$titleSize = _ref3.titleSize,
+    titleSize = _ref3$titleSize === void 0 ? 'small' : _ref3$titleSize,
+    _ref3$truncate = _ref3.truncate,
+    truncate = _ref3$truncate === void 0 ? false : _ref3$truncate,
+    props = _objectWithoutProperties(_ref3, _excluded2$1);
+  return jsxRuntime.jsxs("div", {
+    css: _ref$4,
+    children: [jsxRuntime.jsx(Title, {
+      title: props.title,
+      titleSize: titleSize,
+      truncate: truncate
+    }), jsxRuntime.jsx(Subtitle, {
+      subtitle: props.subtitle,
+      truncate: truncate
+    })]
+  });
+};
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$b;
 
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
@@ -1068,63 +1093,69 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
 InfoModalPage.propTypes = {};
 InfoModalPage.displayName = 'InfoModalPage';
 
+const _excluded$c = ["label", "isDisabled", "dataAttributes"],
+  _excluded2 = ["label", "isDisabled", "dataAttributes"],
+  _excluded3 = ["label", "isDisabled", "dataAttributes"];
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const 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);
+const FormPrimaryButton = _ref => {
+  let _ref$label = _ref.label,
+    label = _ref$label === void 0 ? i18n.sharedMessages.confirm : _ref$label,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled,
+    isDisabled: isDisabled,
     iconLeft: props.iconLeft
-  }, filterDataAttributes(props.dataAttributes)));
+  }, filterDataAttributes(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);
+const FormSecondaryButton = _ref2 => {
+  let _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? i18n.sharedMessages.cancel : _ref2$label,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$dataAttributes = _ref2.dataAttributes,
+    dataAttributes = _ref2$dataAttributes === void 0 ? {} : _ref2$dataAttributes,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled,
+    isDisabled: isDisabled,
     iconLeft: props.iconLeft
-  }, filterDataAttributes(props.dataAttributes)));
+  }, filterDataAttributes(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);
+const FormDeleteButton = _ref3 => {
+  let _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? i18n.sharedMessages.delete : _ref3$label,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$dataAttributes = _ref3.dataAttributes,
+    dataAttributes = _ref3$dataAttributes === void 0 ? {} : _ref3$dataAttributes,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  const _label = useFormattedLabel(label);
   return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
-    label: label,
+    label: _label,
     onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
+    isDisabled: isDisabled
+  }, filterDataAttributes(dataAttributes)));
 };
 FormDeleteButton.propTypes = {};
 FormDeleteButton.displayName = 'FormDeleteButton';
-FormDeleteButton.defaultProps = deleteDefaultProps;
 
 const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
   title: props.title,
@@ -1159,41 +1190,43 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$a = {
-  hideControls: false
+const _excluded$b = ["hideControls"];
+const FormModalPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  return jsxRuntime.jsx(CustomFormModalPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    isOpen: props.isOpen,
+    zIndex: props.zIndex,
+    onClose: props.onClose,
+    topBarCurrentPathLabel: props.topBarCurrentPathLabel,
+    topBarPreviousPathLabel: props.topBarPreviousPathLabel,
+    getParentSelector: props.getParentSelector,
+    shouldDelayOnClose: props.shouldDelayOnClose,
+    hideControls: hideControls,
+    afterOpenStyles: props.afterOpenStyles,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormModalPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormModalPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    customViewLocatorCode: props.customViewLocatorCode,
+    children: props.children
+  });
 };
-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;
@@ -1243,10 +1276,11 @@ 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 _excluded$a = ["hideControls"];
+const TabularModalPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$a);
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(ModalPage, {
@@ -1270,7 +1304,7 @@ const TabularModalPage = props => {
         }), jsxRuntime.jsx(ControlsContainter, {
           tabControls: props.tabControls,
           formControls: jsxRuntime.jsx(FormControlsContainer, {
-            children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+            children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
               alignItems: "flex-end",
               children: props.formControls
             })
@@ -1289,7 +1323,6 @@ const TabularModalPage = props => {
 };
 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;
@@ -1299,17 +1332,18 @@ TabularModalPage.FormDeleteButton = FormDeleteButton;
 // 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 _excluded$9 = ["color", "previousPathLabel"];
+const PageTopBar = _ref => {
+  _ref.color;
+    let _ref$previousPathLabe = _ref.previousPathLabel,
+    previousPathLabel = _ref$previousPathLabe === void 0 ? messages$5.back : _ref$previousPathLabe,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:", designSystem.designTokens.spacing40, ";background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ),
     children: jsxRuntime.jsx(FlatButton__default["default"], {
       tone: "primary",
-      label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
+      label: typeof previousPathLabel === 'string' ? previousPathLabel : intl.formatMessage(previousPathLabel),
       icon: jsxRuntime.jsx(icons.ListIcon, {
         size: "medium",
         color: "primary"
@@ -1320,8 +1354,8 @@ const PageTopBar = props => {
 };
 PageTopBar.propTypes = {};
 PageTopBar.displayName = 'PageTopBar';
-PageTopBar.defaultProps = defaultProps$8;
 
+const _excluded$8 = ["hideControls"];
 const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc1"
 } )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForDetailPageHeader, ";border-bottom:1px ", designSystem.designTokens.colorNeutral90, " solid;" + ("" ));
@@ -1334,10 +1368,10 @@ const getCustomViewsSelectorMargin = hasContentBelow => `${designSystem.designTo
 // 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 => {
+const CustomFormDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(DetailPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
@@ -1349,9 +1383,9 @@ const CustomFormDetailPage = props => {
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-        margin: getCustomViewsSelectorMargin(!props.hideControls && !!props.formControls),
+        margin: getCustomViewsSelectorMargin(!hideControls && !!props.formControls),
         customViewLocatorCode: props.customViewLocatorCode
-      }), !props.hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
+      }), !hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
         children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
@@ -1364,7 +1398,6 @@ const CustomFormDetailPage = props => {
 };
 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;
@@ -1377,36 +1410,38 @@ CustomFormDetailPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormDetailPage.Intl = i18n.sharedMessages;
 
-const defaultProps$6 = {
-  hideControls: false
+const _excluded$7 = ["hideControls"];
+const FormDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return jsxRuntime.jsx(CustomFormDetailPage, {
+    title: props.title,
+    subtitle: props.subtitle,
+    customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
+    previousPathLabel: props.previousPathLabel,
+    onPreviousPathClick: props.onPreviousPathClick,
+    hideControls: hideControls,
+    formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(CustomFormDetailPage.FormSecondaryButton, {
+        label: props.labelSecondaryButton,
+        onClick: props.onSecondaryButtonClick,
+        isDisabled: props.isSecondaryButtonDisabled,
+        dataAttributes: props.dataAttributesSecondaryButton,
+        iconLeft: props.iconLeftSecondaryButton
+      }), jsxRuntime.jsx(CustomFormDetailPage.FormPrimaryButton, {
+        label: props.labelPrimaryButton,
+        onClick: props.onPrimaryButtonClick,
+        isDisabled: props.isPrimaryButtonDisabled,
+        dataAttributes: props.dataAttributesPrimaryButton
+      })]
+    }),
+    children: props.children
+  });
 };
-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
@@ -1431,10 +1466,11 @@ InfoDetailPage.displayName = 'InfoDetailPage';
 // use as part of a custom title row
 InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$5 = {
-  hideControls: false
-};
-const TabularDetailPage = props => {
+const _excluded$6 = ["hideControls"];
+const TabularDetailPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1450,7 +1486,7 @@ const TabularDetailPage = props => {
       }), jsxRuntime.jsx(ControlsContainter, {
         tabControls: props.tabControls,
         formControls: jsxRuntime.jsx(FormControlsContainer, {
-          children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
             alignItems: "flex-end",
             children: props.formControls
           })
@@ -1468,7 +1504,6 @@ const TabularDetailPage = props => {
 };
 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;
@@ -1480,7 +1515,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-d365f38f.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-2326dd98.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1494,8 +1529,14 @@ const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
+const _excluded$5 = ["hideControls", "hideDivider"];
 const headerRowMargin = `${designSystem.designTokens.spacing40} 0 0 0`;
-const CustomFormMainPage = props => {
+const CustomFormMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    _ref$hideDivider = _ref.hideDivider,
+    hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(MainPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1505,13 +1546,13 @@ const CustomFormMainPage = props => {
       }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
         margin: headerRowMargin,
         customViewLocatorCode: props.customViewLocatorCode
-      }), !props.hideControls && props.formControls && jsxRuntime.jsx("div", {
+      }), !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", {
+      }), !hideDivider && jsxRuntime.jsx("div", {
         css: /*#__PURE__*/react.css("&>", Divider, "{margin:", headerRowMargin, ";}" + ("" ), "" ),
         children: jsxRuntime.jsx(Divider, {})
       })]
@@ -1521,12 +1562,7 @@ const CustomFormMainPage = props => {
   });
 };
 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
@@ -1542,16 +1578,17 @@ CustomFormMainPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormMainPage.Intl = i18n.sharedMessages;
 
-const defaultProps$3 = {
-  hideControls: false
-};
-const FormMainPage = props => {
+const _excluded$4 = ["hideControls"];
+const FormMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
     customViewLocatorCode: props.customViewLocatorCode,
-    hideControls: props.hideControls,
+    hideControls: hideControls,
     formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(CustomFormMainPage.FormSecondaryButton, {
         label: props.labelSecondaryButton,
@@ -1571,7 +1608,6 @@ const FormMainPage = props => {
 };
 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
@@ -1597,10 +1633,11 @@ InfoMainPage.displayName = 'InfoMainPage';
 // use as part of a custom title row
 InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
-const defaultProps$2 = {
-  hideControls: false
-};
-const TabularMainPage = props => {
+const _excluded$3 = ["hideControls"];
+const TabularMainPage = _ref => {
+  let _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1612,7 +1649,7 @@ const TabularMainPage = props => {
       }), jsxRuntime.jsx(ControlsContainter, {
         tabControls: props.tabControls,
         formControls: jsxRuntime.jsx(FormControlsContainer, {
-          children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+          children: !hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
             alignItems: "flex-end",
             children: props.formControls
           })
@@ -1631,7 +1668,6 @@ const TabularMainPage = props => {
 };
 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;
@@ -1684,12 +1720,12 @@ MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
 var messages$2 = reactIntl.defineMessages({
   title: {
-    id: 'PageNotFound.title',
-    defaultMessage: 'We could not find what you are looking for'
+    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.'
+    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. Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions."
   }
 });
 
@@ -1718,16 +1754,16 @@ PageNotFound.displayName = 'PageNotFound';
 
 var messages$1 = reactIntl.defineMessages({
   title: {
-    id: 'PageUnauthorized.title',
-    defaultMessage: 'We could not find what you are looking for'
+    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.'
+    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.'
+    id: "PageUnauthorized.paragraph2",
+    defaultMessage: "Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions."
   }
 });
 
@@ -1776,6 +1812,7 @@ function PageContentNarrow(props) {
 }
 PageContentNarrow.propTypes = {};
 
+const _excluded$2 = ["columns", "gapSize"];
 const Content = /*#__PURE__*/_styled__default["default"]("section", {
   target: "e1dg479f4"
 } )("grid-area:content;display:grid;grid-template-areas:", props => props.columns === '1' ? 'none' : '"left-column right-column"', ";grid-template-columns:", props => {
@@ -1819,28 +1856,33 @@ const Container = /*#__PURE__*/_styled__default["default"]("div", {
   name: "5phl7w",
   styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(800px, 1200px) 1fr;width:100%"
 } );
-function PageContentWide(props) {
+function PageContentWide(_ref) {
+  let _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? '1' : _ref$columns,
+    _ref$gapSize = _ref.gapSize,
+    gapSize = _ref$gapSize === void 0 ? '20' : _ref$gapSize,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const _Children$toArray = react$1.Children.toArray(props.children),
     _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
     leftChild = _Children$toArray2[0],
     rightChild = _Children$toArray2[1];
   const childrenCount = react$1.Children.count(props.children);
-  const isOneColumnAndMoreThanOneChild = props.columns === '1' && childrenCount > 1;
-  const isTwoColumnsAndMoreThanTwoChildren = props.columns !== '1' && childrenCount > 2;
+  const isOneColumnAndMoreThanOneChild = columns === '1' && childrenCount > 1;
+  const isTwoColumnsAndMoreThanTwoChildren = columns !== '1' && childrenCount > 2;
   utils.useWarning(!isOneColumnAndMoreThanOneChild, 'PageContentWide: This component only renders its first children when using a single column but you provided more than one.');
   utils.useWarning(!isTwoColumnsAndMoreThanTwoChildren, 'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more than two.');
   return jsxRuntime.jsx(Container, {
     children: jsxRuntime.jsx(Content, {
-      columns: props.columns,
-      gapSize: props.gapSize,
-      children: props.columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+      columns: columns,
+      gapSize: gapSize,
+      children: columns === '1' ? jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: leftChild
       }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(LeftContentColumn, {
           children: leftChild
         }), jsxRuntime.jsx(RightContentColumn, {
           children: jsxRuntime.jsx(RightColumnContentWrapper, {
-            columns: props.columns,
+            columns: columns,
             children: rightChild
           })
         })]
@@ -1849,11 +1891,6 @@ function PageContentWide(props) {
   });
 }
 PageContentWide.propTypes = {};
-const defaultProps$1 = {
-  columns: '1',
-  gapSize: '20'
-};
-PageContentWide.defaultProps = defaultProps$1;
 
 var _ref$2 = {
   name: "1d3w5wq",
@@ -1869,26 +1906,30 @@ function PageContentFull(props) {
 }
 PageContentFull.propTypes = {};
 
-const defaultProps = {
-  size: 10,
-  hideControls: false,
-  onPrimaryButtonClick: () => {},
-  onSecondaryButtonClick: () => {}
-};
+const _excluded$1 = ["size", "hideControls", "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) {
+function Drawer(_ref) {
+  let _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 10 : _ref$size,
+    _ref$hideControls = _ref.hideControls,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    _ref$onPrimaryButtonC = _ref.onPrimaryButtonClick,
+    onPrimaryButtonClick = _ref$onPrimaryButtonC === void 0 ? () => {} : _ref$onPrimaryButtonC,
+    _ref$onSecondaryButto = _ref.onSecondaryButtonClick,
+    onSecondaryButtonClick = _ref$onSecondaryButto === void 0 ? () => {} : _ref$onSecondaryButto,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsxs(ModalPage, {
     isOpen: props.isOpen,
     hidePathLabel: true,
     hideTopBar: true,
     onClose: props.onClose,
-    size: props.size,
+    size: size,
     title: props.title,
     afterOpenStyles: props.afterOpenStyles,
     getParentSelector: props.getParentSelector,
@@ -1915,16 +1956,16 @@ function Drawer(props) {
           })]
         }), 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: [!hideControls && props.formControls && props.formControls, !hideControls && !props.formControls && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsx(FormSecondaryButton, {
               label: props.labelSecondaryButton,
-              onClick: props.onSecondaryButtonClick,
+              onClick: onSecondaryButtonClick,
               isDisabled: props.isSecondaryButtonDisabled,
               dataAttributes: props.dataAttributesSecondaryButton,
               iconLeft: props.iconLeftSecondaryButton
             }), jsxRuntime.jsx(FormPrimaryButton, {
               label: props.labelPrimaryButton,
-              onClick: props.onPrimaryButtonClick,
+              onClick: onPrimaryButtonClick,
               isDisabled: props.isPrimaryButtonDisabled,
               dataAttributes: props.dataAttributesPrimaryButton
             })]
@@ -1938,7 +1979,6 @@ function Drawer(props) {
 }
 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;
@@ -1949,20 +1989,20 @@ Drawer.Intl = i18n.sharedMessages;
 
 var messages = reactIntl.defineMessages({
   ProjectProduction: {
-    id: 'ProjectStamp.production',
-    defaultMessage: 'Production'
+    id: "ProjectStamp.production",
+    defaultMessage: "Production"
   },
   ProjectSuspended: {
-    id: 'ProjectStamp.suspended',
-    defaultMessage: 'Suspended'
+    id: "ProjectStamp.suspended",
+    defaultMessage: "Suspended"
   },
   ProjectExpired: {
-    id: 'ProjectStamp.expired',
-    defaultMessage: 'Trial expired'
+    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}}'
+    id: "ProjectStamp.willExpire",
+    defaultMessage: "{daysLeft, select, 0 {Trial ends today} 1 {Trial ends in 1 day} other {Trial ends in {daysLeft} days}}"
   }
 });