@atlaskit/media-picker 66.2.0 → 66.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-picker
 
+## 66.2.2
+
+### Patch Changes
+
+- [`7b6a2c6671b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b6a2c6671b) - Introducing 'media-state' for handling media internal file state.
+  Introducing 'media-client-react' to provide hooks for seamless media-client integration with React.
+  Introducing 'MediaCardV2' with a feature flag to replace rxjs based fileState subscription with 'useFileState' hook.
+  Removed unused feature flags APIs from 'media-client' and its helper functions from 'media-common'.
+- Updated dependencies
+
+## 66.2.1
+
+### Patch Changes
+
+- [`ede6ee7aaab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ede6ee7aaab) - Updated tests, examples and moving towards /test-helper export in packages to prevent circular dependancies
+- Updated dependencies
+
 ## 66.2.0
 
 ### Minor Changes

package/dist/cjs/components/browser/index.js

@@ -70,7 +70,7 @@ var BrowserLoader = /*#__PURE__*/function (_React$PureComponent) {
               _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
               mediaClient = _yield$Promise$all2[0];
               browserModule = _yield$Promise$all2[1];
-              BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser, this.props.featureFlags);
+              BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
               if (this.mounted) {
                 this.setState({
                   Browser: BrowserLoader.Browser

package/dist/cjs/components/clipboard/index.js

@@ -59,7 +59,7 @@ var ClipboardLoader = /*#__PURE__*/function (_React$PureComponent) {
               _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
               mediaClient = _yield$Promise$all2[0];
               clipboardModule = _yield$Promise$all2[1];
-              ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard, this.props.featureFlags);
+              ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
               this.setState({
                 Clipboard: ClipboardLoader.Clipboard
               });

package/dist/cjs/components/dropzone/index.js

@@ -64,7 +64,7 @@ var DropzoneLoader = /*#__PURE__*/function (_React$PureComponent) {
               mediaClient = _yield$Promise$all2[0];
               dropzoneModule = _yield$Promise$all2[1];
               mediaPickerErrorBoundaryModule = _yield$Promise$all2[2];
-              DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone, this.props.featureFlags);
+              DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
               DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
               this.setState({
                 Dropzone: DropzoneLoader.Dropzone,

package/dist/cjs/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -12,8 +12,8 @@ var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-ci
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("./messages");
 var _reactIntlNext = require("react-intl-next");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 defaultOptions = {
   style: 'unit',
   unitDisplay: 'short',

package/dist/cjs/util/analytics.js

@@ -9,7 +9,7 @@ var _mediaClient = require("@atlaskit/media-client");
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.2.0";
+var packageVersion = "66.2.2";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -9,10 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _ufo = require("@atlaskit/ufo");
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaClient = require("@atlaskit/media-client");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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-picker";
-var packageVersion = "66.2.0";
+var packageVersion = "66.2.2";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/es2019/components/browser/index.js

@@ -17,7 +17,7 @@ export class BrowserLoader extends React.PureComponent {
   async UNSAFE_componentWillMount() {
     if (!this.state.Browser) {
       const [mediaClient, browserModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client" */'@atlaskit/media-client'), import( /* webpackChunkName: "@atlaskit-internal_media-browser" */'./browser')]);
-      BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser, this.props.featureFlags);
+      BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
       if (this.mounted) {
         this.setState({
           Browser: BrowserLoader.Browser

package/dist/es2019/components/clipboard/index.js

@@ -10,7 +10,7 @@ export class ClipboardLoader extends React.PureComponent {
   async UNSAFE_componentWillMount() {
     if (!this.state.Clipboard) {
       const [mediaClient, clipboardModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client" */'@atlaskit/media-client'), import( /* webpackChunkName: "@atlaskit-internal_media-clipboard" */'./clipboard')]);
-      ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard, this.props.featureFlags);
+      ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
       this.setState({
         Clipboard: ClipboardLoader.Clipboard
       });

package/dist/es2019/components/dropzone/index.js

@@ -12,7 +12,7 @@ export class DropzoneLoader extends React.PureComponent {
     if (!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) {
       try {
         const [mediaClient, dropzoneModule, mediaPickerErrorBoundaryModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client" */'@atlaskit/media-client'), import( /* webpackChunkName: "@atlaskit-internal_media-dropzone" */'./dropzone'), import( /* webpackChunkName: "@atlaskit-internal_media-picker-error-boundary" */'../media-picker-analytics-error-boundary')]);
-        DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone, this.props.featureFlags);
+        DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
         DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
         this.setState({
           Dropzone: DropzoneLoader.Dropzone,

package/dist/es2019/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "66.2.0";
+const packageVersion = "66.2.2";
 export function getPackageAttributes(componentName) {
   return {
     packageName,

package/dist/es2019/util/ufoExperiences.js

@@ -2,7 +2,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "66.2.0";
+const packageVersion = "66.2.2";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

package/dist/esm/components/browser/index.js

@@ -56,7 +56,7 @@ export var BrowserLoader = /*#__PURE__*/function (_React$PureComponent) {
               _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
               mediaClient = _yield$Promise$all2[0];
               browserModule = _yield$Promise$all2[1];
-              BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser, this.props.featureFlags);
+              BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
               if (this.mounted) {
                 this.setState({
                   Browser: BrowserLoader.Browser

package/dist/esm/components/clipboard/index.js

@@ -45,7 +45,7 @@ export var ClipboardLoader = /*#__PURE__*/function (_React$PureComponent) {
               _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
               mediaClient = _yield$Promise$all2[0];
               clipboardModule = _yield$Promise$all2[1];
-              ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard, this.props.featureFlags);
+              ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
               this.setState({
                 Clipboard: ClipboardLoader.Clipboard
               });

package/dist/esm/components/dropzone/index.js

@@ -48,7 +48,7 @@ export var DropzoneLoader = /*#__PURE__*/function (_React$PureComponent) {
               mediaClient = _yield$Promise$all2[0];
               dropzoneModule = _yield$Promise$all2[1];
               mediaPickerErrorBoundaryModule = _yield$Promise$all2[2];
-              DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone, this.props.featureFlags);
+              DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
               DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
               this.setState({
                 Dropzone: DropzoneLoader.Dropzone,

package/dist/esm/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 React from 'react';
 import { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
 import FailIcon from '@atlaskit/icon/glyph/cross-circle';

package/dist/esm/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.2.0";
+var packageVersion = "66.2.2";
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/ufoExperiences.js

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.2.0";
+var packageVersion = "66.2.2";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/example-helpers/NativeMediaViewer.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { useEffect, useState } from 'react';
+import {
+  MediaClient,
+  MediaFileArtifacts,
+  MediaType,
+} from '@atlaskit/media-client';
+
+type NativeMediaViewerProps = {
+  id: string;
+  mediaClient: MediaClient;
+};
+
+const getMimeTypeFromArtifact = (artifact: keyof MediaFileArtifacts) => {
+  switch (artifact) {
+    case 'image.png':
+      return 'image/png';
+    case 'document.pdf':
+      return 'application/pdf';
+    case 'video_640.mp4':
+    case 'video_1280.mp4':
+      return 'video/mp4';
+    case 'audio.mp3':
+      return 'audio/mpeg';
+    default:
+      return '';
+  }
+};
+
+const getArtifactUrl = (
+  client: MediaClient,
+  artifacts: MediaFileArtifacts,
+  artifact: keyof MediaFileArtifacts,
+) =>
+  client.mediaStore
+    .getArtifactURL(artifacts, artifact)
+    .then((url) => fetch(url))
+    .then((res) => res.blob())
+    .then((blob) => blob.slice(0, blob.size, getMimeTypeFromArtifact(artifact)))
+    .then((blob) => URL.createObjectURL(blob));
+
+export const NativeMediaViewer = ({
+  id,
+  mediaClient,
+}: NativeMediaViewerProps) => {
+  const [url, setUrl] = useState('');
+  const [mediaType, setMediaType] = useState<MediaType | null>(null);
+
+  useEffect(() => {
+    const setArtifactUrl = (
+      artifacts: MediaFileArtifacts,
+      artifact: keyof MediaFileArtifacts,
+    ) => {
+      getArtifactUrl(mediaClient, artifacts, artifact).then((url) =>
+        setUrl(url),
+      );
+    };
+    if (id) {
+      const subscribable = mediaClient.file.getFileState(id);
+      const { unsubscribe } = subscribable.subscribe((state) => {
+        if (state.status === 'processed') {
+          if (state.artifacts['document.pdf']) {
+            setArtifactUrl(state.artifacts, 'document.pdf');
+            setMediaType('doc');
+          } else if (state.artifacts['video_640.mp4']) {
+            setArtifactUrl(state.artifacts, 'video_640.mp4');
+            setMediaType('video');
+          } else if (state.artifacts['audio.mp3']) {
+            setArtifactUrl(state.artifacts, 'audio.mp3');
+            setMediaType('audio');
+          } else if (state.artifacts['image.png']) {
+            setArtifactUrl(state.artifacts, 'image.png');
+            setMediaType('image');
+          } else {
+            setMediaType('unknown');
+          }
+        } else if (state.status === 'failed-processing') {
+          setMediaType('unknown');
+        }
+      });
+
+      return unsubscribe;
+    }
+    return () => {};
+  }, [id, mediaClient]);
+
+  switch (mediaType) {
+    case 'image':
+      return <img style={{ width: '100%' }} src={url} />;
+    case 'video':
+      return <video style={{ width: '100%' }} src={url} />;
+    case 'audio':
+      return <audio style={{ width: '100%' }} src={url} />;
+    case 'doc':
+      return (
+        <object type="application/pdf" style={{ width: '100%' }} data={url}>
+          <embed type="application/pdf" src={url} />
+        </object>
+      );
+    case null:
+      return <div>Loading file ...</div>;
+    case 'unknown':
+      return <div>Unable to display file</div>;
+    default:
+      return <div>Unable to display file</div>;
+  }
+};

package/example-helpers/upload-preview.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { PreviewImageWrapper, InfoWrapper } from './stylesWrapper';
+import { PreviewImageWrapper } from './stylesWrapper';
 import { PreviewData } from './types';
-import { Card } from '@atlaskit/media-card';
-import { FileIdentifier } from '@atlaskit/media-client';
+import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 import { createUploadMediaClientConfig } from '@atlaskit/media-test-helpers';
 import { Preview, ImagePreview } from '../src/types';
+import { NativeMediaViewer } from './NativeMediaViewer';
 
 const mediaClientConfig = createUploadMediaClientConfig();
+const mediaClient = new MediaClient(mediaClientConfig);
 
 export class UploadPreview extends React.Component<PreviewData> {
   getPreviewInfo(preview: Preview): string | null {
@@ -19,7 +20,7 @@ export class UploadPreview extends React.Component<PreviewData> {
   }
 
   render() {
-    const { fileId, preview } = this.props;
+    const { fileId } = this.props;
 
     const identifier: FileIdentifier = {
       id: fileId,
@@ -28,10 +29,7 @@ export class UploadPreview extends React.Component<PreviewData> {
 
     return (
       <PreviewImageWrapper>
-        <Card identifier={identifier} mediaClientConfig={mediaClientConfig} />
-        {preview ? (
-          <InfoWrapper>{this.getPreviewInfo(preview)}</InfoWrapper>
-        ) : null}
+        <NativeMediaViewer id={identifier.id} mediaClient={mediaClient} />
       </PreviewImageWrapper>
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-picker",
-  "version": "66.2.0",
+  "version": "66.2.2",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,11 +37,11 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/flag": "^15.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^23.1.0",
-    "@atlaskit/media-common": "^8.1.0",
+    "@atlaskit/media-client": "^24.0.0",
+    "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-ui": "^24.0.0",
-    "@atlaskit/theme": "^12.4.0",
-    "@atlaskit/tokens": "^1.17.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.20.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -61,11 +61,10 @@
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/button": "^16.9.0",
-    "@atlaskit/media-card": "^76.1.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^1.17.0",
+    "@atlaskit/tokens": "^1.20.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.2.0",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",