@atlaskit/media-viewer 52.0.8 → 52.0.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-viewer
 
+## 52.0.10
+
+### Patch Changes
+
+- [#138829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138829)
+  [`4838615c1e10f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4838615c1e10f) -
+  Replaced HD icon for Images and Video
+- Updated dependencies
+
+## 52.0.9
+
+### Patch Changes
+
+- [#145195](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145195)
+  [`8fa3712b27618`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8fa3712b27618) -
+  Internal change to move towards Compiled CSS-in-JS styling.
+
 ## 52.0.8
 
 ### 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 = "52.0.8";
+var packageVersion = exports.packageVersion = "52.0.10";
 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 = "52.0.8";
+var packageVersion = "52.0.10";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/item-viewer.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _mediaClient = require("@atlaskit/media-client");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _codeViewer = require("@atlaskit/media-ui/codeViewer");
@@ -302,7 +302,7 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
         fileState: _fileState,
         fileStateFlags: fileStateFlagsRef.current,
         traceContext: traceContext
-      }, /*#__PURE__*/_react.default.createElement(_primitives.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
     } else {
       return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
         fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',

package/dist/cjs/styleWrappers-emotion.js

@@ -579,7 +579,7 @@ var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react2.forwardRef)(f
     style = _ref26.style,
     className = _ref26.className;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react.jsx)("div", {
       "data-testid": datatestId,
       onClick: onClick,

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

@@ -18,7 +18,7 @@ var _unzipit = require("unzipit");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _codeViewer = require("@atlaskit/media-ui/codeViewer");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _domain = require("../../domain");
 var _styleWrappers = require("../../styleWrappers");
 var _audioMediaServicesAudio = _interopRequireDefault(require("@atlaskit/icon/core/migration/audio--media-services-audio"));
@@ -381,7 +381,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
         fileState: item,
         error: error,
         supressAnalytics: true
-      }, /*#__PURE__*/_react.default.createElement(_primitives.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file))));
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file))));
     }
   }]);
 }(_baseViewer.BaseViewer);

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

@@ -146,7 +146,7 @@ var ArchiveDownloadButtonWrapper = exports.ArchiveDownloadButtonWrapper = functi
   var children = _ref4.children,
     onClick = _ref4.onClick;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react2.jsx)("div", {
       css: archiveDownloadButtonWrapperStyles,
       onClick: onClick,

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

@@ -245,9 +245,9 @@ var PDFRendererBase = function PDFRendererBase(_ref2) {
         ref: savePdfElement
       },
       /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
       _react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: pdfViewerClassName,
         onClick: (0, _closeOnDirectClick.closeOnDirectClick)(onClose)
       }), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {

package/dist/cjs/viewers/image/interactive-img.js

@@ -17,9 +17,9 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _mediaCommon = require("@atlaskit/media-common");
 var _constants = require("@atlaskit/media-client/constants");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _vidHdCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-hd-circle"));
+var _videoHd = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd"));
+var _videoHdFilled = _interopRequireDefault(require("@atlaskit/icon-lab/core/video-hd-filled"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _colors = require("@atlaskit/theme/colors");
 var _styleWrappers = require("../../styleWrappers");
 var _zoomLevel = require("../../domain/zoomLevel");
 var _closeOnDirectClick = require("../../utils/closeOnDirectClick");
@@ -223,11 +223,6 @@ var InteractiveImgComponent = exports.InteractiveImgComponent = /*#__PURE__*/fun
       if (!isHDAvailable) {
         return null;
       }
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      var hdPrimaryColor = isHDActivating ? _colors.B75 : isHDActive ? _colors.B200 : _colors.DN400;
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      var hdSecondaryColor = isHDActive && !isHDActivating ? _colors.N0 : _colors.DN60;
-      var testId = isHDActivating ? 'hd-activating' : isHDActive ? 'hd-active' : 'hd-inactive';
       return (
         /*#__PURE__*/
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -235,11 +230,10 @@ var InteractiveImgComponent = exports.InteractiveImgComponent = /*#__PURE__*/fun
           className: _mediaUi.hideControlsClassName
         }, isHDActivating ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
           appearance: "invert"
-        }) : undefined, /*#__PURE__*/_react.default.createElement(_vidHdCircle.default, {
-          primaryColor: hdPrimaryColor,
-          secondaryColor: hdSecondaryColor,
-          label: "hd",
-          testId: testId
+        }) : undefined, isHDActive ? /*#__PURE__*/_react.default.createElement(_videoHdFilled.default, {
+          label: "hd active"
+        }) : /*#__PURE__*/_react.default.createElement(_videoHd.default, {
+          label: "hd"
         }))
       );
     }

package/dist/cjs/viewers/svg/ImageWrapper-emotion.js

@@ -28,7 +28,7 @@ var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react2.forwardRef)(f
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     (0, _react.jsx)("div", {
       "data-testid": "media-viewer-svg-wrapper",
       onClick: onClick,

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 = "52.0.8";
+const packageVersion = "52.0.10";
 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 = "52.0.8";
+const packageVersion = "52.0.10";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/item-viewer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier, toCommonMediaClientError } from '@atlaskit/media-client';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';

package/dist/es2019/styleWrappers-emotion.js

@@ -549,7 +549,7 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
   style,
   className
 }, ref) =>
-// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+// 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", {
   "data-testid": datatestId,
   onClick: onClick,

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

@@ -5,7 +5,7 @@ import { unzip, HTTPRangeReader } from 'unzipit';
 import { FormattedMessage } from 'react-intl-next';
 import { CustomMediaPlayer, messages } from '@atlaskit/media-ui';
 import { getLanguageType, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { Outcome } from '../../domain';
 import { CustomVideoPlayerWrapper, AudioPlayer, CustomAudioPlayerWrapper, DefaultCoverWrapper, ListWrapper } from '../../styleWrappers';
 import AudioIcon from '@atlaskit/icon/core/migration/audio--media-services-audio';

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

@@ -143,7 +143,7 @@ export const ArchiveDownloadButtonWrapper = ({
   onClick
 }) => {
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // 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", {
       css: archiveDownloadButtonWrapperStyles,
       onClick: onClick,

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

@@ -164,9 +164,9 @@ const PDFRendererBase = ({
       ref: savePdfElement
     },
     /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     React.createElement("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: pdfViewerClassName,
       onClick: closeOnDirectClick(onClose)
     }), /*#__PURE__*/React.createElement(ZoomControls, {

package/dist/es2019/viewers/image/interactive-img.js

@@ -4,9 +4,9 @@ import { Camera, getCssFromImageOrientation, hideControlsClassName, Rectangle, V
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { MAX_RESOLUTION } from '@atlaskit/media-client/constants';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
+import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
+import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
 import Spinner from '@atlaskit/spinner';
-import { B75, B200, DN400, DN60, N0 } from '@atlaskit/theme/colors';
 import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
@@ -211,11 +211,6 @@ export class InteractiveImgComponent extends React.Component {
     if (!isHDAvailable) {
       return null;
     }
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    const hdPrimaryColor = isHDActivating ? B75 : isHDActive ? B200 : DN400;
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    const hdSecondaryColor = isHDActive && !isHDActivating ? N0 : DN60;
-    const testId = isHDActivating ? 'hd-activating' : isHDActive ? 'hd-active' : 'hd-inactive';
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -223,11 +218,10 @@ export class InteractiveImgComponent extends React.Component {
         className: hideControlsClassName
       }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
         appearance: "invert"
-      }) : undefined, /*#__PURE__*/React.createElement(HDIcon, {
-        primaryColor: hdPrimaryColor,
-        secondaryColor: hdSecondaryColor,
-        label: "hd",
-        testId: testId
+      }) : undefined, isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
+        label: "hd active"
+      }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
+        label: "hd"
       }))
     );
   }

package/dist/es2019/viewers/svg/ImageWrapper-emotion.js

@@ -21,7 +21,7 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
   onClick,
   isHidden
 }, ref) =>
-// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+// 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", {
   "data-testid": "media-viewer-svg-wrapper",
   onClick: onClick,

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 = "52.0.8";
+var packageVersion = "52.0.10";
 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 = "52.0.8";
+var packageVersion = "52.0.10";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/item-viewer.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier, toCommonMediaClientError } from '@atlaskit/media-client';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';

package/dist/esm/styleWrappers-emotion.js

@@ -571,7 +571,7 @@ export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref26, ref) {
     style = _ref26.style,
     className = _ref26.className;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // 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", {
       "data-testid": datatestId,
       onClick: onClick,

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

@@ -16,7 +16,7 @@ import { unzip, HTTPRangeReader } from 'unzipit';
 import { FormattedMessage } from 'react-intl-next';
 import { CustomMediaPlayer, messages } from '@atlaskit/media-ui';
 import { getLanguageType, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { Outcome } from '../../domain';
 import { CustomVideoPlayerWrapper, AudioPlayer, CustomAudioPlayerWrapper, DefaultCoverWrapper, ListWrapper } from '../../styleWrappers';
 import AudioIcon from '@atlaskit/icon/core/migration/audio--media-services-audio';

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

@@ -137,7 +137,7 @@ export var ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(
   var children = _ref4.children,
     onClick = _ref4.onClick;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // 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", {
       css: archiveDownloadButtonWrapperStyles,
       onClick: onClick,

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

@@ -235,9 +235,9 @@ var PDFRendererBase = function PDFRendererBase(_ref2) {
         ref: savePdfElement
       },
       /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
       React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: pdfViewerClassName,
         onClick: closeOnDirectClick(onClose)
       }), /*#__PURE__*/React.createElement(ZoomControls, {

package/dist/esm/viewers/image/interactive-img.js

@@ -11,9 +11,9 @@ import { Camera, getCssFromImageOrientation, hideControlsClassName, Rectangle, V
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { MAX_RESOLUTION } from '@atlaskit/media-client/constants';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
+import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
+import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
 import Spinner from '@atlaskit/spinner';
-import { B75, B200, DN400, DN60, N0 } from '@atlaskit/theme/colors';
 import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
@@ -215,11 +215,6 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       if (!isHDAvailable) {
         return null;
       }
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      var hdPrimaryColor = isHDActivating ? B75 : isHDActive ? B200 : DN400;
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      var hdSecondaryColor = isHDActive && !isHDActivating ? N0 : DN60;
-      var testId = isHDActivating ? 'hd-activating' : isHDActive ? 'hd-active' : 'hd-inactive';
       return (
         /*#__PURE__*/
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -227,11 +222,10 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
           className: hideControlsClassName
         }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
           appearance: "invert"
-        }) : undefined, /*#__PURE__*/React.createElement(HDIcon, {
-          primaryColor: hdPrimaryColor,
-          secondaryColor: hdSecondaryColor,
-          label: "hd",
-          testId: testId
+        }) : undefined, isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
+          label: "hd active"
+        }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
+          label: "hd"
         }))
       );
     }

package/dist/esm/viewers/svg/ImageWrapper-emotion.js

@@ -21,7 +21,7 @@ export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // 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", {
       "data-testid": "media-viewer-svg-wrapper",
       onClick: onClick,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.0.8",
+	"version": "52.0.10",
 	"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/"
@@ -41,8 +41,9 @@
 		"@atlaskit/code": "^17.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
+		"@atlaskit/icon-lab": "^4.9.0",
 		"@atlaskit/media-client": "^32.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/media-common": "^12.0.0",
@@ -55,7 +56,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -79,16 +80,16 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
 		"@atlaskit/media-core": "^35.0.0",
-		"@atlaskit/media-integration-test-helpers": "^4.0.0",
+		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-state": "^1.5.0",
 		"@atlaskit/media-test-data": "^3.0.0",
 		"@atlaskit/media-test-helpers": "^35.0.0",
-		"@atlaskit/ssr": "^0.4.0",
+		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ufo": "^0.6.0",
 		"@testing-library/dom": "^10.1.0",