@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/cjs/root/card/cardAnalytics.js

@@ -3,34 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRelevantFeatureFlagNames = exports.getRelevantFeatureFlagKeysWithAllProducts = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = exports.REQUIRED_FEATURE_FLAGS = void 0;
-
-var _mediaCommon = require("@atlaskit/media-common");
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../../utils/analytics");
 
-var REQUIRED_FEATURE_FLAGS = {
-  newCardExperience: true,
-  captions: true,
-  timestampOnVideo: true,
-  observedWidth: true,
-  mediaInline: false,
-  folderUploads: false
-};
-exports.REQUIRED_FEATURE_FLAGS = REQUIRED_FEATURE_FLAGS;
-
-var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
-  return (0, _mediaCommon.filterFeatureFlagNames)(REQUIRED_FEATURE_FLAGS);
-};
-
-exports.getRelevantFeatureFlagNames = getRelevantFeatureFlagNames;
-
-var getRelevantFeatureFlagKeysWithAllProducts = function getRelevantFeatureFlagKeysWithAllProducts() {
-  return (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(REQUIRED_FEATURE_FLAGS);
-};
-
-exports.getRelevantFeatureFlagKeysWithAllProducts = getRelevantFeatureFlagKeysWithAllProducts;
-
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);

package/dist/cjs/root/card/getCardPreview/cache.js

@@ -15,10 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectURLCache = require("../../../utils/objectURLCache");
 
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-var getCacheKey = function getCacheKey(id, dimensions) {
-  return [id, dimensions.height, dimensions.width].join('-');
+var getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 
 exports.getCacheKey = getCacheKey;
@@ -26,17 +25,17 @@ var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function Card
   var _this = this;
 
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
-  (0, _defineProperty2.default)(this, "get", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
     return _this.previewCache.get(cacheKey);
   });
-  (0, _defineProperty2.default)(this, "set", function (id, dimensions, cardPreview) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
-  (0, _defineProperty2.default)(this, "remove", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.remove(cacheKey);
   });

package/dist/cjs/root/card/getCardPreview/index.js

