@commercetools-frontend/application-components 22.3.0 → 22.3.1

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

@@ -14,10 +14,10 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var designSystem = require('@commercetools-uikit/design-system');
 var Text = require('@commercetools-uikit/text');
 var utils = require('@commercetools-uikit/utils');
 var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react$1 = require('react');
@@ -38,8 +38,8 @@ var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
-var PageNotFoundIllustration = require('@commercetools-frontend/assets/images/page-application-disabled.svg');
-var FailedAuthorizationIllustration = require('@commercetools-frontend/assets/images/folder-full-locked.svg');
+var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
+var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
@@ -69,15 +69,15 @@ var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
-var PageNotFoundIllustration__default = /*#__PURE__*/_interopDefault(PageNotFoundIllustration);
-var FailedAuthorizationIllustration__default = /*#__PURE__*/_interopDefault(FailedAuthorizationIllustration);
+var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
+var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.3.0";
+var version = "22.3.1";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
 // TODO: move to uikit?
 const colorAccent10 = 'hsl(195, 35.2941176471%, 10%)';
@@ -86,54 +86,6 @@ const colorAccent90 = 'hsl(195, 35.2941176471%, 90%)';
 const newShadow1 = '0px 2px 5px 0px rgba(0, 0, 0, 0.15)';
 const themesOverrides = {
   default: {
-    colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral,
-    colorForNavbarIcon: designSystem.designTokens.colorSurface,
-    colorForNavbarIconWhenActive: designSystem.designTokens.colorPrimary,
-    colorForNavbarLink: designSystem.designTokens.colorSurface,
-    colorForNavbarLinkWhenActive: designSystem.designTokens.colorPrimary,
-    colorForNavbarLinkWhenHovered: designSystem.designTokens.colorPrimary,
-    backgroundColorForMainPageDivider: designSystem.designTokens.colorNeutral60,
-    backgroundColorForNavbar: designSystem.designTokens.colorAccent,
-    backgroundColorForNavbarWhenActive: designSystem.designTokens.colorAccent30,
-    backgroundColorForNavbarWhenHovered: designSystem.designTokens.colorAccent30,
-    backgroundColorForPageHeader: designSystem.designTokens.colorNeutral95,
-    backgroundColorForTabularMainPageContent: designSystem.designTokens.colorNeutral95,
-    backgroundColorForUserMenuItemWhenHovered: designSystem.designTokens.colorNeutral90,
-    borderBottomForTabularPageHeader: "1px solid ".concat(designSystem.designTokens.colorNeutral),
-    borderColorForDialogDivider: designSystem.designTokens.colorNeutral,
-    borderColorForModalPageHeaderDivider: designSystem.designTokens.colorNeutral60,
-    borderColorForModalTopBarWhenSurface: designSystem.designTokens.colorNeutral,
-    fontSizeForNavbarLink: designSystem.designTokens.fontSize40,
-    fontWeightForNavbarLink: designSystem.designTokens.fontWeight500,
-    fontWeightForNavbarLinkWhenActive: designSystem.designTokens.fontWeight500,
-    fontWeightForNavbarLinkWhenHovered: designSystem.designTokens.fontWeight500,
-    heightForTab: '4px',
-    lineHeightForNavbarLink: designSystem.designTokens.lineHeight50,
-    marginBottomForPageTopBar: designSystem.designTokens.spacing20,
-    marginForDialogContainerContents: "".concat(designSystem.designTokens.spacing30, " 0"),
-    marginForModalPageHeader: "0 ".concat(designSystem.designTokens.spacing30),
-    marginForUserMenuItem: '0',
-    marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing30,
-    marginRightForAppbar: designSystem.designTokens.spacing30,
-    marginTopForDialogFooter: designSystem.designTokens.spacing30,
-    marginTopForPageSubtitle: designSystem.designTokens.spacing30,
-    marginTopForTabControls: designSystem.designTokens.spacing20,
-    paddingForDetailPageHeader: designSystem.designTokens.spacing30,
-    paddingForDialogContainer: "0",
-    paddingForDialogContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing20),
-    paddingForMainPageHeader: designSystem.designTokens.spacing30,
-    paddingForModalPageHeader: "".concat(designSystem.designTokens.spacing30, " 0"),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context2, designSystem.designTokens.spacing30),
-    paddingForPageContent: designSystem.designTokens.spacing30,
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing30, " ")).call(_context3, designSystem.designTokens.spacing30, " 0"),
-    paddingLeftForTabAsFirst: '0',
-    shadowForAppbar: designSystem.designTokens.shadow1,
-    shadowForNavbar: '6px 0 10px rgba(0, 0, 0, 0.16)',
-    widthForDialogAsMedium: designSystem.designTokens.constraint7,
-    widthForDialogAsLarge: designSystem.designTokens.constraint10,
-    widthForPageLayoutContentColumn: "calc(".concat(designSystem.designTokens.constraint15, " / 2)")
-  },
-  test: {
     colorForPageHeaderBottomBorder: designSystem.designTokens.colorNeutral90,
     colorForNavbarIcon: colorAccent90,
     colorForNavbarIconWhenActive: designSystem.designTokens.colorSurface,
@@ -158,7 +110,7 @@ const themesOverrides = {
     heightForTab: '2px',
     lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
     marginBottomForPageTopBar: designSystem.designTokens.spacing40,
-    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context4, designSystem.designTokens.spacing50, " 0"),
+    marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing50, " 0"),
     marginForModalPageHeader: "0 ".concat(appKitSpacing55),
     marginForUserMenuItem: "".concat(designSystem.designTokens.spacing10, " 0"),
     marginLeftForModalPageHeaderControls: designSystem.designTokens.spacing50,
