@atlaskit/media-card 78.3.0 → 78.4.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/media-card
 
+## 78.4.1
+
+### Patch Changes
+
+- [#141583](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141583)
+  [`ba6def6b9d3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba6def6b9d3ce) -
+  Updated Media card and UI to avoid contributing to TTVC metrics
+
+  - Media card will always render the `img`, even while it is still loading (in that case, the `img`
+    will just be hidden). It will also use a custom loading spinner with no interaction context.
+  - Media image will allow a null value for the image source. It will also always render the `img`
+    tag and switch the css prop `display` according to the `src` value.
+
+- Updated dependencies
+
+## 78.4.0
+
+### Minor Changes
+
+- [#140915](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140915)
+  [`36b5acc412af5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36b5acc412af5) -
+  Design system typography uplift
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 78.3.0
 
 ### Minor Changes

package/dist/cjs/card/card.js

@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.3.0";
+var packageVersion = "78.4.1";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -12,7 +12,7 @@ var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _cardSpinner = _interopRequireDefault(require("./ui/cardSpinner/cardSpinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../utils/analytics");
@@ -122,7 +122,7 @@ var CardViewBase = exports.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,
@@ -250,10 +250,10 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, (0, _react.jsx)(_spinner.default, {
+  }, (0, _react.jsx)(_cardSpinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderImageRenderer && !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+  })), renderImageRenderer && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,

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

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

package/dist/cjs/card/svgView/svgView.js

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

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

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("./constants");
+/**
+ * @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.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+/**
+ * Returns the appropriate circle stroke color.
+ */
+function getStrokeColor(appearance) {
+  return appearance === 'inherit' ? "var(--ds-icon-subtle, ".concat(_colors.N500, ")") : "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
+}
+var rotate = (0, _react2.keyframes)({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateStyles = (0, _react2.css)({
+  animation: "".concat(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
+ */
+var loadIn = (0, _react2.keyframes)({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+var loadInStyles = (0, _react2.css)({
+  animation: "".concat(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
+});
+var wrapperStyles = (0, _react2.css)({
+  display: 'inline-flex',
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+var circleStyles = (0, _react2.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)
+ */
+var CardSpinner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Spinner(_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'inherit' : _ref$appearance,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    label = _ref.label,
+    _ref$size = _ref.size,
+    providedSize = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  var size = typeof providedSize === 'number' ? providedSize : _constants.presetSizes[providedSize];
+  var animationDelay = "".concat(delay, "ms");
+  var stroke = getStrokeColor(appearance);
+
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
+  return (0, _react2.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 && "".concat(testId, "-wrapper")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay: animationDelay,
+      width: size,
+      height: size
+    }
+  }, (0, _react2.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: animationDelay
+    },
+    role: label ? 'img' : 'none'
+  }, (0, _react2.jsx)("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke: stroke
+    }
+  })));
+}));
+var _default = exports.default = CardSpinner;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetSizes = void 0;
+var presetSizes = exports.presetSizes = {
+  xsmall: 8,
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
+};

package/dist/cjs/card/ui/cardSpinner/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -32,15 +32,15 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     }
   }, [mediaType, onDisplayImageRef]);
   var onLoad = function onLoad() {
-    onImageLoad && onImageLoad(cardPreview);
+    onImageLoad && cardPreview && onImageLoad(cardPreview);
   };
   var onError = function onError() {
-    onImageError && onImageError(cardPreview);
+    onImageError && cardPreview && onImageError(cardPreview);
   };
   return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-    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/cjs/card/ui/tickBox/tickBoxWrapper.js

