@commercetools-frontend/application-components 22.30.2 → 22.31.0

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

@@ -18,7 +18,6 @@ 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');
 var _styled = require('@emotion/styled/base');
@@ -65,7 +64,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var Modal__default = /*#__PURE__*/_interopDefault(Modal);
 var Card__default = /*#__PURE__*/_interopDefault(Card);
@@ -90,20 +88,18 @@ 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.30.2";
-
-var _context, _context2, _context3, _context4, _context5;
+var version = "22.31.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.
 // https://github.com/commercetools/merchant-center-application-kit/pull/3353
 const themesOverrides = {
   default: {
-    marginForCustomViewsSelectorAsTabular: "0 ".concat(designSystem.designTokens.spacing55),
-    marginForPageContent: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing50, " ")).call(_context, designSystem.designTokens.spacing55),
-    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"),
+    marginForCustomViewsSelectorAsTabular: `0 ${designSystem.designTokens.spacing55}`,
+    marginForPageContent: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55}`,
+    paddingForDetailPageHeader: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55} ${designSystem.designTokens.spacing40}`,
+    paddingForMainPageHeader: `${designSystem.designTokens.spacing50} ${designSystem.designTokens.spacing55} 0`,
+    paddingForTabularPageHeader: `${designSystem.designTokens.spacing40} ${designSystem.designTokens.spacing55} 0`,
     backgroundColorForNavbar: designSystem.designTokens.colorPrimary10,
     backgroundColorForNavbarHeader: designSystem.designTokens.colorPrimary10,
     fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary
@@ -207,12 +203,13 @@ const getModalContentStyles = props => {
   const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;pointer-events:none;", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
-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;" + ("" ), "" );
+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.
+`${props.zIndex} !important` : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
 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 getDefaultParentSelector$1 = () => document.querySelector(`#${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>`.
@@ -320,7 +317,7 @@ const DialogHeader = props => jsxRuntime.jsx("div", {
       label: "Close dialog",
       onClick: props.onClose,
       icon: jsxRuntime.jsx(icons.CloseIcon, {}),
-      size: "medium"
+      size: "30"
     })]
   })
 });
@@ -366,18 +363,24 @@ const DialogFooter = props => {
   return jsxRuntime.jsx("div", {
     css: /*#__PURE__*/react.css("margin-top:", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
     children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-      scale: "m",
       alignItems: "center",
-      justifyContent: "flex-end",
-      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$6({
-        label: getFormattedLabel(props.labelPrimary, intl),
-        onClick: props.onConfirm,
-        isDisabled: props.isPrimaryButtonDisabled
-      }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+      justifyContent: "space-between",
+      children: [jsxRuntime.jsx("div", {
+        children: props.footerContent
+      }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+        scale: "m",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        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$6({
+          label: getFormattedLabel(props.labelPrimary, intl),
+          onClick: props.onConfirm,
+          isDisabled: props.isPrimaryButtonDisabled
+        }, filterDataAttributes(props.dataAttributesPrimaryButton)))]
+      })]
     })
   });
 };
@@ -447,7 +450,8 @@ const FormDialog = props => jsxRuntime.jsxs(DialogContainer, {
     onConfirm: props.onPrimaryButtonClick,
     dataAttributesSecondaryButton: props.dataAttributesSecondaryButton,
     dataAttributesPrimaryButton: props.dataAttributesPrimaryButton,
-    iconLeftSecondaryButton: props.iconLeftSecondaryButton
+    iconLeftSecondaryButton: props.iconLeftSecondaryButton,
+    footerContent: props.footerContent
   })]
 });
 FormDialog.propTypes = {};
@@ -527,7 +531,7 @@ const ModalPageTopBar = props => {
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
       }),
-      size: "big"
+      size: "40"
     })]
   });
 };
@@ -553,14 +557,13 @@ const stylesBySize = {
     transitionTime: 300
   }
 };
