@commercetools-frontend/application-components 22.23.3 → 22.25.0

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

@@ -46,9 +46,7 @@ var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
-var PageNotFoundSVGRebranding = require('@commercetools-frontend/assets/images/page-not-found-rebranding.svg');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
-var FailedAuthorizationSVGRebranding = require('@commercetools-frontend/assets/images/doors-closed-rebranding.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');
@@ -85,18 +83,16 @@ var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
-var PageNotFoundSVGRebranding__default = /*#__PURE__*/_interopDefault(PageNotFoundSVGRebranding);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
-var FailedAuthorizationSVGRebranding__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVGRebranding);
 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.23.3";
+var version = "22.25.0";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
+var _context, _context2, _context3, _context4, _context5;
 
 // 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.
@@ -108,42 +104,9 @@ const themesOverrides = {
     paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, designSystem.designTokens.spacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
     paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context4, designSystem.designTokens.spacing55, " 0"),
     paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context5, designSystem.designTokens.spacing55, " 0"),
-    // recolouring rollout
-    backgroundColorForNavbar: designSystem.designTokens.colorPrimary,
-    backgroundColorForNavbarExpander: _concatInstanceProperty__default["default"](_context6 = "linear-gradient(180deg, ".concat(designSystem.designTokens.colorPrimary, " 0%, ")).call(_context6, designSystem.designTokens.colorPrimary25, " 100%)"),
-    backgroundColorForNavbarExpanderWhenHovered: designSystem.designTokens.colorPrimary40,
-    backgroundColorForNavbarHeader: designSystem.designTokens.colorAccent10,
-    backgroundColorForNavbarMenuItemWhenActive: designSystem.designTokens.colorAccent30,
-    backgroundColorForNavbarSubmenuItemWhenActive: designSystem.designTokens.colorAccent30,
-    backgroundColorForNavbarMenuItemWhenHovered: designSystem.designTokens.colorPrimary40,
-    backgroundColorForNavbarSkeleton: '#009987',
-    backgroundColorForNavbarSkeletonFooter: 'linear-gradient(180deg, #009987 0%, #004d44 100%)',
-    borderColorForNotificationWhenSuccess: designSystem.designTokens.colorPrimary85,
-    fontColorForNotificationWhenSuccess: designSystem.designTokens.colorPrimary,
-    fontColorForNotificationWhenWarning: designSystem.designTokens.colorWarning,
-    fontColorForTabLabelWhenActive: designSystem.designTokens.colorSolid,
-    visibilityForNavbarFaded: 'visible'
-  },
-  recolouring: {
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
-    marginForPageContent: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context7, designSystem.designTokens.spacing55),
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context9, designSystem.designTokens.spacing55, " ")).call(_context8, designSystem.designTokens.spacing40),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context10, designSystem.designTokens.spacing55, " 0"),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context11 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context11, designSystem.designTokens.spacing55, " 0"),
     backgroundColorForNavbar: designSystem.designTokens.colorPrimary10,
-    backgroundColorForNavbarExpander: designSystem.designTokens.colorPrimary10,
-    backgroundColorForNavbarExpanderWhenHovered: designSystem.designTokens.colorPrimary10,
     backgroundColorForNavbarHeader: designSystem.designTokens.colorPrimary10,