@@ -74,7 +74,7 @@ var getFilePreviewFromFileState = function getFilePreviewFromFileState(fileState
 
 exports.getFilePreviewFromFileState = getFilePreviewFromFileState;
 
-var extendAndCachePreview = function extendAndCachePreview(id, dimensions, preview, mediaBlobUrlAttrs) {
+var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, mediaBlobUrlAttrs) {
   var source;
 
   switch (preview.source) {
@@ -101,7 +101,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
   var dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  _cache.default.set(id, dimensions, _objectSpread(_objectSpread({}, preview), {}, {
+  _cache.default.set(id, mode, _objectSpread(_objectSpread({}, preview), {}, {
     source: source,
     dataURI: dataURI
   }));
@@ -124,44 +124,48 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, mode, cachedPreview, dimensionsAreBigger, localPreview;
 
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
-            cachedPreview = _cache.default.get(id, dimensions);
+            mode = imageUrlParams.mode;
+            cachedPreview = _cache.default.get(id, mode);
+            dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-            if (!cachedPreview) {
-              _context.next = 4;
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 6;
               break;
             }
 
             return _context.abrupt("return", cachedPreview);
 
-          case 4:
-            _context.prev = 4;
+          case 6:
+            _context.prev = 6;
 
             if (!filePreview) {
-              _context.next = 10;
+              _context.next = 12;
               break;
             }
 
-            _context.next = 8;
+            _context.next = 10;
             return (0, _helpers.getCardPreviewFromFilePreview)(filePreview);
 
-          case 8:
+          case 10:
             localPreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
-          case 10:
-            _context.next = 17;
+          case 12:
+            _context.next = 19;
             break;
 
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](4);
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](6);
 
             /**
              * We report the error if:
@@ -183,29 +187,29 @@ var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 17;
+              _context.next = 19;
               break;
             }
 
             throw _context.t0;
 
-          case 17:
+          case 19:
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 21;
               break;
             }
 
             throw new _errors.MediaCardError('remote-preview-not-ready');
 
-          case 19:
+          case 21:
             return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
 
-          case 20:
+          case 22:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[4, 12]]);
+    }, _callee, null, [[6, 14]]);
   }));
 
   return function getCardPreview(_x) {
@@ -219,12 +223,16 @@ var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   var status = _ref3.status,
       fileState = _ref3.fileState,
       dimensions = _ref3.dimensions,
-      prevDimensions = _ref3.prevDimensions,
+      identifier = _ref3.identifier,
+      fileImageMode = _ref3.fileImageMode,
       hasCardPreview = _ref3.hasCardPreview,
       isBannedLocalPreview = _ref3.isBannedLocalPreview,
       featureFlags = _ref3.featureFlags;
   var statusIsPreviewable = (0, _filePreviewStatus.isPreviewableStatus)(status, (0, _filePreviewStatus.extractFilePreviewStatus)(fileState, isBannedLocalPreview, featureFlags));
-  var dimensionsAreBigger = (0, _dimensionComparer.isBigger)(prevDimensions, dimensions);
+
+  var cardPreview = _cache.default.get(identifier.id, fileImageMode);
+
+  var dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 
@@ -296,7 +304,9 @@ var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
 
           case 2:
             remotePreview = _context2.sent;
-            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
           case 4:
           case "end":

package/dist/cjs/root/card/index.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardBase = exports.Card = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -33,8 +33,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _version = require("../../version.json");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
@@ -91,6 +89,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
+
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
 
@@ -335,9 +336,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
         var _this$props5 = _this.props,
             identifier = _this$props5.identifier,
-            _this$props5$dimensio = _this$props5.dimensions,
-            dimensions = _this$props5$dimensio === void 0 ? {} : _this$props5$dimensio;
-        (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
+            resizeMode = _this$props5.resizeMode;
+        var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
+        (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
 
         _this.safeSetState(updateState);
       } else {
@@ -476,7 +477,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props7.dimensions,
           selected = _this$props7.selected,
           testId = _this$props7.testId,
-          originalDimensions = _this$props7.originalDimensions;
+          originalDimensions = _this$props7.originalDimensions,
+          onFullscreenChange = _this$props7.onFullscreenChange;
       var _this$state = _this.state,
           shouldAutoplay = _this$state.shouldAutoplay,
           cardPreview = _this$state.cardPreview;
@@ -486,6 +488,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -689,14 +692,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     var _this$props11 = _this.props,
         _identifier = _this$props11.identifier,
-        _this$props11$dimensi = _this$props11.dimensions,
-        _dimensions = _this$props11$dimensi === void 0 ? {} : _this$props11$dimensi,
+        _resizeMode = _this$props11.resizeMode,
         _ssr = _this$props11.ssr,
         _mediaClient = _this$props11.mediaClient;
 
     if ((0, _mediaClient2.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
-      _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
+      var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(_resizeMode);
+      _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -798,8 +801,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var prevMediaClient = prevProps.mediaClient,
-          prevIdentifier = prevProps.identifier,
-          prevDimensions = prevProps.dimensions;
+          prevIdentifier = prevProps.identifier;
       var prevIsCardVisible = prevState.isCardVisible;
       var _this$props13 = this.props,
           mediaClient = _this$props13.mediaClient,
@@ -807,7 +809,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props13.dimensions,
           featureFlags = _this$props13.featureFlags,
           useInlinePlayer = _this$props13.useInlinePlayer,
-          disableOverlay = _this$props13.disableOverlay;
+          disableOverlay = _this$props13.disableOverlay,
+          resizeMode = _this$props13.resizeMode;
       var _this$state4 = this.state,
           isCardVisible = _this$state4.isCardVisible,
           cardPreview = _this$state4.cardPreview,
@@ -819,6 +822,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
       this.updateFileStateFlag(fileState);
 
       if ((0, _mediaClient2.isExternalImageIdentifier)(identifier) && isDifferent) {
@@ -851,7 +855,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         status: status,
         fileState: fileState,
         dimensions: dimensions,
-        prevDimensions: prevDimensions,
+        identifier: identifier,
+        fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
         isBannedLocalPreview: isBannedLocalPreview
@@ -977,7 +982,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-      (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)(), error);
+      (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -989,7 +994,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
       });
-      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey, (0, _cardAnalytics.getRelevantFeatureFlagKeysWithAllProducts)());
+      (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey);
     }
   }, {
     key: "actions",
@@ -1046,12 +1051,12 @@ exports.CardBase = CardBase;
   featureFlags: {}
 });
 var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
-  packageVersion: _version.version,
-  packageName: _version.name,
+  packageVersion: packageVersion,
+  packageName: packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: (0, _cardAnalytics.getRelevantFeatureFlagNames)()
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardBase, {
   enforceContext: false
 })));

package/dist/cjs/root/cardView.js

@@ -21,12 +21,24 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
+var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _mediaClient = require("@atlaskit/media-client");
+
 var _files = require("../files");
 
 var _breakpoint = require("../utils/breakpoint");
@@ -39,17 +51,13 @@ var _getCSSUnitValue = require("../utils/getCSSUnitValue");
 
 var _getElementDimension = require("../utils/getElementDimension");
 
-var _styled = require("./styled");
-
 var _analytics = require("../utils/analytics");
 
 var _actions = require("../actions");
 
 var _getErrorMessage = require("../utils/getErrorMessage");
 
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _styled2 = require("./ui/styled");
+var _styles = require("./ui/styles");
 
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
 
@@ -63,27 +71,19 @@ var _playButton = require("./ui/playButton/playButton");
 
 var _tickBox = require("./ui/tickBox/tickBox");
 
-var _styled3 = require("./ui/blanket/styled");
+var _blanket = require("./ui/blanket/blanket");
 
 var _actionsBar = require("./ui/actionsBar/actionsBar");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _styled4 = require("./ui/iconWrapper/styled");
-
-var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
 
 var _iconMessage = require("./ui/iconMessage");
 
-var _mediaClient = require("@atlaskit/media-client");
-
-var _cardConstants = require("./card/cardConstants");
-
 var _errors = require("../errors");
 
-var _types = require("../types");
+var _newFileExperienceWrapper = require("./ui/newFileExperience/newFileExperienceWrapper");
+
+var _cardViewWrapper = require("./cardViewWrapper");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -115,7 +115,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       didImageRender: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react2.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (prevCardPreview) {
       var _this$props = _this.props,
           onImageLoad = _this$props.onImageLoad,
@@ -188,9 +188,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       var shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/_react.default.createElement(_styled2.NewFileExperienceWrapper, {
-        className: _cardConstants.newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return (0, _react.jsx)(_newFileExperienceWrapper.NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -204,7 +203,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -239,7 +238,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
       var errorMessage = (0, _getErrorMessage.getErrorMessage)(status);
       var fileSize = !size ? '' : (0, _mediaUi.toHumanReadableMediaSize)(size);
-      return /*#__PURE__*/_react.default.createElement(_files.FileCardImageView, {
+      return (0, _react.jsx)(_files.FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -298,7 +297,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
         case 'processing':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage.CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           });
@@ -322,14 +321,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
               secondaryError = _ref5.secondaryError;
 
           if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
           } else if ((0, _errors.isUploadError)(error)) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.FailedToUpload, null);
             customTitleMessage = _mediaUi.messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -381,7 +380,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref6.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.CardImageContainer, {
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
+        css: _styles.cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -439,7 +439,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
-      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
     } // If the dimensions.width is a percentage, we need to transform it
     // into a pixel value in order to get the right breakpoints applied.
 
@@ -459,8 +459,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onMouseEnter = _this$props6.onMouseEnter,
           testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : (0, _cardDimensions.getDefaultCardDimensions)(appearance);
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        "data-testid": testId || 'media-card-view',
+      return (0, _react.jsx)(_cardViewWrapper.Wrapper, {
+        testId: testId || 'media-card-view',
         shouldUsePointerCursor: true,
         breakpointSize: (0, _breakpoint.breakpointSize)(this.width),
         dimensions: wrapperDimensions,
@@ -472,10 +472,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSpinner",
     value: function renderSpinner(hasTitleBox) {
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
+      }, (0, _react.jsx)(_spinner.default, null));
     }
   }, {
     key: "shouldRenderPlayButton",
@@ -496,17 +496,17 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderPlayButton",
     value: function renderPlayButton(hasTitleBox) {
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_playButton.PlayButton, null), ";");
+      }, (0, _react.jsx)(_playButton.PlayButton, null));
     } //This Blanket will provide a shadow backround for uploading status by
     //setting isFixed.
 
   }, {
     key: "renderBlanket",
     value: function renderBlanket(isFixed) {
-      return /*#__PURE__*/_react.default.createElement(_styled3.Blanket, {
+      return (0, _react.jsx)(_blanket.Blanket, {
         isFixed: isFixed
       });
     }
@@ -522,7 +522,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref10.name,
           createdAt = _ref10.createdAt;
 
-      return !!name && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
+      return !!name && (0, _react.jsx)(_titleBox.TitleBox, {
         name: name,
         createdAt: createdAt,
         breakpoint: this.breakpoint,
@@ -533,7 +533,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderFailedTitleBox",
     value: function renderFailedTitleBox(customMessage) {
-      return /*#__PURE__*/_react.default.createElement(_failedTitleBox.FailedTitleBox, {
+      return (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
         breakpoint: this.breakpoint,
         customMessage: customMessage
       });
@@ -542,7 +542,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderProgressBar",
     value: function renderProgressBar(positionBottom) {
       var progress = this.props.progress;
-      return /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+      return (0, _react.jsx)(_progressBar.ProgressBar, {
         progress: progress,
         breakpoint: this.breakpoint,
         positionBottom: positionBottom
@@ -562,7 +562,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onDisplayImage = _this$props9.onDisplayImage,
           nativeLazyLoad = _this$props9.nativeLazyLoad,
           forceSyncDisplay = _this$props9.forceSyncDisplay;
-      return !!cardPreview && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
+      return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
         alt: alt,
@@ -578,7 +578,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderTickBox",
     value: function renderTickBox() {
       var selected = this.props.selected;
-      return /*#__PURE__*/_react.default.createElement(_tickBox.TickBox, {
+      return (0, _react.jsx)(_tickBox.TickBox, {
         selected: selected
       });
     }
@@ -592,10 +592,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           mimeType = _ref11.mimeType,
           name = _ref11.name;
 
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
+      }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
         testId: 'media-card-file-type-icon',
         mediaType: mediaType,
         mimeType: mimeType,
@@ -615,18 +615,17 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_actionsBar.ActionsBar, {
+      return (0, _react.jsx)(_actionsBar.ActionsBar, {
         actions: actionsWithDetails
       });
     }
   }]);
   return CardViewBase;
-}(_react.default.Component);
+}(_react2.default.Component);
 
 exports.CardViewBase = CardViewBase;
 (0, _defineProperty2.default)(CardViewBase, "defaultProps", {
-  appearance: 'auto',
-  mediaCardCursor: _types.MediaCardCursor.NoAction
+  appearance: 'auto'
 });
 var CardView = (0, _analyticsNext.withAnalyticsEvents)({
   onClick: (0, _analytics.createAndFireMediaCardEvent)({