@commercetools-frontend/react-notifications 21.23.9 → 21.24.0

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

@@ -15,13 +15,13 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var reactIntl = require('react-intl');
-var icons = require('@commercetools-uikit/icons');
+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 constants = require('@commercetools-frontend/constants');
 var utils = require('@commercetools-uikit/utils');
-var hooks = require('@commercetools-uikit/hooks');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
@@ -64,11 +64,9 @@ 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 = "21.23.9";
+var version = "21.24.0";
 
-var Context = /*#__PURE__*/react.createContext(function () {
-  return null;
-});
+const Context = /*#__PURE__*/react.createContext(() => null);
 
 function NotificationProviderForCustomComponent(props) {
   return jsxRuntime.jsx(Context.Provider, {
@@ -79,14 +77,10 @@ function NotificationProviderForCustomComponent(props) {
 
 NotificationProviderForCustomComponent.propTypes = {};
 NotificationProviderForCustomComponent.displayName = 'NotificationProviderForCustomComponent';
-var useCustomNotificationComponent = function useCustomNotificationComponent() {
-  return react.useContext(Context);
-}; // Exports
+const useCustomNotificationComponent = () => react.useContext(Context); // Exports
 
 function filterDataAttributes(obj) {
-  return omitBy__default["default"](obj, function (_value, key) {
-    return !_startsWithInstanceProperty__default["default"](key).call(key, 'data-');
-  });
+  return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
 var messages = reactIntl.defineMessages({
@@ -99,7 +93,7 @@ var messages = reactIntl.defineMessages({
 
 var _templateObject, _templateObject2;
 
-var getColorByType = function getColorByType(value) {
+const getColorByType = value => {
   switch (value) {
     case constants.NOTIFICATION_KINDS_SIDE.success:
       return designSystem.designTokens.colorPrimary;
@@ -118,7 +112,7 @@ var getColorByType = function getColorByType(value) {
   }
 };
 
-var getBorderColor = function getBorderColor(notificationKind) {
+const getBorderColor = notificationKind => {
   switch (notificationKind) {
     case constants.NOTIFICATION_KINDS_SIDE.success:
       return designSystem.designTokens.colorPrimary85;
@@ -137,25 +131,21 @@ var getBorderColor = function getBorderColor(notificationKind) {
   }
 };
 
-var 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"])));
-var showNotificationSideAnimation = react$1.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
+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"])));
 
-var getStylesForNotificationIcon = function getStylesForNotificationIcon(props) {
-  return /*#__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 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), ";" + ("" ), "" );
 
-var getStylesForCloseIcon = function getStylesForCloseIcon(props) {
-  return /*#__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;", props.isNewTheme ? '& svg { width: 16px; height: 16px; }' : '', " ", props.isNewTheme && props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
 
-var getStylesForContent = function getStylesForContent(props) {
-  var fontColor = props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? designSystem.designTokens.colorSolid : 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;}" + ("" ), "" );
 };
 
-var getStylesForNotification = function getStylesForNotification(props) {
-  var baseStyles = /*#__PURE__*/react$1.css("position:relative;display:flex;align-items:center;padding:", designSystem.designTokens.spacingM, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" );
-  var 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, ";}" + ("" ), "" );
+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:
@@ -166,7 +156,7 @@ var getStylesForNotification = function getStylesForNotification(props) {
 
     case constants.NOTIFICATION_DOMAINS.SIDE:
       {
-        var 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 ", 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;" + ("" ), "" );
         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%;" + ("" ), "" );
       }
@@ -179,9 +169,9 @@ var getStylesForNotification = function getStylesForNotification(props) {
 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; }
-var sequentialId = utils.createSequentialId('notification-');
+const sequentialId = utils.createSequentialId('notification-');
 
-var NotificationIcon = function NotificationIcon(props) {
+const NotificationIcon = props => {
   if (props.type === constants.NOTIFICATION_KINDS_SIDE.error) {
     return jsxRuntime.jsx(icons.ErrorIcon, {
       color: props.color
@@ -209,35 +199,35 @@ var NotificationIcon = function NotificationIcon(props) {
 
 NotificationIcon.propTypes = {};
 NotificationIcon.displayName = 'NotificationIcon';
-var defaultProps$1 = {
+const defaultProps$1 = {
   fixed: false
 };
 
-var Notification = function Notification(props) {
-  var intl = reactIntl.useIntl();
-  var id = hooks.useFieldId(undefined, sequentialId);
+const Notification = props => {
+  const intl = reactIntl.useIntl();
+  const id = hooks.useFieldId(undefined, sequentialId);
 
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme,
-      themedValue = _useTheme.themedValue;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme,
+        themedValue = _useTheme.themedValue;
 
-  var Button = themedValue(IconButton__default["default"], SecondaryIconButton__default["default"]);
+  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: isNewTheme
+      isNewTheme
     }))
   }, filterDataAttributes(props)), {}, {
     children: [jsxRuntime.jsx("div", {
       id: id,
       css: getStylesForContent(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme: isNewTheme
+        isNewTheme
       })),
       children: props.children
     }), props.onCloseClick ? jsxRuntime.jsx("div", {
       css: getStylesForCloseIcon(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme: isNewTheme
+        isNewTheme
       })),
       children: jsxRuntime.jsx(Button, {
         label: intl.formatMessage(messages.hideNotification),
@@ -260,18 +250,6 @@ Notification.propTypes = {};
 Notification.displayName = 'Notification';
 Notification.defaultProps = defaultProps$1;
 
-var GenericNotification = function GenericNotification(props) {
-  return jsxRuntime.jsx(Notification, {
-    domain: props.notification.domain,
-    type: props.notification.kind,
-    onCloseClick: props.dismiss,
-    children: props.notification.text
-  });
-};
-
-GenericNotification.propTypes = {};
-GenericNotification.displayName = 'GenericNotification';
-
 var apiErrorMessages = reactIntl.defineMessages({
   General: {
     id: 'ApiError.General',
@@ -416,13 +394,13 @@ 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; }
-var regexInvalidOperationRequiredAttribute = /Required attribute '(.*)' cannot be removed/;
+const regexInvalidOperationRequiredAttribute = /Required attribute '(.*)' cannot be removed/;
 
 // 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.
-var mapErrorFieldsToMessageValues = function mapErrorFieldsToMessageValues(error) {
+const mapErrorFieldsToMessageValues = error => {
   if (error.field) return {
     field: error.field
   };
@@ -433,18 +411,16 @@ var mapErrorFieldsToMessageValues = function mapErrorFieldsToMessageValues(error
 }; // Type-guard validation for error code to be included in the message object keys.
 
 
-var hasErrorCodeAMatchingMessage = function hasErrorCodeAMatchingMessage(errorCode) {
-  return errorCode in apiErrorMessages;
-};
+const hasErrorCodeAMatchingMessage = errorCode => errorCode in apiErrorMessages;
 
-var FormattedErrorMessage = function FormattedErrorMessage(props) {
+const FormattedErrorMessage = props => {
   var _props$error$extensio, _props$error$extensio2, _context2;
 
-  var intl = reactIntl.useIntl(); // Attempt to map the error by code
+  const intl = reactIntl.useIntl(); // Attempt to map the error by code
 
-  var 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;
-  var messageCode = extensionErrorCode && hasErrorCodeAMatchingMessage(extensionErrorCode) ? apiErrorMessages[extensionErrorCode] : undefined;
-  react.useEffect(function () {
+  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;
 
@@ -476,10 +452,10 @@ FormattedErrorMessage.propTypes = {
 };
 FormattedErrorMessage.displayName = 'FormattedErrorMessage';
 
-var ApiErrorMessage = function ApiErrorMessage(props) {
-  var intl = reactIntl.useIntl(); // Attempt to map the error to a specific error message
+const ApiErrorMessage = props => {
+  const intl = reactIntl.useIntl(); // Attempt to map the error to a specific error message
 
-  var specialFormattedMessage = getSpecialFormattedMessageByErrorCode(props.error, intl);
+  const specialFormattedMessage = getSpecialFormattedMessageByErrorCode(props.error, intl);
 
   if (specialFormattedMessage) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -496,10 +472,10 @@ ApiErrorMessage.displayName = 'ApiErrorMessage';
 function getSpecialFormattedMessageByErrorCode(error, intl) {
   var _error$extensions$cod, _error$extensions, _context3, _context4, _context5;
 
-  var 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 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;
 
   if (error.errorByExtension) {
-    var extensionMessage;
+    let extensionMessage;
 
     if (error.localizedMessage) {
       extensionMessage = error.localizedMessage[intl.locale];
@@ -528,7 +504,7 @@ function getSpecialFormattedMessageByErrorCode(error, intl) {
   }
 
   if (extensionErrorCode === 'InvalidOperation' && regexInvalidOperationRequiredAttribute.test(error.message)) {
-    var attrName = error.message.replace(regexInvalidOperationRequiredAttribute, '$1');
+    const attrName = error.message.replace(regexInvalidOperationRequiredAttribute, '$1');
     return intl.formatMessage(apiErrorMessages.RequiredField, {
       field: attrName
     });
@@ -554,7 +530,7 @@ function getSpecialFormattedMessageByErrorCode(error, intl) {
   return;
 }
 
-var ApiErrorNotification = function ApiErrorNotification(props) {
+const ApiErrorNotification = props => {
   var _context;
 
   return jsxRuntime.jsx(Notification, {
@@ -562,11 +538,11 @@ var ApiErrorNotification = function ApiErrorNotification(props) {
     domain: props.notification.domain,
     onCloseClick: props.dismiss,
     children: jsxRuntime.jsx("ul", {
-      children: _valuesInstanceProperty__default["default"](props.notification) && _mapInstanceProperty__default["default"](_context = _valuesInstanceProperty__default["default"](props.notification).errors).call(_context, function (error, idx) {
+      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;
 
-        var 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 shouldLogErrorToConsole = !extensionErrorCode &&         "production" === 'development';
+        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) {
           /**
@@ -592,54 +568,38 @@ var ApiErrorNotification = function ApiErrorNotification(props) {
 ApiErrorNotification.propTypes = {};
 ApiErrorNotification.displayName = 'ApiErrorNotification';
 
+const GenericNotification = props => jsxRuntime.jsx(Notification, {
+  domain: props.notification.domain,
+  type: props.notification.kind,
+  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; }
 
-var UnexpectedErrorNotification = function UnexpectedErrorNotification(props) {
-  return jsxRuntime.jsx(Notification, {
-    type: "error",
-    domain: props.notification.domain,
-    onCloseClick: props.dismiss,
-    children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-      children: [jsxRuntime.jsx("div", {
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, apiErrorMessages.General))
-      }), _valuesInstanceProperty__default["default"](props.notification) && _valuesInstanceProperty__default["default"](props.notification).errorId && jsxRuntime.jsx("div", {
-        children: "ID (".concat(_valuesInstanceProperty__default["default"](props.notification).errorId, ")")
-      })]
-    })
-  });
-};
+const UnexpectedErrorNotification = props => jsxRuntime.jsx(Notification, {
+  type: "error",
+  domain: props.notification.domain,
+  onCloseClick: props.dismiss,
+  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+    children: [jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, apiErrorMessages.General))
+    }), _valuesInstanceProperty__default["default"](props.notification) && _valuesInstanceProperty__default["default"](props.notification).errorId && jsxRuntime.jsx("div", {
+      children: "ID (".concat(_valuesInstanceProperty__default["default"](props.notification).errorId, ")")
+    })]
+  })
+});
 
 UnexpectedErrorNotification.propTypes = {};
 UnexpectedErrorNotification.displayName = 'UnexpectedErrorNotification';
 
-// is added or removed the memoization for all domain selectors is reset
-
-var selectNotifications = function selectNotifications(state) {
-  return state.notifications;
-};
-var selectGlobalNotifications = reselect.createSelector(selectNotifications, function (notifications) {
-  var _context;
-
-  return _sliceInstanceProperty__default["default"](_context = _filterInstanceProperty__default["default"](notifications).call(notifications, function (notification) {
-    return notification.domain === constants.NOTIFICATION_DOMAINS.GLOBAL;
-  }) // Return only 1 at a time
-  ).call(_context, 0, 1);
-});
-var selectPageNotifications = reselect.createSelector(selectNotifications, function (notifications) {
-  return _filterInstanceProperty__default["default"](notifications).call(notifications, function (notification) {
-    return notification.domain === constants.NOTIFICATION_DOMAINS.PAGE;
-  });
-});
-var selectSideNotifications = reselect.createSelector(selectNotifications, function (notifications) {
-  return _filterInstanceProperty__default["default"](notifications).call(notifications, function (notification) {
-    return notification.domain === constants.NOTIFICATION_DOMAINS.SIDE;
-  });
-});
-
-var getStyles = function getStyles(props) {
-  var baseStyles = /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorSurface, ";position:relative;width:100%;z-index:19999;" + ("" ), "" );
+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:
@@ -656,31 +616,43 @@ var getStyles = function getStyles(props) {
   }
 };
 
-var _excluded = ["values"],
-    _excluded2 = ["text"],
-    _excluded3 = ["values"],
-    _excluded4 = ["text"],
-    _excluded5 = ["text"];
+// These selectors are okay memoization-wise, but once a single notifications
+// is added or removed the memoization for all domain selectors is reset
+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
+  ).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"];
 
 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; }
 
-var NotificationsListGlobal = function NotificationsListGlobal(props) {
-  var dispatch = reactRedux.useDispatch();
-  var mapCustomNotificationToComponent = useCustomNotificationComponent();
-  var notifications$1 = reactRedux.useSelector(selectGlobalNotifications);
+const NotificationsListGlobal = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectGlobalNotifications);
   return jsxRuntime.jsx("div", {
     id: "notifications-".concat(props.domain),
     css: getStyles(props),
-    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, function (notification) {
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
-      var CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
 
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
-          dismiss: function dismiss() {
+          dismiss: () => {
             dispatch(notifications.removeNotification(notification.id));
           }
         }, notification.id);
@@ -693,11 +665,11 @@ var NotificationsListGlobal = function NotificationsListGlobal(props) {
         case constants.NOTIFICATION_KINDS_GLOBAL.success:
           {
             _valuesInstanceProperty__default["default"](notification);
-                var genericNotification = _objectWithoutProperties(notification, _excluded);
+                  const genericNotification = _objectWithoutProperties(notification, _excluded);
 
             return jsxRuntime.jsx(GenericNotification, {
               notification: genericNotification,
-              dismiss: function dismiss() {
+              dismiss: () => {
                 dispatch(notifications.removeNotification(notification.id));
               }
             }, notification.id);
@@ -706,11 +678,11 @@ var NotificationsListGlobal = function NotificationsListGlobal(props) {
         case constants.NOTIFICATION_KINDS_GLOBAL['unexpected-error']:
           {
             notification.text;
-                var errorNotification = _objectWithoutProperties(notification, _excluded2);
+                  const errorNotification = _objectWithoutProperties(notification, _excluded2);
 
             return jsxRuntime.jsx(UnexpectedErrorNotification, {
               notification: errorNotification,
-              dismiss: function dismiss() {
+              dismiss: () => {
                 dispatch(notifications.removeNotification(notification.id));
               }
             }, notification.id);
@@ -726,21 +698,21 @@ var NotificationsListGlobal = function NotificationsListGlobal(props) {
   });
 };
 
-var NotificationsListPage = function NotificationsListPage(props) {
-  var dispatch = reactRedux.useDispatch();
-  var mapCustomNotificationToComponent = useCustomNotificationComponent();
-  var notifications$1 = reactRedux.useSelector(selectPageNotifications);
+const NotificationsListPage = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectPageNotifications);
   return jsxRuntime.jsx("div", {
     id: "notifications-".concat(props.domain),
     css: getStyles(props),
-    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, function (notification) {
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
-      var CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
 
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
-          dismiss: function dismiss() {
+          dismiss: () => {
             dispatch(notifications.removeNotification(notification.id));
           }
         }, notification.id);
@@ -753,13 +725,13 @@ var NotificationsListPage = function NotificationsListPage(props) {
         case constants.NOTIFICATION_KINDS_PAGE.success:
           {
             _valuesInstanceProperty__default["default"](notification);
-                var genericNotification = _objectWithoutProperties(notification, _excluded3);
+                  const genericNotification = _objectWithoutProperties(notification, _excluded3);
 
             return jsxRuntime.jsx(GenericNotification, {
               notification: _objectSpread$1(_objectSpread$1({}, genericNotification), {}, {
                 kind: notification.kind
               }),
-              dismiss: function dismiss() {
+              dismiss: () => {
                 dispatch(notifications.removeNotification(notification.id));
               }
             }, notification.id);
@@ -768,11 +740,11 @@ var NotificationsListPage = function NotificationsListPage(props) {
         case constants.NOTIFICATION_KINDS_PAGE['api-error']:
           {
             notification.text;
-                var errorNotification = _objectWithoutProperties(notification, _excluded4);
+                  const errorNotification = _objectWithoutProperties(notification, _excluded4);
 
             return jsxRuntime.jsx(ApiErrorNotification, {
               notification: errorNotification,
-              dismiss: function dismiss() {
+              dismiss: () => {
                 dispatch(notifications.removeNotification(notification.id));
               }
             }, notification.id);
@@ -781,13 +753,13 @@ var NotificationsListPage = function NotificationsListPage(props) {
         case constants.NOTIFICATION_KINDS_PAGE['unexpected-error']:
           {
             notification.text;
-                var _errorNotification = _objectWithoutProperties(notification, _excluded5);
+                  const errorNotification = _objectWithoutProperties(notification, _excluded5);
 
             return jsxRuntime.jsx(UnexpectedErrorNotification, {
-              notification: _objectSpread$1(_objectSpread$1({}, _errorNotification), {}, {
+              notification: _objectSpread$1(_objectSpread$1({}, errorNotification), {}, {
                 values: _valuesInstanceProperty__default["default"](notification)
               }),
-              dismiss: function dismiss() {
+              dismiss: () => {
                 dispatch(notifications.removeNotification(notification.id));
               }
             }, notification.id);
@@ -800,21 +772,21 @@ var NotificationsListPage = function NotificationsListPage(props) {
   });
 };
 
-var NotificationsListSide = function NotificationsListSide(props) {
-  var dispatch = reactRedux.useDispatch();
-  var mapCustomNotificationToComponent = useCustomNotificationComponent();
-  var notifications$1 = reactRedux.useSelector(selectSideNotifications);
+const NotificationsListSide = props => {
+  const dispatch = reactRedux.useDispatch();
+  const mapCustomNotificationToComponent = useCustomNotificationComponent();
+  const notifications$1 = reactRedux.useSelector(selectSideNotifications);
   return jsxRuntime.jsx("div", {
     id: "notifications-".concat(props.domain),
     css: getStyles(props),
-    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, function (notification) {
+    children: _mapInstanceProperty__default["default"](notifications$1).call(notifications$1, notification => {
       // 1. Check if there is a custom notification component first
-      var CustomNotificationComponent = mapCustomNotificationToComponent(notification);
+      const CustomNotificationComponent = mapCustomNotificationToComponent(notification);
 
       if (CustomNotificationComponent) {
         return jsxRuntime.jsx(CustomNotificationComponent, {
           notification: notification,
-          dismiss: function dismiss() {
+          dismiss: () => {
             dispatch(notifications.removeNotification(notification.id));
           }
         }, notification.id);
@@ -827,7 +799,7 @@ var NotificationsListSide = function NotificationsListSide(props) {
         case constants.NOTIFICATION_KINDS_SIDE.success:
           return jsxRuntime.jsx(GenericNotification, {
             notification: notification,
-            dismiss: function dismiss() {
+            dismiss: () => {
               dispatch(notifications.removeNotification(notification.id));
             }
           }, notification.id);
@@ -839,7 +811,7 @@ var NotificationsListSide = function NotificationsListSide(props) {
   });
 };
 
-var NotificationsList = function NotificationsList(props) {
+const NotificationsList = props => {
   switch (props.domain) {
     case constants.NOTIFICATION_DOMAINS.GLOBAL:
       return jsxRuntime.jsx(NotificationsListGlobal, _objectSpread$1({}, props));
@@ -860,22 +832,22 @@ 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; }
-var defaultProps = {
+const defaultProps = {
   domain: constants.NOTIFICATION_DOMAINS.SIDE,
   kind: constants.NOTIFICATION_KINDS_SIDE.success
 };
 
-var Notifier = function Notifier(props) {
-  var showNotification = actionsGlobal.useShowNotification();
-  react.useEffect(function () {
-    var notification = showNotification({
+const Notifier = props => {
+  const showNotification = actionsGlobal.useShowNotification();
+  react.useEffect(() => {
+    const notification = showNotification({
       domain: props.domain,
       kind: props.kind,
       text: props.text
     }, isNumber__default["default"](props.dismissAfter) ? _objectSpread(_objectSpread({}, props.meta), {}, {
       dismissAfter: props.dismissAfter
     }) : props.meta);
-    return function () {
+    return () => {
       // Remove notification when component "unmounts"
       notification.dismiss && notification.dismiss();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps