@atlaskit/media-card 77.12.1 → 77.12.3

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

@@ -5,6 +5,7 @@ import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-clien
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type CardStatus, type MediaCardCursor, type CardDimensions } 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 {
@@ -21,11 +22,11 @@ export interface SvgViewBaseOwnProps {
     readonly progress?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
-    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
-    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    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, }: SvgViewProps) => jsx.JSX.Element;
+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 SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/errors.d.ts

@@ -5,11 +5,12 @@ import { MediaFileStateError } from '@atlaskit/media-client-react';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | SvgPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
+export type SvgPrimaryReason = 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error';
 export declare function isMediaFileStateError(err: Error): err is MediaFileStateError;
 export declare function getFileStateErrorReason(err: MediaFileStateError): MediaClientErrorReason | 'unknown';
 export declare function isPollingError(err?: Error): boolean;

package/dist/types/utils/analytics/analytics.d.ts

@@ -1,3 +1,4 @@
+import { type ErrorInfo } from 'react';
 import { type FileDetails, type FileStatus, type MediaClientErrorReason, type RequestMetadata } from '@atlaskit/media-client';
 import { type FileAttributes, type PerformanceAttributes, type OperationalEventPayload, type UIEventPayload, type WithFileAttributes, type WithPerformanceAttributes, type SuccessAttributes, type FailureAttributes, type ScreenEventPayload, type ScreenAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common/analytics';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -52,7 +53,7 @@ export type ErrorBoundaryErrorInfo = {
 };
 export type AnalyticsErrorBoundaryAttributes = {
     error?: Error | string;
-    info?: ErrorBoundaryErrorInfo;
+    info?: ErrorInfo;
     browserInfo: string;
     failReason: string;
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type WrappedComponentProps } from 'react-intl-next';
-export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     fileName: string;
     innerRef: React.Ref<HTMLButtonElement>;

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

@@ -0,0 +1,3 @@
+import { type MediaSVGErrorReason } from '@atlaskit/media-svg';
+import { type SvgPrimaryReason } from '../../../errors';
+export declare const getErrorReason: (svgReason: MediaSVGErrorReason) => SvgPrimaryReason;

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

@@ -5,6 +5,7 @@ import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-clien
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type CardStatus, type MediaCardCursor, type CardDimensions } 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 {
@@ -21,11 +22,11 @@ export interface SvgViewBaseOwnProps {
     readonly progress?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
-    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
-    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    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, }: SvgViewProps) => jsx.JSX.Element;
+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 SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/errors.d.ts

@@ -5,11 +5,12 @@ import { MediaFileStateError } from '@atlaskit/media-client-react';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | SvgPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
+export type SvgPrimaryReason = 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error';
 export declare function isMediaFileStateError(err: Error): err is MediaFileStateError;
 export declare function getFileStateErrorReason(err: MediaFileStateError): MediaClientErrorReason | 'unknown';
 export declare function isPollingError(err?: Error): boolean;

package/dist/types-ts4.5/utils/analytics/analytics.d.ts

@@ -1,3 +1,4 @@
+import { type ErrorInfo } from 'react';
 import { type FileDetails, type FileStatus, type MediaClientErrorReason, type RequestMetadata } from '@atlaskit/media-client';
 import { type FileAttributes, type PerformanceAttributes, type OperationalEventPayload, type UIEventPayload, type WithFileAttributes, type WithPerformanceAttributes, type SuccessAttributes, type FailureAttributes, type ScreenEventPayload, type ScreenAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common/analytics';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -52,7 +53,7 @@ export type ErrorBoundaryErrorInfo = {
 };
 export type AnalyticsErrorBoundaryAttributes = {
     error?: Error | string;
-    info?: ErrorBoundaryErrorInfo;
+    info?: ErrorInfo;
     browserInfo: string;
     failReason: string;
 };

