@atlaskit/media-card 78.4.0 → 78.5.0

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/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 var PlayButton = function 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/esm/card/ui/tickBox/tickBox.js

@@ -1,11 +1,12 @@
 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 var TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
   return /*#__PURE__*/React.createElement(TickBoxWrapper, {
     selected: selected
   }, /*#__PURE__*/React.createElement(TickIcon, {
+    color: "currentColor",
     label: "tick"
   }));
 };

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

@@ -31,7 +31,9 @@ var wrapperStyles = function wrapperStyles(selected) {
       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/esm/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 var FailedTitleBox = function FailedTitleBox(_ref) {
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
-    size: 'small',
-    primaryColor: "var(--ds-text-danger, ".concat(R300, ")")
+    LEGACY_size: 'small',
+    LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+    color: "var(--ds-text-danger, ".concat(R300, ")")
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -68,11 +68,20 @@ export var titleBoxIconStyles = css({
   bottom: '0px'
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var 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 var 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/esm/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';
@@ -28,8 +28,9 @@ export var TitleBox = injectIntl(function (_ref) {
   })), /*#__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/esm/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 var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor,
@@ -48,10 +49,12 @@ export var TitleBoxFooter = function TitleBoxFooter(props) {
 export var TitleBoxIcon = function 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 var ErrorMessageWrapper = function ErrorMessageWrapper(props) {

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

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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';
@@ -90,8 +90,9 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
           onClick: onClick
         }, jsx(WarningIcon, {
           label: "Error",
-          primaryColor: "var(--ds-icon-warning, ".concat(Y500, ")"),
-          size: "medium"
+          color: "var(--ds-icon-warning, ".concat(Y500, ")"),
+          LEGACY_size: "medium",
+          spacing: "spacious"
         }), jsx("p", null, "We couldn't load this content"))
       );
     }

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

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
 var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   var message = _ref.message,
@@ -43,7 +43,9 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     padding: "var(--ds-space-025, 2px)".concat(" ", "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, ".concat(N900, ")"),
     backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
@@ -59,9 +61,10 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
     React.createElement("span", {
       style: style
     }, /*#__PURE__*/React.createElement(WarningIcon, {
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0"),
       label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(R300, ")")
     }), message)
   );
 };

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 // 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 var ErrorIcon = /*#__PURE__*/function (_Component) {
   _inherits(ErrorIcon, _Component);
@@ -31,8 +31,9 @@ export var ErrorIcon = /*#__PURE__*/function (_Component) {
         jsx("div", {
           css: errorIconWrapperStyles
         }, jsx(WarningIcon, {
+          color: "currentColor",
           label: "Error",
-          size: size
+          LEGACY_size: size
         }))
       );
     }

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.4.0";
+var packageVersion = "78.5.0";
 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/card/ui/titleBox/styles.d.ts

@@ -18,5 +18,6 @@ export declare const titleBoxFooterStyles: {
     displayName: string;
 };
 export declare const titleBoxIconStyles: import("@emotion/react").SerializedStyles;
+export declare const newTitleBoxIconStyles: import("@emotion/react").SerializedStyles;
 export declare const errorMessageWrapperStyles: import("@emotion/react").SerializedStyles;
 export {};

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/dist/types-ts4.5/card/ui/titleBox/styles.d.ts

@@ -18,5 +18,6 @@ export declare const titleBoxFooterStyles: {
     displayName: string;
 };
 export declare const titleBoxIconStyles: import("@emotion/react").SerializedStyles;
+export declare const newTitleBoxIconStyles: import("@emotion/react").SerializedStyles;
 export declare const errorMessageWrapperStyles: import("@emotion/react").SerializedStyles;
 export {};

package/example-helpers/index.tsx

@@ -11,7 +11,7 @@ import {
 	createPollingMaxAttemptsError,
 	createRateLimitedError,
 } from '@atlaskit/media-client/test-helpers';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
 import FabricAnalyticsListeners, { type AnalyticsWebClient } from '@atlaskit/analytics-listeners';
 import { payloadPublisher } from '@atlassian/ufo';
 
@@ -79,7 +79,7 @@ export const deleteAction = {
 	handler: () => {
 		console.log('delete');
 	},
-	icon: <CrossIcon size="small" label="delete" />,
+	icon: <CrossIcon color="currentColor" LEGACY_size="small" label="delete" />,
 };
 
 export const annotateCardAction: CardAction = {
@@ -87,10 +87,11 @@ export const annotateCardAction: CardAction = {
 	handler: () => {
 		console.log('annotate');
 	},
+	// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO: no icon available (https://product-fabric.atlassian.net/browse/DSP-20852)
 	icon: <AnnotateIcon size="small" label="annotate" />,
 };
 
-export const actions = [openAction, closeAction, annotateCardAction, deleteAction];
+export const actions = [openAction, closeAction, deleteAction, annotateCardAction];
 
 export const anotherAction: CardAction = {
 	label: 'Some other action',