@atlaskit/media-card 81.10.12 → 81.10.13

package/dist/cjs/card/inlinePlayer.js

@@ -1,281 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+exports.InlinePlayer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _mediaClient = require("@atlaskit/media-client");
-var _customMediaPlayer = require("@atlaskit/media-ui/customMediaPlayer");
-var _mediaPlayer = require("@atlaskit/media-ui/mediaPlayer");
-var _inactivityDetector = require("@atlaskit/media-ui/inactivityDetector");
-var _utils = require("../utils");
-var _cardLoading = require("../utils/lightCards/cardLoading");
-var _progressBar = require("./ui/progressBar/progressBar");
-var _inlinePlayerWrapper = require("./inlinePlayerWrapper");
-var _useBreakpoint = require("./useBreakpoint");
-var _useFileState2 = require("@atlaskit/media-client-react/use-file-state");
-var _useMediaClient = require("@atlaskit/media-client-react/use-media-client");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
-var getPreferredVideoArtifact = exports.getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
-  if (fileState.status === 'processed' || fileState.status === 'processing') {
-    var artifacts = fileState.artifacts;
-    if (!artifacts) {
-      return undefined;
-    }
-    return artifacts['video_1280.mp4'] ? 'video_1280.mp4' : artifacts['video_640.mp4'] ? 'video_640.mp4' : undefined;
-  }
-  return undefined;
-};
-var InlinePlayerBase = exports.InlinePlayerBase = function InlinePlayerBase(_ref) {
-  var identifier = _ref.identifier,
-    onError = _ref.onError,
-    onClick = _ref.onClick,
-    _ref$dimensions = _ref.dimensions,
-    dimensions = _ref$dimensions === void 0 ? _utils.defaultImageCardDimensions : _ref$dimensions,
-    originalDimensions = _ref.originalDimensions,
-    selected = _ref.selected,
-    testId = _ref.testId,
-    forwardRef = _ref.forwardRef,
-    autoplay = _ref.autoplay,
-    cardPreview = _ref.cardPreview,
-    onFullscreenChange = _ref.onFullscreenChange,
-    videoControlsWrapperRef = _ref.videoControlsWrapperRef;
-  // === States ===
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    fileSrc = _useState2[0],
-    setFileSrc = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isUploading = _useState4[0],
-    setIsUploading = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    progress = _useState6[0],
-    setProgress = _useState6[1];
-
-  // === Refs and Local Variables ===
-  var divRef = (0, _react.useRef)(null);
-  var onErrorRef = (0, _react.useRef)(onError);
-  onErrorRef.current = onError;
-  var id = identifier.id,
-    collectionName = identifier.collectionName,
-    occurrenceKey = identifier.occurrenceKey;
-  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  var mediaClient = (0, _useMediaClient.useMediaClient)();
-  var _useFileState = (0, _useFileState2.useFileState)(id, {
-      collectionName: collectionName,
-      occurrenceKey: occurrenceKey
-    }),
-    fileState = _useFileState.fileState;
-  var init = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(fileState) {
-      var artifactName, artifacts, newFileSrc, _newFileSrc, _t, _t2;
-      return _regenerator.default.wrap(function (_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (fileState.status === 'processed' || fileState.status === 'processing') {
-              _context.next = 1;
-              break;
-            }
-            return _context.abrupt("return");
-          case 1:
-            artifactName = getPreferredVideoArtifact(fileState);
-            artifacts = fileState.artifacts;
-            if (!(!artifactName || !artifacts)) {
-              _context.next = 6;
-              break;
-            }
-            _context.prev = 2;
-            _context.next = 3;
-            return mediaClient.file.getFileBinaryURL(id, collectionName);
-          case 3:
-            newFileSrc = _context.sent;
-            setFileSrc(newFileSrc);
-            _context.next = 5;
-            break;
-          case 4:
-            _context.prev = 4;
-            _t = _context["catch"](2);
-            if (onErrorRef.current && _t instanceof Error) {
-              onErrorRef.current(_t);
-            }
-          case 5:
-            return _context.abrupt("return");
-          case 6:
-            _context.prev = 6;
-            _context.next = 7;
-            return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
-          case 7:
-            _newFileSrc = _context.sent;
-            setFileSrc(_newFileSrc);
-            _context.next = 9;
-            break;
-          case 8:
-            _context.prev = 8;
-            _t2 = _context["catch"](6);
-            if (onErrorRef.current && _t2 instanceof Error) {
-              onErrorRef.current(_t2);
-            }
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 4], [6, 8]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [collectionName, id, mediaClient.file]);
-  var onPlay = function onPlay() {
-    if ((0, _fg.fg)('platform_media_resume_video_on_token_expiry')) {
-      fileState && init(fileState);
-    }
-  };
-  var onTimeChanged = onPlay;
-  (0, _react.useEffect)(function () {
-    var subscribeFileState = /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(fileState) {
-        var _yield$fileState$prev, value, newFileSrc;
-        return _regenerator.default.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (fileState.status === 'uploading') {
-                setIsUploading(true);
-                setProgress(fileState.progress);
-              } else {
-                setIsUploading(false);
-              }
-
-              // We reuse the existing fileSrc to prevent re renders, therefore we only perform fileSrc updates when there isn't any
-              if (!fileSrc) {
-                _context2.next = 1;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 1:
-              if (!(fileState.status !== 'error' && fileState.preview)) {
-                _context2.next = 3;
-                break;
-              }
-              _context2.next = 2;
-              return fileState.preview;
-            case 2:
-              _yield$fileState$prev = _context2.sent;
-              value = _yield$fileState$prev.value;
-              if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
-                _context2.next = 3;
-                break;
-              }
-              newFileSrc = URL.createObjectURL(value);
-              setFileSrc(newFileSrc);
-              return _context2.abrupt("return");
-            case 3:
-              if (fileState.status === 'processed' || fileState.status === 'processing') {
-                init(fileState);
-              }
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function subscribeFileState(_x2) {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-    if (fileState) {
-      subscribeFileState(fileState);
-    }
-  }, [fileState, collectionName, fileSrc, id, mediaClient, init]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      fileSrc && URL.revokeObjectURL(fileSrc);
-    };
-  }, [fileSrc]);
-
-  // === Render ===
-  return fileSrc ? /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapper.InlinePlayerWrapper, {
-    testId: testId || 'media-card-inline-player',
-    "data-vc": "media-card-inline-player",
-    selected: selected,
-    onClick: onClick,
-    innerRef: forwardRef || undefined,
-    dimensions: dimensions
-  }, /*#__PURE__*/_react.default.createElement(_inactivityDetector.InactivityDetector, null, function (checkMouseMovement, controlsAreVisible) {
-    return (0, _fg.fg)('platform_media_video_captions') ? /*#__PURE__*/_react.default.createElement(_mediaPlayer.MediaPlayer, {
-      identifier: identifier,
-      type: "video",
-      src: fileSrc,
-      onFullscreenChange: onFullscreenChange,
-      isAutoPlay: autoplay,
-      isHDAvailable: false,
-      onDownloadClick: function onDownloadClick() {
-        mediaClient.file.downloadBinary(id, undefined, collectionName);
-      },
-      onFirstPlay: function onFirstPlay() {
-        _mediaClient.globalMediaEventEmitter.emit('media-viewed', {
-          fileId: id,
-          viewingLevel: 'full'
-        });
-      },
-      onPlay: onPlay,
-      onTimeChanged: onTimeChanged,
-      lastWatchTimeConfig: {
-        contentId: id
-      },
-      originalDimensions: originalDimensions,
-      showControls: checkMouseMovement,
-      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-      videoControlsWrapperRef: videoControlsWrapperRef,
-      areControlsVisible: controlsAreVisible
-    }) : /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
-      type: "video",
-      src: fileSrc,
-      onFullscreenChange: onFullscreenChange,
-      fileId: id,
-      isAutoPlay: autoplay,
-      isHDAvailable: false,
-      onDownloadClick: function onDownloadClick() {
-        mediaClient.file.downloadBinary(id, undefined, collectionName);
-      },
-      onFirstPlay: function onFirstPlay() {
-        _mediaClient.globalMediaEventEmitter.emit('media-viewed', {
-          fileId: id,
-          viewingLevel: 'full'
-        });
-      },
-      onPlay: onPlay,
-      onTimeChanged: onTimeChanged,
-      lastWatchTimeConfig: {
-        contentId: id
-      },
-      originalDimensions: originalDimensions,
-      showControls: checkMouseMovement,
-      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-      videoControlsWrapperRef: videoControlsWrapperRef
-    });
-  }), isUploading && /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
-    progress: progress,
-    breakpoint: breakpoint,
-    positionBottom: true,
-    showOnTop: true
-  })) : /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, {
-    testId: testId,
-    dimensions: dimensions,
-    interactionName: "inline-player-loading"
-  });
-};
+var _react = _interopRequireDefault(require("react"));
+var _InlinePlayerBase = require("./InlinePlayerBase");
 var InlinePlayerForwardRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(InlinePlayerBase, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_InlinePlayerBase.InlinePlayerBase, (0, _extends2.default)({}, props, {
     forwardRef: ref
   }));
 });

