@atlaskit/media-ui 27.2.0 → 27.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-ui
 
+## 27.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.3.0
+
+### Minor Changes
+
+- [#97492](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97492)
+  [`5195c4fd974a3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5195c4fd974a3) -
+  Exported common modal dialog for for abuse-classified file downloads
+
 ## 27.2.0
 
 ### Minor Changes

package/abuseModal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/media-ui/abuseModal",
+  "main": "../dist/cjs/abuseModal/index.js",
+  "module": "../dist/esm/abuseModal/index.js",
+  "module:es2019": "../dist/es2019/abuseModal/index.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/abuseModal/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/abuseModal/index.d.ts"
+      ]
+    }
+  }
+}

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

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

package/dist/cjs/MediaInlineCard/Frame/styled-emotion.js

@@ -33,6 +33,7 @@ var isSelected = function isSelected(_ref) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var Wrapper = exports.Wrapper = _styled.default.span({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '16px',
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)"),
   boxDecorationBreak: 'clone',

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

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

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

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

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

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

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

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

package/dist/cjs/abuseModal/abuseModal.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AbuseModal = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
+var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _primitives = require("@atlaskit/primitives");
+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; }
+var gridStyles = (0, _primitives.xcss)({
+  width: '100%'
+});
+var closeContainerStyles = (0, _primitives.xcss)({
+  gridArea: 'close'
+});
+var titleContainerStyles = (0, _primitives.xcss)({
+  gridArea: 'title'
+});
+var AbuseModal = exports.AbuseModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onConfirm = _ref.onConfirm,
+    shouldMount = _ref.shouldMount;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var closeModal = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  var confirm = (0, _react.useCallback)(function () {
+    onConfirm === null || onConfirm === void 0 || onConfirm();
+    closeModal();
+  }, [onConfirm, closeModal]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return function () {
+      return setIsOpen(true);
+    };
+  }, []);
+  return !shouldMount ? null : /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: closeModal,
+    testId: "mediaAbuseModal"
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    icon: _closeCross.default,
+    label: "Close Modal",
+    onClick: closeModal
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start"
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, "Warning")))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, "This file has been labelled as abusive. Please proceed with caution."), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: closeModal
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "warning",
+    onClick: confirm
+  }, "Proceed with download"))));
+});

package/dist/cjs/abuseModal/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AbuseModal", {
+  enumerable: true,
+  get: function get() {
+    return _abuseModal.AbuseModal;
+  }
+});
+var _abuseModal = require("./abuseModal");

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

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

package/dist/cjs/customMediaPlayer/index.js

@@ -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.2.0";
+var packageVersion = "27.3.1";
 
 // @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

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

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

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

package/dist/cjs/ellipsify-compiled.js

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

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

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

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

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

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

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

package/dist/cjs/modalSpinner-compiled.js

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

package/dist/cjs/truncateText-compiled.js

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

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

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

package/dist/es2019/MediaInlineCard/Frame/styled-emotion.js

@@ -35,6 +35,7 @@ const isSelected = ({
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Wrapper = styled.span({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '16px',
   padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
   boxDecorationBreak: 'clone',

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

@@ -1,4 +1,4 @@
-/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

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

package/dist/es2019/abuseModal/abuseModal.js

@@ -0,0 +1,55 @@
+import React, { useCallback, useState, useImperativeHandle, forwardRef } from 'react';
+import Button, { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { Flex, Grid, xcss } from '@atlaskit/primitives';
+const gridStyles = xcss({
+  width: '100%'
+});
+const closeContainerStyles = xcss({
+  gridArea: 'close'
+});
+const titleContainerStyles = xcss({
+  gridArea: 'title'
+});
+export const AbuseModal = /*#__PURE__*/forwardRef(({
+  onConfirm,
+  shouldMount
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const closeModal = useCallback(() => setIsOpen(false), []);
+  const confirm = useCallback(() => {
+    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    closeModal();
+  }, [onConfirm, closeModal]);
+  useImperativeHandle(ref, () => {
+    return () => setIsOpen(true);
+  }, []);
+  return !shouldMount ? null : /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: closeModal,
+    testId: "mediaAbuseModal"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: "Close Modal",
+    onClick: closeModal
+  })), /*#__PURE__*/React.createElement(Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start"
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, "Warning")))), /*#__PURE__*/React.createElement(ModalBody, null, "This file has been labelled as abusive. Please proceed with caution."), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: closeModal
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: confirm
+  }, "Proceed with download"))));
+});

package/dist/es2019/abuseModal/index.js

@@ -0,0 +1,4 @@
+/**
+ * Entry Point "/abuseModal"
+ */
+export { AbuseModal } from './abuseModal';

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

@@ -1,4 +1,4 @@
-/* index-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -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.2.0";
+const packageVersion = "27.3.1";
 
 // @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

@@ -1,4 +1,4 @@
-/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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.js

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

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

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

package/dist/es2019/modalSpinner-compiled.js

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

package/dist/es2019/truncateText-compiled.js

@@ -1,4 +1,4 @@
-/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* truncateText-compiled.tsx generated by @compiled/babel-plugin v0.35.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.js

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

package/dist/esm/MediaInlineCard/Frame/styled-emotion.js

@@ -25,6 +25,7 @@ var isSelected = function isSelected(_ref) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var Wrapper = styled.span({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '16px',
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)"),
   boxDecorationBreak: 'clone',

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

@@ -1,4 +1,4 @@
-/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

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

package/dist/esm/abuseModal/abuseModal.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState, useImperativeHandle, forwardRef } from 'react';
+import Button, { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { Flex, Grid, xcss } from '@atlaskit/primitives';
+var gridStyles = xcss({
+  width: '100%'
+});
+var closeContainerStyles = xcss({
+  gridArea: 'close'
+});
+var titleContainerStyles = xcss({
+  gridArea: 'title'
+});
+export var AbuseModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onConfirm = _ref.onConfirm,
+    shouldMount = _ref.shouldMount;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var closeModal = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  var confirm = useCallback(function () {
+    onConfirm === null || onConfirm === void 0 || onConfirm();
+    closeModal();
+  }, [onConfirm, closeModal]);
+  useImperativeHandle(ref, function () {
+    return function () {
+      return setIsOpen(true);
+    };
+  }, []);
+  return !shouldMount ? null : /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: closeModal,
+    testId: "mediaAbuseModal"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: "Close Modal",
+    onClick: closeModal
+  })), /*#__PURE__*/React.createElement(Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start"
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, "Warning")))), /*#__PURE__*/React.createElement(ModalBody, null, "This file has been labelled as abusive. Please proceed with caution."), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: closeModal
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: confirm
+  }, "Proceed with download"))));
+});

package/dist/esm/abuseModal/index.js

@@ -0,0 +1,4 @@
+/**
+ * Entry Point "/abuseModal"
+ */
+export { AbuseModal } from './abuseModal';

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

@@ -1,4 +1,4 @@
-/* index-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -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.2.0";
+var packageVersion = "27.3.1";
 
 // @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

@@ -1,4 +1,4 @@
-/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* playPauseBlanket-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* ellipsify-compiled.tsx generated by @compiled/babel-plugin v0.35.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

@@ -1,4 +1,4 @@
-/* styled-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.35.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.js

@@ -1,4 +1,4 @@
-/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.33.0 */
+/* media-type-icon-compiled.tsx generated by @compiled/babel-plugin v0.35.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/mime-type-icon.js

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

package/dist/esm/modalSpinner-compiled.js

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

package/dist/esm/truncateText-compiled.js

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

package/dist/types/abuseModal/abuseModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type AbuseModalProps = {
+    onConfirm?: () => void;
+    onClose?: () => void;
+    shouldMount: boolean;
+};
+export declare const AbuseModal: React.ForwardRefExoticComponent<AbuseModalProps & React.RefAttributes<() => void>>;

package/dist/types/abuseModal/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Entry Point "/abuseModal"
+ */
+export { AbuseModal, type AbuseModalProps } from './abuseModal';

package/dist/types-ts4.5/abuseModal/abuseModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type AbuseModalProps = {
+    onConfirm?: () => void;
+    onClose?: () => void;
+    shouldMount: boolean;
+};
+export declare const AbuseModal: React.ForwardRefExoticComponent<AbuseModalProps & React.RefAttributes<() => void>>;

package/dist/types-ts4.5/abuseModal/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Entry Point "/abuseModal"
+ */
+export { AbuseModal, type AbuseModalProps } from './abuseModal';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "27.2.0",
+	"version": "27.3.1",
 	"description": "Includes common components and utilities used by other media packages",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,18 +28,19 @@
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
 		"@atlaskit/css": "^0.7.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.3.0",
 		"@atlaskit/icon-file-type": "^6.8.0",
 		"@atlaskit/legacy-custom-icons": "^0.20.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/media-common": "^11.7.0",
+		"@atlaskit/modal-dialog": "^12.18.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": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/width-detector": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -127,6 +128,7 @@
 		"./types": "./src/types.ts",
 		"./formatDate": "./src/formatDate.ts",
 		"./locales": "./src/locales.ts",
+		"./abuseModal": "./src/abuseModal/index.ts",
 		".": "./src/index.ts"
 	}
 }