@commercetools-frontend/react-notifications 22.2.1 → 22.3.1

package/dist/commercetools-frontend-react-notifications.cjs.prod.js

@@ -16,9 +16,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var reactIntl = require('react-intl');
 var constants = require('@commercetools-frontend/constants');
-var designSystem = require('@commercetools-uikit/design-system');
 var hooks = require('@commercetools-uikit/hooks');
-var IconButton = require('@commercetools-uikit/icon-button');
 var icons = require('@commercetools-uikit/icons');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
 var utils = require('@commercetools-uikit/utils');
@@ -26,6 +24,7 @@ var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable
 var omitBy = require('lodash/omitBy');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var react$1 = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
@@ -51,7 +50,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
@@ -64,20 +62,18 @@ var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanc
 var isNumber__default = /*#__PURE__*/_interopDefault(isNumber);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.2.1";
+var version = "22.3.1";
 
 const Context = /*#__PURE__*/react.createContext(() => null);
-
 function NotificationProviderForCustomComponent(props) {
   return jsxRuntime.jsx(Context.Provider, {
     value: props.mapNotificationToComponent,
     children: props.children
   });
 }
-
 NotificationProviderForCustomComponent.propTypes = {};
 NotificationProviderForCustomComponent.displayName = 'NotificationProviderForCustomComponent';
-const useCustomNotificationComponent = () => react.useContext(Context); // Exports
+const useCustomNotificationComponent = () => react.useContext(Context);
 
 function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
@@ -92,144 +88,104 @@ var messages = reactIntl.defineMessages({
 });
 
 var _templateObject, _templateObject2;
-
 const getColorByType = value => {
   switch (value) {
     case constants.NOTIFICATION_KINDS_SIDE.success:
       return designSystem.designTokens.colorPrimary;
-
     case constants.NOTIFICATION_KINDS_SIDE.info:
       return designSystem.designTokens.colorInfo;
-
     case constants.NOTIFICATION_KINDS_SIDE.error:
       return designSystem.designTokens.colorError;
-
     case constants.NOTIFICATION_KINDS_SIDE.warning:
       return designSystem.designTokens.colorWarning;
-
     default:
       return 'transparent';
   }
 };
-
 const getBorderColor = notificationKind => {
   switch (notificationKind) {
     case constants.NOTIFICATION_KINDS_SIDE.success:
       return designSystem.designTokens.colorPrimary85;
-
     case constants.NOTIFICATION_KINDS_SIDE.info:
       return designSystem.designTokens.colorInfo85;
-
     case constants.NOTIFICATION_KINDS_SIDE.error:
       return designSystem.designTokens.colorError85;
-
     case constants.NOTIFICATION_KINDS_SIDE.warning:
       return designSystem.designTokens.colorWarning85;
-
     default:
       return 'transparent';
   }
 };
-
 const showNotificationAnimation = react$1.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    overflow: hidden;\n  }\n  100% {\n    max-height: 200px;\n  }\n"])));
 const showNotificationSideAnimation = react$1.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
-
 const getStylesForNotificationIcon = props => /*#__PURE__*/react$1.css("display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;width:48px;height:100%;color:", designSystem.designTokens.colorSurface, ";border-radius:3px 0 0 3px;background:", getColorByType(props.type), ";" + ("" ), "" );