package/example-helpers/cardViewWrapper.tsx

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 
@@ -26,6 +27,7 @@ const largeStyles = xcss({
 
 const cardWrapperStyles = ({ small, displayInline }: CardViewWrapperProps) =>
 	xcss({
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 		display: displayInlineStyles(displayInline),
 		marginBlock: 'space.200',
 		marginInline: 'space.250',

package/example-helpers/styles.ts

@@ -1,21 +1,26 @@
 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
 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
 export const sliderWrapperStyles = css({
 	display: 'flex',
 	width: '50%',
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> *': {
 		flex: 1,
 		margin: token('space.100', '8px'),
 	},
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const editableCardContentStyles = css({
 	padding: token('space.250', '20px'),
 	border: '2px dashed',
@@ -28,20 +33,24 @@ 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
 export const optionsWrapperStyles = css({
 	display: 'flex',
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> *': {
 		flex: 1,
 		margin: token('space.100', '8px'),
 	},
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const cardDimensionsWrapperStyles = css({
 	margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
 		'space.250',
 		'20px',
 	)} ${token('space.100', '8px')}`,
 	display: 'flex',
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'> div': {
 		border: `1px solid ${token('color.border.bold', 'black')}`,
 		margin: token('space.075', '6px'),
@@ -50,13 +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
 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
 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
 export const cardWrapperStyles = css({
 	border: `1px solid ${token('color.border.bold', 'black')}`,
 	padding: token('space.150', '12px'),
@@ -68,45 +80,55 @@ 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
 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
 export const externalIdentifierWrapperStyles = css({
 	display: 'flex',
 	justifyContent: 'space-around',
 	margin: `${token('space.0', '0px')} auto`,
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	h2: {
 		marginBottom: 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
 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
 	'> div:first-child': {
 		display: 'flex',
 		marginBottom: token('space.250', '20px'),
 	},
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	label: {
 		marginRight: token('space.250', '20px'),
 	},
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- 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
 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
 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
 export const mediaInlineWrapperStyles = css({
 	display: 'flex',
 	alignItems: 'center',
@@ -114,8 +136,10 @@ 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
 export const mediaInlineTableStyles = css({
 	width: '800px',
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	'tr, td': {
 		border: `1px solid ${token('color.border', '#ddd')}`,
 	},

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

@@ -1,10 +1,13 @@
 /** @jsx jsx */
 import React from 'react';
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 
 export const CardBox = ({ title, children }: { title: string; children: React.ReactNode }) => (
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 	<div style={{ marginBottom: '10px' }}>
+		{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
 		<h3 style={{ textAlign: 'center' }}>{title}</h3>
 		{children}
 	</div>
@@ -13,9 +16,13 @@ export const CardBox = ({ title, children }: { title: string; children: React.Re
 export const CardRow = ({ children }: { children: React.ReactNode }) => (
 	<div
 		style={{
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 			display: 'flex',
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 			flexWrap: 'wrap',
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 			gap: '10px',
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 			marginBottom: '10px',
 		}}
 	>

package/example-helpers/svg-helpers/index.ts

@@ -4,4 +4,4 @@ export { ToggleBox } from './toggle';
 export { SvgContainer } from './svgContainer';
 export { useSvgUploader } from './uploader';
 export { CardBox, CardRow } from './cardContainer';
-export { delayApiResponses } from './delayApiResponses';
+export { delayApiResponses, errorApiResponses } from './mediaApiTweaks';

package/example-helpers/svg-helpers/mediaApiTweaks.ts

@@ -0,0 +1,64 @@
+import { type MediaApi, RequestError } from '@atlaskit/media-client';
+import { sleep } from '@atlaskit/media-test-helpers';
+
+type Endpoints = Partial<Record<keyof MediaApi, number>>;
+
+export const delayApiResponses = (
+	mediaApi: MediaApi,
+	{ getImage, getItems, getFileBinary }: Endpoints,
+) => {
+	const baseGetImage = mediaApi.getImage;
+	mediaApi.getImage = async (...params) => {
+		await sleep(getImage);
+		return baseGetImage(...params);
+	};
+
+	const baseGetItems = mediaApi.getItems;
+	mediaApi.getItems = async (...params) => {
+		await sleep(getItems);
+		return baseGetItems(...params);
+	};
+
+	const baseGetFileBinary = mediaApi.getFileBinary;
+	mediaApi.getFileBinary = async (...params) => {
+		await sleep(getFileBinary);
+		return baseGetFileBinary(...params);
+	};
+};
+
+export const errorApiResponses = {
+	getFileBinary: (mediaApi: MediaApi, error?: Error) => {
+		mediaApi.getFileBinary = async () => {
+			throw (
+				error ||
+				new RequestError('serverForbidden', {
+					method: 'GET',
+					endpoint: '/file/:id/inary',
+					mediaRegion: 'adev',
+					mediaEnv: 'adev',
+					traceContext: { traceId: 'some-traceId', spanId: 'some-spanId' },
+					attempts: 10,
+					clientExhaustedRetries: true,
+					statusCode: 430,
+				})
+			);
+		};
+	},
+	getFileImage: (mediaApi: MediaApi, error?: Error) => {
+		mediaApi.getImage = async () => {
+			throw (
+				error ||
+				new RequestError('serverForbidden', {
+					method: 'GET',
+					endpoint: '/file/:id/image',
+					mediaRegion: 'adev',
+					mediaEnv: 'adev',
+					traceContext: { traceId: 'some-traceId', spanId: 'some-spanId' },
+					attempts: 10,
+					clientExhaustedRetries: true,
+					statusCode: 430,
+				})
+			);
+		};
+	},
+};

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 
 import { Box, xcss } from '@atlaskit/primitives';

package/package.json

@@ -1,121 +1,123 @@
 {
-  "name": "@atlaskit/media-card",
-  "version": "77.12.1",
-  "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
-  "af:exports": {
-    "./types": "./src/types.ts",
-    ".": "./src/index.ts",
-    "./classnames": "./src/classnames.ts"
-  },
-  "atlassian": {
-    "team": "Media Experience",
-    "inPublicMirror": true,
-    "releaseModel": "continuous",
-    "website": {
-      "name": "Media Card"
-    }
-  },
-  "dependencies": {
-    "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/dropdown-menu": "^12.11.0",
-    "@atlaskit/editor-shared-styles": "^2.12.0",
-    "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/media-client": "^27.2.0",
-    "@atlaskit/media-client-react": "^2.0.0",
-    "@atlaskit/media-common": "^11.2.0",
-    "@atlaskit/media-file-preview": "^0.5.0",
-    "@atlaskit/media-svg": "^0.1.3",
-    "@atlaskit/media-ui": "^25.10.0",
-    "@atlaskit/media-viewer": "^48.6.0",
-    "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.9.0",
-    "@atlaskit/tokens": "^1.49.0",
-    "@atlaskit/tooltip": "^18.4.0",
-    "@atlaskit/ufo": "^0.2.0",
-    "@atlaskit/ufo-interaction-ignore": "^1.1.0",
-    "@babel/runtime": "^7.0.0",
-    "classnames": "^2.2.5",
-    "eventemitter2": "^4.1.0",
-    "lru_map": "^0.4.1",
-    "react-loadable": "^5.1.0"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.7.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1"
-  },
-  "devDependencies": {
-    "@af/integration-testing": "*",
-    "@atlaskit/analytics-listeners": "^8.9.0",
-    "@atlaskit/analytics-namespaced-context": "^6.9.0",
-    "@atlaskit/form": "^10.2.0",
-    "@atlaskit/inline-message": "^12.1.0",
-    "@atlaskit/media-core": "^34.2.0",
-    "@atlaskit/media-picker": "^66.4.0",
-    "@atlaskit/media-state": "^1.1.0",
-    "@atlaskit/media-test-data": "^2.3.0",
-    "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/primitives": "^7.0.0",
-    "@atlaskit/range": "^7.2.0",
-    "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/visual-regression": "*",
-    "@atlassian/feature-flags-test-utils": "^0.2.0",
-    "@atlassian/ufo": "^0.2.0",
-    "@testing-library/dom": "^8.17.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/classnames": "^2.2.6",
-    "@types/react-loadable": "^5.4.1",
-    "enzyme": "^3.10.0",
-    "exenv": "^1.2.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "~5.4.2",
-    "uuid": "^3.1.0",
-    "wait-for-expect": "^1.2.0"
-  },
-  "platform-feature-flags": {
-    "platform.media-experience.cardv2_7zann": {
-      "type": "boolean"
-    },
-    "platform.media-experience.card-views-refactor_b91lr": {
-      "type": "boolean"
-    },
-    "platform.media-card-svg-rendering_6tdbv": {
-      "type": "boolean"
-    }
-  },
-  "techstack": {
-    "@repo/internal": {
-      "design-tokens": [
-        "color",
-        "spacing"
-      ]
-    }
-  }
-}
+	"name": "@atlaskit/media-card",
+	"version": "77.12.3",
+	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": false,
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		"./types": "./src/types.ts",
+		".": "./src/index.ts",
+		"./classnames": "./src/classnames.ts"
+	},
+	"atlassian": {
+		"team": "Media Experience",
+		"inPublicMirror": true,
+		"releaseModel": "continuous",
+		"website": {
+			"name": "Media Card"
+		}
+	},
+	"dependencies": {
+		"@atlaskit/analytics-next": "^9.3.0",
+		"@atlaskit/dropdown-menu": "^12.13.0",
+		"@atlaskit/editor-shared-styles": "^2.12.0",
+		"@atlaskit/icon": "^22.4.0",
+		"@atlaskit/media-client": "^27.3.0",
+		"@atlaskit/media-client-react": "^2.0.0",
+		"@atlaskit/media-common": "^11.3.0",
+		"@atlaskit/media-file-preview": "^0.5.0",
+		"@atlaskit/media-svg": "^0.1.3",
+		"@atlaskit/media-ui": "^25.10.0",
+		"@atlaskit/media-viewer": "^48.6.0",
+		"@atlaskit/platform-feature-flags": "^0.2.2",
+		"@atlaskit/primitives": "^8.1.0",
+		"@atlaskit/spinner": "^16.2.0",
+		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/ufo": "^0.2.0",
+		"@atlaskit/ufo-interaction-ignore": "^1.1.0",
+		"@atlaskit/visually-hidden": "^1.4.0",
+		"@babel/runtime": "^7.0.0",
+		"classnames": "^2.2.5",
+		"eventemitter2": "^4.1.0",
+		"lru_map": "^0.4.1",
+		"react-loadable": "^5.1.0"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.7.1",
+		"react": "^16.8.0",
+		"react-dom": "^16.8.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "*",
+		"@atlaskit/analytics-listeners": "^8.10.0",
+		"@atlaskit/analytics-namespaced-context": "^6.10.0",
+		"@atlaskit/form": "^10.4.0",
+		"@atlaskit/inline-message": "^12.2.0",
+		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-picker": "^66.4.0",
+		"@atlaskit/media-state": "^1.1.0",
+		"@atlaskit/media-test-data": "^2.3.0",
+		"@atlaskit/media-test-helpers": "^33.0.0",
+		"@atlaskit/radio": "^6.4.0",
+		"@atlaskit/range": "^7.3.0",
+		"@atlaskit/ssr": "*",
+		"@atlaskit/toggle": "^13.2.0",
+		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "^0.2.0",
+		"@atlassian/ufo": "^0.3.0",
+		"@testing-library/dom": "^8.17.1",
+		"@testing-library/react": "^12.1.5",
+		"@testing-library/react-hooks": "^8.0.1",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/classnames": "^2.2.6",
+		"@types/react-loadable": "^5.4.1",
+		"enzyme": "^3.10.0",
+		"exenv": "^1.2.2",
+		"react": "^16.8.0",
+		"react-dom": "^16.8.0",
+		"react-intl-next": "npm:react-intl@^5.18.1",
+		"typescript": "~5.4.2",
+		"uuid": "^3.1.0",
+		"wait-for-expect": "^1.2.0"
+	},
+	"platform-feature-flags": {
+		"platform.media-experience.cardv2_7zann": {
+			"type": "boolean"
+		},
+		"platform.media-experience.card-views-refactor_b91lr": {
+			"type": "boolean"
+		},
+		"platform.media-card-svg-rendering_6tdbv": {
+			"type": "boolean"
+		}
+	},
+	"techstack": {
+		"@repo/internal": {
+			"design-tokens": [
+				"color",
+				"spacing"
+			]
+		}
+	}
+}