@atlaskit/media-client 26.2.3 → 27.0.0

package/dist/esm/client/media-store/MediaStore.js

@@ -286,23 +286,62 @@ export var MediaStore = /*#__PURE__*/function () {
       return createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/image"), options);
     }
   }, {
-    key: "getFileBinaryURL",
+    key: "getFileBinary",
     value: function () {
-      var _getFileBinaryURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id, collectionName) {
+      var _getFileBinary = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id, collectionName) {
         var maxAge,
-          auth,
+          headers,
+          metadata,
           options,
           _args5 = arguments;
         return _regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
               maxAge = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : FILE_CACHE_MAX_AGE;
-              _context5.next = 3;
+              headers = {};
+              metadata = {
+                method: 'GET',
+                endpoint: '/file/{fileId}/binary'
+              };
+              options = _objectSpread(_objectSpread({}, metadata), {}, {
+                authContext: {
+                  collectionName: collectionName
+                },
+                headers: headers,
+                params: {
+                  'max-age': "".concat(maxAge)
+                }
+              });
+              return _context5.abrupt("return", this.request("/file/".concat(id, "/binary"), options).then(createMapResponseToBlob(metadata)));
+            case 5:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function getFileBinary(_x14, _x15) {
+        return _getFileBinary.apply(this, arguments);
+      }
+      return getFileBinary;
+    }()
+  }, {
+    key: "getFileBinaryURL",
+    value: function () {
+      var _getFileBinaryURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(id, collectionName) {
+        var maxAge,
+          auth,
+          options,
+          _args6 = arguments;
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              maxAge = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : FILE_CACHE_MAX_AGE;
+              _context6.next = 3;
               return this.resolveAuth({
                 collectionName: collectionName
               });
             case 3:
-              auth = _context5.sent;
+              auth = _context6.sent;
               options = {
                 params: {
                   dl: true,
@@ -311,14 +350,14 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context5.abrupt("return", createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/binary"), options));
+              return _context6.abrupt("return", createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/binary"), options));
             case 6:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
-      function getFileBinaryURL(_x14, _x15) {
+      function getFileBinaryURL(_x16, _x17) {
         return _getFileBinaryURL.apply(this, arguments);
       }
       return getFileBinaryURL;
@@ -326,24 +365,24 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getArtifactURL",
     value: function () {
-      var _getArtifactURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(artifacts, artifactName, collectionName) {
+      var _getArtifactURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(artifacts, artifactName, collectionName) {
         var artifactUrl, auth, options;
-        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
               artifactUrl = getArtifactUrl(artifacts, artifactName);
               if (artifactUrl) {
-                _context6.next = 3;
+                _context7.next = 3;
                 break;
               }
               throw new Error("artifact ".concat(artifactName, " not found"));
             case 3:
-              _context6.next = 5;
+              _context7.next = 5;
               return this.resolveAuth({
                 collectionName: collectionName
               });
             case 5:
-              auth = _context6.sent;
+              auth = _context7.sent;
               options = {
                 params: {
                   collection: collectionName,
@@ -351,14 +390,14 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context6.abrupt("return", createUrl("".concat(auth.baseUrl).concat(artifactUrl), options));
+              return _context7.abrupt("return", createUrl("".concat(auth.baseUrl).concat(artifactUrl), options));
             case 8:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
-      function getArtifactURL(_x16, _x17, _x18) {
+      function getArtifactURL(_x18, _x19, _x20) {
         return _getArtifactURL.apply(this, arguments);
       }
       return getArtifactURL;
@@ -366,10 +405,10 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getImage",
     value: function () {
-      var _getImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(id, params, controller, fetchMaxRes, traceContext) {
+      var _getImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(id, params, controller, fetchMaxRes, traceContext) {
         var isWebpSupported, headers, metadata, options;
-        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
               isWebpSupported = false;
@@ -389,14 +428,14 @@ export var MediaStore = /*#__PURE__*/function () {
                 headers: headers,
                 traceContext: traceContext
               });
-              return _context7.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then(createMapResponseToBlob(metadata)));
+              return _context8.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then(createMapResponseToBlob(metadata)));
             case 6:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
-        }, _callee7, this);
+        }, _callee8, this);
       }));
-      function getImage(_x19, _x20, _x21, _x22, _x23) {
+      function getImage(_x21, _x22, _x23, _x24, _x25) {
         return _getImage.apply(this, arguments);
       }
       return getImage;
@@ -404,10 +443,10 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getItems",
     value: function () {
-      var _getItems = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(ids, collectionName, traceContext) {
+      var _getItems = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(ids, collectionName, traceContext) {
         var descriptors, metadata, options;
-        return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-          while (1) switch (_context8.prev = _context8.next) {
+        return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
             case 0:
               descriptors = ids.map(function (id) {
                 return {
@@ -430,14 +469,14 @@ export var MediaStore = /*#__PURE__*/function () {
                 }),
                 traceContext: traceContext
               });
-              return _context8.abrupt("return", this.request('/items', options).then(createMapResponseToJson(metadata)));
+              return _context9.abrupt("return", this.request('/items', options).then(createMapResponseToJson(metadata)));
             case 4:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
-        }, _callee8, this);
+        }, _callee9, this);
       }));
-      function getItems(_x24, _x25, _x26) {
+      function getItems(_x26, _x27, _x28) {
         return _getItems.apply(this, arguments);
       }
       return getItems;
@@ -445,10 +484,10 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getImageMetadata",
     value: function () {
-      var _getImageMetadata = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(id, params, traceContext) {
+      var _getImageMetadata = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(id, params, traceContext) {
         var metadata, options;
-        return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-          while (1) switch (_context9.prev = _context9.next) {
+        return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+          while (1) switch (_context10.prev = _context10.next) {
             case 0:
               metadata = {
                 method: 'GET',
@@ -461,14 +500,14 @@ export var MediaStore = /*#__PURE__*/function () {
                 params: params,
                 traceContext: traceContext
               });
-              return _context9.abrupt("return", this.request("/file/".concat(id, "/image/metadata"), options).then(createMapResponseToJson(metadata)));
+              return _context10.abrupt("return", this.request("/file/".concat(id, "/image/metadata"), options).then(createMapResponseToJson(metadata)));
             case 3:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
-        }, _callee9, this);
+        }, _callee10, this);
       }));
-      function getImageMetadata(_x27, _x28, _x29) {
+      function getImageMetadata(_x29, _x30, _x31) {
         return _getImageMetadata.apply(this, arguments);
       }
       return getImageMetadata;
@@ -476,10 +515,10 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "appendChunksToUpload",
     value: function () {
-      var _appendChunksToUpload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(uploadId, body, collectionName, traceContext) {
+      var _appendChunksToUpload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(uploadId, body, collectionName, traceContext) {
         var metadata, options;
-        return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-          while (1) switch (_context10.prev = _context10.next) {
+        return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+          while (1) switch (_context11.prev = _context11.next) {
             case 0:
               metadata = {
                 method: 'PUT',
@@ -493,15 +532,15 @@ export var MediaStore = /*#__PURE__*/function () {
                 body: JSON.stringify(body),
                 traceContext: traceContext
               });
-              _context10.next = 4;
+              _context11.next = 4;
               return this.request("/upload/".concat(uploadId, "/chunks"), options);
             case 4:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
-        }, _callee10, this);
+        }, _callee11, this);
       }));
-      function appendChunksToUpload(_x30, _x31, _x32, _x33) {
+      function appendChunksToUpload(_x32, _x33, _x34, _x35) {
         return _appendChunksToUpload.apply(this, arguments);
       }
       return appendChunksToUpload;
@@ -530,7 +569,7 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "request",
     value: function () {
-      var _request2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(path) {
+      var _request2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(path) {
         var options,
           controller,
           method,
@@ -544,25 +583,25 @@ export var MediaStore = /*#__PURE__*/function () {
           auth,
           extendedTraceContext,
           response,
-          _args11 = arguments;
-        return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-          while (1) switch (_context11.prev = _context11.next) {
+          _args12 = arguments;
+        return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+          while (1) switch (_context12.prev = _context12.next) {
             case 0:
-              options = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : {
+              options = _args12.length > 1 && _args12[1] !== undefined ? _args12[1] : {
                 method: 'GET',
                 endpoint: undefined,
                 authContext: {}
               };
-              controller = _args11.length > 2 ? _args11[2] : undefined;
+              controller = _args12.length > 2 ? _args12[2] : undefined;
               method = options.method, endpoint = options.endpoint, authContext = options.authContext, params = options.params, headers = options.headers, body = options.body, clientOptions = options.clientOptions, traceContext = options.traceContext;
-              _context11.next = 5;
+              _context12.next = 5;
               return this.resolveAuth(authContext);
             case 5:
-              auth = _context11.sent;
+              auth = _context12.sent;
               extendedTraceContext = traceContext ? _objectSpread(_objectSpread({}, traceContext), {}, {
                 spanId: (traceContext === null || traceContext === void 0 ? void 0 : traceContext.spanId) || getRandomHex(8)
               }) : undefined;
-              _context11.next = 9;
+              _context12.next = 9;
               return _request("".concat(auth.baseUrl).concat(path), {
                 method: method,
                 endpoint: endpoint,
@@ -574,17 +613,17 @@ export var MediaStore = /*#__PURE__*/function () {
                 traceContext: extendedTraceContext
               }, controller);
             case 9:
-              response = _context11.sent;
+              response = _context12.sent;
               setKeyValueInSessionStorage(MEDIA_API_REGION, response.headers.get('x-media-region'));
               setKeyValueInSessionStorage(MEDIA_API_ENVIRONMENT, response.headers.get('x-media-env'));
-              return _context11.abrupt("return", response);
+              return _context12.abrupt("return", response);
             case 13:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
-        }, _callee11, this);
+        }, _callee12, this);
       }));
-      function request(_x34) {
+      function request(_x36) {
         return _request2.apply(this, arguments);
       }
       return request;

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

@@ -1,15 +1,15 @@
 import 'setimmediate';
-import { AuthProvider } from '@atlaskit/media-core';
-import { MediaFileArtifacts } from '@atlaskit/media-state';
-import { MediaStore as MediaApi, MediaStoreCopyFileWithTokenParams, TouchedFiles, TouchFileDescriptor } from '../media-store';
-import { GetFileOptions } from '../../models/file-state';
-import { MediaFile } from '../../models/media';
-import { UploadableFile, UploadableFileUpfrontIds } from '../../uploader';
-import { UploadController } from '../../upload-controller';
-import { MediaSubscribable } from '../../utils/mediaSubscribable';
-import { Dimensions } from '../../utils/getDimensionsFromBlob';
-import { MediaTraceContext } from '@atlaskit/media-common';
-import { FilePreview, FileState, MediaStore } from '@atlaskit/media-state';
+import { type AuthProvider } from '@atlaskit/media-core';
+import { type MediaFileArtifacts } from '@atlaskit/media-state';
+import { MediaStore as MediaApi, type MediaStoreCopyFileWithTokenParams, type TouchedFiles, type TouchFileDescriptor } from '../media-store';
+import { type GetFileOptions } from '../../models/file-state';
+import { type MediaFile } from '../../models/media';
+import { type UploadableFile, type UploadableFileUpfrontIds } from '../../uploader';
+import { type UploadController } from '../../upload-controller';
+import { type MediaSubscribable } from '../../utils/mediaSubscribable';
+import { type Dimensions } from '../../utils/getDimensionsFromBlob';
+import { type MediaTraceContext } from '@atlaskit/media-common';
+import { type FilePreview, type FileState, type MediaStore } from '@atlaskit/media-state';
 export type { FileFetcherErrorAttributes, FileFetcherErrorReason, } from './error';
 export { isFileFetcherError, FileFetcherError } from './error';
 export interface CopySourceFile {

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

@@ -18,6 +18,7 @@ export declare class MediaStore implements MediaApi {
     getFileImageURL(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getFileImageURLSync(id: string, params?: MediaStoreGetFileImageParams): string;
     private createFileImageURL;
+    getFileBinary(id: string, collectionName?: string, maxAge?: number): Promise<Blob>;
     getFileBinaryURL(id: string, collectionName?: string, maxAge?: number): Promise<string>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
     getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceContext?: MediaTraceContext): Promise<Blob>;

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

@@ -147,6 +147,7 @@ export interface MediaApi {
     getFile: (fileId: string, params: MediaStoreGetFileParams, traceContext?: MediaTraceContext) => Promise<MediaStoreResponse<MediaFile>>;
     getFileImageURL: (id: string, params?: MediaStoreGetFileImageParams) => Promise<string>;
     getFileImageURLSync: (id: string, params?: MediaStoreGetFileImageParams) => string;
+    getFileBinary: (id: string, collectionName?: string) => Promise<Blob>;
     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, traceContext?: MediaTraceContext) => Promise<Blob>;

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

@@ -1,15 +1,15 @@
 import 'setimmediate';
-import { AuthProvider } from '@atlaskit/media-core';
-import { MediaFileArtifacts } from '@atlaskit/media-state';
-import { MediaStore as MediaApi, MediaStoreCopyFileWithTokenParams, TouchedFiles, TouchFileDescriptor } from '../media-store';
-import { GetFileOptions } from '../../models/file-state';
-import { MediaFile } from '../../models/media';
-import { UploadableFile, UploadableFileUpfrontIds } from '../../uploader';
-import { UploadController } from '../../upload-controller';
-import { MediaSubscribable } from '../../utils/mediaSubscribable';
-import { Dimensions } from '../../utils/getDimensionsFromBlob';
-import { MediaTraceContext } from '@atlaskit/media-common';
-import { FilePreview, FileState, MediaStore } from '@atlaskit/media-state';
+import { type AuthProvider } from '@atlaskit/media-core';
+import { type MediaFileArtifacts } from '@atlaskit/media-state';
+import { MediaStore as MediaApi, type MediaStoreCopyFileWithTokenParams, type TouchedFiles, type TouchFileDescriptor } from '../media-store';
+import { type GetFileOptions } from '../../models/file-state';
+import { type MediaFile } from '../../models/media';
+import { type UploadableFile, type UploadableFileUpfrontIds } from '../../uploader';
+import { type UploadController } from '../../upload-controller';
+import { type MediaSubscribable } from '../../utils/mediaSubscribable';
+import { type Dimensions } from '../../utils/getDimensionsFromBlob';
+import { type MediaTraceContext } from '@atlaskit/media-common';
+import { type FilePreview, type FileState, type MediaStore } from '@atlaskit/media-state';
 export type { FileFetcherErrorAttributes, FileFetcherErrorReason, } from './error';
 export { isFileFetcherError, FileFetcherError } from './error';
 export interface CopySourceFile {

package/dist/types-ts4.5/client/media-store/MediaStore.d.ts

@@ -18,6 +18,7 @@ export declare class MediaStore implements MediaApi {
     getFileImageURL(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getFileImageURLSync(id: string, params?: MediaStoreGetFileImageParams): string;
     private createFileImageURL;
+    getFileBinary(id: string, collectionName?: string, maxAge?: number): Promise<Blob>;
     getFileBinaryURL(id: string, collectionName?: string, maxAge?: number): Promise<string>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
     getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceContext?: MediaTraceContext): Promise<Blob>;

package/dist/types-ts4.5/client/media-store/types.d.ts

@@ -147,6 +147,7 @@ export interface MediaApi {
     getFile: (fileId: string, params: MediaStoreGetFileParams, traceContext?: MediaTraceContext) => Promise<MediaStoreResponse<MediaFile>>;
     getFileImageURL: (id: string, params?: MediaStoreGetFileImageParams) => Promise<string>;
     getFileImageURLSync: (id: string, params?: MediaStoreGetFileImageParams) => string;
+    getFileBinary: (id: string, collectionName?: string) => Promise<Blob>;
     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, traceContext?: MediaTraceContext) => Promise<Blob>;

package/example-helpers/styles.ts

@@ -2,27 +2,27 @@ import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { FileStatus } from '../src';
 
-export const wrapperStyles = css`
-  display: flex;
-`;
+export const wrapperStyles = css({
+  display: 'flex',
+});
 
-export const imagePreviewStyles = css`
-  width: 300px;
-`;
+export const imagePreviewStyles = css({
+  width: '300px',
+});
 
-export const previewWrapperStyles = css`
-  flex: 1;
-`;
+export const previewWrapperStyles = css({
+  flex: 1,
+});
 
-export const metadataWrapperStyles = css`
-  width: 400px;
-  overflow: scroll;
-  flex: 1;
-`;
+export const metadataWrapperStyles = css({
+  width: '400px',
+  overflow: 'scroll',
+  flex: 1,
+});
 
-export const fileInputStyles = css`
-  color: transparent;
-`;
+export const fileInputStyles = css({
+  color: 'transparent',
+});
 
 export interface FilesWrapperProps {
   status: FileStatus;
@@ -38,68 +38,67 @@ const statusColorMap: { [key in FileStatus]: string } = {
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const fileWrapperStyles = (status: FileStatus) => css`
-  padding: 5px;
-  margin: 10px;
-  display: inline-block;
-  width: 315px;
-  background-color: ${statusColorMap[status]};
-`;
+export const fileWrapperStyles = (status: FileStatus) =>
+  css({
+    padding: '5px',
+    margin: '10px',
+    display: 'inline-block',
+    width: '315px',
+    backgroundColor: statusColorMap[status],
+  });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardsWrapperStyles = css`
-  width: 900px;
-  padding: 10px;
-  border-right: 1px solid ${token('color.border', '#ccc')};
-
-  h1 {
-    text-align: center;
-    border-bottom: 1px solid ${token('color.border', '#ccc')};
-  }
-
-  > div {
-    width: auto;
-    display: inline-block;
-    margin: 10px;
-  }
-`;
+export const cardsWrapperStyles = css({
+  width: '900px',
+  padding: '10px',
+  borderRight: `1px solid ${token('color.border', '#ccc')}`,
+  h1: {
+    textAlign: 'center',
+    borderBottom: `1px solid ${token('color.border', '#ccc')}`,
+  },
+  '> div': {
+    width: 'auto',
+    display: 'inline-block',
+    margin: '10px',
+  },
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const headerStyles = css`
-  button {
-    margin: 5px;
-  }
-`;
+export const headerStyles = css({
+  button: {
+    margin: '5px',
+  },
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const fileStateWrapperStyles = css`
-  border: 1px solid ${token('color.border', '#ccc')};
-  margin: 10px;
-  padding: 10px;
-  width: 500px;
-`;
-
-export const uploadTouchWrapperStyles = css`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-`;
+export const fileStateWrapperStyles = css({
+  border: `1px solid ${token('color.border', '#ccc')}`,
+  margin: '10px',
+  padding: '10px',
+  width: '500px',
+});
+
+export const uploadTouchWrapperStyles = css({
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignContent: 'center',
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const rowStyles = css`
-  flex-direction: row;
-  justify-content: center;
-  > * {
-    margin-right: 10px;
-  }
-`;
-
-export const responseStyles = css`
-  font-family: monospace;
-  white-space: pre;
-`;
+export const rowStyles = css({
+  flexDirection: 'row',
+  justifyContent: 'center',
+  '> *': {
+    marginRight: '10px',
+  },
+});
+
+export const responseStyles = css({
+  fontFamily: 'monospace',
+  whiteSpace: 'pre',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-client",
-  "version": "26.2.3",
+  "version": "27.0.0",
   "description": "Media API Web Client Library",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,8 @@
   },
   "dependencies": {
     "@atlaskit/chunkinator": "^6.0.0",
-    "@atlaskit/media-common": "^11.1.0",
+    "@atlaskit/media-common": "^11.2.0",
+    "@atlaskit/platform-feature-flags": "0.2.5",
     "@babel/runtime": "^7.0.0",
     "dataloader": "^2.0.0",
     "deep-equal": "^1.0.1",
@@ -59,8 +60,9 @@
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-state": "^1.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "0.2.1",
     "@emotion/react": "^11.7.1",
     "@types/deep-equal": "^1.0.1",
     "@types/uuid-validate": "^0.0.2",
@@ -82,5 +84,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.media-svg-rendering": {
+      "type": "boolean"
+    }
+  }
 }