-const getContainerStyles = props => {
-  var _context;
-  return /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ? // In case we're using a specific size, we want it to be used until there's no space left.
-  // In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
-  _concatInstanceProperty__default["default"](_context = "min(".concat(stylesBySize[props.size].width, ", calc(100% - ")).call(_context, constants.PORTALS_CONTAINER_INDENTATION_SIZE, ")) !important") : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
-};
-const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-"".concat(props.zIndex, " !important") : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+const getContainerStyles = props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ?
+// In case we're using a specific size, we want it to be used until there's no space left.
+// In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+`min(${stylesBySize[props.size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ?
+// Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+`${props.zIndex} !important` : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
 var _ref3 = {
   name: "1ffv7m4",
   styles: "transform:translate3d(0, 0, 0)!important"
@@ -580,7 +583,7 @@ const getBeforeCloseOverlayAnimation = () => _ref$5;
 
 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 getDefaultParentSelector = () => document.querySelector(`#${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>`.
@@ -629,7 +632,6 @@ const ModalPage = props => {
   }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
   return jsxRuntime.jsx(react.ClassNames, {
     children: _ref => {
-      var _props$afterOpenStyle;
       let makeClassName = _ref.css;
       return jsxRuntime.jsxs(Modal__default["default"], {
         isOpen: forceClose === true ? false : props.isOpen,
@@ -644,7 +646,7 @@ const ModalPage = props => {
         },
         className: {
           base: makeClassName(getContainerStyles(props)),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
+          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName(props.afterOpenStyles ?? getAfterOpenContainerAnimation()),
           beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
         },
         contentLabel: props.title,
@@ -683,8 +685,7 @@ const messages$4 = reactIntl.defineMessages({
 
 const isIframeReady = iFrameElementRef => {
   try {
-    var _iFrameElementRef$con;
-    return (iFrameElementRef === null || iFrameElementRef === void 0 || (_iFrameElementRef$con = iFrameElementRef.contentWindow) === null || _iFrameElementRef$con === void 0 ? void 0 : _iFrameElementRef$con.document.readyState) === 'complete';
+    return iFrameElementRef?.contentWindow?.document.readyState === 'complete';
   } catch {
     // Trying to access the contentWindow of a cross-origin iFrame will throw an error.
     // We are not supposed to even get here because the iFrame must use
@@ -705,13 +706,9 @@ const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
   styles: "height:100%;width:100%;border:none"
 } );
 function CustomViewLoader(props) {
-  var _props$customView$typ;
   const iFrameElementRef = react$1.useRef(null);
   const dataLocale = applicationShellConnectors.useApplicationContext(context => context.dataLocale);
-  const projectKey = applicationShellConnectors.useApplicationContext(context => {
-    var _context$project;
-    return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
-  });
+  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
   const featureFlags = reactBroadcast.useAllFeatureToggles();
   const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
   const showNotification = actionsGlobal.useShowNotification();
@@ -729,7 +726,6 @@ function CustomViewLoader(props) {
   // onLoad handler is called from the iFrame even where the URL is not valid
   // (blocked by CORS, 404, etc.) so we need to make sure the iFrame is ready
   const onLoadSuccessHandler = react$1.useCallback(() => {
-    var _iFrameElementRef$cur, _context;
     // Show error and block if the iFrame is not ready
     // (error loading it)
     if (!isIframeReady(iFrameElementRef.current)) {
@@ -745,12 +741,12 @@ function CustomViewLoader(props) {
     iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
 
     // Transfer port2 to the iFrame so it can send messages back privately
-    (_iFrameElementRef$cur = iFrameElementRef.current) === null || _iFrameElementRef$cur === void 0 || (_iFrameElementRef$cur = _iFrameElementRef$cur.contentWindow) === null || _iFrameElementRef$cur === void 0 || _iFrameElementRef$cur.postMessage(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
+    iFrameElementRef.current?.contentWindow?.postMessage(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
 
     // Send the initialization message to the iFrame
     iFrameCommunicationChannel.current.port1.postMessage({
       source: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
-      destination: _concatInstanceProperty__default["default"](_context = "".concat(constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX)).call(_context, props.customView.id),
+      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
       eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
       eventData: {
         context: {
@@ -770,31 +766,31 @@ function CustomViewLoader(props) {
     // Close the channel when the component unmounts
     const communicationChannel = iFrameCommunicationChannel.current;
     return () => {
-      communicationChannel === null || communicationChannel === void 0 || communicationChannel.port1.close();
+      communicationChannel?.port1.close();
     };
   }, []);
 
   // Currently we only support custom panels
   if (props.customView.type !== 'CustomPanel') {
-    sentry.reportErrorToSentry(new Error("CustomViewLoader: Provided Custom View has an unsupported type: ".concat(props.customView.type, ". Supported types: ['CustomPanel'].")));
+    sentry.reportErrorToSentry(new Error(`CustomViewLoader: Provided Custom View has an unsupported type: ${props.customView.type}. Supported types: ['CustomPanel'].`));
     return null;
   }
-  const panelSize = ((_props$customView$typ = props.customView.typeSettings) === null || _props$customView$typ === void 0 || (_props$customView$typ = _props$customView$typ.size) === null || _props$customView$typ === void 0 ? void 0 : _props$customView$typ.toLocaleLowerCase()) || 'large';
+  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
   const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
   return jsxRuntime.jsx(ModalPage, {
     isOpen: true,
     onClose: props.onClose,
     size: panelSize === 'small' ? 10 : 30,
-    title: "Custom View: ".concat(props.customView.defaultLabel),
+    title: `Custom View: ${props.customView.defaultLabel}`,
     hideTopBar: true,
     children: jsxRuntime.jsx(ContentWrapper$2, {
       children: jsxRuntime.jsx(CustomPanelIframe, {
-        id: "custom-view-".concat(props.customView.id),
-        title: "Custom View: ".concat(props.customView.defaultLabel),
+        id: `custom-view-${props.customView.id}`,
+        title: `Custom View: ${props.customView.defaultLabel}`,
         ref: iFrameElementRef,
         src: iFrameUrl,
         onLoad: onLoadSuccessHandler
-      }, "custom-view-".concat(props.customView.id))
+      }, `custom-view-${props.customView.id}`)
     })
   });
 }
@@ -809,12 +805,11 @@ var messages$3 = reactIntl.defineMessages({
 
 var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useCustomViewsConnector = _ref => {
-  var _enableCustomViews$va, _data$allCustomViewsI;
   let customViewLocatorCode = _ref.customViewLocatorCode;
   const enableCustomViews = reactBroadcast.useFlagVariation(constants.featureFlags.CUSTOM_VIEWS);
   const areCustomViewsEnabled =
   // @ts-ignore In case it's coming from the MC API, it's an object { value: boolean }.
-  ((_enableCustomViews$va = enableCustomViews === null || enableCustomViews === void 0 ? void 0 : enableCustomViews.value) !== null && _enableCustomViews$va !== void 0 ? _enableCustomViews$va : enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
+  (enableCustomViews?.value ?? enableCustomViews) && process.env.DISABLE_CUSTOM_VIEWS_FEATURE !== 'true';
   const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
       variables: {
         customViewLocatorCode
@@ -828,7 +823,7 @@ const useCustomViewsConnector = _ref => {
     error = _useMcQuery.error,
     loading = _useMcQuery.loading;
   return {
-    customViews: (data === null || data === void 0 || (_data$allCustomViewsI = data.allCustomViewsInstallationsByLocator) === null || _data$allCustomViewsI === void 0 ? void 0 : _mapInstanceProperty__default["default"](_data$allCustomViewsI).call(_data$allCustomViewsI, installation => installation.customView)) || [],
+    customViews: data?.allCustomViewsInstallationsByLocator?.map(installation => installation.customView) || [],
     error,
     loading
   };
@@ -916,7 +911,7 @@ function CustomViewSelector(props) {
             const isNotLastItem = index !== customViews.length - 1;
             return jsxRuntime.jsxs(react$1.Fragment, {
               children: [jsxRuntime.jsx(CustomViewSelectorItem, {
-                selected: (selectedCustomView === null || selectedCustomView === void 0 ? void 0 : selectedCustomView.id) === customView.id,
+                selected: selectedCustomView?.id === customView.id,
                 onClick: () => {
                   setSelectedCustomView(customView);
                 },
@@ -1031,7 +1026,7 @@ const PageHeader = props => {
         truncate: true
       }), props.children]
     }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      margin: "".concat(designSystem.designTokens.spacing40, " 0 0 0"),
+      margin: `${designSystem.designTokens.spacing40} 0 0 0`,
       customViewLocatorCode: props.customViewLocatorCode
     })]
   });
@@ -1219,7 +1214,7 @@ const useCustomViewLocatorSelector = function () {
     });
   });
   return {
-    currentCustomViewLocatorCode: customViewLocator === null || customViewLocator === void 0 ? void 0 : customViewLocator[0]
+    currentCustomViewLocatorCode: customViewLocator?.[0]
   };
 };
 
@@ -1284,7 +1279,7 @@ const TabularModalPage = props => {
       })
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsxRuntime.jsx(ModalContentWrapper, {
@@ -1333,10 +1328,7 @@ const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
-const getCustomViewsSelectorMargin = hasContentBelow => {
-  var _context;
-  return _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context, hasContentBelow ? designSystem.designTokens.spacing40 : '0', " 0");
-};
+const getCustomViewsSelectorMargin = hasContentBelow => `${designSystem.designTokens.spacing40} 0 ${hasContentBelow ? designSystem.designTokens.spacing40 : '0'} 0`;
 
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
@@ -1346,7 +1338,6 @@ const defaultProps$7 = {
   hideControls: false
 };
 const CustomFormDetailPage = props => {
-  var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(DetailPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
@@ -1354,7 +1345,7 @@ const CustomFormDetailPage = props => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
@@ -1444,7 +1435,6 @@ const defaultProps$5 = {
   hideControls: false
 };
 const TabularDetailPage = props => {
-  var _props$title;
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
@@ -1454,7 +1444,7 @@ const TabularDetailPage = props => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1468,7 +1458,7 @@ const TabularDetailPage = props => {
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsxRuntime.jsx(ContentWrapper$1, {
@@ -1490,7 +1480,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-6cc4616e.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-b24f0bd7.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1504,13 +1494,12 @@ const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
-const headerRowMargin = "".concat(designSystem.designTokens.spacing40, " 0 0 0");
+const headerRowMargin = `${designSystem.designTokens.spacing40} 0 0 0`;
 const CustomFormMainPage = props => {
-  var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(MainPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
@@ -1612,13 +1601,12 @@ const defaultProps$2 = {
   hideControls: false
 };
 const TabularMainPage = props => {
-  var _props$title;
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        title: props.title ?? '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1632,7 +1620,7 @@ const TabularMainPage = props => {
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
         customViewLocatorCode: currentCustomViewLocatorCode
       })
     }), jsxRuntime.jsx(ContentWrapper$1, {
@@ -1923,7 +1911,7 @@ function Drawer(props) {
             icon: jsxRuntime.jsx(LargeIconWrapper, {
               children: jsxRuntime.jsx(icons.CloseIcon, {})
             }),
-            size: "big"
+            size: "40"
           })]
         }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
@@ -2056,21 +2044,20 @@ var _ref = {
   styles: "display:flex;height:1px;margin-top:-1px"
 } ;
 const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
-  var _props$offsetTop, _props$offsetLeft, _props$offsetLeftOnEx, _props$containerSelec, _props$zIndex, _props$baseModalZInde, _current, _current2;
   // Initialize props with default values.
   // NOTE: using `defaultProps` with `forwardRef` results in the type declarations
   // to ignore the `defaultProps`. Therefore, the default props are typed
   // as optional and we initialize the value here with the default values.
-  const offsetTop = (_props$offsetTop = props.offsetTop) !== null && _props$offsetTop !== void 0 ? _props$offsetTop : '0px';
-  const offsetLeft = (_props$offsetLeft = props.offsetLeft) !== null && _props$offsetLeft !== void 0 ? _props$offsetLeft : '0px';
-  const offsetLeftOnExpandedMenu = (_props$offsetLeftOnEx = props.offsetLeftOnExpandedMenu) !== null && _props$offsetLeftOnEx !== void 0 ? _props$offsetLeftOnEx : '0px';
-  const containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
-  const zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
-  const baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
+  const offsetTop = props.offsetTop ?? '0px';
+  const offsetLeft = props.offsetLeft ?? '0px';
+  const offsetLeftOnExpandedMenu = props.offsetLeftOnExpandedMenu ?? '0px';
+  const containerSelectorToPreventScrollingOnOpen = props.containerSelectorToPreventScrollingOnOpen ?? 'main';
+  const zIndex = props.zIndex ?? 10000;
+  const baseModalZIndex = props.baseModalZIndex ?? 1000;
   const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
   const portalsContainerRef = react$1.useRef(null);
-  const globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
-  const pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
+  const globalNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsGlobalRef);
+  const pageNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsPageRef);
   const _useState3 = react$1.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     stackingLayers = _useState4[0],