@atlaskit/media-card 71.0.0 → 73.1.0

package/dist/es2019/root/cardView.js

@@ -12,9 +12,8 @@ import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper } from './ui/styled';
-import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -27,10 +26,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { IconWrapper } from './ui/iconWrapper/styled';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
-import { PreviewUnavailable, CreatingPreview, RateLimited, PreviewCurrentlyUnavailable } from './ui/iconMessage';
-import { LoadingRateLimited } from './ui/loadingRateLimited/loadingRateLimited';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
+import { isUploadError } from '../errors';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -41,15 +40,37 @@ export class CardViewBase extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoadError", () => {
+    _defineProperty(this, "onImageLoad", () => {
+      const {
+        onImageLoad
+      } = this.props; // We render the icon & icon message always, even if there is dataURI available.
+      // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
+      // the root card decides to chage status to error.
+      // If the image renders successfully, we switch this variable to hide the icon & icon message
+      // behind the thumbnail in case the image has transparency.
+      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
+      // for a smoother transition
+
+      this.setState({
+        didImageRender: true
+      });
+      onImageLoad && onImageLoad();
+    });
+
+    _defineProperty(this, "onImageError", () => {
+      const {
+        onImageError
+      } = this.props;
       this.setState({
-        isImageFailedToLoad: true
+        didImageRender: false
       });
+      onImageError && onImageError();
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -91,13 +112,11 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay;
+      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
-      // Intention is to show full file name when it's truncate in titlebox,
-      // and to hide it when no titlebox exists.
+      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
-      const shouldDisplayTooltip = !!name && !disableOverlay;
+      const shouldDisplayTooltip = !disableOverlay;
       return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
         className: newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -136,8 +155,7 @@ export class CardViewBase extends React.Component {
         previewOrientation,
         alt,
         onDisplayImage,
-        actions,
-        timeElapsedTillCommenced
+        actions
       } = this.props;
       const {
         name,
@@ -167,7 +185,8 @@ export class CardViewBase extends React.Component {
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
         alt: alt,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     });
 
@@ -186,16 +205,15 @@ export class CardViewBase extends React.Component {
         mediaType
       } = metadata || {};
       const {
-        isImageFailedToLoad
+        didImageRender
       } = this.state;
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
-        renderTypeIcon: isImageFailedToLoad || !dataURI,
-        renderImageRenderer: !!dataURI && !isImageFailedToLoad,
+        renderTypeIcon: !didImageRender,
+        renderImageRenderer: !!dataURI,
         renderPlayButton: !!dataURI && mediaType === 'video',
         renderBlanket: !disableOverlay,
-        renderTitleBox: !!name && !disableOverlay,
-        renderFailedTitleBox: !!isImageFailedToLoad && !metadata,
+        renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
 
@@ -210,55 +228,59 @@ export class CardViewBase extends React.Component {
         case 'processing':
         case 'loading-preview':
           return { ...defaultConfig,
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
 
         case 'complete':
-          return { ...defaultConfig,
-            iconMessage: !!isImageFailedToLoad && !!metadata ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
-          };
+          return defaultConfig;
 
         case 'error':
-          if (error && isPollingError(error)) {
-            return { ...defaultConfig,
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null) : undefined
-            };
-          } else if (isRateLimitedError(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata,
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/React.createElement(RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
-            };
+        case 'failed-processing':
+          const baseErrorConfig = { ...defaultConfig,
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          };
+          let iconMessage;
+          let customTitleMessage;
+          const {
+            secondaryError
+          } = error || {};
+
+          if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+          } else if (isUploadError(error)) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            customTitleMessage = messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
           } else {
-            return { ...defaultConfig,
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: false,
-              renderFailedTitleBox: true
+            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+          }
+
+          if (!disableOverlay) {
+            const renderFailedTitleBox = !name || !!customTitleMessage;
+            return { ...baseErrorConfig,
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage
             };
           }
 
-        case 'failed-processing':
-          return { ...defaultConfig,
-            renderTypeIcon: true,
-            renderImageRenderer: false,
-            renderTitleBox: !!name && !disableOverlay,
-            renderFailedTitleBox: !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
+          return { ...baseErrorConfig,
+            iconMessage
           };
 
         case 'loading':
         default:
           return { ...defaultConfig,
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           };
       }
     });
@@ -276,7 +298,7 @@ export class CardViewBase extends React.Component {
         renderFailedTitleBox,
         renderTickBox,
         isFixedBlanket,
-        renderLoadingRateLimited
+        customTitleMessage
       } = this.getRenderConfigByStatus();
       const {
         progress,
@@ -295,7 +317,7 @@ export class CardViewBase extends React.Component {
         "data-test-status": status,
         "data-test-progress": progress,
         "data-test-selected": selected ? true : undefined
-      }, renderTypeIcon && this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && this.renderSpinner(hasTitleBox), renderImageRenderer && this.renderImageRenderer(), renderPlayButton && this.renderPlayButton(hasTitleBox), renderBlanket && this.renderBlanket(!!isFixedBlanket), renderTitleBox && this.renderTitleBox(), renderFailedTitleBox && this.renderFailedTitleBox(), renderProgressBar && this.renderProgressBar(!hasTitleBox), renderLoadingRateLimited && /*#__PURE__*/React.createElement(LoadingRateLimited, null), renderTickBox && this.renderTickBox()), this.renderActionsBar());
+      }, renderTypeIcon && this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && this.renderSpinner(hasTitleBox), renderImageRenderer && this.renderImageRenderer(), renderPlayButton && this.renderPlayButton(hasTitleBox), renderBlanket && this.renderBlanket(!!isFixedBlanket), renderTitleBox && this.renderTitleBox(), renderFailedTitleBox && this.renderFailedTitleBox(customTitleMessage), renderProgressBar && this.renderProgressBar(!hasTitleBox), renderTickBox && this.renderTickBox()), this.renderActionsBar());
     });
   }
 