@@ -166,14 +118,14 @@ const themesOverrides = {
     marginTopForDialogFooter: designSystem.designTokens.spacing50,
     marginTopForPageSubtitle: designSystem.designTokens.spacing20,
     marginTopForTabControls: designSystem.designTokens.spacing40,
-    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context5 = _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context6, appKitSpacing55, " ")).call(_context5, designSystem.designTokens.spacing40),
-    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context7, designSystem.designTokens.spacing30),
+    paddingForDetailPageHeader: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context3, appKitSpacing55, " ")).call(_context2, designSystem.designTokens.spacing40),
+    paddingForDialogContainer: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
     paddingForDialogContent: "".concat(designSystem.designTokens.spacing40, " 0 0"),
-    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context8, appKitSpacing55, " 0"),
-    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context9, designSystem.designTokens.spacing40),
-    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context10, appKitSpacing55, " 0"),
-    paddingForPageContent: _concatInstanceProperty__default["default"](_context11 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context11, appKitSpacing55),
-    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context12 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context12, appKitSpacing55, " 0"),
+    paddingForMainPageHeader: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context5, appKitSpacing55, " 0"),
+    paddingForModalPageHeader: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context6, designSystem.designTokens.spacing40),
+    paddingForModalTopBar: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context7, appKitSpacing55, " 0"),
+    paddingForPageContent: _concatInstanceProperty__default["default"](_context8 = "".concat(designSystem.designTokens.spacing50, " ")).call(_context8, appKitSpacing55),
+    paddingForTabularPageHeader: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing40, " ")).call(_context9, appKitSpacing55, " 0"),
     paddingLeftForTabAsFirst: designSystem.designTokens.spacing30,
     shadowForAppbar: newShadow1,
     shadowForNavbar: 'none',