-    backgroundColorForNavbarMenuItemWhenActive: designSystem.designTokens.colorPrimary25,
-    backgroundColorForNavbarSubmenuItemWhenActive: designSystem.designTokens.colorPrimary40,
-    backgroundColorForNavbarMenuItemWhenHovered: designSystem.designTokens.colorPrimary20,
-    backgroundColorForNavbarSkeleton: designSystem.designTokens.colorPrimary10,
-    backgroundColorForNavbarSkeletonFooter: designSystem.designTokens.colorPrimary10,
-    borderColorForNotificationWhenSuccess: designSystem.designTokens.colorSuccess85,
-    fontColorForNotificationWhenSuccess: designSystem.designTokens.colorSuccess,
-    fontColorForNotificationWhenWarning: designSystem.designTokens.colorWarning60,
-    fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary,
-    visibilityForNavbarFaded: 'hidden'
+    fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary
   }
 };
 const designTokens = designSystem.transformTokensToCssVarsReferences(themesOverrides.default, {
@@ -203,11 +166,11 @@ const TabHeader = props => {
 };
 TabHeader.propTypes = {};
 TabHeader.displayName = 'TabHeader';
-const defaultProps$j = {
+const defaultProps$i = {
   isDisabled: false,
   exactPathMatch: false
 };
-TabHeader.defaultProps = defaultProps$j;
+TabHeader.defaultProps = defaultProps$i;
 
 const getConstraintForGridStyle = size => {
   switch (size) {
@@ -257,7 +220,7 @@ jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
-const defaultProps$i = {
+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.
@@ -320,7 +283,7 @@ const DialogContainer = props => {
 };
 DialogContainer.propTypes = {};
 DialogContainer.displayName = 'DialogContainer';
-DialogContainer.defaultProps = defaultProps$i;
+DialogContainer.defaultProps = defaultProps$h;
 
 // The overflow should be "auto", to make the container scrollable
 const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
@@ -392,7 +355,7 @@ function filterDataAttributes(obj) {
 
 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 = {
+const defaultProps$g = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
   dataAttributesSecondaryButton: {}
@@ -420,9 +383,9 @@ const DialogFooter = props => {
 };
 DialogFooter.propTypes = {};
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.defaultProps = defaultProps$h;
+DialogFooter.defaultProps = defaultProps$g;
 
-const defaultProps$g = {
+const defaultProps$f = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.confirm
 };
@@ -451,7 +414,7 @@ const ConfirmationDialog = props => jsxRuntime.jsxs(DialogContainer, {
 });
 ConfirmationDialog.propTypes = {};
 ConfirmationDialog.displayName = 'ConfirmationDialog';
-ConfirmationDialog.defaultProps = defaultProps$g;
+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;
@@ -459,7 +422,7 @@ ConfirmationDialog.Intl = i18n.sharedMessages;
 // as the default dialog title.
 ConfirmationDialog.TextTitle = TextTitle;
 
-const defaultProps$f = {
+const defaultProps$e = {
   labelSecondary: i18n.sharedMessages.cancel,
   labelPrimary: i18n.sharedMessages.save
 };
@@ -489,7 +452,7 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
 });
 FormDialog.propTypes = {};
 FormDialog.displayName = 'FormDialog';
-FormDialog.defaultProps = defaultProps$f;
+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;
@@ -524,7 +487,7 @@ 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$e = {
+const defaultProps$d = {
   color: 'surface',
   previousPathLabel: messages$5.back,
   hidePathLabel: false
@@ -570,7 +533,7 @@ const ModalPageTopBar = props => {
 };
 ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
-ModalPageTopBar.defaultProps = defaultProps$e;
+ModalPageTopBar.defaultProps = defaultProps$d;
 
 const stylesBySize = {
   '10': {
@@ -630,7 +593,7 @@ 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$d = {
+const defaultProps$c = {
   size: 'scale',
   getParentSelector: getDefaultParentSelector,
   shouldDelayOnClose: true
@@ -709,7 +672,7 @@ const ModalPage = props => {
 };
 ModalPage.propTypes = {};
 ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$d;
+ModalPage.defaultProps = defaultProps$c;
 
 const messages$4 = reactIntl.defineMessages({
   loadError: {
@@ -983,7 +946,7 @@ const CustomViewSelectorOrNothing = props => {
 };
 CustomViewSelectorOrNothing.propTypes = {};
 
-const defaultProps$c = {
+const defaultProps$b = {
   titleSize: 'small',
   truncate: false
 };
@@ -1054,7 +1017,7 @@ const PageHeaderTitle = props => jsxRuntime.jsxs("div", {
 });
 PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
-PageHeaderTitle.defaultProps = defaultProps$c;
+PageHeaderTitle.defaultProps = defaultProps$b;
 
 const PageHeader = props => {
   return jsxRuntime.jsxs("div", {
@@ -1200,7 +1163,7 @@ CustomFormModalPage.FormDeleteButton = FormDeleteButton;
 // The Intl messages can be used for button labels.
 CustomFormModalPage.Intl = i18n.sharedMessages;
 
-const defaultProps$b = {
+const defaultProps$a = {
   hideControls: false
 };
 const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
@@ -1234,7 +1197,7 @@ const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
 });
 FormModalPage.propTypes = {};
 FormModalPage.displayName = 'FormModalPage';
-FormModalPage.defaultProps = defaultProps$b;
+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;
@@ -1260,7 +1223,7 @@ const useCustomViewLocatorSelector = function () {
 };
 
 const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "elpldre2"
+  target: "elpldre4"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 const ControlsContainter = props => jsxRuntime.jsxs("div", {
   css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designSystem.designTokens.spacing40, ";" + ("" ), "" ),
@@ -1271,22 +1234,18 @@ const ControlsContainter = props => jsxRuntime.jsxs("div", {
 });
 ControlsContainter.propTypes = {};
 ControlsContainter.displayName = 'ControlsContainter';
-const TabularPageContainer = props => jsxRuntime.jsx("div", {
-  css: /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ), "" ),
-  children: props.children
-});
-TabularPageContainer.propTypes = {};
-TabularPageContainer.displayName = 'TabularPageContainer';
-const defaultProps$a = {
-  color: 'surface'
-};
-TabularPageContainer.defaultProps = defaultProps$a;
+const TabularPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre3"
+} )("background-color:", designSystem.designTokens.colorSurface, ";padding:", designTokens.paddingForTabularPageHeader, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";" + ("" ));
 const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "elpldre1"
+  target: "elpldre2"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
 const CustomViewsSelectorWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "elpldre0"
+  target: "elpldre1"
 } )("margin:", designTokens.marginForCustomViewsSelectorAsTabular, ";" + ("" ));
+const TabularModalPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre0"
+} )(TabularPageContainer, "{padding:", designSystem.designTokens.spacing40, " ", designSystem.designTokens.spacing55, " 0;}" + ("" ));
 
 const defaultProps$9 = {
   hideControls: false
@@ -1305,22 +1264,23 @@ const TabularModalPage = props => {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
-    children: [jsxRuntime.jsxs(TabularPageContainer, {
-      color: "neutral",
-      children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title,
-        titleSize: "big",
-        subtitle: props.subtitle,
-        truncate: true
-      }), jsxRuntime.jsx(ControlsContainter, {
-        tabControls: props.tabControls,
-        formControls: jsxRuntime.jsx(FormControlsContainer, {
-          children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
-            alignItems: "flex-end",
-            children: props.formControls
+    children: [jsxRuntime.jsx(TabularModalPageContainer, {
+      children: jsxRuntime.jsxs(TabularPageContainer, {
+        children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+          title: props.title,
+          titleSize: "big",
+          subtitle: props.subtitle,
+          truncate: true
+        }), jsxRuntime.jsx(ControlsContainter, {
+          tabControls: props.tabControls,
+          formControls: jsxRuntime.jsx(FormControlsContainer, {
+            children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+              alignItems: "flex-end",
+              children: props.formControls
+            })
           })
-        })
-      })]
+        })]
+      })
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
         margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
@@ -1488,7 +1448,6 @@ const TabularDetailPage = props => {
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
-      color: "neutral",
       children: [jsxRuntime.jsx(PageTopBar, {
         color: "neutral",
         previousPathLabel: props.previousPathLabel,
@@ -1657,7 +1616,6 @@ const TabularMainPage = props => {
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
-      color: "surface",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
@@ -1756,10 +1714,8 @@ const getLink = msg => jsxRuntime.jsx("a", {
 });
 const PageNotFound = () => {
   const intl = reactIntl.useIntl();
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: themedValue(PageNotFoundSVG__default["default"], PageNotFoundSVGRebranding__default["default"]),
+    imageSrc: PageNotFoundSVG__default["default"],
     title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages$2.title)),
     label: intl.formatMessage(messages$2.title),
     paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2(_objectSpread$2({}, messages$2.paragraph1), {}, {
@@ -1796,10 +1752,8 @@ const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
 });
 const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: themedValue(FailedAuthorizationSVG__default["default"], FailedAuthorizationSVGRebranding__default["default"]),
+    imageSrc: FailedAuthorizationSVG__default["default"],
     title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
     label: intl.formatMessage(messages$1.title),
     paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.paragraph1)),
@@ -2034,15 +1988,13 @@ var _ref$1 = {
   styles: "height:18px;svg{height:18px;width:12px;}"
 } ;
 const IsProduction = () => {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(CustomStamp, {
     tone: "positive",
     label: messages.ProjectProduction,
     icon: jsxRuntime.jsx("div", {
       css: _ref$1,
       children: jsxRuntime.jsx(icons.DotIcon, {
-        color: themedValue('primary', 'success')
+        color: "success"
       })
     })
   });