@atlaskit/media-card 73.8.0 → 74.0.0

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 {
@@ -691,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;
@@ -800,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,
@@ -809,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,
@@ -821,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) {
@@ -853,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
@@ -1048,8 +1051,8 @@ exports.CardBase = CardBase;
   featureFlags: {}
 });
 var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
-  packageVersion: _version.version,
-  packageName: _version.name,
+  packageVersion: packageVersion,
+  packageName: packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {

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,25 +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 _errors = require("../errors");
 
-var _cardConstants = require("./card/cardConstants");
+var _newFileExperienceWrapper = require("./ui/newFileExperience/newFileExperienceWrapper");
 
-var _errors = require("../errors");
+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; }
 
@@ -113,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,
@@ -186,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,
@@ -202,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'
@@ -237,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,
@@ -296,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
           });
@@ -320,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) {
@@ -379,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,
@@ -437,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.
 
@@ -457,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,
@@ -470,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",
@@ -494,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
       });
     }
@@ -520,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,
@@ -531,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
       });
@@ -540,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
@@ -560,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,
@@ -576,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
       });
     }
@@ -590,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,
@@ -613,13 +615,13 @@ 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", {

package/dist/cjs/root/cardViewWrapper.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+      shouldUsePointerCursor = props.shouldUsePointerCursor,
+      breakpointSize = props.breakpointSize,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      innerRef = props.innerRef;
+  return (0, _react.jsx)("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: (0, _styles.wrapperStyles)({
+      shouldUsePointerCursor: shouldUsePointerCursor,
+      breakpointSize: breakpointSize,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};
+
+exports.Wrapper = Wrapper;

package/dist/cjs/root/inlinePlayer.js

@@ -7,12 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inlinePlayerClassName = exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -35,20 +35,20 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _styled = require("./styled");
-
 var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
 var _progressBar = require("./ui/progressBar/progressBar");
 
-var _styled2 = require("./ui/styled");
+var _styles = require("./ui/styles");
 
 var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
 
 var _getElementDimension = require("../utils/getElementDimension");
 
+var _inlinePlayerWrapper = require("./inlinePlayerWrapper");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,9 +57,6 @@ 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 inlinePlayerClassName = 'media-card-inline-player';
-exports.inlinePlayerClassName = inlinePlayerClassName;
-
 var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     var artifacts = fileState.artifacts;
@@ -316,7 +313,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _.defaultImageCardDimensions.width;
-      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
     }
   }, {
     key: "render",
@@ -346,10 +343,11 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.InlinePlayerWrapper, {
-        className: inlinePlayerClassName,
-        "data-testid": testId || 'media-card-inline-player',
-        selected: selected,
+      return /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapper.InlinePlayerWrapper, {
+        testId: testId || 'media-card-inline-player',
+        selected: {
+          selected: selected
+        },
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions