@atlaskit/media-viewer 52.2.1 → 52.2.3

package/dist/esm/styleWrappers-emotion.js

@@ -412,9 +412,9 @@ export var ArrowsWrapper = function ArrowsWrapper(_ref9) {
     css: arrowsWrapperStyles
   }, children);
 };
-export var CloseButtonWrapper = function CloseButtonWrapper(_ref10) {
-  var className = _ref10.className,
-    children = _ref10.children;
+export var CloseButtonWrapper = function CloseButtonWrapper(_ref0) {
+  var className = _ref0.className,
+    children = _ref0.children;
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     jsx("div", {
@@ -423,9 +423,9 @@ export var CloseButtonWrapper = function CloseButtonWrapper(_ref10) {
     }, children)
   );
 };
-export var ContentWrapper = function ContentWrapper(_ref11) {
-  var isSidebarVisible = _ref11.isSidebarVisible,
-    children = _ref11.children;
+export var ContentWrapper = function ContentWrapper(_ref1) {
+  var isSidebarVisible = _ref1.isSidebarVisible,
+    children = _ref1.children;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
@@ -435,9 +435,9 @@ export var ContentWrapper = function ContentWrapper(_ref11) {
     }, children)
   );
 };
-export var ZoomWrapper = function ZoomWrapper(_ref12) {
-  var className = _ref12.className,
-    children = _ref12.children;
+export var ZoomWrapper = function ZoomWrapper(_ref10) {
+  var className = _ref10.className,
+    children = _ref10.children;
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     jsx("div", {
@@ -446,28 +446,28 @@ export var ZoomWrapper = function ZoomWrapper(_ref12) {
     }, children)
   );
 };
-export var ZoomCenterControls = function ZoomCenterControls(_ref13) {
-  var children = _ref13.children;
+export var ZoomCenterControls = function ZoomCenterControls(_ref11) {
+  var children = _ref11.children;
   return jsx("div", {
     css: zoomCenterControlsStyles
   }, children);
 };
-export var ZoomRightControls = function ZoomRightControls(_ref14) {
-  var children = _ref14.children;
+export var ZoomRightControls = function ZoomRightControls(_ref12) {
+  var children = _ref12.children;
   return jsx("div", {
     css: zoomRightControlsStyles
   }, children);
 };
-export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref15) {
-  var children = _ref15.children;
+export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref13) {
+  var children = _ref13.children;
   return jsx("span", {
     css: zoomLevelIndicatorStyles,
     "data-testid": "zoom-level-indicator"
   }, children);
 };
-export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref16) {
-  var className = _ref16.className,
-    children = _ref16.children;
+export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref14) {
+  var className = _ref14.className,
+    children = _ref14.children;
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     jsx("div", {
@@ -476,27 +476,27 @@ export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref16) {
     }, children)
   );
 };
