@commercetools-frontend/application-components 22.17.2 → 22.18.0

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

@@ -48,6 +48,9 @@ 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');
 var hooks = require('@commercetools-uikit/hooks');
 
@@ -82,20 +85,22 @@ var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceP
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
+var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var Stamp__default = /*#__PURE__*/_interopDefault(Stamp);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.17.2";
+var version = "22.18.0";
 
 const getBottomBorderStyles = background => /*#__PURE__*/react.css(":after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:", designSystem.designTokens.borderRadius2, ";background-color:", background, ";transition:background-color ", designSystem.designTokens.transitionEaseinout150Ms, ";}" + ("" ), "" );
-var _ref$7 = {
+var _ref$8 = {
   name: "1u0tiat",
   styles: "&[aria-disabled='true']{cursor:not-allowed;opacity:0.5;&:active{pointer-events:none;}}"
 } ;
-const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSize30, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designSystem.designTokens.spacing30, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
+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), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$8, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
 
-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; }
+function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
@@ -127,7 +132,7 @@ const TabHeader = props => {
     label = intl.formatMessage(props.intlMessage);
   }
   warnIfMissingContent(props);
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$8(_objectSpread$8({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -184,13 +189,13 @@ const getModalContentStyles = props => {
 const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
-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; }
+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("#".concat(constants.PORTALS_CONTAINER_ID));
 const getOverlayElement$1 = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
@@ -205,7 +210,7 @@ const defaultProps$i = {
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
-var _ref$6 = {
+var _ref$7 = {
   name: "1daj17f",
   styles: "display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0"
 } ;
@@ -213,45 +218,48 @@ var _ref2$3 = {
   name: "1187q51",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden"
 } ;
-const DialogContainer = props => jsxRuntime.jsx(react.ClassNames, {
-  children: _ref3 => {
-    let makeClassName = _ref3.css;
-    return jsxRuntime.jsxs(Modal__default["default"], {
-      isOpen: props.isOpen,
-      onRequestClose: props.onClose,
-      shouldCloseOnOverlayClick: Boolean(props.onClose),
-      shouldCloseOnEsc: Boolean(props.onClose),
-      overlayElement: getOverlayElement$1,
-      overlayClassName: makeClassName(getOverlayStyles$1(props)),
-      className: makeClassName(getModalContentStyles(props)),
-      contentLabel: props.title,
-      parentSelector: props.getParentSelector,
-      ariaHideApp: false,
-      children: [jsxRuntime.jsx(GridArea, {
-        name: "top"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "left"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "right"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "bottom"
-      }), jsxRuntime.jsx(GridArea, {
-        name: "main",
-        css: _ref2$3,
-        children: jsxRuntime.jsx(Card__default["default"]
-        // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
-        // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
-        , {
-          css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
-          children: jsxRuntime.jsx("div", {
-            css: _ref$6,
-            children: props.children
+const DialogContainer = props => {
+  utils.useWarning(typeof props.title === 'string' || typeof props.title !== 'string' && Boolean(props['aria-label']), 'app-kit/DialogHeader: "aria-label" prop is required when the "title" prop is not a string.');
+  return jsxRuntime.jsx(react.ClassNames, {
+    children: _ref3 => {
+      let makeClassName = _ref3.css;
+      return jsxRuntime.jsxs(Modal__default["default"], {
+        isOpen: props.isOpen,
+        onRequestClose: props.onClose,
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement$1,
+        overlayClassName: makeClassName(getOverlayStyles$1(props)),
+        className: makeClassName(getModalContentStyles(props)),
+        contentLabel: typeof props.title === 'string' ? props.title : props['aria-label'],
+        parentSelector: props.getParentSelector,
+        ariaHideApp: false,
+        children: [jsxRuntime.jsx(GridArea, {
+          name: "top"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "left"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "right"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "bottom"
+        }), jsxRuntime.jsx(GridArea, {
+          name: "main",
+          css: _ref2$3,
+          children: jsxRuntime.jsx(Card__default["default"]
+          // 1. For the min-height: https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox/28639686#28639686
+          // 2. For the actual "> div" container with the content, we need to use normal pointer events so that clicking on it does not close the dialog.
+          , {
+            css: /*#__PURE__*/react.css("min-height:0;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";>div{display:flex;flex-direction:column;height:100%;pointer-events:auto;min-height:0;}" + ("" ), "" ),
+            children: jsxRuntime.jsx("div", {
+              css: _ref$7,
+              children: props.children
+            })
           })
-        })
-      })]
-    });
-  }
-});
+        })]
+      });
+    }
+  });
+};
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
 DialogContainer.defaultProps = defaultProps$i;
@@ -261,13 +269,23 @@ const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "eo6zkz80"
 } )("border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";padding:", designSystem.designTokens.spacing40, " 0 0;flex:1;overflow:auto;" + ("" ));
 
+const TextTitle = props => jsxRuntime.jsx(Text__default["default"].Headline, {
+  as: "h3",
+  title: props.title,
+  truncate: true,
+  children: props.title
+});
+TextTitle.propTypes = {};
 const Title$1 = props => {
-  return jsxRuntime.jsx(Text__default["default"].Headline, {
-    as: "h3",
-    title: props.title,
-    truncate: true,
-    children: props.title
-  });
+  if (typeof props.title === 'string') {
+    return jsxRuntime.jsx(TextTitle, {
+      title: props.title
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.title
+    });
+  }
 };
 const DialogHeader = props => jsxRuntime.jsx("div", {
   css: /*#__PURE__*/react.css("flex:0 1 auto;display:flex;flex-direction:column;margin-bottom:", designSystem.designTokens.spacing30, ";" + ("" ), "" ),
@@ -294,6 +312,7 @@ const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -305,12 +324,16 @@ const InfoDialog = props => jsxRuntime.jsxs(DialogContainer, {
 InfoDialog.propTypes = {};
 InfoDialog.displayName = 'InfoDialog';
 
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+InfoDialog.TextTitle = TextTitle;
+
 function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
-function ownKeys$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; }
+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$h = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
@@ -325,11 +348,11 @@ const DialogFooter = props => {
       scale: "m",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
+      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$6({
         label: getFormattedLabel(props.labelSecondary, intl),
         onClick: props.onCancel,
         iconLeft: props.iconLeftSecondaryButton
-      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
+      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$6({
         label: getFormattedLabel(props.labelPrimary, intl),
         onClick: props.onConfirm,
         isDisabled: props.isPrimaryButtonDisabled
@@ -351,6 +374,7 @@ const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -373,6 +397,9 @@ 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;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+ConfirmationDialog.TextTitle = TextTitle;
 
 const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
@@ -384,6 +411,7 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
   size: props.size,
   zIndex: props.zIndex,
   title: props.title,
+  "aria-label": props['aria-label'],
   getParentSelector: props.getParentSelector,
   children: [jsxRuntime.jsx(DialogHeader, {
     title: props.title,
@@ -407,8 +435,11 @@ 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;
+// Allow consumers who want to use a custom title to reuse the same title styles
+// as the default dialog title.
+FormDialog.TextTitle = TextTitle;
 
-const messages$4 = reactIntl.defineMessages({
+const messages$5 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
     defaultMessage: 'Go Back'
@@ -437,10 +468,10 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 LargeIconWrapper.propTypes = {};
 const defaultProps$e = {
   color: 'surface',
-  previousPathLabel: messages$4.back,
+  previousPathLabel: messages$5.back,
   hidePathLabel: false
 };
-var _ref$5 = {
+var _ref$6 = {
   name: "uvw8rn",
   styles: "display:flex;overflow:hidden;button:first-of-type svg{height:12px!important;width:12px!important;}"
 } ;
@@ -449,7 +480,7 @@ const ModalPageTopBar = props => {
   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$5,
+      css: _ref$6,
       children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
@@ -470,7 +501,7 @@ const ModalPageTopBar = props => {
         })]
       })]
     }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-      label: intl.formatMessage(messages$4.close),
+      label: intl.formatMessage(messages$5.close),
       onClick: props.onClose,
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -520,19 +551,19 @@ var _ref2$1 = {
 } ;
 const getAfterOpenOverlayAnimation = () => _ref2$1;
 const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$4 = {
+var _ref$5 = {
   name: "728dx5",
   styles: "opacity:0!important"
 } ;
-const getBeforeCloseOverlayAnimation = () => _ref$4;
+const getBeforeCloseOverlayAnimation = () => _ref$5;
 
-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$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("#".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$4(_objectSpread$4({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
   "data-role": "modal-overlay",
   children: contentElement
 }));
@@ -621,7 +652,7 @@ ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
 ModalPage.defaultProps = defaultProps$d;
 
-const messages$3 = reactIntl.defineMessages({
+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.'
@@ -682,7 +713,7 @@ function CustomViewLoader(props) {
       showNotification({
         domain: constants.DOMAINS.PAGE,
         kind: constants.NOTIFICATION_KINDS_PAGE.error,
-        text: intl.formatMessage(messages$3.loadError)
+        text: intl.formatMessage(messages$4.loadError)
       });
       return;
     }
@@ -745,7 +776,7 @@ function CustomViewLoader(props) {
 }
 CustomViewLoader.propTypes = {};
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   title: {
     id: 'CustomViewsSelector.title',
     defaultMessage: 'Custom Views:'
@@ -776,8 +807,8 @@ const useCustomViewsConnector = _ref => {
   };
 };
 
-function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const COMPONENT_HEIGHT = '52px';
 const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e16cb3zv3"
@@ -852,7 +883,7 @@ function CustomViewSelector(props) {
               color: "neutral60"
             }), jsxRuntime.jsx(Text__default["default"].Detail, {
               tone: "secondary",
-              intlMessage: messages$2.title
+              intlMessage: messages$3.title
             })]
           }), _mapInstanceProperty__default["default"](customViews).call(customViews, (customView, index) => {
             const isNotLastItem = index !== customViews.length - 1;
@@ -882,7 +913,7 @@ const CustomViewSelectorOrNothing = props => {
   if (!props.customViewLocatorCode) {
     return null;
   }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
     customViewLocatorCode: props.customViewLocatorCode
   }));
 };
@@ -942,12 +973,12 @@ Subtitle.propTypes = {};
 Subtitle.defaultProps = {
   truncate: false
 };
-var _ref$3 = {
+var _ref$4 = {
   name: "d3v9zr",
   styles: "overflow:hidden"
 } ;
 const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
-  css: _ref$3,
+  css: _ref$4,
   children: [jsxRuntime.jsx(Title, {
     title: props.title,
     titleSize: props.titleSize,
@@ -1033,8 +1064,8 @@ 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; }
+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,
@@ -1046,7 +1077,7 @@ const useFormattedLabel = label => {
 };
 const FormPrimaryButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$3({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled
@@ -1062,7 +1093,7 @@ const secondaryDefaultProps = {
 };
 const FormSecondaryButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$3({
     label: label,
     onClick: props.onClick,
     isDisabled: props.isDisabled,
@@ -1079,7 +1110,7 @@ const deleteDefaultProps = {
 };
 const FormDeleteButton = props => {
   const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$2({
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$3({
     icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
     label: label,
     onClick: props.onClick,
@@ -1268,7 +1299,7 @@ TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$8 = {
   color: 'surface',
-  previousPathLabel: messages$4.back
+  previousPathLabel: messages$5.back
 };
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
@@ -1618,7 +1649,7 @@ TabularMainPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularMainPage.Intl = i18n.sharedMessages;
 
-var _ref$2 = {
+var _ref$3 = {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } ;
@@ -1646,7 +1677,7 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
       }), jsxRuntime.jsx(Text__default["default"].Body, {
         children: props.paragraph1
       }), props.bodyContent && jsxRuntime.jsx("div", {
-        css: _ref$2,
+        css: _ref$3,
         children: props.bodyContent
       }), props.paragraph2 && jsxRuntime.jsx(Text__default["default"].Body, {
         children: props.paragraph2
@@ -1657,7 +1688,7 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
-var messages$1 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
     id: 'PageNotFound.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1668,8 +1699,8 @@ var messages$1 = reactIntl.defineMessages({
   }
 });
 
-function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
@@ -1680,9 +1711,9 @@ const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: PageNotFoundSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
-    label: intl.formatMessage(messages$1.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph1), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$2.title)),
+    label: intl.formatMessage(messages$2.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$2.paragraph1), {}, {
       values: {
         a: getLink
       }
@@ -1691,7 +1722,7 @@ const PageNotFound = () => {
 };
 PageNotFound.displayName = 'PageNotFound';
 
-var messages = reactIntl.defineMessages({
+var messages$1 = reactIntl.defineMessages({
   title: {
     id: 'PageUnauthorized.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1706,8 +1737,8 @@ var messages = reactIntl.defineMessages({
   }
 });
 
-function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
   href: constants.SUPPORT_PORTAL_URL,
   target: "_blank",
@@ -1718,10 +1749,10 @@ const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: FailedAuthorizationSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.title)),
-    label: intl.formatMessage(messages.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.paragraph1)),
-    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread(_objectSpread({}, messages.paragraph2), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
+    label: intl.formatMessage(messages$1.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.paragraph1)),
+    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph2), {}, {
       values: {
         a: getSupportUrlLink
       }
@@ -1820,13 +1851,13 @@ const defaultProps$1 = {
 };
 PageContentWide.defaultProps = defaultProps$1;
 
-var _ref$1 = {
+var _ref$2 = {
   name: "1d3w5wq",
   styles: "width:100%"
 } ;
 function PageContentFull(props) {
   return jsxRuntime.jsx("div", {
-    css: _ref$1,
+    css: _ref$2,
     children: jsxRuntime.jsx("section", {
       children: props.children
     })
@@ -1871,7 +1902,7 @@ function Drawer(props) {
               children: props.subtitle
             })
           }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-            label: intl.formatMessage(messages$4.close),
+            label: intl.formatMessage(messages$5.close),
             onClick: props.onClose,
             icon: jsxRuntime.jsx(LargeIconWrapper, {
               children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -1912,6 +1943,78 @@ Drawer.FormSecondaryButton = FormSecondaryButton;
 // The Intl messages can be used for button labels.
 Drawer.Intl = i18n.sharedMessages;
 
+var messages = reactIntl.defineMessages({
+  ProjectProduction: {
+    id: 'ProjectStamp.production',
+    defaultMessage: 'Production'
+  },
+  ProjectSuspended: {
+    id: 'ProjectStamp.suspended',
+    defaultMessage: 'Suspended'
+  },
+  ProjectExpired: {
+    id: 'ProjectStamp.expired',
+    defaultMessage: 'Trial expired'
+  },
+  ProjectWillExpire: {
+    id: 'ProjectStamp.willExpire',
+    defaultMessage: '{daysLeft, select, 0 {Trial ends today} 1 {Trial ends in 1 day} other {Trial ends in {daysLeft} days}}'
+  }
+});
+
+const _excluded = ["values"];
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function CustomStamp(props) {
+  const intl = reactIntl.useIntl();
+  const _props$label = props.label,
+    values = _valuesInstanceProperty__default["default"](_props$label),
+    message = _objectWithoutProperties(_props$label, _excluded);
+  return jsxRuntime.jsx(Stamp__default["default"], {
+    tone: props.tone,
+    isCondensed: true,
+    label: intl.formatMessage(message, values || {}),
+    icon: props.icon
+  });
+}
+CustomStamp.propTypes = {};
+var _ref$1 = {
+  name: "ph6b5m",
+  styles: "height:18px;svg{height:18px;width:12px;}"
+} ;
+const IsProduction = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "positive",
+  label: messages.ProjectProduction,
+  icon: jsxRuntime.jsx("div", {
+    css: _ref$1,
+    children: jsxRuntime.jsx(icons.DotIcon, {
+      color: "primary"
+    })
+  })
+});
+const IsSuspended = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectSuspended
+});
+const IsExpired = () => jsxRuntime.jsx(CustomStamp, {
+  tone: "critical",
+  label: messages.ProjectExpired
+});
+const WillExpire = props => jsxRuntime.jsx(CustomStamp, {
+  tone: "information",
+  label: _objectSpread(_objectSpread({}, messages.ProjectWillExpire), {}, {
+    values: {
+      daysLeft: props.daysLeft
+    }
+  })
+});
+const ProjectStamp = {
+  IsProduction,
+  IsSuspended,
+  IsExpired,
+  WillExpire
+};
+
 const useObserverElementDimensions = element => {
   const _useState = react$1.useState({
       height: 0,
@@ -2048,6 +2151,7 @@ exports.PageContentWide = PageContentWide;
 exports.PageNotFound = PageNotFound;
 exports.PageUnauthorized = PageUnauthorized;
 exports.PortalsContainer = PortalsContainer;
+exports.ProjectStamp = ProjectStamp;
 exports.PublicPageLayout = PublicPageLayout;
 exports.TabHeader = TabHeader;
 exports.TabularDetailPage = TabularDetailPage;