-
-const getStylesForCloseIcon = props => /*#__PURE__*/react$1.css("display:flex;justify-content:center;", props.isNewTheme ? '& svg { width: 16px; height: 16px; }' : '', " ", props.isNewTheme && props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
-
+const getStylesForCloseIcon = props => /*#__PURE__*/react$1.css("display:flex;justify-content:center;& svg{width:16px;height:16px;}", props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
 const getStylesForContent = props => {
   const fontColor = props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? designSystem.designTokens.colorSolid : designSystem.designTokens.colorSurface;
-  return /*#__PURE__*/react$1.css("flex-basis:100%;flex-grow:1;padding:0 ", props.isNewTheme ? designSystem.designTokens.spacingM : designSystem.designTokens.spacingS, ";margin:0;font-size:", props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? props.isNewTheme ? '1rem' : '0.929rem' : 'inherit', ";color:", fontColor, ";p{color:", fontColor, ";}ul{padding:0;margin:0;list-style:none;}" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("flex-basis:100%;flex-grow:1;padding:", "0 ".concat(designSystem.designTokens.spacingM), ";margin:0;font-size:", props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? '1rem' : 'inherit', ";color:", fontColor, ";p{color:", fontColor, ";}ul{padding:0;margin:0;list-style:none;}" + ("" ), "" );
 };
-
 const getStylesForNotification = props => {
   const baseStyles = /*#__PURE__*/react$1.css("position:relative;display:flex;align-items:center;padding:", designSystem.designTokens.spacingM, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" );
   const pageStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;text-align:center;background-color:", props.fixed ? 'transparent' : getColorByType(props.type), ";>*+*{margin-left:", designSystem.designTokens.spacingS, ";}" + ("" ), "" );
-
   switch (props.domain) {
     case constants.NOTIFICATION_DOMAINS.GLOBAL:
       return /*#__PURE__*/react$1.css(pageStyles, ";background-color:", getColorByType(props.type), ";" + ("" ), "" );
-
     case constants.NOTIFICATION_DOMAINS.PAGE:
       return pageStyles;
-
     case constants.NOTIFICATION_DOMAINS.SIDE:
       {
-        const sideStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;padding:", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " 50px!important;text-align:left;background:", designSystem.designTokens.colorSurface, ";border:1px solid ", props.isNewTheme ? getBorderColor(props.type) : getColorByType(props.type), ";box-shadow:", props.isNewTheme ? '0px 2px 5px 0px rgba(0, 0, 0, 0.15)' : '0 1px 2px rgba(0, 0, 0, 0.24)', ";border-radius:", designSystem.designTokens.borderRadius6, ";word-break:break-word;hyphens:auto;" + ("" ), "" );
+        const sideStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;padding:", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " 50px!important;text-align:left;background:", designSystem.designTokens.colorSurface, ";border:1px solid ", getBorderColor(props.type), ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);border-radius:", designSystem.designTokens.borderRadius6, ";word-break:break-word;hyphens:auto;" + ("" ), "" );
         if (props.fixed) return sideStyles;
         return /*#__PURE__*/react$1.css(sideStyles, ";animation:", showNotificationSideAnimation, " 0.3s forwards;position:relative;z-index:10000;margin-top:", designSystem.designTokens.spacingL, "!important;right:", designSystem.designTokens.spacingXl, ";float:right;clear:both;max-width:50%;" + ("" ), "" );
       }
-
     default:
       return /*#__PURE__*/react$1.css("" , "" );
   }
 };
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const sequentialId = utils.createSequentialId('notification-');
-
 const NotificationIcon = props => {
   if (props.type === constants.NOTIFICATION_KINDS_SIDE.error) {
     return jsxRuntime.jsx(icons.ErrorIcon, {
       color: props.color
     });
   }
-
   if (props.type === constants.NOTIFICATION_KINDS_SIDE.info) {
-    return props.isNewTheme ? jsxRuntime.jsx(icons.InformationIcon, {
-      color: props.color
-    }) : jsxRuntime.jsx(icons.InfoIcon, {
+    return jsxRuntime.jsx(icons.InformationIcon, {
       color: props.color
     });
   }
-
   if (props.type === constants.NOTIFICATION_KINDS_SIDE.warning) {
     return jsxRuntime.jsx(icons.WarningIcon, {
       color: props.color
     });
   }
-
   return jsxRuntime.jsx(icons.CheckBoldIcon, {
     color: props.color
   });
 };
-
 NotificationIcon.propTypes = {};
 NotificationIcon.displayName = 'NotificationIcon';
 const defaultProps$1 = {
   fixed: false
 };
-
 const Notification = props => {
   const intl = reactIntl.useIntl();
   const id = hooks.useFieldId(undefined, sequentialId);
-
-  const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme,
-        themedValue = _useTheme.themedValue;
-
-  const Button = themedValue(IconButton__default["default"], SecondaryIconButton__default["default"]);
   return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
     role: "alertdialog",
     "aria-describedby": id,
-    css: getStylesForNotification(_objectSpread$4(_objectSpread$4({}, props), {}, {
-      isNewTheme
-    }))
+    css: getStylesForNotification(props)
   }, filterDataAttributes(props)), {}, {
     children: [jsxRuntime.jsx("div", {
       id: id,
-      css: getStylesForContent(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme
-      })),
+      css: getStylesForContent(props),
       children: props.children
     }), props.onCloseClick ? jsxRuntime.jsx("div", {
-      css: getStylesForCloseIcon(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme
-      })),
-      children: jsxRuntime.jsx(Button, {
+      css: getStylesForCloseIcon(props),
+      children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
         label: intl.formatMessage(messages.hideNotification),
         onClick: props.onCloseClick,
         icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
@@ -239,13 +195,11 @@ const Notification = props => {
       css: getStylesForNotificationIcon(props),
       children: jsxRuntime.jsx(NotificationIcon, {
         type: props.type,
-        color: "surface",
-        isNewTheme: isNewTheme
+        color: "surface"
       })
     }) : null]
   }));
 };
