@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/es2019/root/card/getCardPreview/index.js

@@ -16,7 +16,7 @@ export const removeCardPreviewFromCache = cardPreviewCache.remove;
 
 export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 
-const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
+const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
   let source;
 
   switch (preview.source) {
@@ -43,7 +43,7 @@ const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
 
   const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  cardPreviewCache.set(id, dimensions, { ...preview,
+  cardPreviewCache.set(id, mode, { ...preview,
     source,
     dataURI
   });
@@ -73,16 +73,20 @@ export const getCardPreview = async ({
   imageUrlParams,
   mediaBlobUrlAttrs
 }) => {
-  const cachedPreview = cardPreviewCache.get(id, dimensions);
+  const mode = imageUrlParams.mode;
+  const cachedPreview = cardPreviewCache.get(id, mode);
+  const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-  if (cachedPreview) {
+  if (cachedPreview && !dimensionsAreBigger) {
     return cachedPreview;
   }
 
   try {
     if (filePreview) {
       const localPreview = await getCardPreviewFromFilePreview(filePreview);
-      return extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs);
+      return extendAndCachePreview(id, mode, { ...localPreview,
+        dimensions
+      }, mediaBlobUrlAttrs);
     }
   } catch (e) {
     /**
@@ -125,13 +129,15 @@ export const shouldResolvePreview = ({
   status,
   fileState,
   dimensions,
-  prevDimensions,
+  identifier,
+  fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
   featureFlags
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
-  const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
+  const cardPreview = cardPreviewCache.get(identifier.id, fileImageMode);
+  const dimensionsAreBigger = isBigger(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
@@ -168,5 +174,7 @@ export const isSSRClientPreview = preview => {
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
   const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
-  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
+  return extendAndCachePreview(id, params.mode, { ...remotePreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
 };

package/dist/es2019/root/card/index.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
-import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
@@ -25,6 +24,8 @@ import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.0.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -232,9 +233,10 @@ export class CardBase extends Component {
 
         const {
           identifier,
-          dimensions = {}
+          resizeMode
         } = this.props;
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+        const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
         this.safeSetState(updateState);
       } else {
         this.safeSetState({
@@ -631,7 +633,7 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {},
+      resizeMode: _resizeMode,
       ssr: _ssr,
       mediaClient: _mediaClient
     } = this.props;
@@ -640,7 +642,8 @@ export class CardBase extends Component {
       const {
         id
       } = _identifier;
-      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+      const fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
+      _cardPreview = getCardPreviewFromCache(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -744,8 +747,7 @@ export class CardBase extends Component {
   componentDidUpdate(prevProps, prevState) {
     const {
       mediaClient: prevMediaClient,
-      identifier: prevIdentifier,
-      dimensions: prevDimensions
+      identifier: prevIdentifier
     } = prevProps;
     const {
       isCardVisible: prevIsCardVisible
@@ -756,7 +758,8 @@ export class CardBase extends Component {
       dimensions,
       featureFlags,
       useInlinePlayer,
-      disableOverlay
+      disableOverlay,
+      resizeMode
     } = this.props;
     const {
       isCardVisible,
@@ -770,6 +773,7 @@ export class CardBase extends Component {
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const isNewMediaClient = prevMediaClient !== mediaClient;
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
@@ -804,7 +808,8 @@ export class CardBase extends Component {
       status,
       fileState,
       dimensions,
-      prevDimensions,
+      identifier,
+      fileImageMode,
       featureFlags,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview

package/dist/es2019/root/cardView.js

@@ -1,35 +1,38 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { FileCardImageView } from '../files';
 import { breakpointSize } from '../utils/breakpoint';
 import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
-import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
+import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
-import { Blanket } from './ui/blanket/styled';
+import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
-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 { IconWrapper } from './ui/iconWrapper/iconWrapper';
 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';
+import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
+import { Wrapper } from './cardViewWrapper';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -123,9 +126,8 @@ export class CardViewBase extends React.Component {
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       const shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
-        className: newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return jsx(NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -139,7 +141,7 @@ export class CardViewBase extends React.Component {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+      }, shouldDisplayTooltip ? jsx(Tooltip, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -175,7 +177,7 @@ export class CardViewBase extends React.Component {
       const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       const errorMessage = getErrorMessage(status);
       const fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return /*#__PURE__*/React.createElement(FileCardImageView, {
+      return jsx(FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -237,7 +239,7 @@ export class CardViewBase extends React.Component {
 
         case 'processing':
           return { ...defaultConfig,
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
@@ -260,14 +262,14 @@ export class CardViewBase extends React.Component {
           } = error || {};
 
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+            iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            iconMessage = jsx(FailedToUpload, null);
             customTitleMessage = messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+            iconMessage = jsx(FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            iconMessage = jsx(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -320,7 +322,8 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -402,8 +405,8 @@ export class CardViewBase extends React.Component {
       testId
     } = this.props;
     const wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      "data-testid": testId || 'media-card-view',
+    return jsx(Wrapper, {
+      testId: testId || 'media-card-view',
       shouldUsePointerCursor: true,
       breakpointSize: breakpointSize(this.width),
       dimensions: wrapperDimensions,
@@ -414,10 +417,10 @@ export class CardViewBase extends React.Component {
   }
 
   renderSpinner(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+    }, jsx(SpinnerIcon, null));
   }
 
   shouldRenderPlayButton() {
@@ -437,16 +440,16 @@ export class CardViewBase extends React.Component {
   }
 
   renderPlayButton(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(PlayButton, null));
+    }, jsx(PlayButton, null));
   } //This Blanket will provide a shadow backround for uploading status by
   //setting isFixed.
 
 
   renderBlanket(isFixed) {
-    return /*#__PURE__*/React.createElement(Blanket, {
+    return jsx(Blanket, {
       isFixed: isFixed
     });
   }
@@ -461,7 +464,7 @@ export class CardViewBase extends React.Component {
       name,
       createdAt
     } = metadata || {};
-    return !!name && /*#__PURE__*/React.createElement(TitleBox, {
+    return !!name && jsx(TitleBox, {
       name: name,
       createdAt: createdAt,
       breakpoint: this.breakpoint,
@@ -471,7 +474,7 @@ export class CardViewBase extends React.Component {
   }
 
   renderFailedTitleBox(customMessage) {
-    return /*#__PURE__*/React.createElement(FailedTitleBox, {
+    return jsx(FailedTitleBox, {
       breakpoint: this.breakpoint,
       customMessage: customMessage
     });
@@ -481,7 +484,7 @@ export class CardViewBase extends React.Component {
     const {
       progress
     } = this.props;
-    return /*#__PURE__*/React.createElement(ProgressBar, {
+    return jsx(ProgressBar, {
       progress: progress,
       breakpoint: this.breakpoint,
       positionBottom: positionBottom
@@ -500,7 +503,7 @@ export class CardViewBase extends React.Component {
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+    return !!cardPreview && jsx(ImageRenderer, {
       cardPreview: cardPreview,
       mediaType: mediaType,
       alt: alt,
@@ -517,7 +520,7 @@ export class CardViewBase extends React.Component {
     const {
       selected
     } = this.props;
-    return /*#__PURE__*/React.createElement(TickBox, {
+    return jsx(TickBox, {
       selected: selected
     });
   }
@@ -531,10 +534,10 @@ export class CardViewBase extends React.Component {
       mimeType,
       name
     } = metadata || {};
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+    }, jsx(MimeTypeIcon, {
       testId: 'media-card-file-type-icon',
       mediaType: mediaType,
       mimeType: mimeType,
@@ -554,7 +557,7 @@ export class CardViewBase extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ActionsBar, {
+    return jsx(ActionsBar, {
       actions: actionsWithDetails
     });
   }

package/dist/es2019/root/cardViewWrapper.js

@@ -0,0 +1,26 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles } from './styles';
+export const Wrapper = props => {
+  const {
+    testId,
+    shouldUsePointerCursor,
+    breakpointSize,
+    dimensions,
+    onClick,
+    onMouseEnter,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: wrapperStyles({
+      shouldUsePointerCursor,
+      breakpointSize,
+      dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};

package/dist/es2019/root/inlinePlayer.js

@@ -4,14 +4,13 @@ import React from 'react';
 import { Component } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 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 { calcBreakpointSize } from './ui/styles';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getElementDimension } from '../utils/getElementDimension';
-export const inlinePlayerClassName = 'media-card-inline-player';
+import { InlinePlayerWrapper } from './inlinePlayerWrapper';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     const {
@@ -234,9 +233,10 @@ export class InlinePlayerBase extends Component {
     }
 
     return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-      className: inlinePlayerClassName,
-      "data-testid": testId || 'media-card-inline-player',
-      selected: selected,
+      testId: testId || 'media-card-inline-player',
+      selected: {
+        selected
+      },
       onClick: onClick,
       innerRef: forwardRef || undefined,
       dimensions: dimensions

package/dist/es2019/root/inlinePlayerWrapper.js

@@ -0,0 +1,23 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles';
+export const InlinePlayerWrapper = props => {
+  const {
+    testId,
+    selected,
+    dimensions,
+    onClick,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: inlinePlayerClassName,
+    css: inlinePlayerWrapperStyles({
+      selected,
+      dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};

package/dist/es2019/root/{styled.js → styles.js}

@@ -1,46 +1,45 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { breakpointStyles } from '../utils/breakpoint';
 import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
 import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+export const inlinePlayerClassName = 'media-card-inline-player';
 
 const getWrapperHeight = dimensions => dimensions && dimensions.height ? `height: ${getCSSUnitValue(dimensions.height)}; max-height: 100%;` : '';
 
 const getWrapperWidth = dimensions => dimensions && dimensions.width ? `width: ${getCSSUnitValue(dimensions.width)}; max-width: 100%;` : '';
 
-export const Wrapper = styled.div`
-  ${({
+export const wrapperStyles = ({
   dimensions,
   breakpointSize = 'medium',
   shouldUsePointerCursor
-}) => {
-  return `
-      ${breakpointStyles({
-    breakpointSize
-  })}
-      ${getWrapperHeight(dimensions)}
+}) => css`
+  ${breakpointStyles({
+  breakpointSize
+})}
+  ${getWrapperHeight(dimensions)}
       ${getWrapperWidth(dimensions)}
-      cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
-    `;
-}};
+  cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
 `;
-Wrapper.displayName = 'CardViewWrapper';
-export const InlinePlayerWrapper = styled.div`
-  width: ${props => getDimensionsWithDefault(props.dimensions).width || '100%'};
-  height: ${props => getDimensionsWithDefault(props.dimensions).height || 'auto'};
+wrapperStyles.displayName = 'CardViewWrapper';
+export const inlinePlayerWrapperStyles = ({
+  dimensions,
+  selected
+}) => css`
+  width: ${getDimensionsWithDefault(dimensions).width || '100%'};
+  height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
   overflow: hidden;
   border-radius: ${borderRadius()}px;
   position: relative;
   max-width: 100%;
   max-height: 100%;
 
-  ${getSelectedBorderStyle}
+  ${getSelectedBorderStyle(selected)}
 
   video {
     width: 100%;
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
-export const FormattedMessageWrapper = styled.span``;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/es2019/root/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
-import { Wrapper } from './styled';
+import { ActionsBarWrapper } from './actionsBarWrapper';
 export class ActionsBar extends React.Component {
   render() {
     const {
@@ -12,7 +12,7 @@ export class ActionsBar extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(ActionsBarWrapper, {
       isFixed: isFixed
     }, /*#__PURE__*/React.createElement(CardActionsView, {
       actions: actions,

package/dist/es2019/root/ui/actionsBar/actionsBarWrapper.js

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, actionsBarClassName } from './styles';
+export const ActionsBarWrapper = props => {
+  return jsx("div", {
+    id: "actionsBarWrapper",
+    css: wrapperStyles(props.isFixed),
+    className: actionsBarClassName
+  }, props.children);
+};

package/dist/es2019/root/ui/actionsBar/styles.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+export const actionsBarClassName = 'media-card-actions-bar';
+export const fixedActionBarStyles = `opacity: 1;`;
+export const wrapperStyles = isFixed => css`
+  ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
+  ${transition()}
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+`;
+wrapperStyles.displayName = 'ActionsBarWrapper';

package/dist/es2019/root/ui/actionsBar/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { blanketStyles, blanketClassName } from './styles';
+export const Blanket = props => {
+  const {
+    isFixed
+  } = props;
+  return jsx("div", {
+    css: blanketStyles(isFixed),
+    className: blanketClassName
+  });
+};

package/dist/es2019/root/ui/blanket/styles.js

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+import { N90A } from '@atlaskit/theme/colors';
+export const blanketClassName = 'media-card-blanket';
+export const fixedBlanketStyles = `background-color: ${N90A};`;
+export const blanketStyles = isFixed => css`
+  ${transition()}
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  left: 0;
+  top: 0;
+  ${isFixed ? fixedBlanketStyles : ''}
+`;
+blanketStyles.displayName = 'Blanket';

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

@@ -0,0 +1,16 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconMessageWrapperStyles } from './styles';
+export const IconMessageWrapper = props => {
+  const {
+    animated,
+    reducedFont
+  } = props;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: iconMessageWrapperStyles({
+      animated: animated,
+      reducedFont: reducedFont
+    })
+  }, props.children);
+};

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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { IconMessageWrapper } from './styled';
+import { IconMessageWrapper } from './iconMessageWrapper';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -12,7 +11,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation