npm - @atlaskit/media-ui - Versions diffs - 27.3.2 → 27.4.0 - Mend

@atlaskit/media-ui 27.3.2 → 27.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
+## 27.4.0
+### Minor Changes
+- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
+  [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
+  Update `React` from v16 to v18
+### Patch Changes
+- Updated dependencies
 ## 27.3.2
 ### Patch Changes

package/dist/cjs/MediaInlineCard/Frame/styled-compiled.compiled.css CHANGED Viewed

@@ -1,11 +1,11 @@
-._1yt4ood9{padding:var(--_6un1n5)}
 ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
 ._v56415x0{transition:all .1s ease-in-out}
 ._1h6d1j28{border-color:transparent}._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qs1qst{box-shadow:var(--_7nesqg)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1nu9{display:inline}
 ._1hmsglyw, ._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
 ._1qu2glyw{outline-style:none}
@@ -14,7 +14,10 @@
 ._80omtlke{cursor:pointer}
 ._ajmmnqa1, ._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
 ._bfhkfpvg{background-color:var(--_9tzd1j)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syazovqm{color:var(--_5xk3r4)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vwz47vkz{line-height:1pc}

package/dist/cjs/MediaInlineCard/Frame/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -39,9 +39,8 @@ var Wrapper = exports.Wrapper = function Wrapper(_ref) {
   return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
     "data-testid": "frame-wrapper"
   }, props, {
-    className: (0, _runtime.ax)(["_1yt4ood9 _2rko1sit _v56415x0 _vwz47vkz _16d9qvcn _1e0c1nu9 _syazovqm _bfhkfpvg _1rkwglyw _80omtlke _irr3l5fl", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1qst _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"]),
+    className: (0, _runtime.ax)(["_2rko1sit _v56415x0 _vwz47vkz _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66 _16d9qvcn _1e0c1nu9 _syazovqm _bfhkfpvg _1rkwglyw _80omtlke _irr3l5fl", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1qst _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"]),
     style: {
-      "--_6un1n5": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)")),
       "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
       "--_9tzd1j": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30A, ")")),
       "--_138ec4y": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")),

package/dist/cjs/MediaInlineCard/Icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/MediaInlineCard/LoadingView/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/MediaInlineCard/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/customMediaPlayer/index-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* index-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/customMediaPlayer/index.js CHANGED Viewed

@@ -16,7 +16,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props) : /*#__PURE__*/_react.default.createElement(_indexEmotion.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "27.3.2";
+var packageVersion = "27.4.0";
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var CustomMediaPlayer = exports.CustomMediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/customMediaPlayer/playPauseBlanket-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/customMediaPlayer/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ellipsify-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/inactivityDetector/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/media-type-icon-compiled.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/media-type-icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,40 +15,40 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _3 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/image/24"));
-var _4 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/audio/24"));
-var _5 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/video/24"));
-var _6 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/24"));
-var _7 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/archive/24"));
-var _8 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/24"));
-var _9 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/image/16"));
-var _10 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/audio/16"));
-var _11 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/video/16"));
-var _12 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
-var _13 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/archive/16"));
-var _14 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/16"));
+var _6 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/image/24"));
+var _7 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/audio/24"));
+var _8 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/video/24"));
+var _9 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/24"));
+var _10 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/archive/24"));
+var _11 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/24"));
+var _12 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/image/16"));
+var _13 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/audio/16"));
+var _14 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/video/16"));
+var _15 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
+var _16 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/archive/16"));
+var _17 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/16"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var iconStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var iconStyles = null;
 var largeIcons = {
-  image: _3.default,
-  audio: _4.default,
-  video: _5.default,
-  doc: _6.default,
-  archive: _7.default,
-  unknown: _8.default
+  image: _6.default,
+  audio: _7.default,
+  video: _8.default,
+  doc: _9.default,
+  archive: _10.default,
+  unknown: _11.default
 };
 var smallIcons = {
-  image: _9.default,
-  audio: _10.default,
-  video: _11.default,
-  doc: _12.default,
-  archive: _13.default,
-  unknown: _14.default
+  image: _12.default,
+  audio: _13.default,
+  video: _14.default,
+  doc: _15.default,
+  archive: _16.default,
+  unknown: _17.default
 };
 var defaultType = 'unknown';
 var MediaTypeIcon = exports.MediaTypeIcon = /*#__PURE__*/function (_React$Component) {

package/dist/cjs/mime-type-icon.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/mime-type-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var iconWrapperStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var iconWrapperStyles = null;

package/dist/cjs/modalSpinner-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/truncateText-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/MediaInlineCard/Frame/styled-compiled.compiled.css CHANGED Viewed

@@ -1,11 +1,11 @@
-._1yt4zu6o{padding:var(--ds-space-025,2px) var(--ds-space-050,4px) var(--ds-space-025,2px) var(--ds-space-050,4px)}
 ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
 ._v56415x0{transition:all .1s ease-in-out}
 ._1h6d1j28{border-color:transparent}._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qs1s9b{box-shadow:0 0 0 1px var(--ds-border-selected,#0065ff)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1nu9{display:inline}
 ._1hmsglyw, ._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
 ._1qu2glyw{outline-style:none}
@@ -14,7 +14,10 @@
 ._80omtlke{cursor:pointer}
 ._ajmmnqa1, ._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
 ._bfhkq7nr{background-color:var(--ds-background-neutral,rgba(9,30,66,.08))}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syazj3m3{color:var(--ds-text,#091e42)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vwz47vkz{line-height:1pc}

package/dist/es2019/MediaInlineCard/Frame/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';
@@ -27,5 +27,5 @@ export const Wrapper = ({
 }) => /*#__PURE__*/React.createElement("span", _extends({
   "data-testid": "frame-wrapper"
 }, props, {
-  className: ax(["_1yt4zu6o _2rko1sit _v56415x0 _vwz47vkz _16d9qvcn _1e0c1nu9 _syazj3m3 _bfhkq7nr _1rkwglyw _80omtlke _irr3hv1p", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1s9b _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"])
+  className: ax(["_2rko1sit _v56415x0 _vwz47vkz _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66 _16d9qvcn _1e0c1nu9 _syazj3m3 _bfhkq7nr _1rkwglyw _80omtlke _irr3hv1p", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1s9b _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"])
 }), children);

package/dist/es2019/MediaInlineCard/Icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Icon-compiled.compiled.css";
 import * as React from 'react';

package/dist/es2019/MediaInlineCard/IconAndTitleLayout/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';

package/dist/es2019/MediaInlineCard/LoadingView/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';

package/dist/es2019/MediaInlineCard/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';

package/dist/es2019/customMediaPlayer/index-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* index-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/customMediaPlayer/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "27.3.2";
+const packageVersion = "27.4.0";
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export const CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/es2019/customMediaPlayer/playPauseBlanket-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./playPauseBlanket-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/customMediaPlayer/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ellipsify-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./ellipsify-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/inactivityDetector/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';

package/dist/es2019/media-type-icon-compiled.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/media-type-icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./media-type-icon-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -17,7 +17,7 @@ import ArchiveIconSmall from '@atlaskit/icon-file-type/glyph/archive/16';
 import GenericIconSmall from '@atlaskit/icon-file-type/glyph/generic/16';
 const iconStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 const iconStyles = null;
 const largeIcons = {

package/dist/es2019/mime-type-icon.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/mime-type-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./mime-type-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,7 +7,7 @@ import { IconWrapper, MediaTypeIcon } from './media-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 const iconWrapperStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 const iconWrapperStyles = null;

package/dist/es2019/modalSpinner-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./modalSpinner-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/truncateText-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./truncateText-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/MediaInlineCard/Frame/styled-compiled.compiled.css CHANGED Viewed

@@ -1,11 +1,11 @@
-._1yt4ood9{padding:var(--_6un1n5)}
 ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
 ._v56415x0{transition:all .1s ease-in-out}
 ._1h6d1j28{border-color:transparent}._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qs1qst{box-shadow:var(--_7nesqg)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1nu9{display:inline}
 ._1hmsglyw, ._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
 ._1qu2glyw{outline-style:none}
@@ -14,7 +14,10 @@
 ._80omtlke{cursor:pointer}
 ._ajmmnqa1, ._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
 ._bfhkfpvg{background-color:var(--_9tzd1j)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syazovqm{color:var(--_5xk3r4)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vwz47vkz{line-height:1pc}

package/dist/esm/MediaInlineCard/Frame/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSelected", "children"];
@@ -29,9 +29,8 @@ export var Wrapper = function Wrapper(_ref) {
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-testid": "frame-wrapper"
   }, props, {
-    className: ax(["_1yt4ood9 _2rko1sit _v56415x0 _vwz47vkz _16d9qvcn _1e0c1nu9 _syazovqm _bfhkfpvg _1rkwglyw _80omtlke _irr3l5fl", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1qst _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"]),
+    className: ax(["_2rko1sit _v56415x0 _vwz47vkz _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66 _16d9qvcn _1e0c1nu9 _syazovqm _bfhkfpvg _1rkwglyw _80omtlke _irr3l5fl", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1qst _uiztglyw _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"]),
     style: {
-      "--_6un1n5": ix("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)")),
       "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
       "--_9tzd1j": ix("var(--ds-background-neutral, ".concat(N30A, ")")),
       "--_138ec4y": ix("var(--ds-background-neutral-hovered, ".concat(N40A, ")")),

package/dist/esm/MediaInlineCard/Icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["alt"],

package/dist/esm/MediaInlineCard/IconAndTitleLayout/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],

package/dist/esm/MediaInlineCard/LoadingView/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];

package/dist/esm/MediaInlineCard/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];

package/dist/esm/customMediaPlayer/index-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* index-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";

package/dist/esm/customMediaPlayer/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ export var CustomMediaPlayerBase = function CustomMediaPlayerBase(props) {
   return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "27.3.2";
+var packageVersion = "27.4.0";
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export var CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/esm/customMediaPlayer/playPauseBlanket-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];

package/dist/esm/customMediaPlayer/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["showSlider", "children"],

package/dist/esm/ellipsify-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./ellipsify-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/inactivityDetector/styled-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["controlsAreVisible", "children"];

package/dist/esm/media-type-icon-compiled.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/media-type-icon-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -24,7 +24,7 @@ import ArchiveIconSmall from '@atlaskit/icon-file-type/glyph/archive/16';
 import GenericIconSmall from '@atlaskit/icon-file-type/glyph/generic/16';
 var iconStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var iconStyles = null;
 var largeIcons = {

package/dist/esm/mime-type-icon.compiled.css CHANGED Viewed

@@ -1,2 +1,5 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._1e0c116y{display:inline-flex}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c116y{display:inline-flex}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/mime-type-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* mime-type-icon.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./mime-type-icon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,7 +7,7 @@ import { IconWrapper, MediaTypeIcon } from './media-type-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 var iconWrapperStyleMap = {
   small: "",
-  large: "_1yt41b66"
+  large: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var iconWrapperStyles = null;

package/dist/esm/modalSpinner-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* modalSpinner-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import "./modalSpinner-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/truncateText-compiled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["fontSizePX", "startFixedChars", "endFixedChars", "children"],

package/dist/types/MediaInlineCard/Frame/styled.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type WrapperProps } from './styled-compiled';
-export declare const Wrapper: React.ForwardRefExoticComponent<Pick<WrapperProps & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "isSelected" | "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Wrapper: React.ForwardRefExoticComponent<Omit<WrapperProps & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export type { WrapperProps } from './styled-compiled';

package/dist/types/MediaInlineCard/LoadingView/styled-emotion.d.ts CHANGED Viewed

@@ -3,7 +3,5 @@ export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/types/customMediaPlayer/styled-compiled.d.ts CHANGED Viewed

@@ -11,17 +11,17 @@ export type VolumeWrapperProps = {
 };
 export declare const VolumeWrapper: ({ showSlider, children, ...props }: VolumeWrapperProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const CurrentTime: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeLine: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeLine: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const CurrentTimeLine: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const Thumb: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const BufferedTime: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const LeftControls: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const RightControls: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 type ControlsWrapperProps = {
     controlsHidden: boolean;
 };
-export declare const ControlsWrapper: React.ForwardRefExoticComponent<Pick<ControlsWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "controlsHidden"> & React.RefAttributes<unknown>>;
+export declare const ControlsWrapper: React.ForwardRefExoticComponent<Omit<ControlsWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const VolumeToggleWrapper: ({ isMuted, children, ...props }: MutedIndicatorProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const VolumeTimeRangeWrapper: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const MutedIndicator: ({ isMuted, children, ...props }: MutedIndicatorProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
@@ -31,5 +31,5 @@ interface CurrentTimeTooltipProps {
     timeLineThumbIsFocus: boolean;
 }
 export declare const CurrentTimeTooltip: ({ isDragging, timeLineThumbIsHover, timeLineThumbIsFocus, children, ...props }: CurrentTimeTooltipProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeRangeWrapper: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeRangeWrapper: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/dist/types/customMediaPlayer/styled.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import React from 'react';
 import { type VolumeWrapperProps, type MutedIndicatorProps } from './styled-compiled';
 export declare const VolumeWrapper: (props: VolumeWrapperProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const CurrentTime: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeLine: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeLine: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const CurrentTimeLine: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const Thumb: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const BufferedTime: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const LeftControls: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const RightControls: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;

package/dist/types/inactivityDetector/styled-compiled.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@
 export interface ContentWrapperProps {
     controlsAreVisible: boolean;
 }
-export declare const InactivityDetectorWrapper: import("react").ForwardRefExoticComponent<Pick<ContentWrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "controlsAreVisible"> & import("react").RefAttributes<unknown>>;
+export declare const InactivityDetectorWrapper: import("react").ForwardRefExoticComponent<Omit<ContentWrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/types/inactivityDetector/styled.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ContentWrapperProps } from './styled-compiled';
-export declare const InactivityDetectorWrapper: React.ForwardRefExoticComponent<Pick<ContentWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "controlsAreVisible"> & React.RefAttributes<unknown>>;
+export declare const InactivityDetectorWrapper: React.ForwardRefExoticComponent<Omit<ContentWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export type { ContentWrapperProps } from './styled-compiled';

package/dist/types/mediaImage/index.d.ts CHANGED Viewed

@@ -19,4 +19,4 @@ export interface MediaImageState {
     parentWidth: number;
     parentHeight: number;
 }
-export declare const MediaImage: React.ForwardRefExoticComponent<Pick<MediaImageProps, "stretch" | "alt" | "crossOrigin" | "loading" | "dataURI" | "crop" | "previewOrientation" | "onImageLoad" | "onImageError" | "forceSyncDisplay"> & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;
+export declare const MediaImage: React.ForwardRefExoticComponent<Omit<MediaImageProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;

package/dist/types-ts4.5/MediaInlineCard/Frame/styled.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type WrapperProps } from './styled-compiled';
-export declare const Wrapper: React.ForwardRefExoticComponent<Pick<WrapperProps & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "isSelected" | "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Wrapper: React.ForwardRefExoticComponent<Omit<WrapperProps & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export type { WrapperProps } from './styled-compiled';

package/dist/types-ts4.5/MediaInlineCard/LoadingView/styled-emotion.d.ts CHANGED Viewed

@@ -3,7 +3,5 @@ export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/types-ts4.5/customMediaPlayer/styled-compiled.d.ts CHANGED Viewed

@@ -11,17 +11,17 @@ export type VolumeWrapperProps = {
 };
 export declare const VolumeWrapper: ({ showSlider, children, ...props }: VolumeWrapperProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const CurrentTime: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeLine: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeLine: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const CurrentTimeLine: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const Thumb: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const BufferedTime: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const LeftControls: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const RightControls: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 type ControlsWrapperProps = {
     controlsHidden: boolean;
 };
-export declare const ControlsWrapper: React.ForwardRefExoticComponent<Pick<ControlsWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "controlsHidden"> & React.RefAttributes<unknown>>;
+export declare const ControlsWrapper: React.ForwardRefExoticComponent<Omit<ControlsWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const VolumeToggleWrapper: ({ isMuted, children, ...props }: MutedIndicatorProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const VolumeTimeRangeWrapper: ({ children, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const MutedIndicator: ({ isMuted, children, ...props }: MutedIndicatorProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
@@ -31,5 +31,5 @@ interface CurrentTimeTooltipProps {
     timeLineThumbIsFocus: boolean;
 }
 export declare const CurrentTimeTooltip: ({ isDragging, timeLineThumbIsHover, timeLineThumbIsFocus, children, ...props }: CurrentTimeTooltipProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeRangeWrapper: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeRangeWrapper: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/dist/types-ts4.5/customMediaPlayer/styled.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import React from 'react';
 import { type VolumeWrapperProps, type MutedIndicatorProps } from './styled-compiled';
 export declare const VolumeWrapper: (props: VolumeWrapperProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const CurrentTime: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const TimeLine: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const TimeLine: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const CurrentTimeLine: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const Thumb: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<unknown>>;
+export declare const CurrentTimeLineThumb: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export declare const BufferedTime: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const LeftControls: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
 export declare const RightControls: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;

package/dist/types-ts4.5/inactivityDetector/styled-compiled.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@
 export interface ContentWrapperProps {
     controlsAreVisible: boolean;
 }
-export declare const InactivityDetectorWrapper: import("react").ForwardRefExoticComponent<Pick<ContentWrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "controlsAreVisible"> & import("react").RefAttributes<unknown>>;
+export declare const InactivityDetectorWrapper: import("react").ForwardRefExoticComponent<Omit<ContentWrapperProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/types-ts4.5/inactivityDetector/styled.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ContentWrapperProps } from './styled-compiled';
-export declare const InactivityDetectorWrapper: React.ForwardRefExoticComponent<Pick<ContentWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "controlsAreVisible"> & React.RefAttributes<unknown>>;
+export declare const InactivityDetectorWrapper: React.ForwardRefExoticComponent<Omit<ContentWrapperProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export type { ContentWrapperProps } from './styled-compiled';

package/dist/types-ts4.5/mediaImage/index.d.ts CHANGED Viewed

@@ -19,4 +19,4 @@ export interface MediaImageState {
     parentWidth: number;
     parentHeight: number;
 }
-export declare const MediaImage: React.ForwardRefExoticComponent<Pick<MediaImageProps, "stretch" | "alt" | "crossOrigin" | "loading" | "dataURI" | "crop" | "previewOrientation" | "onImageLoad" | "onImageError" | "forceSyncDisplay"> & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;
+export declare const MediaImage: React.ForwardRefExoticComponent<Omit<MediaImageProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "27.3.2",
+	"version": "27.4.0",
 	"description": "Includes common components and utilities used by other media packages",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,25 +24,25 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.2.0",
-		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/css": "^0.7.0",
-		"@atlaskit/icon": "^23.4.0",
-		"@atlaskit/icon-file-type": "^6.8.0",
-		"@atlaskit/legacy-custom-icons": "^0.20.0",
+		"@atlaskit/analytics-next": "^10.3.0",
+		"@atlaskit/button": "^20.4.0",
+		"@atlaskit/code": "^15.7.0",
+		"@atlaskit/css": "^0.8.0",
+		"@atlaskit/icon": "^23.5.0",
+		"@atlaskit/icon-file-type": "^6.9.0",
+		"@atlaskit/legacy-custom-icons": "^0.21.0",
 		"@atlaskit/locale": "^2.8.0",
-		"@atlaskit/media-common": "^11.7.0",
-		"@atlaskit/modal-dialog": "^12.18.0",
+		"@atlaskit/media-common": "^11.8.0",
+		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.3.0",
-		"@atlaskit/range": "^8.0.0",
-		"@atlaskit/select": "^18.9.0",
-		"@atlaskit/spinner": "^17.0.0",
-		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.2.0",
-		"@atlaskit/tooltip": "^19.0.0",
-		"@atlaskit/width-detector": "^4.3.0",
+		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/range": "^8.1.0",
+		"@atlaskit/select": "^18.10.0",
+		"@atlaskit/spinner": "^17.1.0",
+		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/tooltip": "^19.1.0",
+		"@atlaskit/width-detector": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.1",
 		"@emotion/styled": "^11.0.0",
@@ -61,12 +61,12 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
-		"@atlaskit/analytics-listeners": "^8.13.0",
+		"@atlaskit/analytics-listeners": "^8.14.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/jest-dom": "^6.4.5",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"@types/blueimp-load-image": "^5.16.3",
 		"@types/bytes": "^2.4.33",
 		"@types/enzyme": "3.1.15",
@@ -76,8 +76,8 @@
 		"enzyme-adapter-react-16": "^1.15.1",
 		"jest-emotion": "^10.0.32",
 		"jsverify": "^0.8.3",
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"