@@ -205,15 +157,6 @@ const getDisabledLinkAtributes = isDisabled => isDisabled ? {
 } : {};
 const TabLabel = _ref => {
   let children = _ref.children;
-  const _useTheme = designSystem.useTheme(),
-    theme = _useTheme.theme;
-  if (theme === 'default') {
-    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-      as: "h4",
-      truncate: true,
-      children: children
-    });
-  }
   return jsxRuntime.jsx(Text__default["default"].Headline, {
     as: "h3",
     truncate: true,
@@ -272,6 +215,8 @@ const getConstraintForGridStyle = size => {
       return designSystem.designTokens.constraint12;
     case 13:
       return designSystem.designTokens.constraint13;
+    case 16:
+      return designSystem.designTokens.constraint16;
     case 'l':
       return designTokens.widthForDialogAsLarge;
     case 'scale':
@@ -379,16 +324,6 @@ const DialogContent = /*#__PURE__*/_styled__default["default"]("div", {
 } )("border-top:1px solid ", designTokens.borderColorForDialogDivider, ";padding:", designTokens.paddingForDialogContent, ";flex:1;overflow:auto;" + ("" ));
 
 const Title$1 = props => {
-  const _useTheme = designSystem.useTheme(),
-    theme = _useTheme.theme;
-  if (theme === 'default') {
-    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-      as: "h4",
-      title: props.title,
-      truncate: true,
-      children: props.title
-    });
-  }
   return jsxRuntime.jsx(Text__default["default"].Headline, {
     as: "h3",
     title: props.title,
@@ -543,12 +478,10 @@ const SubtitleWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epaiodd0"
 } )("margin-top:", designTokens.marginTopForPageSubtitle, ";" + ("" ));
 const Title = props => {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   switch (props.titleSize) {
     case 'big':
       return jsxRuntime.jsx(Text__default["default"].Headline, {
-        as: themedValue('h2', 'h1'),
+        as: "h1",
         title: props.title,
         truncate: props.truncate,
         children: props.title
@@ -563,8 +496,6 @@ const Title = props => {
   }
 };
 const Subtitle = props => {
-  const _useTheme2 = designSystem.useTheme(),
-    themedValue = _useTheme2.themedValue;
   if (!props.subtitle) {
     return null;
   }
@@ -577,7 +508,7 @@ const Subtitle = props => {
     children: jsxRuntime.jsx(Text__default["default"].Body, {
       title: typeof props.subtitle === 'string' ? props.subtitle : undefined,
       truncate: props.truncate,
-      tone: themedValue(undefined, 'secondary'),
+      tone: "secondary",
       children: props.subtitle
     })
   });
@@ -606,13 +537,11 @@ PageHeaderTitle.displayName = 'PageHeaderTitle';
 PageHeaderTitle.defaultProps = defaultProps$d;
 
 const PageHeader = props => {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
     children: [jsxRuntime.jsx(PageHeaderTitle, {
       title: props.title,
-      titleSize: themedValue('small', 'big'),
+      titleSize: "big",
       subtitle: props.subtitle,
       truncate: true
     }), props.children]
@@ -668,8 +597,6 @@ var _ref$4 = {
 } ;
 const ModalPageTopBar = props => {
   const intl = reactIntl.useIntl();
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsxs("div", {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
@@ -699,7 +626,7 @@ const ModalPageTopBar = props => {
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
       }),
-      size: themedValue('medium', 'big')
+      size: "big"
     })]
   });
 };
@@ -1001,8 +928,6 @@ const defaultProps$8 = {
   hideControls: false
 };
 const TabularModalPage = props => {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -1018,7 +943,7 @@ const TabularModalPage = props => {
       color: "neutral",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: props.title,
-        titleSize: themedValue('small', 'big'),
+        titleSize: "big",
         subtitle: props.subtitle,
         truncate: true
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1217,7 +1142,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-5d02cff6.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-6cbeff9f.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1310,13 +1235,11 @@ FormMainPage.PageHeaderTitle = PageHeaderTitle;
 FormMainPage.Intl = i18n.sharedMessages;
 
 const InfoMainPage = props => {
-  const _useTheme = designSystem.useTheme(),
-    themedValue = _useTheme.themedValue;
   return jsxRuntime.jsx(CustomFormMainPage, {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
-    hideDivider: themedValue(false, true),
+    hideDivider: true,
     children: props.children
   });
 };
@@ -1383,6 +1306,9 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
       scale: "m",
       children: [jsxRuntime.jsx("div", {
         children: jsxRuntime.jsx("img", {
+          style: {
+            height: designSystem.designTokens.constraint7
+          },
           src: props.imageSrc,
           alt: props.label
         })
@@ -1425,7 +1351,7 @@ const getLink = msg => jsxRuntime.jsx("a", {
 const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: PageNotFoundIllustration__default["default"],
+    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), {}, {
@@ -1463,7 +1389,7 @@ const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
 const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
-    imageSrc: FailedAuthorizationIllustration__default["default"],
+    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)),
@@ -1489,11 +1415,6 @@ const Container$1 = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(400px, 742px) 1fr;width:100%"
 } );
 function PageContentNarrow(props) {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.children
-  });
   return jsxRuntime.jsx(Container$1, {
     children: jsxRuntime.jsx(Content$1, {
       children: props.children
@@ -1536,16 +1457,11 @@ const Container = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "display:grid;grid-template-areas:'. content .';grid-template-columns:1fr minmax(800px, 1200px) 1fr;width:100%"
 } );
 function PageContentWide(props) {
-  const _useTheme = designSystem.useTheme(props.themeParentSelector),
-    isNewTheme = _useTheme.isNewTheme;
   const _Children$toArray = react$1.Children.toArray(props.children),
     _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
     leftChild = _Children$toArray2[0],
     rightChild = _Children$toArray2[1];
   utils.useWarning(props.columns !== '1' || !Boolean(rightChild), 'PageContentWide: This component only renders its first children when using a single column but you provided more that one.');
-  if (!isNewTheme) return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: props.children
-  });
   return jsxRuntime.jsx(Container, {
     children: jsxRuntime.jsx(Content, {
       columns: props.columns,