@atlaskit/media-card 78.4.0 → 78.5.0

package/dist/es2019/card/fileCard.js

@@ -1,5 +1,5 @@
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
@@ -202,6 +202,8 @@ export const FileCard = ({
       const downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: "Download"
         }),
         handler: () => mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName)

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.4.0";
+const packageVersion = "78.5.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/svgView/svgView.js

@@ -104,7 +104,7 @@ export const SvgViewBase = ({
       ...svgDimensions
     },
     ref: imgRef
-  }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
+  }), !didSvgRender && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,
     mediaType: 'image',

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Component } from 'react';
-import MoreIcon from '@atlaskit/icon/glyph/more';
+import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
@@ -68,6 +68,8 @@ export class CardActionsDropdownMenu extends Component {
           },
           ref: triggerRef
         }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: "more"
         }))
       }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));

package/dist/es2019/card/ui/cardSpinner/cardSpinner.js

@@ -0,0 +1,150 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+/**
+ * Note: CardSpinner is almost a direct copy of Spinner from '@atlaskit/spinner', the only difference
+ * being the removal of interaction tracing.
+ * Removing interaction tracing ensures that Media Card is not contributing to Jira's TTAI and TTVC metrics.
+ */
+
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx, keyframes } from '@emotion/react';
+import { N0, N500 } from '@atlaskit/theme/colors';
+import { presetSizes } from './constants';
+/**
+ * Returns the appropriate circle stroke color.
+ */
+function getStrokeColor(appearance) {
+  return appearance === 'inherit' ? `var(--ds-icon-subtle, ${N500})` : `var(--ds-icon-inverse, ${N0})`;
+}
+const rotate = keyframes({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+const rotateStyles = css({
+  animation: `${rotate} 0.86s infinite`,
+  animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)',
+  transformOrigin: 'center'
+});
+
+/**
+ * There are three parts to the load in animation:
+ * 1. Fade in
+ * 2. Accelerated spin
+ * 3. Stretch the spinner line
+ */
+const loadIn = keyframes({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+const loadInStyles = css({
+  animation: `${loadIn} 1s ease-in-out`,
+  /**
+   * When the animation completes, stay at the last frame of the animation.
+   */
+  animationFillMode: 'forwards',
+  /**
+   * We are going to animate this in.
+   */
+  opacity: 0
+});
+const wrapperStyles = css({
+  display: 'inline-flex',
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+const circleStyles = css({
+  fill: 'none',
+  strokeDasharray: 60,
+  strokeDashoffset: 'inherit',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  '@media screen and (forced-colors: active)': {
+    filter: 'grayscale(100%)',
+    stroke: 'CanvasText'
+  }
+});
+
+/**
+ * __Spinner__
+ *
+ * A spinner is an animated spinning icon that lets users know content is being loaded.
+ *
+ * - [Examples](https://atlassian.design/components/spinner/examples)
+ * - [Code](https://atlassian.design/components/spinner/code)
+ * - [Usage](https://atlassian.design/components/spinner/usage)
+ */
+const CardSpinner = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Spinner({
+  appearance = 'inherit',
+  delay = 0,
+  label,
+  size: providedSize = 'medium',
+  testId
+}, ref) {
+  const size = typeof providedSize === 'number' ? providedSize : presetSizes[providedSize];
+  const animationDelay = `${delay}ms`;
+  const stroke = getStrokeColor(appearance);
+
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
+  return jsx("span", {
+    /**
+     * This span exists to off-load animations from the circle element,
+     * which were causing performance issues (style recalculations)
+     * on Safari and older versions of Chrome.
+     *
+     * This can be removed and styles placed back on the circle element once
+     * Safari fixes this bug and off-loads rendering to the GPU from the CPU.
+     */
+    css: [wrapperStyles, rotateStyles],
+    "data-testid": testId && `${testId}-wrapper`
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay,
+      width: size,
+      height: size
+    }
+  }, jsx("svg", {
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": testId,
+    ref: ref,
+    "aria-label": label || undefined,
+    css: loadInStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay
+    },
+    role: label ? 'img' : 'none'
+  }, jsx("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke
+    }
+  })));
+}));
+export default CardSpinner;

package/dist/es2019/card/ui/cardSpinner/constants.js

@@ -0,0 +1,7 @@
+export const presetSizes = {
+  xsmall: 8,
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
+};