@@ -23,7 +23,7 @@ var wrapperStyles = function wrapperStyles(selected) {
   return (0, _react.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   _styles2.transition && (0, _styles2.transition)(), {
-    fontSize: '14px',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     width: '14px',
     height: '14px',
     position: 'absolute',

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

@@ -14,7 +14,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _mediaUi = require("@atlaskit/media-ui");
 var _utils = require("../../../utils");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -66,7 +65,7 @@ var wrapperStyles = function wrapperStyles() {
       flexDirection: 'column',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       p: {
-        fontSize: "".concat((0, _constants.fontSize)(), "px"),
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         textAlign: 'center',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.3.0",
+        packageName: "78.4.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.3.0";
+var packageVersion = "78.4.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.3.0";
+const packageVersion = "78.4.1";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -7,7 +7,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';
@@ -109,7 +109,7 @@ export const CardViewBase = ({
     const isZeroSize = metadata && metadata.size === 0;
     const defaultConfig = {
       renderTypeIcon: !didImageRender,
-      renderImageRenderer: !!cardPreview,
+      renderImageRenderer: true,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
       renderTitleBox: !disableOverlay,
@@ -245,10 +245,10 @@ export const CardViewBase = ({
   }), 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/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.3.0";
+const packageVersion = "78.4.1";
 
 // @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/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/tickBox/tickBoxWrapper.js

@@ -14,7 +14,7 @@ const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-
 const wrapperStyles = selected => css(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 transition && transition(), {
-  fontSize: '14px',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   width: '14px',
   height: '14px',
   position: 'absolute',

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

@@ -7,7 +7,6 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { N20, N800, Y500 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../../../utils';
 const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
@@ -52,7 +51,7 @@ const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
       flexDirection: 'column',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       p: {
-        fontSize: `${fontSize()}px`,
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         textAlign: 'center',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'

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.3.0",
+      packageName: "78.4.1",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

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.3.0";
+const packageVersion = "78.4.1";
 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.3.0";
+var packageVersion = "78.4.1";
 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/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.3.0";
+var packageVersion = "78.4.1";
 
 // @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/cardSpinner/cardSpinner.js

@@ -0,0 +1,152 @@
+/**
+ * @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, ".concat(N500, ")") : "var(--ds-icon-inverse, ".concat(N0, ")");
+}
+var rotate = keyframes({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateStyles = css({
+  animation: "".concat(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
+ */
+var loadIn = keyframes({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+var loadInStyles = css({
+  animation: "".concat(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
+});
+var wrapperStyles = css({
+  display: 'inline-flex',
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+var 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)
+ */
+var CardSpinner = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Spinner(_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'inherit' : _ref$appearance,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    label = _ref.label,
+    _ref$size = _ref.size,
+    providedSize = _ref$size === void 0 ? 'medium' : _ref$size,
+    testId = _ref.testId;
+  var size = typeof providedSize === 'number' ? providedSize : presetSizes[providedSize];
+  var animationDelay = "".concat(delay, "ms");
+  var 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 && "".concat(testId, "-wrapper")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      animationDelay: 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: animationDelay
+    },
+    role: label ? 'img' : 'none'
+  }, jsx("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke: stroke
+    }
+  })));
+}));
+export default CardSpinner;

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

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

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

@@ -22,15 +22,15 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     }
   }, [mediaType, onDisplayImageRef]);
   var onLoad = function onLoad() {
-    onImageLoad && onImageLoad(cardPreview);
+    onImageLoad && cardPreview && onImageLoad(cardPreview);
   };
   var onError = function 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/esm/card/ui/tickBox/tickBoxWrapper.js

@@ -16,7 +16,7 @@ var wrapperStyles = function wrapperStyles(selected) {
   return css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition && transition(), {
-    fontSize: '14px',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     width: '14px',
     height: '14px',
     position: 'absolute',

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

@@ -14,7 +14,6 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { N20, N800, Y500 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../../../utils';
 var isPercentage = function isPercentage(value) {
@@ -61,7 +60,7 @@ var wrapperStyles = function wrapperStyles() {
       flexDirection: 'column',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       p: {
-        fontSize: "".concat(fontSize(), "px"),
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         textAlign: 'center',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.3.0",
+        packageName: "78.4.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -8,7 +8,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.3.0";
+var packageVersion = "78.4.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/ui/cardSpinner/cardSpinner.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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';
+import { type SpinnerProps } from './types';
+/**
+ * __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)
+ */
+declare const CardSpinner: React.MemoExoticComponent<React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>>;
+export default CardSpinner;

package/dist/types/card/ui/cardSpinner/constants.d.ts

@@ -0,0 +1,4 @@
+import { type PresetSize } from './types';
+export declare const presetSizes: {
+    [K in PresetSize]: number;
+};

package/dist/types/card/ui/cardSpinner/types.d.ts

@@ -0,0 +1,36 @@
+export type PresetSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type Size = PresetSize | number;
+export type Appearance = 'inherit' | 'invert';
+export type SpinnerProps = {
+    /**
+     * You can use this to invert the current theme.
+     * This is useful when you are displaying a spinner on a background that is not the same background color scheme as the main content.
+     */
+    appearance?: Appearance;
+    /**
+     * Delay the intro animation of `Spinner`.
+     * This is not to be used to avoid quick flickering of `Spinner`.
+     * `Spinner` will automatically fade in and takes ~200ms to become partially visible.
+     * This prop can be helpful for **long delays** such as `500-1000ms` for when you want to not
+     * show a `Spinner` until some longer period of time has elapsed.
+     */
+    delay?: number;
+    /**
+     * An optional `interactionName` used to identify when this component is holding an interaction.
+     */
+    interactionName?: string;
+    /**
+     * Describes what the spinner is doing for assistive technologies. For example, "loading", "submitting", or "processing".
+     */
+    label?: string;
+    /**
+     * Size of the spinner. The available sizes are `xsmall`, `small`, `medium`, `large`, and `xlarge`. For most use cases, we recommend `medium`.
+     */
+    size?: Size;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+};

package/dist/types/card/ui/imageRenderer/imageRenderer.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type MediaType, type ImageResizeMode } from '@atlaskit/media-client';
 import { type CardPreview } from '../../../types';
 export type ImageRendererProps = {
-    readonly cardPreview: CardPreview;
+    readonly cardPreview?: CardPreview;
     readonly mediaType: MediaType;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;

package/dist/types-ts4.5/card/ui/cardSpinner/cardSpinner.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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';
+import { type SpinnerProps } from './types';
+/**
+ * __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)
+ */
+declare const CardSpinner: React.MemoExoticComponent<React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>>;
+export default CardSpinner;

package/dist/types-ts4.5/card/ui/cardSpinner/constants.d.ts

@@ -0,0 +1,4 @@
+import { type PresetSize } from './types';
+export declare const presetSizes: {
+    [K in PresetSize]: number;
+};

package/dist/types-ts4.5/card/ui/cardSpinner/types.d.ts

@@ -0,0 +1,36 @@
+export type PresetSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type Size = PresetSize | number;
+export type Appearance = 'inherit' | 'invert';
+export type SpinnerProps = {
+    /**
+     * You can use this to invert the current theme.
+     * This is useful when you are displaying a spinner on a background that is not the same background color scheme as the main content.
+     */
+    appearance?: Appearance;
+    /**
+     * Delay the intro animation of `Spinner`.
+     * This is not to be used to avoid quick flickering of `Spinner`.
+     * `Spinner` will automatically fade in and takes ~200ms to become partially visible.
+     * This prop can be helpful for **long delays** such as `500-1000ms` for when you want to not
+     * show a `Spinner` until some longer period of time has elapsed.
+     */
+    delay?: number;
+    /**
+     * An optional `interactionName` used to identify when this component is holding an interaction.
+     */
+    interactionName?: string;
+    /**
+     * Describes what the spinner is doing for assistive technologies. For example, "loading", "submitting", or "processing".
+     */
+    label?: string;
+    /**
+     * Size of the spinner. The available sizes are `xsmall`, `small`, `medium`, `large`, and `xlarge`. For most use cases, we recommend `medium`.
+     */
+    size?: Size;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+};

package/dist/types-ts4.5/card/ui/imageRenderer/imageRenderer.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type MediaType, type ImageResizeMode } from '@atlaskit/media-client';
 import { type CardPreview } from '../../../types';
 export type ImageRendererProps = {
-    readonly cardPreview: CardPreview;
+    readonly cardPreview?: CardPreview;
     readonly mediaType: MediaType;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "78.3.0",
+	"version": "78.4.1",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,19 +38,19 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/dropdown-menu": "^12.18.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
-		"@atlaskit/icon": "^22.17.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.4.0",
-		"@atlaskit/media-file-preview": "^0.8.0",
+		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-svg": "^0.2.0",
-		"@atlaskit/media-ui": "^25.11.0",
-		"@atlaskit/media-viewer": "^48.8.0",
+		"@atlaskit/media-ui": "^25.14.0",
+		"@atlaskit/media-viewer": "^48.10.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@atlaskit/ufo-interaction-ignore": "^1.3.0",
@@ -75,10 +75,10 @@
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/inline-message": "^12.3.0",
 		"@atlaskit/media-core": "^34.3.0",
-		"@atlaskit/media-picker": "^66.5.0",
+		"@atlaskit/media-picker": "^66.6.0",
 		"@atlaskit/media-state": "^1.1.0",
 		"@atlaskit/media-test-data": "^2.6.0",
-		"@atlaskit/media-test-helpers": "^34.2.0",
+		"@atlaskit/media-test-helpers": "^34.3.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/range": "^7.4.0",
 		"@atlaskit/ssr": "*",