@@ -312,13 +334,14 @@ export class CardViewBase extends React.Component {
   }) {
     const {
       dataURI
-    } = this.props;
+    } = this.props; // We should only switch didImageRender to false
+    // when dataURI goes undefined, not when it is updated.
+    // as this method could be triggered after onImageLoad callback,
+    // falling on a race condition
 
-    if (prevDataURI !== dataURI) {
-      this.setState({
-        isImageFailedToLoad: false
-      });
-    }
+    prevDataURI && !dataURI && this.setState({
+      didImageRender: false
+    });
   }
 
   // This width is only used to calculate breakpoints, dimensions are passed down as
@@ -437,9 +460,10 @@ export class CardViewBase extends React.Component {
     });
   }
 
-  renderFailedTitleBox() {
+  renderFailedTitleBox(customMessage) {
     return /*#__PURE__*/React.createElement(FailedTitleBox, {
-      breakpoint: this.breakpoint
+      breakpoint: this.breakpoint,
+      customMessage: customMessage
     });
   }
 
@@ -464,19 +488,24 @@ export class CardViewBase extends React.Component {
       alt,
       resizeMode,
       onDisplayImage,
-      mediaItemType,
-      timeElapsedTillCommenced
+      nativeLazyLoad,
+      forceSyncDisplay
     } = this.props;
+    const {
+      didImageRender
+    } = this.state;
     return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
       dataURI: dataURI,
       mediaType: mediaType,
-      mediaItemType: mediaItemType,
       previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
-      onImageError: this.onImageLoadError,
-      timeElapsedTillCommenced: timeElapsedTillCommenced
+      onImageLoad: this.onImageLoad,
+      onImageError: this.onImageError,
+      nativeLazyLoad: nativeLazyLoad,
+      forceSyncDisplay: forceSyncDisplay,
+      isImageVisible: forceSyncDisplay || didImageRender
     });
   }
 

package/dist/es2019/root/inline/loader.js

@@ -5,12 +5,17 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "isMounted", false);
+
     _defineProperty(this, "state", {
-      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
   }
 
   async componentDidMount() {
+    this.isMounted = true;
+
     if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
@@ -22,14 +27,21 @@ export default class MediaInlineCardLoader extends React.PureComponent {
         '../media-card-analytics-error-boundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
         MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
-          ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
-        });
+
+        if (this.isMounted) {
+          this.setState({
+            MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+            ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
+          });
+        }
       } catch (error) {}
     }
   }
 