-
 Notification.propTypes = {};
 Notification.displayName = 'Notification';
 Notification.defaultProps = defaultProps$1;
@@ -392,38 +346,43 @@ var apiErrorMessages = reactIntl.defineMessages({
 });
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$3(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$3(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const regexInvalidOperationRequiredAttribute = /Required attribute '(.*)' cannot be removed/;
 
+// `error` fields for REST errors
+// `error.extensions` fields for GraphQL errors
 // The values passed to the Intl message must be a map of scalar values.
 // Some of the message values are already mapped in the `getSpecialFormattedMessageByErrorCode`
 // function. Here we map other possible error properties that can be
 // used in the message.
 const mapErrorFieldsToMessageValues = error => {
-  if (error.field) return {
-    field: error.field
-  };
-  if (error.referencedBy) return {
-    referencedBy: error.referencedBy
-  };
+  var _error$extensions, _error$extensions2;
+  const errorField = ((_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.field) || error.field;
+  if (errorField) {
+    return {
+      field: errorField
+    };
+  }
+  const errorReferencedBy = ((_error$extensions2 = error.extensions) === null || _error$extensions2 === void 0 ? void 0 : _error$extensions2.referencedBy) || error.referencedBy;
+  if (errorReferencedBy) {
+    return {
+      referencedBy: errorReferencedBy
+    };
+  }
   return {};
-}; // Type-guard validation for error code to be included in the message object keys.
-
+};
 
+// Type-guard validation for error code to be included in the message object keys.
 const hasErrorCodeAMatchingMessage = errorCode => errorCode in apiErrorMessages;
-
 const FormattedErrorMessage = props => {
   var _props$error$extensio, _props$error$extensio2, _context2;
-
-  const intl = reactIntl.useIntl(); // Attempt to map the error by code
-
+  const intl = reactIntl.useIntl();
+  // Attempt to map the error by code
   const extensionErrorCode = (_props$error$extensio = (_props$error$extensio2 = props.error.extensions) === null || _props$error$extensio2 === void 0 ? void 0 : _props$error$extensio2.code) !== null && _props$error$extensio !== void 0 ? _props$error$extensio : props.error.code;
   const messageCode = extensionErrorCode && hasErrorCodeAMatchingMessage(extensionErrorCode) ? apiErrorMessages[extensionErrorCode] : undefined;
   react.useEffect(() => {
     if (!messageCode) {
       var _context;
-
       // This error is not mapped / translated yet,
       // we log, report it to sentry and show the original error, unless `error.code` is `invalid_scope`
       // which an error code emitted for expired project(s)
@@ -434,115 +393,99 @@ const FormattedErrorMessage = props => {
       }
     }
   }, [extensionErrorCode, messageCode, props.error]);
-
   if (messageCode) {
     // The `error` object might contain extra fields for the specific `code`.
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: intl.formatMessage(messageCode, mapErrorFieldsToMessageValues(props.error))
     });
   }
-
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: _filterInstanceProperty__default["default"](_context2 = [props.error.message, props.error.detailedErrorMessage && "(".concat(props.error.detailedErrorMessage, ")")]).call(_context2, Boolean).join(' ')
   });
 };
