@atlaskit/media-viewer 48.4.4 → 48.4.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/media-viewer
 
+## 48.4.5
+
+### Patch Changes
+
+- [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
+- Updated dependencies
+
 ## 48.4.4
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "48.4.4";
+var packageVersion = exports.packageVersion = "48.4.5";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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-viewer";
-var packageVersion = "48.4.4";
+var packageVersion = "48.4.5";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/viewers/archiveSidebar/styleWrappers.js

@@ -152,7 +152,8 @@ var ArchiveSidebarFileEntryWrapper = exports.ArchiveSidebarFileEntryWrapper = fu
 var ArchiveLayout = exports.ArchiveLayout = function ArchiveLayout(_ref7) {
   var children = _ref7.children;
   return (0, _react.jsx)("div", {
-    css: archiveLayoutStyles
+    css: archiveLayoutStyles,
+    "data-testid": "archive-layout"
   }, children);
 };
 var ArchiveViewerWrapper = exports.ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref8) {

package/dist/cjs/viewers/codeViewer/styles.js

@@ -1,19 +1,36 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeViewerHeaderBarStyles = exports.codeViewerHTMLStyles = exports.codeViewWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _theme = require("@atlaskit/theme");
-var _templateObject, _templateObject2, _templateObject3; // AFP-2532 TODO: Fix automatic suppressions below
+// AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var codeViewWrapperStyles = exports.codeViewWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), "var(--ds-surface, ".concat(_theme.colors.N20, ")"));
+
+var codeViewWrapperStyles = exports.codeViewWrapperStyles = (0, _react.css)({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "var(--ds-surface, ".concat(_theme.colors.N20, ")"),
+  overflow: 'auto'
+});
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var codeViewerHeaderBarStyles = exports.codeViewerHeaderBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 75px;\n  background-color: #1d2125;\n"])));
+var codeViewerHeaderBarStyles = exports.codeViewerHeaderBarStyles = (0, _react.css)({
+  height: '75px',
+  backgroundColor: '#1d2125'
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-var codeViewerHTMLStyles = exports.codeViewerHTMLStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
+var codeViewerHTMLStyles = exports.codeViewerHTMLStyles = (0, _react.css)({
+  display: 'flex',
+  lineHeight: '20px',
+  overflowX: 'auto',
+  whiteSpace: 'pre',
+  fontSize: '12px',
+  padding: "var(--ds-space-100, 8px)"
+});

package/dist/cjs/viewers/doc/pdfPasswordInput.js

@@ -9,7 +9,7 @@ exports.PDFPasswordInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
@@ -118,7 +118,7 @@ var PDFPasswordInput = exports.PDFPasswordInput = function PDFPasswordInput(_ref
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.incorrect_password))));
     }), (0, _react2.jsx)(_primitives.Box, {
       xcss: footerStyles
-    }, (0, _react2.jsx)(_loadingButton.default, {
+    }, (0, _react2.jsx)(_new.default, {
       appearance: "primary",
       type: "submit",
       isLoading: submitting

package/dist/cjs/viewers/doc/pdfRenderer.js

@@ -91,11 +91,11 @@ var globalStyles = (0, _react2.css)((0, _defineProperty2.default)({}, ".".concat
     boxShadow: '0 2px 10px rgba(255, 255, 0, 1)'
   }
 }));
-var CmapFacotry = /*#__PURE__*/function () {
-  function CmapFacotry() {
-    (0, _classCallCheck2.default)(this, CmapFacotry);
+var CmapFactory = /*#__PURE__*/function () {
+  function CmapFactory() {
+    (0, _classCallCheck2.default)(this, CmapFactory);
   }
-  (0, _createClass2.default)(CmapFacotry, [{
+  (0, _createClass2.default)(CmapFactory, [{
     key: "fetch",
     value: function () {
       var _fetch = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
@@ -129,7 +129,7 @@ var CmapFacotry = /*#__PURE__*/function () {
       return fetch;
     }()
   }]);
-  return CmapFacotry;
+  return CmapFactory;
 }();
 var defaultWorkerUrl = '';
 var PDFRendererBase = function PDFRendererBase(_ref2) {
@@ -187,7 +187,7 @@ var PDFRendererBase = function PDFRendererBase(_ref2) {
               _pdf.GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
               getDocumentTask = (0, _pdf.getDocument)({
                 url: src,
-                CMapReaderFactory: CmapFacotry
+                CMapReaderFactory: CmapFactory
               });
               getDocumentTask.onPassword = function (updatePassword, e) {
                 updatePasswordRef.current = updatePassword;

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.4.4";
+const packageVersion = "48.4.5";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.4.4";
+const packageVersion = "48.4.5";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -153,7 +153,8 @@ export const ArchiveLayout = ({
   children
 }) => {
   return jsx("div", {
-    css: archiveLayoutStyles
+    css: archiveLayoutStyles,
+    "data-testid": "archive-layout"
   }, children);
 };
 export const ArchiveViewerWrapper = ({

package/dist/es2019/viewers/codeViewer/styles.js

@@ -2,28 +2,28 @@ import { css } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
-export const codeViewWrapperStyles = css`
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${`var(--ds-surface, ${colors.N20})`};
-  overflow: auto;
-`;
+export const codeViewWrapperStyles = css({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: `var(--ds-surface, ${colors.N20})`,
+  overflow: 'auto'
+});
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const codeViewerHeaderBarStyles = css`
-  height: 75px;
-  background-color: #1d2125;
-`;
+export const codeViewerHeaderBarStyles = css({
+  height: '75px',
+  backgroundColor: '#1d2125'
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-export const codeViewerHTMLStyles = css`
-  display: flex;
-  line-height: 20px;
-  overflow-x: auto;
-  white-space: pre;
-  font-size: 12px;
-  padding: ${"var(--ds-space-100, 8px)"};
-`;
+export const codeViewerHTMLStyles = css({
+  display: 'flex',
+  lineHeight: '20px',
+  overflowX: 'auto',
+  whiteSpace: 'pre',
+  fontSize: '12px',
+  padding: "var(--ds-space-100, 8px)"
+});

package/dist/es2019/viewers/doc/pdfPasswordInput.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { useEffect, useRef, useState } from 'react';
-import LoadingButton from '@atlaskit/button/loading-button';
+import Button from '@atlaskit/button/new';
 import TextField from '@atlaskit/textfield';
 import LockIcon from '@atlaskit/icon/glyph/lock';
 import Form, { Field } from '@atlaskit/form';
@@ -103,7 +103,7 @@ export const PDFPasswordInput = ({
     css: errorMessageStyle
   }, jsx(FormattedMessage, messages.incorrect_password))))), jsx(Box, {
     xcss: footerStyles
-  }, jsx(LoadingButton, {
+  }, jsx(Button, {
     appearance: "primary",
     type: "submit",
     isLoading: submitting

package/dist/es2019/viewers/doc/pdfRenderer.js

@@ -77,7 +77,7 @@ const globalStyles = css({
     }
   }
 });
-class CmapFacotry {
+class CmapFactory {
   constructor() {}
   async fetch({
     name
@@ -126,7 +126,7 @@ const PDFRendererBase = ({
         GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
         const getDocumentTask = getDocument({
           url: src,
-          CMapReaderFactory: CmapFacotry
+          CMapReaderFactory: CmapFactory
         });
         getDocumentTask.onPassword = (updatePassword, e) => {
           updatePasswordRef.current = updatePassword;

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.4.4";
+var packageVersion = "48.4.5";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.4.4";
+var packageVersion = "48.4.5";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/viewers/archiveSidebar/styleWrappers.js

@@ -146,7 +146,8 @@ export var ArchiveSidebarFileEntryWrapper = function ArchiveSidebarFileEntryWrap
 export var ArchiveLayout = function ArchiveLayout(_ref7) {
   var children = _ref7.children;
   return jsx("div", {
-    css: archiveLayoutStyles
+    css: archiveLayoutStyles,
+    "data-testid": "archive-layout"
   }, children);
 };
 export var ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref8) {

package/dist/esm/viewers/codeViewer/styles.js

@@ -1,13 +1,29 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
-export var codeViewWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), "var(--ds-surface, ".concat(colors.N20, ")"));
+export var codeViewWrapperStyles = css({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "var(--ds-surface, ".concat(colors.N20, ")"),
+  overflow: 'auto'
+});
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var codeViewerHeaderBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 75px;\n  background-color: #1d2125;\n"])));
+export var codeViewerHeaderBarStyles = css({
+  height: '75px',
+  backgroundColor: '#1d2125'
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-export var codeViewerHTMLStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var codeViewerHTMLStyles = css({
+  display: 'flex',
+  lineHeight: '20px',
+  overflowX: 'auto',
+  whiteSpace: 'pre',
+  fontSize: '12px',
+  padding: "var(--ds-space-100, 8px)"
+});

package/dist/esm/viewers/doc/pdfPasswordInput.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**@jsx jsx */
 import { useEffect, useRef, useState } from 'react';
-import LoadingButton from '@atlaskit/button/loading-button';
+import Button from '@atlaskit/button/new';
 import TextField from '@atlaskit/textfield';
 import LockIcon from '@atlaskit/icon/glyph/lock';
 import Form, { Field } from '@atlaskit/form';
@@ -107,7 +107,7 @@ export var PDFPasswordInput = function PDFPasswordInput(_ref) {
       }, jsx(FormattedMessage, messages.incorrect_password))));
     }), jsx(Box, {
       xcss: footerStyles
-    }, jsx(LoadingButton, {
+    }, jsx(Button, {
       appearance: "primary",
       type: "submit",
       isLoading: submitting

package/dist/esm/viewers/doc/pdfRenderer.js

@@ -81,11 +81,11 @@ var globalStyles = css(_defineProperty({}, ".".concat(pdfViewerClassName), {
     boxShadow: '0 2px 10px rgba(255, 255, 0, 1)'
   }
 }));
-var CmapFacotry = /*#__PURE__*/function () {
-  function CmapFacotry() {
-    _classCallCheck(this, CmapFacotry);
+var CmapFactory = /*#__PURE__*/function () {
+  function CmapFactory() {
+    _classCallCheck(this, CmapFactory);
   }
-  _createClass(CmapFacotry, [{
+  _createClass(CmapFactory, [{
     key: "fetch",
     value: function () {
       var _fetch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
@@ -119,7 +119,7 @@ var CmapFacotry = /*#__PURE__*/function () {
       return fetch;
     }()
   }]);
-  return CmapFacotry;
+  return CmapFactory;
 }();
 var defaultWorkerUrl = '';
 var PDFRendererBase = function PDFRendererBase(_ref2) {
@@ -177,7 +177,7 @@ var PDFRendererBase = function PDFRendererBase(_ref2) {
               GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
               getDocumentTask = getDocument({
                 url: src,
-                CMapReaderFactory: CmapFacotry
+                CMapReaderFactory: CmapFactory
               });
               getDocumentTask.onPassword = function (updatePassword, e) {
                 updatePasswordRef.current = updatePassword;

package/dist/types/v2/item-viewer-v2.d.ts

@@ -18,4 +18,10 @@ export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "e
 export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
 export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
 export declare const ItemViewerV2Base: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
-export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Readonly<{
+    identifier: Identifier;
+    onClose?: (() => void) | undefined;
+    previewCount: number;
+    contextId?: string | undefined;
+    featureFlags?: MediaFeatureFlags | undefined;
+}> & WithAnalyticsEventsProps & WithShowControlMethodProp, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/viewers/doc/pdfRenderer.d.ts

@@ -11,4 +11,11 @@ export type Props = {
     onSuccess?: () => void;
     onError?: (error: MediaViewerError) => void;
 } & WithAnalyticsEventsProps;
-export declare const PDFRenderer: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const PDFRenderer: React.ForwardRefExoticComponent<Omit<{
+    item: FileState;
+    src: string;
+    workerUrl?: string | undefined;
+    onClose?: (() => void) | undefined;
+    onSuccess?: (() => void) | undefined;
+    onError?: ((error: MediaViewerError) => void) | undefined;
+} & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/v2/item-viewer-v2.d.ts

@@ -18,4 +18,10 @@ export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "e
 export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
 export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
 export declare const ItemViewerV2Base: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
-export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const ItemViewerV2: React.ForwardRefExoticComponent<Omit<Readonly<{
+    identifier: Identifier;
+    onClose?: (() => void) | undefined;
+    previewCount: number;
+    contextId?: string | undefined;
+    featureFlags?: MediaFeatureFlags | undefined;
+}> & WithAnalyticsEventsProps & WithShowControlMethodProp, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/viewers/doc/pdfRenderer.d.ts

@@ -11,4 +11,11 @@ export type Props = {
     onSuccess?: () => void;
     onError?: (error: MediaViewerError) => void;
 } & WithAnalyticsEventsProps;
-export declare const PDFRenderer: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const PDFRenderer: React.ForwardRefExoticComponent<Omit<{
+    item: FileState;
+    src: string;
+    workerUrl?: string | undefined;
+    onClose?: (() => void) | undefined;
+    onSuccess?: (() => void) | undefined;
+    onError?: ((error: MediaViewerError) => void) | undefined;
+} & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/example-helpers/styles.ts

@@ -1,48 +1,46 @@
 import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 
-export const containerStyles = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
-export const groupStyles = css`
-  width: 250px;
-  padding: ${token('space.250', '20px')};
-`;
+export const containerStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+});
+export const groupStyles = css({
+  width: '250px',
+  padding: token('space.250', '20px'),
+});
 
-export const buttonListStyles = css`
-  padding-left: 0;
-  list-style: none;
-`;
+export const buttonListStyles = css({
+  paddingLeft: 0,
+  listStyle: 'none',
+});
 
-export const mVSidebarStyles = css`
-  height: calc(100vh - 64px);
-  padding: ${token('space.400', '32px')};
-  overflow: auto;
+export const mVSidebarStyles = css({
+  height: 'calc(100vh - 64px)',
+  padding: token('space.400', '32px'),
+  overflow: 'auto',
+  h2: {
+    color: token('color.text', '#c7d1db'),
+    marginBottom: token('space.200', '16px'),
+  },
+  tbody: {
+    borderBottom: 'none',
+    verticalAlign: 'top',
+  },
+});
 
-  h2 {
-    color: ${token('color.text', '#c7d1db')};
-    margin-bottom: ${token('space.200', '16px')};
-  }
+export const mVSidebarHeaderStyles = css({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+});
 
-  tbody {
-    border-bottom: none;
-    vertical-align: top;
-  }
-`;
-
-export const mVSidebarHeaderStyles = css`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`;
-
-export const nativePreviewButtonStyles = css`
-  height: 125px;
-  width: 156px;
-  background: none;
-  overflow: hidden;
-  appearance: none;
-  padding: 0;
-`;
+export const nativePreviewButtonStyles = css({
+  height: '125px',
+  width: '156px',
+  background: 'none',
+  overflow: 'hidden',
+  appearance: 'none',
+  padding: 0,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.4.4",
+  "version": "48.4.5",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,18 +35,18 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.11.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.14.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/form": "^9.1.0",
+    "@atlaskit/form": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-file-type": "^6.4.0",
-    "@atlaskit/media-client": "^26.2.0",
+    "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
-    "@atlaskit/media-ui": "^25.6.0",
+    "@atlaskit/media-ui": "^25.9.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
-    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/side-navigation": "^3.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/textfield": "^6.1.0",
@@ -77,7 +77,7 @@
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-state": "^1.0.0",
-    "@atlaskit/media-test-data": "^1.2.0",
+    "@atlaskit/media-test-data": "^2.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",