package/dist/es2019/card/ui/imageRenderer/imageRenderer.js

@@ -23,15 +23,15 @@ export const ImageRenderer = ({
     }
   }, [mediaType, onDisplayImageRef]);
   const onLoad = () => {
-    onImageLoad && onImageLoad(cardPreview);
+    onImageLoad && cardPreview && onImageLoad(cardPreview);
   };
   const onError = () => {
-    onImageError && onImageError(cardPreview);
+    onImageError && cardPreview && onImageError(cardPreview);
   };
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
-    dataURI: cardPreview.dataURI,
+    dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
     alt: alt,
-    previewOrientation: cardPreview.orientation,
+    previewOrientation: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.orientation,
     onImageLoad: onLoad,
     onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,

package/dist/es2019/card/ui/playButton/playButton.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
+import LegacyVidPlayIcon from '@atlaskit/icon/glyph/vid-play';
+import VidPlayIcon from '@atlaskit/icon/core/video-play-overlay';
 import { PlayButtonWrapper } from './playButtonWrapper';
 import { PlayButtonBackground } from './playButtonBackground';
 export const PlayButton = () => {
   return /*#__PURE__*/React.createElement(PlayButtonWrapper, null, /*#__PURE__*/React.createElement(PlayButtonBackground, null), /*#__PURE__*/React.createElement(VidPlayIcon, {
+    color: "currentColor",
     label: "play",
-    size: "large"
+    LEGACY_size: "large",
+    LEGACY_fallbackIcon: LegacyVidPlayIcon
   }));
 };

package/dist/es2019/card/ui/tickBox/tickBox.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import TickIcon from '@atlaskit/icon/glyph/check';
+import TickIcon from '@atlaskit/icon/utility/migration/check-mark--check';
 import { TickBoxWrapper } from './tickBoxWrapper';
 export const TickBox = ({
   selected
 }) => /*#__PURE__*/React.createElement(TickBoxWrapper, {
   selected: selected
 }, /*#__PURE__*/React.createElement(TickIcon, {
+  color: "currentColor",
   label: "tick"
 }));

package/dist/es2019/card/ui/tickBox/tickBoxWrapper.js

