@commercetools-frontend/application-components 24.11.0 → 24.13.0

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

@@ -18,6 +18,7 @@ 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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _styled = require('@emotion/styled/base');
@@ -36,6 +37,7 @@ var omitBy = require('lodash/omitBy');
 var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
@@ -61,6 +63,7 @@ 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 Card__default = /*#__PURE__*/_interopDefault(Card);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
@@ -82,18 +85,20 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "24.11.0";
+var version = "24.13.0";
+
+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.
 // https://github.com/commercetools/merchant-center-application-kit/pull/3353
 const themesOverrides = {
   default: {
-    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`,
+    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"),
     backgroundColorForNavbar: designSystem.designTokens.colorPrimary10,
     backgroundColorForNavbarHeader: designSystem.designTokens.colorPrimary10,
     fontColorForTabLabelWhenActive: designSystem.designTokens.colorPrimary
@@ -196,11 +201,10 @@ const getModalContentStyles = props => {
 
   // To ensure that the mouse click on the overlay surface goes "through"
   // and triggers the modal to close, we need to turn off the pointer events.
-  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;position:relative;pointer-events:none;z-index:", typeof props.zIndex === 'number' ?
-  // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
+  const baseStyles = /*#__PURE__*/react.css("display:grid;height:100%;width:100%;outline:none;position:relative;pointer-events:none;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
   // We're assigning value 1 unit higher than the overlay to ensure the content is on top.
   // It's safe to do that since the modal is topmost in the stacking layer.
-  `${props.zIndex + 1} !important` : 'auto', ";", gridStyle, ";" + ("" ), "" );
+  "".concat(props.zIndex + 1, " !important") : 'auto', ";", gridStyle, ";" + ("" ), "" );
   return baseStyles;
 };
 const ClickableDialogContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
@@ -212,7 +216,7 @@ const DialogOverlay = /*#__PURE__*/_styled__default["default"]("div", {
   let zIndex = _ref.zIndex;
   return (
     // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-    typeof zIndex === 'number' ? `${zIndex} !important` : 'auto'
+    typeof zIndex === 'number' ? "".concat(zIndex, " !important") : 'auto'
   );
 }, ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ));
 const DialogContent$1 = /*#__PURE__*/_styled__default["default"]("div", {
@@ -223,7 +227,7 @@ const DialogContent$1 = /*#__PURE__*/_styled__default["default"]("div", {
 } );
 
 const _excluded$j = ["size", "getParentSelector"];
-const getDefaultParentSelector$1 = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+const getDefaultParentSelector$1 = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 const GridArea = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elx55gk0"
 } )("grid-area:", props => props.name, ";" + ("" ));
@@ -491,7 +495,7 @@ FormDialog.TextTitle = TextTitle;
 
 const CustomViewSelector = /*#__PURE__*/react$1.lazy(() => {
   if (typeof window !== 'undefined' && typeof window.app !== 'undefined') {
-    return Promise.resolve().then(function () { return require('./custom-views-selector-7c2c7fe4.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
+    return Promise.resolve().then(function () { return require('./custom-views-selector-47a0dbe6.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
   }
   return _Promise__default["default"].resolve({
     default: () => null
@@ -585,7 +589,7 @@ const PageHeader = props => {
         truncate: true
       }), props.children]
     }), jsxRuntime.jsx(CustomViewSelector, {
-      margin: `${designSystem.designTokens.spacing40} 0 0 0`,
+      margin: "".concat(designSystem.designTokens.spacing40, " 0 0 0"),
       customViewLocatorCode: props.customViewLocatorCode
     })]
   });
@@ -679,6 +683,7 @@ const ModalPageTopBar = _ref3 => {
 };
 ModalPageTopBar.displayName = 'ModalPageTopBar';
 
+var _templateObject;
 const stylesBySize = {
   '10': {
     width: '600px',
@@ -697,14 +702,7 @@ const stylesBySize = {
     transitionTime: 300
   }
 };
-const overlayShow = react.keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
+const overlayShow = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
 
 // we can't use Overlay from Radix-ui because it doesn't appear in DOM when Dialog.Root is rendered with `modal={false}`
 const ModalOverlay = /*#__PURE__*/_styled__default["default"]("div", {
@@ -713,7 +711,7 @@ const ModalOverlay = /*#__PURE__*/_styled__default["default"]("div", {
   let zIndex = _ref.zIndex;
   return (
     // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
-    typeof zIndex === 'number' ? `${zIndex} !important` : 'inherit'
+    typeof zIndex === 'number' ? "".concat(zIndex, " !important") : 'inherit'
   );
 }, ";opacity:0;", _ref2 => {
   let size = _ref2.size;
@@ -723,32 +721,32 @@ const ModalOverlay = /*#__PURE__*/_styled__default["default"]("div", {
 const getContentShowAnimation = size => react.keyframes({
   '0%': {
     opacity: 0,
-    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+    transform: "translate3d(".concat(size !== 'scale' ? stylesBySize[size].width : '30px', ", 0, 0)")
   },
   '100%': {
     opacity: 1,
-    transform: `translate3d(0, 0, 0)`
+    transform: "translate3d(0, 0, 0)"
   }
 });
 const getContentHideAnimation = size => react.keyframes({
   '0%': {
     opacity: 1,
-    transform: `translate3d(0, 0, 0)`
+    transform: "translate3d(0, 0, 0)"
   },
   '100%': {
     opacity: 0,
-    transform: `translate3d(${size !== 'scale' ? stylesBySize[size].width : '30px'}, 0, 0)`
+    transform: "translate3d(".concat(size !== 'scale' ? stylesBySize[size].width : '30px', ", 0, 0)")
   }
 });
 const ModalContent = /*#__PURE__*/_styled__default["default"](reactDialog.Content, {
   shouldForwardProp: prop => prop !== 'size',
   target: "e1jbmsa0"
 } )("position:absolute;top:0;right:0;height:100%;width:", _ref3 => {
+  var _context;
   let size = _ref3.size;
-  return size !== 'scale' ?
-  // In case we're using a specific size, we want it to be used until there's no space left.
+  return 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[size].width}, calc(100% - ${constants.PORTALS_CONTAINER_INDENTATION_SIZE})) !important` : stylesBySize.scale.width;
+  _concatInstanceProperty__default["default"](_context = "min(".concat(stylesBySize[size].width, ", calc(100% - ")).call(_context, constants.PORTALS_CONTAINER_INDENTATION_SIZE, ")) !important") : stylesBySize.scale.width;
 }, ";display:flex;flex-direction:column;background-color:", designSystem.designTokens.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;z-index:inherit;&[data-state='open']{animation:", _ref4 => {
   let size = _ref4.size;
   return getContentShowAnimation(size);
@@ -779,7 +777,7 @@ const HiddenEmptyDialogTitle = () => jsxRuntime.jsx("div", {
 // instead of a specific element that will be cleaned up, resulting in
 // console errors (even though the test passes). We only need to to this in
 // test environment.
-const getDefaultParentSelector = () => document.querySelector(`#${constants.PORTALS_CONTAINER_ID}`);
+const getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
@@ -852,7 +850,7 @@ const ModalPage = _ref => {
           onInteractOutside: e => {
             // Prevent only the modal from closing, handle all other events
             const overlay = document.querySelector('[data-role="modal-overlay-clickable"]');
-            if (!overlay?.contains(e.target)) {
+            if (!(overlay !== null && overlay !== void 0 && overlay.contains(e.target))) {
               e.preventDefault();
             }
           },
@@ -1086,7 +1084,7 @@ const TabularModalPage = _ref => {
       })
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelector, {
-        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCodes: props.customViewLocatorCodes
       })
     }), jsxRuntime.jsx(ModalContentWrapper, {
@@ -1133,13 +1131,17 @@ const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
-const getCustomViewsSelectorMargin = hasContentBelow => `${designSystem.designTokens.spacing40} 0 ${hasContentBelow ? designSystem.designTokens.spacing40 : '0'} 0`;
+const getCustomViewsSelectorMargin = hasContentBelow => {
+  var _context;
+  return _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context, 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
 // does not recognize the object shape.
 
 const CustomFormDetailPage = _ref => {
+  var _props$title;
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$8);
@@ -1150,7 +1152,7 @@ const CustomFormDetailPage = _ref => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title ?? '',
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(CustomViewSelector, {
@@ -1236,6 +1238,7 @@ InfoDetailPage.PageHeaderTitle = PageHeaderTitle;
 
 const _excluded$6 = ["hideControls"];
 const TabularDetailPage = _ref => {
+  var _props$title;
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$6);
@@ -1246,7 +1249,7 @@ const TabularDetailPage = _ref => {
         previousPathLabel: props.previousPathLabel,
         onClick: props.onPreviousPathClick
       }), props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title ?? '',
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1260,7 +1263,7 @@ const TabularDetailPage = _ref => {
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelector, {
-        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCodes: props.customViewLocatorCodes
       })
     }), jsxRuntime.jsx(ContentWrapper$2, {
@@ -1280,7 +1283,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-b182d2dd.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-a0d532d4.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1295,8 +1298,9 @@ const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
 const _excluded$5 = ["hideControls", "hideDivider"];
-const headerRowMargin = `${designSystem.designTokens.spacing40} 0 0 0`;
+const headerRowMargin = "".concat(designSystem.designTokens.spacing40, " 0 0 0");
 const CustomFormMainPage = _ref => {
+  var _props$title;
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     _ref$hideDivider = _ref.hideDivider,
@@ -1305,7 +1309,7 @@ const CustomFormMainPage = _ref => {
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(MainPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title ?? '',
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(CustomViewSelector, {
@@ -1397,13 +1401,14 @@ InfoMainPage.PageHeaderTitle = PageHeaderTitle;
 
 const _excluded$3 = ["hideControls"];
 const TabularMainPage = _ref => {
+  var _props$title;
   let _ref$hideControls = _ref.hideControls,
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return jsxRuntime.jsxs(PageWrapper, {
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-        title: props.title ?? '',
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
         titleSize: "big"
       }), jsxRuntime.jsx(ControlsContainter, {
@@ -1417,7 +1422,7 @@ const TabularMainPage = _ref => {
       })]
     }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
       children: jsxRuntime.jsx(CustomViewSelector, {
-        margin: `${designSystem.designTokens.spacing30} 0 0 0`,
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
         customViewLocatorCodes: props.customViewLocatorCodes
       })
     }), jsxRuntime.jsx(ContentWrapper$2, {
@@ -1750,8 +1755,9 @@ const messages$1 = reactIntl.defineMessages({
 
 const isIframeReady = iFrameElementRef => {
   try {
-    return iFrameElementRef?.contentWindow?.document.readyState === 'complete';
-  } catch {
+    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';
+  } catch (_unused) {
     // 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
     // a URL from our very same domain (the custom view is proxied through our http-proxy service).
@@ -1771,15 +1777,20 @@ 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 => context.project?.key);
+  const projectKey = applicationShellConnectors.useApplicationContext(context => {
+    var _context$project;
+    return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
+  });
   const featureFlags = reactBroadcast.useAllFeatureToggles();
   const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
   const showNotification = actionsGlobal.useShowNotification();
   const intl = reactIntl.useIntl();
   const hasSentInitializationMessages = react$1.useRef(false);
   const sendInitializationMessages = react$1.useCallback(() => {
+    var _iFrameElementRef$cur, _context;
     // If we have already sent the initialization messages, do not send them again.
     // The message can be sent either as a response to the CUSTOM_VIEW_READY message
     // or as a result of a setTimeout after 500ms. In any case, this message should be sent only once.
@@ -1788,12 +1799,12 @@ function CustomViewLoader(props) {
     }
 
     // Transfer port2 to the iFrame so it can send messages back privately
-    iFrameElementRef.current?.contentWindow?.postMessage(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
+    (_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]);
 
     // Send the initialization message to the iFrame
     iFrameCommunicationChannel.current.port1.postMessage({
       source: constants.CUSTOM_VIEWS_EVENTS_META.HOST_APPLICATION_CODE,
-      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
+      destination: _concatInstanceProperty__default["default"](_context = "".concat(constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX)).call(_context, props.customView.id),
       eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
       eventData: {
         context: {
@@ -1863,31 +1874,31 @@ function CustomViewLoader(props) {
     window.addEventListener('message', messageFromIFrameHandler);
     return () => {
       window.removeEventListener('message', messageFromIFrameHandler);
-      communicationChannel?.port1.close();
+      communicationChannel === null || communicationChannel === void 0 || 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: ${props.customView.type}. Supported types: ['CustomPanel'].`));
+    sentry.reportErrorToSentry(new Error("CustomViewLoader: Provided Custom View has an unsupported type: ".concat(props.customView.type, ". Supported types: ['CustomPanel'].")));
     return null;
   }
-  const panelSize = props.customView.typeSettings?.size?.toLocaleLowerCase() || 'large';
+  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 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: ${props.customView.defaultLabel}`,
+    title: "Custom View: ".concat(props.customView.defaultLabel),
     hideTopBar: true,
     children: jsxRuntime.jsx(ContentWrapper, {
       children: jsxRuntime.jsx(CustomPanelIframe, {
-        id: `custom-view-${props.customView.id}`,
-        title: `Custom View: ${props.customView.defaultLabel}`,
+        id: "custom-view-".concat(props.customView.id),
+        title: "Custom View: ".concat(props.customView.defaultLabel),
         ref: iFrameElementRef,
         src: iFrameUrl,
         onLoad: onLoadSuccessHandler
-      }, `custom-view-${props.customView.id}`)
+      }, "custom-view-".concat(props.customView.id))
     })
   });
 }
@@ -1988,20 +1999,21 @@ 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 ?? '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 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 modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
   const portalsContainerRef = react$1.useRef(null);
-  const globalNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsGlobalRef);
-  const pageNotificationsElementDimensions = useObserverElementDimensions(ref?.current?.notificationsPageRef);
+  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 _useState3 = react$1.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     stackingLayers = _useState4[0],