@atlaskit/media-client 18.0.0 → 19.0.0

package/dist/esm/utils/request/helpers.js

@@ -31,7 +31,25 @@ export function isFetchNetworkError(err) {
 export function isRateLimitedError(error) {
   return !!error && isRequestError(error) && error.attributes.statusCode === 429 || !!error && !!error.message && error.message.includes('429');
 }
+export var ZipkinHeaderKeys = {
+  traceId: 'x-b3-traceid',
+  spanId: 'x-b3-spanid',
+  parentSpanId: 'x-b3-parentspanid',
+  sampled: 'x-b3-sampled',
+  flags: 'x-b3-flags'
+};
+
+var mapTraceIdToRequestHeaders = function mapTraceIdToRequestHeaders(traceContext) {
+  var _ref;
+
+  return traceContext ? (_ref = {}, _defineProperty(_ref, ZipkinHeaderKeys.traceId, traceContext.traceId), _defineProperty(_ref, ZipkinHeaderKeys.spanId, traceContext.spanId), _ref) : {};
+};
+
 export function mapAuthToRequestHeaders(auth) {
+  if (!auth) {
+    return {};
+  }
+
   if (isClientBasedAuth(auth)) {
     return {
       'X-Client-Id': auth.clientId,
@@ -44,18 +62,18 @@ export function mapAuthToRequestHeaders(auth) {
     Authorization: "Bearer ".concat(auth.token)
   };
 }
-export function createUrl(url, _ref) {
-  var params = _ref.params,
-      auth = _ref.auth;
+export function createUrl(url, _ref2) {
+  var params = _ref2.params,
+      auth = _ref2.auth;
   var parsedUrl = new URL(url);
   var authParams = auth && mapAuthToQueryParameters(auth) || {};
 
   var paramsToAppend = _objectSpread(_objectSpread({}, params), authParams);
 
-  Object.entries(paramsToAppend).filter(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        _ = _ref3[0],
-        value = _ref3[1];
+  Object.entries(paramsToAppend).filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        _ = _ref4[0],
+        value = _ref4[1];
 
     return value != null;
   }).forEach(function (pair) {
@@ -66,14 +84,12 @@ export function createUrl(url, _ref) {
   parsedUrl.searchParams.sort();
   return parsedUrl.toString();
 }
-export function withAuth(auth) {
-  return function (headers) {
-    if (auth) {
-      return _objectSpread(_objectSpread({}, headers || {}), mapAuthToRequestHeaders(auth));
-    }
+export function extendHeaders(headers, auth, traceContext) {
+  if (!auth && !traceContext && !headers) {
+    return undefined;
+  }
 
-    return headers;
-  };
+  return _objectSpread(_objectSpread(_objectSpread({}, headers !== null && headers !== void 0 ? headers : {}), mapAuthToRequestHeaders(auth)), mapTraceIdToRequestHeaders(traceContext));
 }
 /**
  * @deprecated Helper is deprecated and will be removed in the next major version.
@@ -167,7 +183,7 @@ export function mapResponseToVoid() {
 }
 export function createMapResponseToJson(metadata) {
   return /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -195,13 +211,13 @@ export function createMapResponseToJson(metadata) {
     }));
 
     return function (_x3) {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 }
 export function createMapResponseToBlob(metadata) {
   return /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(response) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(response) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -229,7 +245,7 @@ export function createMapResponseToBlob(metadata) {
     }));
 
     return function (_x4) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 }
@@ -274,7 +290,7 @@ function _fetchRetry() {
             timeoutInMs = startTimeoutInMs;
 
             waitAndBumpTimeout = /*#__PURE__*/function () {
-              var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+              var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
                 return _regeneratorRuntime.wrap(function _callee5$(_context5) {
                   while (1) {
                     switch (_context5.prev = _context5.next) {
@@ -295,7 +311,7 @@ function _fetchRetry() {
               }));
 
               return function waitAndBumpTimeout() {
-                return _ref6.apply(this, arguments);
+                return _ref7.apply(this, arguments);
               };
             }();
 

package/dist/esm/utils/request/index.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 export { RequestError, isRequestError } from './errors';
 export { isRateLimitedError } from './helpers';
-import { createUrl, fetchRetry, createProcessFetchResponse, withAuth } from './helpers';
+import { createUrl, fetchRetry, createProcessFetchResponse, extendHeaders } from './helpers';
 export function request(_x) {
   return _request.apply(this, arguments);
 }
@@ -20,6 +20,7 @@ function _request() {
         body,
         _options$clientOption,
         clientOptions,
+        traceContext,
         retryOptions,
         metadata,
         doFetch,
@@ -31,7 +32,7 @@ function _request() {
           case 0:
             options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
             controller = _args.length > 2 ? _args[2] : undefined;
-            _options$method = options.method, method = _options$method === void 0 ? 'GET' : _options$method, endpoint = options.endpoint, auth = options.auth, params = options.params, headers = options.headers, body = options.body, _options$clientOption = options.clientOptions, clientOptions = _options$clientOption === void 0 ? {} : _options$clientOption;
+            _options$method = options.method, method = _options$method === void 0 ? 'GET' : _options$method, endpoint = options.endpoint, auth = options.auth, params = options.params, headers = options.headers, body = options.body, _options$clientOption = options.clientOptions, clientOptions = _options$clientOption === void 0 ? {} : _options$clientOption, traceContext = options.traceContext;
             retryOptions = clientOptions.retryOptions;
             metadata = {
               method: method,
@@ -44,7 +45,7 @@ function _request() {
               }), {
                 method: method,
                 body: body,
-                headers: withAuth(auth)(headers),
+                headers: extendHeaders(headers, auth, traceContext),
                 signal: controller && controller.signal
               }).then(createProcessFetchResponse(metadata));
             };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-client",
-	"version": "18.0.0",
+	"version": "19.0.0",
 	"sideEffects": false
 }

package/dist/types/client/collection-fetcher.d.ts

@@ -3,6 +3,7 @@ import { FileDetails, FileItem } from '../models/item';
 import { MediaCollectionItem } from '../models/media';
 import { MediaStore, MediaStoreGetCollectionItemsParams } from './media-store';
 import { MediaSubscribable } from '../utils/mediaSubscribable';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export interface MediaCollectionFileItemDetails extends FileDetails {
     occurrenceKey: string;
 }
@@ -29,7 +30,7 @@ export declare class CollectionFetcher {
     private createFileStateObserver;
     private populateCache;
     private removeFromCache;
-    getItems(collectionName: string, params?: MediaStoreGetCollectionItemsParams): MediaSubscribable<MediaCollectionItem[]>;
-    removeFile(id: string, collectionName: string, occurrenceKey?: string): Promise<void>;
-    loadNextPage(collectionName: string, params?: MediaStoreGetCollectionItemsParams): Promise<void>;
+    getItems(collectionName: string, params?: MediaStoreGetCollectionItemsParams, traceContext?: MediaTraceContext): MediaSubscribable<MediaCollectionItem[]>;
+    removeFile(id: string, collectionName: string, occurrenceKey?: string, traceContext?: MediaTraceContext): Promise<void>;
+    loadNextPage(collectionName: string, params?: MediaStoreGetCollectionItemsParams, traceContext?: MediaTraceContext): Promise<void>;
 }

package/dist/types/client/file-fetcher/index.d.ts

@@ -8,6 +8,7 @@ import { MediaFileArtifacts } from '../../models/artifacts';
 import { UploadController } from '../../upload-controller';
 import { MediaSubscribable } from '../../utils/mediaSubscribable';
 import { Dimensions } from '../../utils/getDimensionsFromBlob';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export type { FileFetcherErrorAttributes, FileFetcherErrorReason, } from './error';
 export { isFileFetcherError, FileFetcherError } from './error';
 export interface CopySourceFile {
@@ -30,12 +31,12 @@ export declare type ExternalUploadPayload = {
 export interface FileFetcher {
     getFileState(id: string, options?: GetFileOptions): MediaSubscribable<FileState>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
-    touchFiles(descriptors: TouchFileDescriptor[], collection?: string): Promise<TouchedFiles>;
-    upload(file: UploadableFile, controller?: UploadController, uploadableFileUpfrontIds?: UploadableFileUpfrontIds): MediaSubscribable<FileState>;
-    uploadExternal(url: string, collection?: string): Promise<ExternalUploadPayload>;
+    touchFiles(descriptors: TouchFileDescriptor[], collection?: string, traceContext?: MediaTraceContext): Promise<TouchedFiles>;
+    upload(file: UploadableFile, controller?: UploadController, uploadableFileUpfrontIds?: UploadableFileUpfrontIds, traceContext?: MediaTraceContext): MediaSubscribable<FileState>;
+    uploadExternal(url: string, collection?: string, traceContext?: MediaTraceContext): Promise<ExternalUploadPayload>;
     downloadBinary(id: string, name?: string, collectionName?: string): Promise<void>;
     getCurrentState(id: string, options?: GetFileOptions): Promise<FileState>;
-    copyFile(source: CopySourceFile, destination: CopyDestination, options?: CopyFileOptions): Promise<MediaFile>;
+    copyFile(source: CopySourceFile, destination: CopyDestination, options?: CopyFileOptions, traceContext?: MediaTraceContext): Promise<MediaFile>;
     getFileBinaryURL(id: string, collectionName?: string): Promise<string>;
 }
 export declare class FileFetcherImpl implements FileFetcher {
@@ -47,10 +48,10 @@ export declare class FileFetcherImpl implements FileFetcher {
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
     getFileBinaryURL(id: string, collectionName?: string): Promise<string>;
     private createDownloadFileStream;
-    touchFiles(descriptors: TouchFileDescriptor[], collection?: string): Promise<TouchedFiles>;
+    touchFiles(descriptors: TouchFileDescriptor[], collection?: string, traceContext?: MediaTraceContext): Promise<TouchedFiles>;
     private generateUploadableFileUpfrontIds;
-    uploadExternal(url: string, collection?: string): Promise<ExternalUploadPayload>;
-    upload(file: UploadableFile, controller?: UploadController, uploadableFileUpfrontIds?: UploadableFileUpfrontIds): MediaSubscribable<FileState>;
+    uploadExternal(url: string, collection?: string, traceContext?: MediaTraceContext): Promise<ExternalUploadPayload>;
+    upload(file: UploadableFile, controller?: UploadController, uploadableFileUpfrontIds?: UploadableFileUpfrontIds, traceContext?: MediaTraceContext): MediaSubscribable<FileState>;
     downloadBinary(id: string, name?: string, collectionName?: string): Promise<void>;
-    copyFile(source: CopySourceFile, destination: CopyDestination, options?: CopyFileOptions): Promise<MediaFile>;
+    copyFile(source: CopySourceFile, destination: CopyDestination, options?: CopyFileOptions, traceContext?: MediaTraceContext): Promise<MediaFile>;
 }

package/dist/types/client/media-client.d.ts

@@ -1,5 +1,5 @@
 import { MediaClientConfig } from '@atlaskit/media-core';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaFeatureFlags, MediaTraceContext } from '@atlaskit/media-common';
 import { MediaStore, MediaStoreGetFileImageParams, ImageMetadata } from './media-store';
 import { CollectionFetcher } from './collection-fetcher';
 import { FileFetcher } from './file-fetcher';
@@ -17,7 +17,7 @@ export declare class MediaClient {
     private mobileUpload?;
     readonly config: MediaClientConfig;
     constructor(mediaClientConfig: MediaClientConfig, featureFlags?: MediaFeatureFlags | undefined);
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceContext?: MediaTraceContext): Promise<Blob>;
     getImageUrl(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getImageUrlSync(id: string, params?: MediaStoreGetFileImageParams): string;
     getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<ImageMetadata>;

package/dist/types/client/media-store/index.d.ts

@@ -1,5 +1,5 @@
 import { AsapBasedAuth, AuthContext, ClientAltBasedAuth, MediaApiConfig, Auth } from '@atlaskit/media-core';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaFeatureFlags, MediaTraceContext } from '@atlaskit/media-common';
 import { MediaFileArtifacts } from '../../models/artifacts';
 import { MediaChunksProbe, MediaCollectionItemFullDetails, MediaCollectionItems, MediaFile, MediaUpload } from '../../models/media';
 import { ClientOptions, RequestHeaders, RequestMethod, RequestParams, RequestMetadata } from '../../utils/request/types';
@@ -9,33 +9,33 @@ export declare class MediaStore {
     private readonly config;
     readonly featureFlags?: MediaFeatureFlags | undefined;
     constructor(config: MediaApiConfig, featureFlags?: MediaFeatureFlags | undefined);
-    getCollectionItems(collectionName: string, params?: MediaStoreGetCollectionItemsParams): Promise<MediaStoreResponse<MediaCollectionItems>>;
-    removeCollectionFile(id: string, collectionName: string, occurrenceKey?: string): Promise<void>;
-    createUpload(createUpTo?: number, collectionName?: string): Promise<MediaStoreResponse<MediaUpload[]>>;
+    getCollectionItems(collectionName: string, params?: MediaStoreGetCollectionItemsParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaCollectionItems>>;
+    removeCollectionFile(id: string, collectionName: string, occurrenceKey?: string, traceContext?: MediaTraceContext): Promise<void>;
+    createUpload(createUpTo?: number, collectionName?: string, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaUpload[]>>;
     uploadChunk(etag: string, blob: Blob, { collectionName, uploadId, partNumber, }?: {
         collectionName?: string;
         uploadId?: string;
         partNumber?: number;
-    }): Promise<void>;
+    }, traceContext?: MediaTraceContext): Promise<void>;
     probeChunks(chunks: string[], { collectionName, uploadId, }?: {
         collectionName?: string;
         uploadId?: string;
-    }): Promise<MediaStoreResponse<MediaChunksProbe>>;
-    createFileFromUpload(body: MediaStoreCreateFileFromUploadBody, params?: MediaStoreCreateFileFromUploadParams): Promise<MediaStoreResponse<MediaFile>>;
-    touchFiles(body: MediaStoreTouchFileBody, params?: MediaStoreTouchFileParams): Promise<MediaStoreResponse<TouchedFiles>>;
-    getFile(fileId: string, params?: MediaStoreGetFileParams): Promise<MediaStoreResponse<MediaFile>>;
+    }, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaChunksProbe>>;
+    createFileFromUpload(body: MediaStoreCreateFileFromUploadBody, params?: MediaStoreCreateFileFromUploadParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaFile>>;
+    touchFiles(body: MediaStoreTouchFileBody, params?: MediaStoreTouchFileParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<TouchedFiles>>;
+    getFile(fileId: string, params?: MediaStoreGetFileParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaFile>>;
     getFileImageURL(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getFileImageURLSync(id: string, params?: MediaStoreGetFileImageParams): string;
     private createFileImageURL;
     getFileBinaryURL(id: string, collectionName?: string): Promise<string>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
-    getItems(ids: string[], collectionName?: string): Promise<MediaStoreResponse<ItemsPayload>>;
-    getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<{
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceContext?: MediaTraceContext): Promise<Blob>;
+    getItems(ids: string[], collectionName?: string, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<ItemsPayload>>;
+    getImageMetadata(id: string, params?: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext): Promise<{
         metadata: ImageMetadata;
     }>;
-    appendChunksToUpload(uploadId: string, body: AppendChunksToUploadRequestBody, collectionName?: string): Promise<void>;
-    copyFileWithToken(body: MediaStoreCopyFileWithTokenBody, params: MediaStoreCopyFileWithTokenParams): Promise<MediaStoreResponse<MediaFile>>;
+    appendChunksToUpload(uploadId: string, body: AppendChunksToUploadRequestBody, collectionName?: string, traceContext?: MediaTraceContext): Promise<void>;
+    copyFileWithToken(body: MediaStoreCopyFileWithTokenBody, params: MediaStoreCopyFileWithTokenParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaFile>>;
     request(path: string, options?: MediaStoreRequestOptions, controller?: AbortController): Promise<Response>;
     resolveAuth: (authContext?: AuthContext | undefined) => Promise<Auth>;
     resolveInitialAuth: () => Auth;
@@ -72,6 +72,7 @@ export declare type MediaStoreRequestOptions = RequestMetadata & {
     readonly headers?: RequestHeaders;
     readonly body?: any;
     readonly clientOptions?: ClientOptions;
+    readonly traceContext?: MediaTraceContext;
 };
 export declare type MediaStoreCreateFileFromUploadParams = {
     readonly collection?: string;

package/dist/types/uploader/index.d.ts

@@ -1,5 +1,6 @@
 import { ChunkinatorFile } from '@atlaskit/chunkinator';
 import { MediaStore } from '../client/media-store';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type UploadableFile = {
     content: ChunkinatorFile;
     name?: string;
@@ -18,4 +19,4 @@ export declare type UploadFileCallbacks = {
 export interface UploadFileResult {
     cancel: () => void;
 }
-export declare const uploadFile: (file: UploadableFile, store: MediaStore, uploadableFileUpfrontIds: UploadableFileUpfrontIds, callbacks?: UploadFileCallbacks | undefined) => UploadFileResult;
+export declare const uploadFile: (file: UploadableFile, store: MediaStore, uploadableFileUpfrontIds: UploadableFileUpfrontIds, callbacks?: UploadFileCallbacks | undefined, traceContext?: MediaTraceContext | undefined) => UploadFileResult;

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

@@ -1,6 +1,5 @@
-import VideoSnapshot from 'video-snapshot';
-export declare type Dimensions = {
+export interface Dimensions {
     width: number;
     height: number;
-};
-export declare const getVideoDimensionsFromBlob: (blob: Blob, snapshoter?: VideoSnapshot) => Promise<Dimensions>;
+}
+export declare const getVideoDimensionsFromBlob: (blob: Blob) => Promise<Dimensions>;

package/dist/types/utils/request/helpers.d.ts

@@ -1,4 +1,5 @@
 import { Auth } from '@atlaskit/media-core';
+import { MediaTraceContext } from '@atlaskit/media-common';
 import { RequestError } from './errors';
 import { CreateUrlOptions, RequestErrorReason, RequestErrorMetadata, RequestHeaders, RequestMetadata, RetryOptions } from './types';
 export declare function clientTimeoutPromise(timeout: number): Promise<Response>;
@@ -6,9 +7,16 @@ export declare function waitPromise(timeout: number): Promise<void>;
 export declare function isAbortedRequestError(err: any): boolean;
 export declare function isFetchNetworkError(err: any): err is TypeError;
 export declare function isRateLimitedError(error: Error | undefined): boolean;
-export declare function mapAuthToRequestHeaders(auth: Auth): RequestHeaders;
+export declare const ZipkinHeaderKeys: {
+    traceId: string;
+    spanId: string;
+    parentSpanId: string;
+    sampled: string;
+    flags: string;
+};
+export declare function mapAuthToRequestHeaders(auth?: Auth): RequestHeaders;
 export declare function createUrl(url: string, { params, auth }: CreateUrlOptions): string;
-export declare function withAuth(auth?: Auth): (headers?: RequestHeaders | undefined) => RequestHeaders | undefined;
+export declare function extendHeaders(headers?: RequestHeaders, auth?: Auth, traceContext?: Required<MediaTraceContext>): RequestHeaders | undefined;
 /**
  * @deprecated Helper is deprecated and will be removed in the next major version.
  * TODO: https://product-fabric.atlassian.net/browse/BMPT-1354

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

@@ -1,4 +1,5 @@
 import { Auth } from '@atlaskit/media-core';
+import type { MediaTraceContext } from '@atlaskit/media-common';
 export declare type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
 export declare type RequestParams = {
     [key: string]: any;
@@ -23,6 +24,7 @@ export declare type RequestMetadata = {
 };
 export declare type RequestOptions = RequestMetadata & {
     readonly auth?: Auth;
+    readonly traceContext?: Required<MediaTraceContext>;
     readonly params?: RequestParams;
     readonly headers?: RequestHeaders;
     readonly body?: any;

package/example-helpers/styles.ts

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { FileStatus } from '../src';
 
@@ -29,11 +30,11 @@ export interface FilesWrapperProps {
 }
 
 const statusColorMap: { [key in FileStatus]: string } = {
-  uploading: 'cornflowerblue',
-  processing: 'peachpuff',
-  processed: 'darkseagreen',
-  error: 'indianred',
-  'failed-processing': 'indianred',
+  uploading: token('color.background.accent.blue.subtle', 'cornflowerblue'),
+  processing: token('color.background.accent.orange.subtler', 'peachpuff'),
+  processed: token('color.background.accent.green.subtle', 'darkseagreen'),
+  error: token('color.background.accent.red.subtle', 'indianred'),
+  'failed-processing': token('color.background.accent.red.subtle', 'indianred'),
 };
 
 export const fileWrapperStyles = (status: FileStatus) => css`
@@ -47,11 +48,11 @@ export const fileWrapperStyles = (status: FileStatus) => css`
 export const cardsWrapperStyles = css`
   width: 900px;
   padding: 10px;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid ${token('color.border', '#ccc')};
 
   h1 {
     text-align: center;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid ${token('color.border', '#ccc')};
   }
 
   > div {
@@ -68,7 +69,7 @@ export const headerStyles = css`
 `;
 
 export const fileStateWrapperStyles = css`
-  border: 1px solid;
+  border: 1px solid ${token('color.border', '#ccc')};
   margin: 10px;
   padding: 10px;
   width: 500px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-client",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Media API Web Client Library",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -35,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/chunkinator": "^4.1.0",
-    "@atlaskit/media-common": "^2.16.0",
+    "@atlaskit/media-common": "^2.17.0",
     "@babel/runtime": "^7.0.0",
     "dataloader": "^2.0.0",
     "deep-equal": "^1.0.1",
@@ -46,7 +39,6 @@
     "setimmediate": "^1.0.5",
     "uuid": "^3.1.0",
     "uuid-validate": "^0.0.3",
-    "video-snapshot": "^1.0.11",
     "xstate": "^4.20.0"
   },
   "peerDependencies": {
@@ -55,12 +47,13 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^74.1.0",
+    "@atlaskit/media-card": "^74.3.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/react": "^11.7.1",
     "@types/deep-equal": "^1.0.1",
@@ -77,6 +70,9 @@
       "circular-dependencies": [
         "file-level"
       ]
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"