package/dist/cjs/card/isFinalCardStatus.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFinalCardStatus = void 0;
+var isFinalCardStatus = exports.isFinalCardStatus = function isFinalCardStatus(status) {
+  return ['complete', 'error', 'failed-processing'].includes(status);
+};

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _unhandledErrorCard = require("./ui/unhandledErrorCard");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
-var _analytics = require("../utils/analytics");
+var _fireMediaCardEvent = require("../utils/analytics/fireMediaCardEvent");
 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; }
 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)); }
@@ -42,7 +42,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
           failReason: 'unexpected-error'
         }, data)
       };
-      (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+      (0, _fireMediaCardEvent.fireMediaCardEvent)(payload, createAnalyticsEvent);
     });
     (0, _defineProperty2.default)(_this, "handleOnClick", function (event) {
       try {
@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.10.11";
+var packageVersion = "81.10.12";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/svgView/svgImage-compiled.js

@@ -12,10 +12,10 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _errors = require("../../errors");
-var _helpers = require("./helpers");
-var _useResolveSvg2 = require("@atlaskit/media-svg/use-resolve-svg");
 var _mediaSvgError = require("@atlaskit/media-svg/media-svg-error");
+var _useResolveSvg2 = require("@atlaskit/media-svg/use-resolve-svg");
+var _MediaCardError = require("../../MediaCardError");
+var _helpers = require("./helpers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -63,7 +63,7 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     onLoad === null || onLoad === void 0 || onLoad();
   };
   var onSvgError = function onSvgError(err) {
-    var error = new _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    var error = new _MediaCardError.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
     onError === null || onError === void 0 || onError(error);
   };
   (0, _react.useEffect)(function () {

package/dist/cjs/card/svgView/svgViewV2.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SvgView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _errors = require("../../errors");
+var _MediaCardError = require("../../MediaCardError");
 var _useResolveSvg2 = require("@atlaskit/media-svg/use-resolve-svg");
 var _mediaSvgError = require("@atlaskit/media-svg/media-svg-error");
 var _imageRendererV = require("../ui/imageRenderer/imageRendererV2");
@@ -40,7 +40,7 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     alt = _ref.alt,
     backgroundColor = _ref.backgroundColor;
   var onSvgError = function onSvgError(err) {
-    var error = new _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    var error = new _MediaCardError.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
     onError === null || onError === void 0 || onError(error);
   };
   var _useResolveSvg = (0, _useResolveSvg2.useResolveSvg)(identifier, onSvgError),

package/dist/cjs/card/ui/actionsBar/actionsBar.js

@@ -11,8 +11,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
-var _cardActions = require("./cardActions");
 var _actionsBarWrapper = require("./actionsBarWrapper");
+var _cardActionsView = require("./cardActions/cardActionsView");
+var _styles = require("./cardActions/styles");
 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 ActionsBar = exports.ActionsBar = /*#__PURE__*/function (_React$Component) {
@@ -33,10 +34,10 @@ var ActionsBar = exports.ActionsBar = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/_react.default.createElement(_actionsBarWrapper.ActionsBarWrapper, {
         isFixed: isFixed
-      }, /*#__PURE__*/_react.default.createElement(_cardActions.CardActionsView, {
+      }, /*#__PURE__*/_react.default.createElement(_cardActionsView.CardActionsView, {
         filename: filename,
         actions: actions,
-        variant: _cardActions.CardActionIconButtonVariant.filled
+        variant: _styles.CardActionIconButtonVariant.filled
       }));
     }
   }]);

package/dist/cjs/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
 var _cardActionButton = require("./cardActionButton");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
-var _analytics = require("../../../../utils/analytics");
+var _fireMediaCardEvent = require("../../../../utils/analytics/fireMediaCardEvent");
 var CardActionIconButton = exports.CardActionIconButton = function CardActionIconButton(_ref) {
   var icon = _ref.icon,
     label = _ref.label,
@@ -30,7 +30,7 @@ var CardActionIconButton = exports.CardActionIconButton = function CardActionIco
   };
   var handleClick = function handleClick(e) {
     var actionSubjectId = isPrimary ? 'mediaCardPrimaryActionButton' : 'mediaCardSecondaryActionButton';
-    (0, _analytics.fireMediaCardEvent)({
+    (0, _fireMediaCardEvent.fireMediaCardEvent)({
       eventType: 'ui',
       action: 'clicked',
       actionSubject: 'button',

package/dist/cjs/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -14,7 +14,8 @@ var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu/drop
 var _dropdownMenuItemGroup = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item-group"));
 var _dropdownMenuItem = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
-var _analytics = require("../../../../utils/analytics");
+var _createAndFireMediaCardEvent = require("../../../../utils/analytics/createAndFireMediaCardEvent");
+var _fireMediaCardEvent = require("../../../../utils/analytics/fireMediaCardEvent");
 var _cardActionButton = require("./cardActionButton");
 var _excluded = ["triggerRef", "isSelected", "testId", "onClick"];
 // Trick applied due to the lack of props type of DropdownItem
@@ -28,7 +29,7 @@ var createDropdownItemWithAnalytics = function createDropdownItemWithAnalytics(a
     handler = action.handler,
     isDisabled = action.isDisabled;
   var DropdownItemWithAnalytics = (0, _withAnalyticsEvents.default)({
-    onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    onClick: (0, _createAndFireMediaCardEvent.createAndFireMediaCardEvent)({
       eventType: 'ui',
       action: 'clicked',
       actionSubject: 'button',
@@ -72,7 +73,7 @@ var CardActionsDropdownMenu = exports.CardActionsDropdownMenu = function CardAct
           },
           ref: triggerRef,
           onClick: function onClick(e) {
-            (0, _analytics.fireMediaCardEvent)({
+            (0, _fireMediaCardEvent.fireMediaCardEvent)({
               eventType: 'ui',
               action: 'clicked',
               actionSubject: 'button',

package/dist/cjs/card/ui/actionsBar/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
 var _react = require("@emotion/react");
-var _styles = require("../styles");
+var _transition = require("../transition");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var actionsBarClassName = exports.actionsBarClassName = 'media-card-actions-bar';
@@ -13,7 +13,7 @@ var fixedActionBarStyles = exports.fixedActionBarStyles = "opacity: 1;";
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(isFixed) {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)(), {
+    (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _transition.transition)(), {
       position: 'absolute',
       top: 0,
       right: 0,

package/dist/cjs/card/ui/blanket/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName = void 0;
 var _react = require("@emotion/react");
-var _styles = require("../styles");
+var _transition = require("../transition");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var blanketClassName = exports.blanketClassName = 'media-card-blanket';
@@ -13,7 +13,7 @@ var fixedBlanketStyles = exports.fixedBlanketStyles = "background-color: ".conca
 var blanketStyles = exports.blanketStyles = function blanketStyles(isFixed) {
   return (0, _react.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  (0, _styles.transition)(), {
+  (0, _transition.transition)(), {
     position: 'absolute',
     width: '100%',
     height: '100%',

package/dist/cjs/card/ui/calcBreakpointSize.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcBreakpointSize = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _common = require("./common");
+var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
+var calcBreakpointSize = exports.calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var _ref = breakpointSizes.find(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        _breakpoint = _ref4[0],
+        limit = _ref4[1];
+      return wrapperWidth <= limit;
+    }) || [_common.Breakpoint.SMALL],
+    _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+    breakpoint = _ref2[0];
+  return breakpoint;
+};

package/dist/cjs/card/ui/generateResponsiveStyles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateResponsiveStyles = void 0;
+var _common = require("./common");
+var generateResponsiveStyles = exports.generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var setting = _common.responsiveSettings[breakpoint];
+  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
+};

package/dist/cjs/card/ui/getClickablePlayButtonStyles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClickablePlayButtonStyles = void 0;
+var _styles = require("./playButton/styles");
+var getClickablePlayButtonStyles = exports.getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
+  if (!isPlayButtonClickable) {
+    return '';
+  }
+  return "\n    &:hover .".concat(_styles.playButtonClassName, " {\n      ").concat(_styles.fixedPlayButtonStyles, "\n    }\n  ");
+};

package/dist/cjs/card/ui/getCursorStyle.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCursorStyle = void 0;
+var getCursorStyle = exports.getCursorStyle = function getCursorStyle(cursor) {
+  return !!cursor ? "cursor: ".concat(cursor, ";") : '';
+};

package/dist/cjs/card/ui/getSelectableTickBoxStyles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectableTickBoxStyles = void 0;
+var _styles = require("./tickBox/styles");
+var getSelectableTickBoxStyles = exports.getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
+  if (!isTickBoxSelectable) {
+    return '';
+  }
+  return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
+};

package/dist/cjs/card/ui/getWrapperDimensions.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWrapperDimensions = void 0;
+var _cardDimensions = require("../../utils/cardDimensions");
+var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
+var getWrapperDimensions = exports.getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
+  var _ref = dimensions || {},
+    width = _ref.width,
+    height = _ref.height;
+  var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
+    defaultWidth = _getDefaultCardDimens.width,
+    defaultHeight = _getDefaultCardDimens.height;
+  return "\n\t/* If container doesn't exists, it will fallback to this */\n\twidth: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n    max-height: 100%;\n  ");
+};

package/dist/cjs/card/ui/getWrapperShadow.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWrapperShadow = void 0;
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+// This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+var getWrapperShadow = exports.getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+  var withOverlayShadow = !disableOverlay ? "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)" : '';
+  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
+  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
+};

package/dist/cjs/card/ui/iconMessage/CheckInternetConnection.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckInternetConnection = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/media-ui/messages");
+var _IconMessage = require("./IconMessage");
+var CheckInternetConnection = exports.CheckInternetConnection = function CheckInternetConnection(props) {
+  return /*#__PURE__*/_react.default.createElement(_IconMessage.IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _messages.messages.check_internet_connection
+  }));
+};

package/dist/cjs/card/ui/iconMessage/CreatingPreview.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreatingPreview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/media-ui/messages");
+var _IconMessage = require("./IconMessage");
+var CreatingPreview = exports.CreatingPreview = function CreatingPreview(_ref) {
+  var disableAnimation = _ref.disableAnimation;
+  return /*#__PURE__*/_react.default.createElement(_IconMessage.IconMessage, {
+    messageDescriptor: _messages.messages.creating_preview,
+    animated: !disableAnimation
+  });
+};

package/dist/cjs/card/ui/iconMessage/FailedToLoad.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FailedToLoad = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/media-ui/messages");
+var _IconMessage = require("./IconMessage");
+var FailedToLoad = exports.FailedToLoad = function FailedToLoad(props) {
+  return /*#__PURE__*/_react.default.createElement(_IconMessage.IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _messages.messages.failed_to_load
+  }));
+};