@@ -29,7 +29,9 @@ transition && transition(), {
     svg: {
       height: '14px'
     }
-  }
+  },
+  display: 'grid',
+  placeItems: 'center'
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 getSelectedStyles(selected));

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import EditorWarningIcon from '@atlaskit/icon/utility/migration/warning--editor-warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
@@ -12,7 +12,8 @@ export const FailedTitleBox = ({
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
-    size: 'small',
-    primaryColor: `var(--ds-text-danger, ${R300})`
+    LEGACY_size: 'small',
+    LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
+    color: `var(--ds-text-danger, ${R300})`
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/es2019/card/ui/titleBox/styles.js

@@ -64,11 +64,20 @@ export const titleBoxIconStyles = css({
   bottom: '0px'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const newTitleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: "var(--ds-space-050, 4px)"
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-start',
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  gap: "var(--ds-space-025, 2px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     verticalAlign: 'middle',

package/dist/es2019/card/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockFilledIcon from '@atlaskit/icon/utility/migration/lock-locked--lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
@@ -27,8 +27,9 @@ export const TitleBox = injectIntl(({
   })), /*#__PURE__*/React.createElement(TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
+    color: "currentColor",
     label: "",
-    size: "small"
+    LEGACY_size: "small"
   })));
 }, {
   enforceContext: false

package/dist/es2019/card/ui/titleBox/titleBoxComponents.js

@@ -4,7 +4,8 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { errorMessageWrapperStyles, newTitleBoxIconStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
 export const TitleBoxWrapper = props => {
   const {
     breakpoint,
@@ -54,10 +55,12 @@ export const TitleBoxFooter = props => {
 export const TitleBoxIcon = props => {
   return jsx("div", {
     id: "titleBoxIcon",
-    "data-testid": "title-box-icon"
+    "data-testid": "title-box-icon",
+    css: fg('platform.design-system-team.enable-new-icons') ?
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: titleBoxIconStyles
+    newTitleBoxIconStyles :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    titleBoxIconStyles
   }, props.children);
 };
 export const ErrorMessageWrapper = props => {

package/dist/es2019/card/ui/unhandledErrorCard/index.js

@@ -5,7 +5,7 @@
 import { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
 import { N20, N800, Y500 } from '@atlaskit/theme/colors';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../../../utils';
@@ -74,8 +74,9 @@ export class UnhandledErrorCard extends Component {
         onClick: onClick
       }, jsx(WarningIcon, {
         label: "Error",
-        primaryColor: `var(--ds-icon-warning, ${Y500})`,
-        size: "medium"
+        color: `var(--ds-icon-warning, ${Y500})`,
+        LEGACY_size: "medium",
+        spacing: "spacious"
       }), jsx("p", null, "We couldn't load this content"))
     );
   }

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "78.4.0",
+      packageName: "78.5.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import WarningIcon from '@atlaskit/icon/utility/migration/warning';
 import { fireMediaCardEvent } from '../utils/analytics';
 const ErrorBoundaryComponent = ({
   message,
@@ -34,7 +34,9 @@ const ErrorBoundaryComponent = ({
     padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
     marginRight: "var(--ds-space-negative-025, -2px)",
     WebkitBoxDecorationBreak: 'clone',
-    display: 'inline',
+    display: 'inline-flex',
+    gap: "var(--ds-space-050, 4px)",
+    alignItems: 'center',
     borderRadius: '3px',
     color: `var(--ds-text, ${N900})`,
     backgroundColor: `var(--ds-background-neutral, ${N30A})`,
@@ -53,9 +55,10 @@ const ErrorBoundaryComponent = ({
     React.createElement("span", {
       style: style
     }, /*#__PURE__*/React.createElement(WarningIcon, {
+      LEGACY_margin: `0 ${"var(--ds-space-negative-050, -4px)"} 0 0`,
       label: "error",
-      size: "small",
-      primaryColor: `var(--ds-icon-danger, ${R300})`
+      LEGACY_size: "small",
+      color: `var(--ds-icon-danger, ${R300})`
     }), message)
   );
 };

package/dist/es2019/utils/lightCards/errorIcon/index.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
 import { errorIconWrapperStyles } from './styles';
 export class ErrorIcon extends Component {
   render() {
@@ -18,8 +18,9 @@ export class ErrorIcon extends Component {
       jsx("div", {
         css: errorIconWrapperStyles
       }, jsx(WarningIcon, {
+        color: "currentColor",
         label: "Error",
-        size: size
+        LEGACY_size: size
       }))
     );
   }

package/dist/es2019/utils/ufoExperiences.js

@@ -5,7 +5,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.4.0";
+const packageVersion = "78.5.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.4.0";
+var packageVersion = "78.5.0";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -11,7 +11,7 @@ import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import SpinnerIcon from '@atlaskit/spinner';
+import CardSpinner from './ui/cardSpinner/cardSpinner';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
@@ -114,7 +114,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     var isZeroSize = metadata && metadata.size === 0;
     var defaultConfig = {
       renderTypeIcon: !didImageRender,
-      renderImageRenderer: !!cardPreview,
+      renderImageRenderer: true,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
       renderTitleBox: !disableOverlay,
@@ -242,10 +242,10 @@ export var CardViewBase = function CardViewBase(_ref) {
   }), iconMessage), renderSpinner && jsx(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, jsx(SpinnerIcon, {
+  }, jsx(CardSpinner, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderImageRenderer && !!cardPreview && jsx(ImageRenderer, {
+  })), renderImageRenderer && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,

package/dist/esm/card/fileCard.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
@@ -240,6 +240,8 @@ export var FileCard = function FileCard(_ref) {
       var downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: "Download"
         }),
         handler: function handler() {

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.4.0";
+var packageVersion = "78.5.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/svgView/svgView.js

@@ -115,7 +115,7 @@ export var SvgViewBase = function SvgViewBase(_ref) {
       visibility: didSvgRender ? 'visible' : 'hidden'
     }, svgDimensions),
     ref: imgRef
-  }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
+  }), !didSvgRender && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,
     mediaType: 'image',

package/dist/esm/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -10,7 +10,7 @@ function _createSuper(t) { var r = _isNativeReflectConstruct(); return function
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';
-import MoreIcon from '@atlaskit/icon/glyph/more';
+import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
@@ -84,6 +84,8 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
                 },
                 ref: triggerRef
               }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
+                color: "currentColor",
+                spacing: "spacious",
                 label: "more"
               }))
             );