@atlaskit/media-card 78.0.2 → 78.0.4

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.0.2";
+const packageVersion = "78.0.4";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.2";
+var packageVersion = "78.0.4";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/fileCard.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
@@ -32,7 +32,7 @@ import { performanceNow } from './performance';
 import { useContext } from 'react';
 import { DateOverrideContext } from '../dateOverrideContext';
 import { SvgView } from './svgView';
-var LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
+var LoadedCardView = fg('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
 export var FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
@@ -318,7 +318,7 @@ export var FileCard = function FileCard(_ref) {
     setShouldRenderSVG(false);
   };
   var onImageError = function onImageError(newCardPreview) {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageErrorBase(newCardPreview);
@@ -327,7 +327,7 @@ export var FileCard = function FileCard(_ref) {
     setPreviewDidRender(true);
   };
   var onImageLoad = function onImageLoad(newCardPreview) {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageLoadBase(newCardPreview);
@@ -454,14 +454,15 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   useEffect(function () {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
+    if (finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
      * it is able to set isCardVisible to true.
      */
-    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
-    ) {
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay &&
+    // SVG won't be supported when overlay is on
+    fg('platform.media-card-svg-rendering_6tdbv')) {
       setShouldRenderSVG(true);
     }
   }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
@@ -644,7 +645,7 @@ export var FileCard = function FileCard(_ref) {
     cardPreview: preview,
     alt: alt,
     resizeMode: resizeMode,
-    dimensions: cardDimensions,
+    cardDimensions: cardDimensions,
     selected: selected,
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,

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.0.2";
+var packageVersion = "78.0.4";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -1,10 +1,49 @@
-export var calculateSvgDimensions = function calculateSvgDimensions(img, resizeMode) {
-  var naturalWidth = img.naturalWidth,
-    naturalHeight = img.naturalHeight;
-  var isLadscape = naturalWidth / naturalHeight > 1;
-  return resizeMode === 'crop' ? isLadscape ? {
-    height: '100%'
-  } : {
-    width: '100%'
-  } : {};
+export var calculateSvgDimensions = function calculateSvgDimensions(imgElement, parentElement, resizeMode) {
+  var naturalWidth = imgElement.naturalWidth,
+    width = imgElement.width,
+    naturalHeight = imgElement.naturalHeight,
+    height = imgElement.height;
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  var imgWidth = naturalWidth || width;
+  var imgHeight = naturalHeight || height;
+  var _parentElement$getBou = parentElement.getBoundingClientRect(),
+    parentWidth = _parentElement$getBou.width,
+    parentHeight = _parentElement$getBou.height;
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "min(100%, ".concat(imgWidth, "px"),
+      maxHeight: "min(100%, ".concat(imgHeight, "px")
+    };
+  }
+  var imgRatio = imgWidth / imgHeight;
+  var cardRatio = parentWidth / parentHeight;
+  var isImageLandscapier = imgRatio > cardRatio;
+  if (resizeMode === 'stretchy-fit') {
+    if (isImageLandscapier) {
+      return {
+        width: '100%',
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        height: '100%',
+        maxWidth: '100%'
+      };
+    }
+  }
+  if (resizeMode === 'crop') {
+    if (isImageLandscapier) {
+      return {
+        height: imgHeight,
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        width: imgWidth,
+        maxWidth: '100%'
+      };
+    }
+  }
+  return {};
 };

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

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
@@ -16,22 +19,9 @@ import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
 import { MediaCardError } from '../../errors';
 import { getErrorReason } from './errors';
-export var convertResizeMode = function convertResizeMode(resizeMode) {
-  switch (resizeMode) {
-    case 'crop':
-      return 'cover';
-    case 'fit':
-    case 'full-fit':
-      return 'scale-down';
-    case 'stretchy-fit':
-      return 'contain';
-    default:
-      return;
-  }
-};
 export var SvgViewBase = function SvgViewBase(_ref) {
   var identifier = _ref.identifier,
-    dimensions = _ref.dimensions,
+    cardDimensions = _ref.cardDimensions,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     testId = _ref.testId,
@@ -60,10 +50,17 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     svgDimensions = _useState6[0],
     setSvgDimensions = _useState6[1];
-  var divRef = useRef(null);
-  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var imgRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var breakpoint = useBreakpoint(cardDimensions.width, wrapperRef);
+  var calculateDimensions = useCallback(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode]);
   var onSvgLoad = function onSvgLoad(evt) {
-    setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
+    calculateDimensions(evt.currentTarget);
     setDidSvgRender(true);
     onLoad();
   };
@@ -74,16 +71,21 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
   };
+  useEffect(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
   return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
     fileName: fileName !== null && fileName !== void 0 ? fileName : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
   }), jsx(Wrapper, {
     testId: testId || 'media-card-svg-wrapper',
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: wrapperRef,
     mediaCardCursor: mediaCardCursor,
     selected: !!selected,
     breakpoint: breakpoint,
@@ -103,13 +105,12 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   }, jsx(MediaSvg, {
     testId: "media-card-svg",
     identifier: identifier,
-    dimensions: svgDimensions,
     onLoad: onSvgLoad,
     onError: onSvgError,
-    style: {
-      visibility: didSvgRender ? 'visible' : 'hidden',
-      objectFit: convertResizeMode(resizeMode)
-    }
+    style: _objectSpread({
+      visibility: didSvgRender ? 'visible' : 'hidden'
+    }, svgDimensions),
+    ref: imgRef
   }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,

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

@@ -5,7 +5,7 @@ import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var wrapperStyles = css({
   boxSizing: 'border-box',
   fontFamily: fontFamily(),

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

@@ -7,7 +7,7 @@ var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -24,7 +24,7 @@ export var playButtonWrapperStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

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

@@ -58,14 +58,14 @@ export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',

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

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

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

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.0.2";
+var packageVersion = "78.0.4";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/svgView/helpers.d.ts

@@ -1,3 +1,2 @@
 import { type ImageResizeMode } from '@atlaskit/media-client';
-import { type MediaSvgProps } from '@atlaskit/media-svg';
-export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];
+export declare const calculateSvgDimensions: (imgElement: HTMLImageElement, parentElement: HTMLElement, resizeMode: ImageResizeMode) => React.CSSProperties;

package/dist/types/card/svgView/svgView.d.ts

@@ -3,16 +3,15 @@ import { jsx } from '@emotion/react';
 import React, { type MouseEvent } from 'react';
 import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../types';
+import { type CardDimensions, type CardStatus, type MediaCardCursor } from '../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
 import { MediaCardError } from '../../errors';
-export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
     readonly testId?: string;
     identifier: FileIdentifier;
     readonly status: CardStatus;
-    readonly dimensions: CardDimensions;
+    readonly cardDimensions: CardDimensions;
     readonly onClick?: OnClickFn;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly selected?: boolean;
@@ -21,12 +20,12 @@ export interface SvgViewBaseOwnProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly progress?: number;
     readonly alt?: string;
-    readonly resizeMode?: ImageResizeMode;
+    readonly resizeMode: ImageResizeMode;
     readonly onLoad: () => void;
     readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, cardDimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/card/svgView/helpers.d.ts

@@ -1,3 +1,2 @@
 import { type ImageResizeMode } from '@atlaskit/media-client';
-import { type MediaSvgProps } from '@atlaskit/media-svg';
-export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];
+export declare const calculateSvgDimensions: (imgElement: HTMLImageElement, parentElement: HTMLElement, resizeMode: ImageResizeMode) => React.CSSProperties;

package/dist/types-ts4.5/card/svgView/svgView.d.ts

@@ -3,16 +3,15 @@ import { jsx } from '@emotion/react';
 import React, { type MouseEvent } from 'react';
 import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../types';
+import { type CardDimensions, type CardStatus, type MediaCardCursor } from '../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
 import { MediaCardError } from '../../errors';
-export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
     readonly testId?: string;
     identifier: FileIdentifier;
     readonly status: CardStatus;
-    readonly dimensions: CardDimensions;
+    readonly cardDimensions: CardDimensions;
     readonly onClick?: OnClickFn;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly selected?: boolean;
@@ -21,12 +20,12 @@ export interface SvgViewBaseOwnProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly progress?: number;
     readonly alt?: string;
-    readonly resizeMode?: ImageResizeMode;
+    readonly resizeMode: ImageResizeMode;
     readonly onLoad: () => void;
     readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, cardDimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/example-helpers/cardViewWrapper.tsx

@@ -35,8 +35,10 @@ const cardWrapperStyles = ({ small, displayInline }: CardViewWrapperProps) =>
 
 export const CardViewWrapper = (props: CardViewWrapperProps) => {
 	if (props.small) {
+		// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 		return <Box xcss={[cardWrapperStyles(props), smallStyles]}>{props.children}</Box>;
 	} else {
+		// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 		return <Box xcss={[cardWrapperStyles(props), largeStyles]}>{props.children}</Box>;
 	}
 };

package/example-helpers/styles.ts

@@ -2,14 +2,14 @@ import { token } from '@atlaskit/tokens';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const editableCardOptionsStyles = css({
 	padding: token('space.250', '20px'),
 	borderBottom: `1px solid ${token('color.border', '#ccc')}`,
 	maxWidth: '700px',
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const sliderWrapperStyles = css({
 	display: 'flex',
 	width: '50%',
@@ -20,7 +20,7 @@ export const sliderWrapperStyles = css({
 	},
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const editableCardContentStyles = css({
 	padding: token('space.250', '20px'),
 	border: '2px dashed',
@@ -33,7 +33,7 @@ export const editableCardContentStyles = css({
 	boxSizing: 'border-box',
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const optionsWrapperStyles = css({
 	display: 'flex',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -43,7 +43,7 @@ export const optionsWrapperStyles = css({
 	},
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardDimensionsWrapperStyles = css({
 	margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
 		'space.250',
@@ -59,16 +59,16 @@ export const cardDimensionsWrapperStyles = css({
 	},
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const flexWrapperStyles = css({
 	display: 'flex',
 });
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardPreviewWrapperStyles = css({
 	flex: 1,
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardWrapperStyles = css({
 	border: `1px solid ${token('color.border.bold', 'black')}`,
 	padding: token('space.150', '12px'),
@@ -80,13 +80,13 @@ export const cardWrapperStyles = css({
 	display: 'inline-block',
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const cardFlowHeaderStyles = css({
 	margin: `${token('space.250', '20px')} auto`,
 	padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const externalIdentifierWrapperStyles = css({
 	display: 'flex',
 	justifyContent: 'space-around',
@@ -97,7 +97,7 @@ export const externalIdentifierWrapperStyles = css({
 	},
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const unhandledErrorCardWrapperStyles = css({
 	padding: token('space.250', '20px'),
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -111,24 +111,24 @@ export const unhandledErrorCardWrapperStyles = css({
 	},
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const inlineCardVideoWrapperItemStyles = css({
 	padding: token('space.150', '12px'),
 	border: `1px solid ${token('color.border.bold', 'black')}`,
 	margin: token('space.150', '12px'),
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const mediaViewerExampleColumnStyles = css({
 	flex: 1,
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const mediaViewerExampleWrapperStyles = css({
 	display: 'flex',
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const mediaInlineWrapperStyles = css({
 	display: 'flex',
 	alignItems: 'center',
@@ -136,7 +136,7 @@ export const mediaInlineWrapperStyles = css({
 	margin: token('space.1000', '80px'),
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const mediaInlineTableStyles = css({
 	width: '800px',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/example-helpers/svg-helpers/svgContainer.tsx

@@ -8,9 +8,9 @@ import { Box, xcss } from '@atlaskit/primitives';
 
 const containerStyles = xcss({
 	boxSizing: 'border-box',
-	borderColor: 'color.border.accent.orange',
-	borderStyle: 'solid',
-	borderWidth: 'border.width.indicator',
+	outlineColor: 'color.border.accent.orange',
+	outlineStyle: 'solid',
+	outlineWidth: 'border.width.indicator',
 	margin: 'auto',
 	marginTop: 'space.100',
 	backgroundColor: 'color.background.accent.green.subtler',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "78.0.2",
+	"version": "78.0.4",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/dropdown-menu": "^12.13.0",
-		"@atlaskit/editor-shared-styles": "^2.12.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/dropdown-menu": "^12.14.0",
+		"@atlaskit/editor-shared-styles": "^2.13.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
 		"@atlaskit/media-common": "^11.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/media-ui": "^25.10.0",
 		"@atlaskit/media-viewer": "^48.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^10.0.0",
+		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
@@ -87,7 +87,7 @@
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.0",
 		"@atlassian/ufo": "^0.3.0",
-		"@testing-library/dom": "^8.17.1",
+		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",