+  async componentWillUnmount() {
+    this.isMounted = false;
+  }
+
   render() {
     const {
       MediaInlineCard,

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -49,46 +49,64 @@ export const MediaInlineCardInternal = ({
     return null;
   };
 
+  const renderContent = children => {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  const defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(() => {
-    mediaClient.file.getFileState(identifier.id, {
+    const subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
     }).subscribe({
       next: fileState => {
         setFileState(fileState);
+        setIsErrored(false);
       },
       error: () => {
         setIsErrored(true);
       }
     });
+    return () => {
+      subscription.unsubscribe();
+    };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file)
+      message: (intl || defaultIntl).formatMessage(messages.loading_file),
+      isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: fileState.message || ''
+      message: fileState.message || '',
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'uploading') {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: fileState.name
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 
@@ -113,14 +131,17 @@ export const MediaInlineCardInternal = ({
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
-    content: formattedDate
+    content: formattedDate,
+    tag: "span"
   }, /*#__PURE__*/React.createElement(MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer));
 };
-export const MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export const MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});

package/dist/es2019/root/inlinePlayer.js

@@ -7,6 +7,10 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
+import { ProgressBar } from './ui/progressBar/progressBar';
+import { calcBreakpointSize } from './ui/styled';
+import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
+import { getElementDimension } from '../utils/getElementDimension';
 export const inlinePlayerClassName = 'media-card-inline-player';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -29,6 +33,8 @@ export class InlinePlayerBase extends Component {
 
     _defineProperty(this, "state", {});
 
+    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "setFileSrc", fileSrc => {
       this.setState({
         fileSrc
@@ -93,9 +99,31 @@ export class InlinePlayerBase extends Component {
         viewingLevel: 'full'
       });
     });
+
+    _defineProperty(this, "saveElementWidth", () => {
+      const {
+        dimensions
+      } = this.props;
+
+      if (!dimensions) {
+        return;
+      }
+
+      const {
+        width
+      } = dimensions;
+
+      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
+        const elementWidth = getElementDimension(this.divRef.current, 'width');
+        this.setState({
+          elementWidth
+        });
+      }
+    });
   }
 
   componentDidMount() {
+    this.saveElementWidth();
     const {
       mediaClient,
       identifier
@@ -110,6 +138,17 @@ export class InlinePlayerBase extends Component {
       collectionName
     }).subscribe({
       next: async fileState => {
+        if (fileState.status === 'uploading') {
+          this.setState({
+            isUploading: true,
+            progress: fileState.progress
+          });
+        } else {
+          this.setState({
+            isUploading: false
+          });
+        }
+
         const {
           fileSrc: existingFileSrc
         } = this.state; // we want to reuse the existing fileSrc to prevent re renders
@@ -163,6 +202,11 @@ export class InlinePlayerBase extends Component {
     this.revoke();
   }
 
+  get breakpoint() {
+    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
+    return calcBreakpointSize(parseInt(`${width}`, 10));
+  }
+
   render() {
     const {
       onClick,
@@ -171,10 +215,13 @@ export class InlinePlayerBase extends Component {
       selected,
       testId,
       identifier,
-      forwardRef
+      forwardRef,
+      autoplay
     } = this.props;
     const {
-      fileSrc
+      fileSrc,
+      isUploading,
+      progress
     } = this.state;
 
     if (!fileSrc) {
@@ -195,7 +242,7 @@ export class InlinePlayerBase extends Component {
       type: "video",
       src: fileSrc,
       fileId: identifier.id,
-      isAutoPlay: true,
+      isAutoPlay: autoplay,
       isHDAvailable: false,
       onDownloadClick: this.onDownloadClick,
       onFirstPlay: this.onFirstPlay,
@@ -204,7 +251,12 @@ export class InlinePlayerBase extends Component {
       },
       originalDimensions: originalDimensions,
       showControls: checkMouseMovement
-    })));
+    })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: progress,
+      breakpoint: this.breakpoint,
+      positionBottom: true,
+      showOnTop: true
+    }) : null);
   }
 
 }

package/dist/es2019/root/styled.js

@@ -42,4 +42,5 @@ export const InlinePlayerWrapper = styled.div`
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export const FormattedMessageWrapper = styled.span``;

package/dist/es2019/root/ui/common.js

@@ -1,4 +1,10 @@
-import { Breakpoint } from './Breakpoint';
+export let Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (Breakpoint = {}));
+
 export const responsiveSettings = {
   [Breakpoint.SMALL]: {
     fontSize: 11,

package/dist/es2019/root/ui/iconMessage/index.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IconMessageWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -11,7 +12,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation
@@ -22,9 +23,11 @@ export const CreatingPreview = ({
 export const PreviewUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_unavailable
 }));
-export const RateLimited = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
-  messageDescriptor: messages.preview_rateLimited,
-  reducedFont: true
+export const FailedToLoad = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_load
+}));
+export const FailedToUpload = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_upload
 }));
 export const PreviewCurrentlyUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_currently_unavailable,