-
 FormattedErrorMessage.propTypes = {
   error: _pt__default["default"].any.isRequired
 };
 FormattedErrorMessage.displayName = 'FormattedErrorMessage';
-
 const ApiErrorMessage = props => {
-  const intl = reactIntl.useIntl(); // Attempt to map the error to a specific error message
+  const intl = reactIntl.useIntl();
 
+  // Attempt to map the error to a specific error message
   const specialFormattedMessage = getSpecialFormattedMessageByErrorCode(props.error, intl);
-
   if (specialFormattedMessage) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: specialFormattedMessage
     });
   }
-
   return jsxRuntime.jsx(FormattedErrorMessage, _objectSpread$3({}, props));
 };
-
 ApiErrorMessage.propTypes = {};
 ApiErrorMessage.displayName = 'ApiErrorMessage';
-
 function getSpecialFormattedMessageByErrorCode(error, intl) {
-  var _error$extensions$cod, _error$extensions, _context3, _context4, _context5;
-
-  const extensionErrorCode = (_error$extensions$cod = (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code) !== null && _error$extensions$cod !== void 0 ? _error$extensions$cod : error.code;
-
+  var _error$extensions$cod, _error$extensions3, _context3, _context4, _context5;
+  const extensionErrorCode = (_error$extensions$cod = (_error$extensions3 = error.extensions) === null || _error$extensions3 === void 0 ? void 0 : _error$extensions3.code) !== null && _error$extensions$cod !== void 0 ? _error$extensions$cod : error.code;
   if (error.errorByExtension) {
     let extensionMessage;
-
     if (error.localizedMessage) {
       extensionMessage = error.localizedMessage[intl.locale];
     }
-
     return extensionMessage || error.message;
   }
+  if (!extensionErrorCode || extensionErrorCode === 'InvalidInput') return intl.formatMessage(apiErrorMessages.General);
 
-  if (!extensionErrorCode || extensionErrorCode === 'InvalidInput') return intl.formatMessage(apiErrorMessages.General); // TODO: this is a temporary solution until we have proper pages about 403
-
+  // TODO: this is a temporary solution until we have proper pages about 403
   if (extensionErrorCode === 'insufficient_scope') return intl.formatMessage(apiErrorMessages.Forbidden);
-
   if (extensionErrorCode === 'DuplicateField') {
-    if (error.field === 'slug') {
+    var _error$extensions4, _error$extensions5;
+    const errorField = ((_error$extensions4 = error.extensions) === null || _error$extensions4 === void 0 ? void 0 : _error$extensions4.field) || error.field;
+    const errorDuplicateValue = ((_error$extensions5 = error.extensions) === null || _error$extensions5 === void 0 ? void 0 : _error$extensions5.duplicateValue) || error.duplicateValue;
+    if (errorField === 'slug') {
       return intl.formatMessage(apiErrorMessages.DuplicateSlug, {
-        slugValue: error.duplicateValue
+        slugValue: errorDuplicateValue
       });
     } else {
       return intl.formatMessage(apiErrorMessages.DuplicateField, {
-        field: error.field
+        field: errorField
       });
     }
-  } // Try to match the error with a custom error message
-
+  }
 
+  // Try to match the error with a custom error message
   if (has__default["default"](error, 'invalidValue') && has__default["default"](error.invalidValue, 'overlappingPrices')) return intl.formatMessage(apiErrorMessages.OverlappingPrices);
-
   if (extensionErrorCode === 'InvalidOperation' && _includesInstanceProperty__default["default"](_context3 = error.message).call(_context3, 'validFrom') && _includesInstanceProperty__default["default"](_context4 = error.message).call(_context4, 'validUntil')) {
     return intl.formatMessage(apiErrorMessages.InvalidDateRange, {
       field: 'validFrom'
     });
   }
-
   if (extensionErrorCode === 'InvalidOperation' && _includesInstanceProperty__default["default"](_context5 = error.message).call(_context5, 'Duplicate tax rate for')) {
     return intl.formatMessage(apiErrorMessages.TaxCategoryDuplicateCountry);
   }
-
   if (extensionErrorCode === 'InvalidOperation' && regexInvalidOperationRequiredAttribute.test(error.message)) {
     const attrName = error.message.replace(regexInvalidOperationRequiredAttribute, '$1');
     return intl.formatMessage(apiErrorMessages.RequiredField, {
       field: attrName
     });
-  } // TODO: A concern has be raised that we can't accurately distinguish
+  }
+
+  // TODO: A concern has be raised that we can't accurately distinguish
   // this error (invalid start / end dates with prices) from other price
   // errors. We should investigate this further.
-
-
   if (extensionErrorCode === 'InvalidField' && error.field === 'price' && has__default["default"](error, 'invalidValue') && has__default["default"](error.invalidValue, 'validFrom') && has__default["default"](error.invalidValue, 'validUntil')) return intl.formatMessage(apiErrorMessages.InvalidDateRange, {
     field: error.field
   });
-
   if (extensionErrorCode === 'DuplicateAttributeValue' && error.attribute) {
     return intl.formatMessage(apiErrorMessages.DuplicateAttributeValue, {
       name: error.attribute.name
     });
   }
-
   if (extensionErrorCode === 'MaxResourceLimitExceeded') {
     return intl.formatMessage(apiErrorMessages.MaxResourceLimitExceeded);
   }
-
   return;
 }
 
 const ApiErrorNotification = props => {
   var _context;
-
   return jsxRuntime.jsx(Notification, {
     type: "error",
     domain: props.notification.domain,
@@ -550,10 +493,8 @@ const ApiErrorNotification = props => {
     children: jsxRuntime.jsx("ul", {
       children: _valuesInstanceProperty__default["default"](props.notification) && _mapInstanceProperty__default["default"](_context = _valuesInstanceProperty__default["default"](props.notification).errors).call(_context, (error, idx) => {
         var _error$extensions$cod, _error$extensions;
-
         const extensionErrorCode = (_error$extensions$cod = (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code) !== null && _error$extensions$cod !== void 0 ? _error$extensions$cod : error.code;
         const shouldLogErrorToConsole = !extensionErrorCode &&         "production" === 'development';
-
         if (shouldLogErrorToConsole) {
           /**
            * NOTE: This is an API error which usually contains
@@ -564,7 +505,6 @@ const ApiErrorNotification = props => {
           // eslint-disable-next-line no-console
           console.error('Unknown API error', error);
         }
-
         return jsxRuntime.jsx("li", {
           children: jsxRuntime.jsx(ApiErrorMessage, {
             error: error
@@ -574,7 +514,6 @@ const ApiErrorNotification = props => {
     })
   });
 };
-
 ApiErrorNotification.propTypes = {};
 ApiErrorNotification.displayName = 'ApiErrorNotification';
 
@@ -584,14 +523,11 @@ const GenericNotification = props => jsxRuntime.jsx(Notification, {
   onCloseClick: props.dismiss,
   children: props.notification.text
 });
-
 GenericNotification.propTypes = {};
 GenericNotification.displayName = 'GenericNotification';
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const UnexpectedErrorNotification = props => jsxRuntime.jsx(Notification, {
   type: "error",
   domain: props.notification.domain,
@@ -604,23 +540,18 @@ const UnexpectedErrorNotification = props => jsxRuntime.jsx(Notification, {
     })]
   })
 });
-
 UnexpectedErrorNotification.propTypes = {};
 UnexpectedErrorNotification.displayName = 'UnexpectedErrorNotification';
 
 const getStyles = props => {
   const baseStyles = /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorSurface, ";position:relative;width:100%;z-index:19999;" + ("" ), "" );
-
   switch (props.domain) {
     case constants.NOTIFICATION_DOMAINS.GLOBAL:
       return /*#__PURE__*/react$1.css(baseStyles, ";text-align:center;width:100%!important;" + ("" ), "" );
-
     case constants.NOTIFICATION_DOMAINS.PAGE:
       return /*#__PURE__*/react$1.css(baseStyles, ";" + ("" ), "" );
-
     case constants.NOTIFICATION_DOMAINS.SIDE:
       return /*#__PURE__*/react$1.css(baseStyles, ";position:absolute;text-align:left;height:0;overflow:visible;" + ("" ), "" );
-
     default:
       return /*#__PURE__*/react$1.css("" , "" );
   }
@@ -631,23 +562,20 @@ const getStyles = props => {
 const selectNotifications = state => state.notifications;
 const selectGlobalNotifications = reselect.createSelector(selectNotifications, notifications => {
   var _context;
-
-  return _sliceInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.GLOBAL) // Return only 1 at a time
+  return _sliceInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.GLOBAL)
+  // Return only 1 at a time
   ).call(_context, 0, 1);
 });
 const selectPageNotifications = reselect.createSelector(selectNotifications, notifications => _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.PAGE));
 const selectSideNotifications = reselect.createSelector(selectNotifications, notifications => _filterInstanceProperty__default["default"](notifications).call(notifications, notification => notification.domain === constants.NOTIFICATION_DOMAINS.SIDE));
 
 const _excluded = ["values"],
-      _excluded2 = ["text"],
-      _excluded3 = ["values"],
-      _excluded4 = ["text"],
-      _excluded5 = ["text"];
-
+  _excluded2 = ["text"],
+  _excluded3 = ["values"],
+  _excluded4 = ["text"],
+  _excluded5 = ["text"];
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const NotificationsListGlobal = props => {
   const dispatch = reactRedux.useDispatch();
   const mapCustomNotificationToComponent = useCustomNotificationComponent();
@@ -658,7 +586,6 @@ const NotificationsListGlobal = props => {
     children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
       const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
-
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
@@ -667,7 +594,6 @@ const NotificationsListGlobal = props => {
           }
         }, notification.id);
       }
-
       switch (notification.kind) {
         case constants.NOTIFICATION_KINDS_GLOBAL.error:
         case constants.NOTIFICATION_KINDS_GLOBAL.warning:
@@ -675,8 +601,7 @@ const NotificationsListGlobal = props => {
         case constants.NOTIFICATION_KINDS_GLOBAL.success:
           {
             _valuesInstanceProperty__default["default"](notification);
-                  const genericNotification = _objectWithoutProperties(notification, _excluded);
-
+              const genericNotification = _objectWithoutProperties(notification, _excluded);
             return jsxRuntime.jsx(GenericNotification, {
               notification: genericNotification,
               dismiss: () => {
@@ -684,12 +609,10 @@ const NotificationsListGlobal = props => {
               }
             }, notification.id);
           }
-
         case constants.NOTIFICATION_KINDS_GLOBAL['unexpected-error']:
           {
             notification.text;
-                  const errorNotification = _objectWithoutProperties(notification, _excluded2);
-
+              const errorNotification = _objectWithoutProperties(notification, _excluded2);
             return jsxRuntime.jsx(UnexpectedErrorNotification, {
               notification: errorNotification,
               dismiss: () => {
@@ -697,17 +620,14 @@ const NotificationsListGlobal = props => {
               }
             }, notification.id);
           }
-
         default:
           {
-
             return null;
           }
       }
     })
   });
 };
-
 const NotificationsListPage = props => {
   const dispatch = reactRedux.useDispatch();
   const mapCustomNotificationToComponent = useCustomNotificationComponent();
@@ -718,7 +638,6 @@ const NotificationsListPage = props => {
     children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
       const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
-
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
@@ -727,7 +646,6 @@ const NotificationsListPage = props => {
           }
         }, notification.id);
       }
-
       switch (notification.kind) {
         case constants.NOTIFICATION_KINDS_PAGE.error:
         case constants.NOTIFICATION_KINDS_PAGE.warning:
@@ -735,8 +653,7 @@ const NotificationsListPage = props => {
         case constants.NOTIFICATION_KINDS_PAGE.success:
           {
             _valuesInstanceProperty__default["default"](notification);
-                  const genericNotification = _objectWithoutProperties(notification, _excluded3);
-
+              const genericNotification = _objectWithoutProperties(notification, _excluded3);
             return jsxRuntime.jsx(GenericNotification, {
               notification: _objectSpread$1(_objectSpread$1({}, genericNotification), {}, {
                 kind: notification.kind
@@ -746,12 +663,10 @@ const NotificationsListPage = props => {
               }
             }, notification.id);
           }
-
         case constants.NOTIFICATION_KINDS_PAGE['api-error']:
           {
             notification.text;
-                  const errorNotification = _objectWithoutProperties(notification, _excluded4);
-
+              const errorNotification = _objectWithoutProperties(notification, _excluded4);
             return jsxRuntime.jsx(ApiErrorNotification, {
               notification: errorNotification,
               dismiss: () => {
@@ -759,12 +674,10 @@ const NotificationsListPage = props => {
               }
             }, notification.id);
           }
-
         case constants.NOTIFICATION_KINDS_PAGE['unexpected-error']:
           {
             notification.text;
-                  const errorNotification = _objectWithoutProperties(notification, _excluded5);
-
+              const errorNotification = _objectWithoutProperties(notification, _excluded5);
             return jsxRuntime.jsx(UnexpectedErrorNotification, {
               notification: _objectSpread$1(_objectSpread$1({}, errorNotification), {}, {
                 values: _valuesInstanceProperty__default["default"](notification)
@@ -774,14 +687,12 @@ const NotificationsListPage = props => {
               }
             }, notification.id);
           }
-
         default:
           return null;
       }
     })
   });
 };
-
 const NotificationsListSide = props => {
   const dispatch = reactRedux.useDispatch();
   const mapCustomNotificationToComponent = useCustomNotificationComponent();
@@ -792,7 +703,6 @@ const NotificationsListSide = props => {
     children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
       const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
-
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
@@ -801,7 +711,6 @@ const NotificationsListSide = props => {
           }
         }, notification.id);
       }
-
       switch (notification.kind) {
         case constants.NOTIFICATION_KINDS_SIDE.error:
         case constants.NOTIFICATION_KINDS_SIDE.warning:
@@ -813,40 +722,32 @@ const NotificationsListSide = props => {
               dispatch(notifications.removeNotification(notification.id));
             }
           }, notification.id);
-
         default:
           return null;
       }
     })
   });
 };
-
 const NotificationsList = props => {
   switch (props.domain) {
     case constants.NOTIFICATION_DOMAINS.GLOBAL:
       return jsxRuntime.jsx(NotificationsListGlobal, _objectSpread$1({}, props));
-
     case constants.NOTIFICATION_DOMAINS.PAGE:
       return jsxRuntime.jsx(NotificationsListPage, _objectSpread$1({}, props));
-
     case constants.NOTIFICATION_DOMAINS.SIDE:
       return jsxRuntime.jsx(NotificationsListSide, _objectSpread$1({}, props));
-
     default:
       return null;
   }
 };
-
 NotificationsList.displayName = 'NotificationsList';
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const defaultProps = {
   domain: constants.NOTIFICATION_DOMAINS.SIDE,
   kind: constants.NOTIFICATION_KINDS_SIDE.success
 };
-
 const Notifier = props => {
   const showNotification = actionsGlobal.useShowNotification();
   react.useEffect(() => {
@@ -860,12 +761,12 @@ const Notifier = props => {
     return () => {
       // Remove notification when component "unmounts"
       notification.dismiss && notification.dismiss();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // We want to run this only once, when the component mounts the first time. Therefore we need to pass an empty array, even though the eslint rule shows a warning.
 
   return null;
 };
-
 Notifier.propTypes = {
   domain: _pt__default["default"].any.isRequired,
   kind: _pt__default["default"].any.isRequired,