-export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref17) {
-  var datatestId = _ref17['data-testid'],
-    children = _ref17.children;
+export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref15) {
+  var datatestId = _ref15['data-testid'],
+    children = _ref15.children;
   return jsx("div", {
     css: errorMessageWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var ErrorImage = function ErrorImage(_ref18) {
-  var src = _ref18.src,
-    alt = _ref18.alt;
+export var ErrorImage = function ErrorImage(_ref16) {
+  var src = _ref16.src,
+    alt = _ref16.alt;
   return jsx("img", {
     css: errorImageStyles,
     alt: alt,
     src: src
   });
 };
-export var Video = function Video(_ref19) {
-  var autoPlay = _ref19.autoPlay,
-    controls = _ref19.controls,
-    src = _ref19.src;
+export var Video = function Video(_ref17) {
+  var autoPlay = _ref17.autoPlay,
+    controls = _ref17.controls,
+    src = _ref17.src;
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     jsx("video", {
@@ -507,10 +507,10 @@ export var Video = function Video(_ref19) {
     })
   );
 };
-var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref20, ref) {
-  var innerRef = _ref20.innerRef,
-    datatestId = _ref20['data-testid'],
-    children = _ref20.children;
+var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref18, ref) {
+  var innerRef = _ref18.innerRef,
+    datatestId = _ref18['data-testid'],
+    children = _ref18.children;
   var bodyRef = useMergeRefs([ref, innerRef]);
   return jsx("div", {
     css: pdfWrapperStyles,
@@ -523,9 +523,9 @@ export var PDFWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     innerRef: ref
   }, props)));
 });
-export var Arrow = function Arrow(_ref21) {
-  var className = _ref21.className,
-    children = _ref21.children;
+export var Arrow = function Arrow(_ref19) {
+  var className = _ref19.className,
+    children = _ref19.children;
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     jsx("span", {
@@ -534,9 +534,9 @@ export var Arrow = function Arrow(_ref21) {
     }, children)
   );
 };
-export var LeftWrapper = function LeftWrapper(_ref22) {
-  var children = _ref22.children,
-    isArchiveSideBarVisible = _ref22.isArchiveSideBarVisible;
+export var LeftWrapper = function LeftWrapper(_ref20) {
+  var children = _ref20.children,
+    isArchiveSideBarVisible = _ref20.isArchiveSideBarVisible;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
@@ -546,8 +546,8 @@ export var LeftWrapper = function LeftWrapper(_ref22) {
     }, children)
   );
 };
-export var RightWrapper = function RightWrapper(_ref23) {
-  var children = _ref23.children;
+export var RightWrapper = function RightWrapper(_ref21) {
+  var children = _ref21.children;
   return jsx("div", {
     css: rightWrapperStyles
   }, children);
@@ -555,10 +555,10 @@ export var RightWrapper = function RightWrapper(_ref23) {
 
 // header.tsx
 
-export var Header = function Header(_ref24) {
-  var children = _ref24.children,
-    isArchiveSideBarVisible = _ref24.isArchiveSideBarVisible,
-    className = _ref24.className;
+export var Header = function Header(_ref22) {
+  var children = _ref22.children,
+    isArchiveSideBarVisible = _ref22.isArchiveSideBarVisible,
+    className = _ref22.className;
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
@@ -569,18 +569,18 @@ export var Header = function Header(_ref24) {
     }, children)
   );
 };
-export var LeftHeader = function LeftHeader(_ref25) {
-  var children = _ref25.children;
+export var LeftHeader = function LeftHeader(_ref23) {
+  var children = _ref23.children;
   return jsx("div", {
     css: leftHeaderStyles
   }, children);
 };
-export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref26, ref) {
-  var children = _ref26.children,
-    datatestId = _ref26['data-testid'],
-    onClick = _ref26.onClick,
-    style = _ref26.style,
-    className = _ref26.className;
+export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref24, ref) {
+  var children = _ref24.children,
+    datatestId = _ref24['data-testid'],
+    onClick = _ref24.onClick,
+    style = _ref24.style,
+    className = _ref24.className;
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     jsx("div", {
@@ -602,17 +602,17 @@ export var BaselineExtend = function BaselineExtend() {
     css: baselineExtendStyles
   });
 };
-export var Img = function Img(_ref27) {
-  var canDrag = _ref27.canDrag,
-    isDragging = _ref27.isDragging,
-    shouldPixelate = _ref27.shouldPixelate,
-    datatestId = _ref27['data-testid'],
-    src = _ref27.src,
-    style = _ref27.style,
-    onLoad = _ref27.onLoad,
-    onError = _ref27.onError,
-    onMouseDown = _ref27.onMouseDown,
-    className = _ref27.className;
+export var Img = function Img(_ref25) {
+  var canDrag = _ref25.canDrag,
+    isDragging = _ref25.isDragging,
+    shouldPixelate = _ref25.shouldPixelate,
+    datatestId = _ref25['data-testid'],
+    src = _ref25.src,
+    style = _ref25.style,
+    onLoad = _ref25.onLoad,
+    onError = _ref25.onError,
+    onMouseDown = _ref25.onMouseDown,
+    className = _ref25.className;
   var cursor = useMemo(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -644,21 +644,21 @@ export var Img = function Img(_ref27) {
     })
   );
 };
-export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref28) {
-  var children = _ref28.children;
+export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref26) {
+  var children = _ref26.children;
   return jsx("div", {
     css: medatadataTextWrapperStyles
   }, children);
 };
-export var MetadataWrapper = function MetadataWrapper(_ref29) {
-  var children = _ref29.children;
+export var MetadataWrapper = function MetadataWrapper(_ref27) {
+  var children = _ref27.children;
   return jsx("div", {
     css: metadataWrapperStyles
   }, children);
 };
-export var MetadataFileName = function MetadataFileName(_ref30) {
-  var datatestId = _ref30['data-testid'],
-    children = _ref30.children;
+export var MetadataFileName = function MetadataFileName(_ref28) {
+  var datatestId = _ref28['data-testid'],
+    children = _ref28.children;
   return jsx("div", {
     css: metadataFileNameStyles
   }, jsx(Heading, {
@@ -667,46 +667,46 @@ export var MetadataFileName = function MetadataFileName(_ref30) {
     testId: datatestId
   }, children));
 };
-export var MetadataSubText = function MetadataSubText(_ref31) {
-  var datatestId = _ref31['data-testid'],
-    children = _ref31.children;
+export var MetadataSubText = function MetadataSubText(_ref29) {
+  var datatestId = _ref29['data-testid'],
+    children = _ref29.children;
   return jsx("div", {
     css: metadataSubTextStyles,
     "data-testid": datatestId
   }, children);
 };
-export var MetadataIconWrapper = function MetadataIconWrapper(_ref32) {
-  var children = _ref32.children;
+export var MetadataIconWrapper = function MetadataIconWrapper(_ref30) {
+  var children = _ref30.children;
   return jsx(Box, {
     xcss: metadataIconWrapperStyles
   }, children);
 };
-export var RightHeader = function RightHeader(_ref33) {
-  var children = _ref33.children;
+export var RightHeader = function RightHeader(_ref31) {
+  var children = _ref31.children;
   return jsx("div", {
     css: rightHeaderStyles
   }, children);
 };
-export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref34) {
-  var children = _ref34.children;
+export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref32) {
+  var children = _ref32.children;
   return jsx("div", {
     css: customAudioPlayerWrapperStyles
   }, children);
 };
-export var AudioPlayer = function AudioPlayer(_ref35) {
-  var datatestId = _ref35['data-testid'],
-    children = _ref35.children;
+export var AudioPlayer = function AudioPlayer(_ref33) {
+  var datatestId = _ref33['data-testid'],
+    children = _ref33.children;
   return jsx("div", {
     css: audioPlayerStyles,
     "data-testid": datatestId
   }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-export var Audio = /*#__PURE__*/forwardRef(function (_ref36, ref) {
-  var autoPlay = _ref36.autoPlay,
-    controls = _ref36.controls,
-    src = _ref36.src,
-    preload = _ref36.preload;
+export var Audio = /*#__PURE__*/forwardRef(function (_ref34, ref) {
+  var autoPlay = _ref34.autoPlay,
+    controls = _ref34.controls,
+    src = _ref34.src,
+    preload = _ref34.preload;
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     jsx("audio", {
@@ -719,51 +719,51 @@ export var Audio = /*#__PURE__*/forwardRef(function (_ref36, ref) {
     })
   );
 });
-export var AudioCover = function AudioCover(_ref37) {
-  var src = _ref37.src,
-    alt = _ref37.alt;
+export var AudioCover = function AudioCover(_ref35) {
+  var src = _ref35.src,
+    alt = _ref35.alt;
   return jsx("img", {
     css: audioCoverStyles,
     alt: alt,
     src: src
   });
 };
-export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref38) {
-  var children = _ref38.children;
+export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref36) {
+  var children = _ref36.children;
   return jsx("div", {
     css: defaultCoverWrapperStyles
   }, children);
 };
-export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref39) {
-  var children = _ref39.children;
+export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref37) {
+  var children = _ref37.children;
   return jsx("div", {
     css: downloadButtonWrapperStyles
   }, children);
 };
-export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref40) {
-  var datatestId = _ref40['data-testid'],
-    children = _ref40.children;
+export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref38) {
+  var datatestId = _ref38['data-testid'],
+    children = _ref38.children;
   return jsx("div", {
     css: customVideoPlayerWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var SidebarWrapper = function SidebarWrapper(_ref41) {
-  var datatestId = _ref41['data-testid'],
-    children = _ref41.children;
+export var SidebarWrapper = function SidebarWrapper(_ref39) {
+  var datatestId = _ref39['data-testid'],
+    children = _ref39.children;
   return jsx("div", {
     css: sidebarWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var SpinnerWrapper = function SpinnerWrapper(_ref42) {
-  var children = _ref42.children;
+export var SpinnerWrapper = function SpinnerWrapper(_ref40) {
+  var children = _ref40.children;
   return jsx("div", {
     css: spinnerWrapperStyles
   }, children);
 };
-export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref43) {
-  var children = _ref43.children;
+export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref41) {
+  var children = _ref41.children;
   return jsx("span", {
     css: formattedMessageWrapperStyles
   }, children);

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

@@ -95,20 +95,20 @@ export var Separator = function Separator() {
     className: ax(["_2rkot94y _4t3iyh40 _19pk1te7 _2hwxidpf _otyr1te7 _18u0idpf _bfhk21we _1o9zidpf"])
   });
 };
-export var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref10) {
-  var children = _ref10.children;
+export var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref0) {
+  var children = _ref0.children;
   return /*#__PURE__*/React.createElement("span", {
     className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf"])
   }, children);
 };
-export var SidebarHeaderIcon = function SidebarHeaderIcon(_ref11) {
-  var children = _ref11.children;
+export var SidebarHeaderIcon = function SidebarHeaderIcon(_ref1) {
+  var children = _ref1.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _4cvr1h6o _2hwx1yov _1o9zidpf"])
   }, children);
 };
-export var SidebarHeaderEntry = function SidebarHeaderEntry(_ref12) {
-  var children = _ref12.children;
+export var SidebarHeaderEntry = function SidebarHeaderEntry(_ref10) {
+  var children = _ref10.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazrsv4"]),
     style: {

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

@@ -189,20 +189,20 @@ export var Separator = function Separator() {
     css: separatorStyles
   });
 };
-export var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref10) {
-  var children = _ref10.children;
+export var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref0) {
+  var children = _ref0.children;
   return jsx("span", {
     css: sidebarHeaderWrapperStyles
   }, children);
 };
-export var SidebarHeaderIcon = function SidebarHeaderIcon(_ref11) {
-  var children = _ref11.children;
+export var SidebarHeaderIcon = function SidebarHeaderIcon(_ref1) {
+  var children = _ref1.children;
   return jsx("div", {
     css: sidebarHeaderIconStyles
   }, children);
 };
-export var SidebarHeaderEntry = function SidebarHeaderEntry(_ref12) {
-  var children = _ref12.children;
+export var SidebarHeaderEntry = function SidebarHeaderEntry(_ref10) {
+  var children = _ref10.children;
   return jsx("div", {
     css: sidebarHeaderEntryStyles
   }, children);

package/dist/esm/viewers/svg/index.js

@@ -36,9 +36,9 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     setCamera = _useState8[1];
   var wrapperRef = useRef(null);
   var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    wrapperScroll = _useState10[0],
-    setWrapperScroll = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    wrapperScroll = _useState0[0],
+    setWrapperScroll = _useState0[1];
   var onResize = useCallback(function () {
     if (!wrapperRef.current || !camera) {
       return;

package/example-helpers/svg/toggle.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 
 import { Label } from '@atlaskit/form';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
+import { cssMap } from '@atlaskit/css';
 
 function makeid(length = 12) {
 	let result = '';
@@ -16,7 +17,11 @@ function makeid(length = 12) {
 	return result;
 }
 
-const boxStyles = xcss({ textAlign: 'center' });
+const styles = cssMap({
+	centerText: {
+		textAlign: 'center',
+	},
+});
 
 export const ToggleBox = ({
 	label,
@@ -31,7 +36,7 @@ export const ToggleBox = ({
 	const [id] = useState(makeid());
 
 	return (
-		<Box xcss={centered && boxStyles}>
+		<Box xcss={centered && styles.centerText}>
 			<Label htmlFor={id}>{label}</Label>
 			<Toggle
 				onChange={(evt) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.2.1",
+	"version": "52.2.3",
 	"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/"
@@ -36,9 +36,10 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.0.0",
+		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/code": "^17.2.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^26.4.0",
@@ -56,7 +57,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.9.0",
+		"@atlaskit/tokens": "^5.0.0",
 		"@atlaskit/tooltip": "^20.2.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -96,7 +97,7 @@
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/ufo": "^0.6.0",
+		"@atlassian/ufo": "^0.7.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",