@atlaskit/media-viewer 52.0.13 → 52.0.14

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-viewer
 
+## 52.0.14
+
+### Patch Changes
+
+- [#149114](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/149114)
+  [`3296813800110`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3296813800110) -
+  Heading element for the file name instead of div element
+
 ## 52.0.13
 
 ### 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.13";
+var packageVersion = exports.packageVersion = "52.0.14";
 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.13";
+var packageVersion = "52.0.14";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/styleWrappers-compiled.compiled.css

@@ -1,5 +1,6 @@
 
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
+._12nx2smr h1{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko1l7b{border-radius:3px}
 ._zulp1yov{gap:var(--ds-space-100,10px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
 ._154i1ejb{top:var(--ds-space-300,24px)}
@@ -25,19 +26,24 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e8s1osq h1{max-width:100%}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1kemd8h4{image-rendering:pixelated}
+._1kvn15vq h1{overflow-y:hidden}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1nda1poe h1{color:#c7d1db}
 ._1o9zkb7n{flex-shrink:1}
 ._1p6zkb7n video{flex-grow:1}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
 ._1pbyuou7{z-index:522}
+._1pnf15vq h1{overflow-x:hidden}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1twl1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -56,6 +62,7 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7csf1q9c h1{white-space:nowrap}
 ._80omtlke{cursor:pointer}
 ._94n5idpf{bottom:0}
 ._bfhk1tzm{background-color:#22272b}
@@ -67,6 +74,7 @@
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kmu51l2s h1{text-overflow:ellipsis}
 ._kqsw1n9t{position:fixed}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/cjs/styleWrappers-compiled.js

@@ -16,6 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _reactScrolllock = require("react-scrolllock");
 var _useCallbackRef = require("use-callback-ref");
 var _primitives = require("@atlaskit/primitives");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -309,9 +310,12 @@ var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref
   var datatestId = _ref25['data-testid'],
     children = _ref25.children;
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": datatestId,
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c"])
-  }, children);
+    className: (0, _runtime.ax)(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+  }, /*#__PURE__*/React.createElement(_heading.default, {
+    as: "h1",
+    size: "medium",
+    testId: datatestId
+  }, children));
 };
 var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref26) {
   var datatestId = _ref26['data-testid'],

package/dist/cjs/styleWrappers-emotion.js

@@ -17,6 +17,7 @@ var _modalSpinner = require("./viewers/modalSpinner");
 var _styles2 = require("./viewers/archiveSidebar/styles");
 var _constants = require("@atlaskit/theme/constants");
 var _primitives = require("@atlaskit/primitives");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /**
  * @jsxRuntime classic
@@ -262,9 +263,19 @@ var medatadataTextWrapperStyles = (0, _react.css)({
 var metadataWrapperStyles = (0, _react.css)({
   display: 'flex'
 });
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var metadataFileNameStyles = (0, _react.css)((0, _mediaUi.ellipsis)());
+var metadataFileNameStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  h1: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: '#c7d1db'
+  }
+});
 var metadataSubTextStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   color: '#c7d1db'
@@ -657,9 +668,12 @@ var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref
   var datatestId = _ref30['data-testid'],
     children = _ref30.children;
   return (0, _react.jsx)("div", {
-    css: metadataFileNameStyles,
-    "data-testid": datatestId
-  }, children);
+    css: metadataFileNameStyles
+  }, (0, _react.jsx)(_heading.default, {
+    as: "h1",
+    size: "medium",
+    testId: datatestId
+  }, children));
 };
 var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref31) {
   var datatestId = _ref31['data-testid'],

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

package/dist/es2019/styleWrappers-compiled.compiled.css

@@ -1,5 +1,6 @@
 
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
+._12nx2smr h1{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko1l7b{border-radius:3px}
 ._zulp1yov{gap:var(--ds-space-100,10px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
 ._154i1ejb{top:var(--ds-space-300,24px)}
@@ -25,19 +26,24 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e8s1osq h1{max-width:100%}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1kemd8h4{image-rendering:pixelated}
+._1kvn15vq h1{overflow-y:hidden}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1nda1poe h1{color:#c7d1db}
 ._1o9zkb7n{flex-shrink:1}
 ._1p6zkb7n video{flex-grow:1}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
 ._1pbyuou7{z-index:522}
+._1pnf15vq h1{overflow-x:hidden}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1twl1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -56,6 +62,7 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7csf1q9c h1{white-space:nowrap}
 ._80omtlke{cursor:pointer}
 ._94n5idpf{bottom:0}
 ._bfhk1tzm{background-color:#22272b}
@@ -67,6 +74,7 @@
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kmu51l2s h1{text-overflow:ellipsis}
 ._kqsw1n9t{position:fixed}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/es2019/styleWrappers-compiled.js

@@ -9,6 +9,7 @@ import { forwardRef, useMemo } from 'react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
 import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 const blanketStyles = null;
 const headerWrapperStyles = null;
 const archiveHeaderWrapperStyles = null;
@@ -276,9 +277,12 @@ export const MetadataFileName = ({
   'data-testid': datatestId,
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  "data-testid": datatestId,
-  className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c"])
-}, children);
+  className: ax(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+}, /*#__PURE__*/React.createElement(Heading, {
+  as: "h1",
+  size: "medium",
+  testId: datatestId
+}, children));
 export const MetadataSubText = ({
   'data-testid': datatestId,
   children

package/dist/es2019/styleWrappers-emotion.js

@@ -15,6 +15,7 @@ import { headerAndSidebarBackgroundColor } from './viewers/modalSpinner';
 import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 const SIDEBAR_WIDTH = 416;
 const blanketStyles = css({
   position: 'fixed',
@@ -257,9 +258,19 @@ const medatadataTextWrapperStyles = css({
 const metadataWrapperStyles = css({
   display: 'flex'
 });
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-const metadataFileNameStyles = css(ellipsis());
+const metadataFileNameStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  h1: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: '#c7d1db'
+  }
+});
 const metadataSubTextStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   color: '#c7d1db'
@@ -622,9 +633,12 @@ export const MetadataFileName = ({
   'data-testid': datatestId,
   children
 }) => jsx("div", {
-  css: metadataFileNameStyles,
-  "data-testid": datatestId
-}, children);
+  css: metadataFileNameStyles
+}, jsx(Heading, {
+  as: "h1",
+  size: "medium",
+  testId: datatestId
+}, children));
 export const MetadataSubText = ({
   'data-testid': datatestId,
   children

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

package/dist/esm/styleWrappers-compiled.compiled.css

@@ -1,5 +1,6 @@
 
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
+._12nx2smr h1{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko1l7b{border-radius:3px}
 ._zulp1yov{gap:var(--ds-space-100,10px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
 ._154i1ejb{top:var(--ds-space-300,24px)}
@@ -25,19 +26,24 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e8s1osq h1{max-width:100%}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1kemd8h4{image-rendering:pixelated}
+._1kvn15vq h1{overflow-y:hidden}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1nda1poe h1{color:#c7d1db}
 ._1o9zkb7n{flex-shrink:1}
 ._1p6zkb7n video{flex-grow:1}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
 ._1pbyuou7{z-index:522}
+._1pnf15vq h1{overflow-x:hidden}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1twl1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -56,6 +62,7 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7csf1q9c h1{white-space:nowrap}
 ._80omtlke{cursor:pointer}
 ._94n5idpf{bottom:0}
 ._bfhk1tzm{background-color:#22272b}
@@ -67,6 +74,7 @@
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kmu51l2s h1{text-overflow:ellipsis}
 ._kqsw1n9t{position:fixed}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}

package/dist/esm/styleWrappers-compiled.js

@@ -12,6 +12,7 @@ import { forwardRef, useMemo } from 'react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
 import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 var blanketStyles = null;
 var headerWrapperStyles = null;
 var archiveHeaderWrapperStyles = null;
@@ -301,9 +302,12 @@ export var MetadataFileName = function MetadataFileName(_ref25) {
   var datatestId = _ref25['data-testid'],
     children = _ref25.children;
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": datatestId,
-    className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c"])
-  }, children);
+    className: ax(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h1",
+    size: "medium",
+    testId: datatestId
+  }, children));
 };
 export var MetadataSubText = function MetadataSubText(_ref26) {
   var datatestId = _ref26['data-testid'],

package/dist/esm/styleWrappers-emotion.js

@@ -16,6 +16,7 @@ import { headerAndSidebarBackgroundColor } from './viewers/modalSpinner';
 import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 var SIDEBAR_WIDTH = 416;
 var blanketStyles = css({
   position: 'fixed',
@@ -254,9 +255,19 @@ var medatadataTextWrapperStyles = css({
 var metadataWrapperStyles = css({
   display: 'flex'
 });
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var metadataFileNameStyles = css(ellipsis());
+var metadataFileNameStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  h1: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: '#c7d1db'
+  }
+});
 var metadataSubTextStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   color: '#c7d1db'
@@ -649,9 +660,12 @@ export var MetadataFileName = function MetadataFileName(_ref30) {
   var datatestId = _ref30['data-testid'],
     children = _ref30.children;
   return jsx("div", {
-    css: metadataFileNameStyles,
-    "data-testid": datatestId
-  }, children);
+    css: metadataFileNameStyles
+  }, jsx(Heading, {
+    as: "h1",
+    size: "medium",
+    testId: datatestId
+  }, children));
 };
 export var MetadataSubText = function MetadataSubText(_ref31) {
   var datatestId = _ref31['data-testid'],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.0.13",
+	"version": "52.0.14",
 	"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,9 +41,9 @@
 		"@atlaskit/code": "^17.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon": "^25.7.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.10.0",
+		"@atlaskit/icon-lab": "^4.11.0",
 		"@atlaskit/media-client": "^33.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/media-common": "^12.0.0",