@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/cjs/root/inlinePlayer.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlinePlayer = exports.InlinePlayerBase = exports.getPreferredVideoArtifact = exports.inlinePlayerClassName = void 0;
+exports.inlinePlayerClassName = exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -41,6 +41,14 @@ var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
+var _progressBar = require("./ui/progressBar/progressBar");
+
+var _styled2 = require("./ui/styled");
+
+var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
+
+var _getElementDimension = require("../utils/getElementDimension");
+
 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; }
@@ -84,6 +92,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFileSrc", function (fileSrc) {
       _this.setState({
         fileSrc: fileSrc
@@ -153,6 +162,23 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         viewingLevel: 'full'
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
+      var dimensions = _this.props.dimensions;
+
+      if (!dimensions) {
+        return;
+      }
+
+      var width = dimensions.width;
+
+      if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!_this.divRef.current) {
+        var elementWidth = (0, _getElementDimension.getElementDimension)(_this.divRef.current, 'width');
+
+        _this.setState({
+          elementWidth: elementWidth
+        });
+      }
+    });
     return _this;
   }
 
@@ -161,6 +187,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      this.saveElementWidth();
       var _this$props3 = this.props,
           mediaClient = _this$props3.mediaClient,
           identifier = _this$props3.identifier;
@@ -179,30 +206,41 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
+                    if (fileState.status === 'uploading') {
+                      _this2.setState({
+                        isUploading: true,
+                        progress: fileState.progress
+                      });
+                    } else {
+                      _this2.setState({
+                        isUploading: false
+                      });
+                    }
+
                     existingFileSrc = _this2.state.fileSrc; // we want to reuse the existing fileSrc to prevent re renders
 
                     if (!existingFileSrc) {
-                      _context2.next = 3;
+                      _context2.next = 4;
                       break;
                     }
 
                     return _context2.abrupt("return");
 
-                  case 3:
+                  case 4:
                     if (!(fileState.status !== 'error' && fileState.preview)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
-                    _context2.next = 6;
+                    _context2.next = 7;
                     return fileState.preview;
 
-                  case 6:
+                  case 7:
                     _yield$fileState$prev = _context2.sent;
                     value = _yield$fileState$prev.value;
 
                     if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
@@ -212,9 +250,9 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 12:
+                  case 13:
                     if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
-                      _context2.next = 29;
+                      _context2.next = 30;
                       break;
                     }
 
@@ -222,7 +260,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
                     artifacts = fileState.artifacts;
 
                     if (!(!artifactName || !artifacts)) {
-                      _context2.next = 18;
+                      _context2.next = 19;
                       break;
                     }
 
@@ -230,34 +268,34 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 18:
-                    _context2.prev = 18;
-                    _context2.next = 21;
+                  case 19:
+                    _context2.prev = 19;
+                    _context2.next = 22;
                     return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
 
-                  case 21:
+                  case 22:
                     _fileSrc = _context2.sent;
 
                     _this2.setFileSrc(_fileSrc);
 
-                    _context2.next = 29;
+                    _context2.next = 30;
                     break;
 
-                  case 25:
-                    _context2.prev = 25;
-                    _context2.t0 = _context2["catch"](18);
+                  case 26:
+                    _context2.prev = 26;
+                    _context2.t0 = _context2["catch"](19);
                     onError = _this2.props.onError;
 
                     if (onError) {
                       onError(_context2.t0);
                     }
 
-                  case 29:
+                  case 30:
                   case "end":
                     return _context2.stop();
                 }
               }
-            }, _callee2, null, [[18, 25]]);
+            }, _callee2, null, [[19, 26]]);
           }));
 
           function next(_x) {
@@ -274,6 +312,12 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       this.unsubscribe();
       this.revoke();
     }
+  }, {
+    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));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -286,8 +330,13 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           selected = _this$props4.selected,
           testId = _this$props4.testId,
           identifier = _this$props4.identifier,
-          forwardRef = _this$props4.forwardRef;
-      var fileSrc = this.state.fileSrc;
+          forwardRef = _this$props4.forwardRef,
+          autoplay = _this$props4.autoplay,
+          cardPreview = _this$props4.cardPreview;
+      var _this$state = this.state,
+          fileSrc = _this$state.fileSrc,
+          isUploading = _this$state.isUploading,
+          progress = _this$state.progress;
 
       if (!fileSrc) {
         return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, {
@@ -308,7 +357,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           type: "video",
           src: fileSrc,
           fileId: identifier.id,
-          isAutoPlay: true,
+          isAutoPlay: autoplay,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
           onFirstPlay: _this3.onFirstPlay,
@@ -316,9 +365,15 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
             contentId: identifier.id
           },
           originalDimensions: originalDimensions,
-          showControls: checkMouseMovement
+          showControls: checkMouseMovement,
+          poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
         });
-      }));
+      }), isUploading ? /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+        progress: progress,
+        breakpoint: this.breakpoint,
+        positionBottom: true,
+        showOnTop: true
+      }) : null);
     }
   }]);
   return InlinePlayerBase;

package/dist/cjs/root/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlinePlayerWrapper = exports.Wrapper = void 0;
+exports.Wrapper = exports.InlinePlayerWrapper = exports.FormattedMessageWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
 
 var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var getWrapperHeight = function getWrapperHeight(dimensions) {
   return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
@@ -51,4 +51,8 @@ var InlinePlayerWrapper = _styledComponents.default.div(_templateObject2 || (_te
 }, (0, _constants.borderRadius)(), _getSelectedBorderStyle.getSelectedBorderStyle);
 
 exports.InlinePlayerWrapper = InlinePlayerWrapper;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+
+var FormattedMessageWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.FormattedMessageWrapper = FormattedMessageWrapper;

package/dist/cjs/root/ui/actionsBar/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
+exports.fixedActionBarStyles = exports.actionsBarClassName = exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/blanket/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Blanket = exports.fixedBlanketStyles = exports.blanketClassName = void 0;
+exports.fixedBlanketStyles = exports.blanketClassName = exports.Blanket = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/common.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTitleBoxHeight = exports.responsiveSettings = exports.Breakpoint = void 0;
+exports.responsiveSettings = exports.getTitleBoxHeight = exports.Breakpoint = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/root/ui/iconMessage/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewCurrentlyUnavailable = exports.FailedToUpload = exports.FailedToLoad = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
+exports.PreviewUnavailable = exports.PreviewCurrentlyUnavailable = exports.IconMessage = exports.FailedToUpload = exports.FailedToLoad = exports.CreatingPreview = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,7 +15,9 @@ var _styled = require("./styled");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
+
+var _styled2 = require("../../styled");
 
 var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
@@ -26,7 +28,7 @@ var IconMessage = function IconMessage(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messageDescriptor)));
 };
 
 exports.IconMessage = IconMessage;

package/dist/cjs/root/ui/iconWrapper/styled.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBoxHeight = titleBoxHeight;
 exports.IconWrapper = void 0;
+exports.titleBoxHeight = titleBoxHeight;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/imageRenderer/imageRenderer.js

@@ -22,8 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var ImageRenderer = function ImageRenderer(_ref) {
-  var dataURI = _ref.dataURI,
-      previewOrientation = _ref.previewOrientation,
+  var cardPreview = _ref.cardPreview,
       alt = _ref.alt,
       resizeMode = _ref.resizeMode,
       onImageLoad = _ref.onImageLoad,
@@ -38,12 +37,21 @@ var ImageRenderer = function ImageRenderer(_ref) {
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  var onLoad = function onLoad() {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  var onError = function onError() {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));

package/dist/cjs/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -13,9 +13,11 @@ var _errorIcon = require("@atlaskit/media-ui/errorIcon");
 
 var _styled = require("./styled");
 
+var _styled2 = require("../../styled");
+
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _common = require("../common");
 
@@ -27,7 +29,7 @@ var LoadingRateLimited = function LoadingRateLimited(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedContainer, null, /*#__PURE__*/_react.default.createElement(_styled.WarningIconWrapper, null, _errorIcon.errorIcon), /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/_react.default.createElement(_styled.CouldntLoadWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.couldnt_load_file)), /*#__PURE__*/_react.default.createElement(_styled.ErrorWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.error_429))));
+  }, /*#__PURE__*/_react.default.createElement(_styled.CouldntLoadWrapper, null, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.couldnt_load_file))), /*#__PURE__*/_react.default.createElement(_styled.ErrorWrapper, null, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.error_429)))));
 };
 
 exports.LoadingRateLimited = LoadingRateLimited;

package/dist/cjs/root/ui/loadingRateLimited/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErrorWrapper = exports.CouldntLoadWrapper = exports.LoadingRateLimitedTextWrapper = exports.WarningIconWrapper = exports.LoadingRateLimitedContainer = void 0;
+exports.WarningIconWrapper = exports.LoadingRateLimitedTextWrapper = exports.LoadingRateLimitedContainer = exports.ErrorWrapper = exports.CouldntLoadWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -28,7 +28,7 @@ exports.WarningIconWrapper = WarningIconWrapper;
 var LoadingRateLimitedTextWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(_colors.N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat((0, _styled.generateResponsiveStyles)(breakpoint, positionBottom, 1), "\n  ");
+  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(_colors.N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat((0, _styled.generateResponsiveStyles)(breakpoint, positionBottom, false, 1), "\n  ");
 });
 
 exports.LoadingRateLimitedTextWrapper = LoadingRateLimitedTextWrapper;

package/dist/cjs/root/ui/playButton/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Background = exports.Wrapper = exports.fixedPlayButtonStyles = exports.playButtonClassName = void 0;
+exports.playButtonClassName = exports.fixedPlayButtonStyles = exports.Wrapper = exports.Background = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/progressBar/progressBar.js

@@ -18,12 +18,15 @@ var ProgressBar = function ProgressBar(_ref) {
       _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
-      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
+      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
+      _ref$showOnTop = _ref.showOnTop,
+      showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/_react.default.createElement(_styled.StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };
 

package/dist/cjs/root/ui/progressBar/styled.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResponsiveStyles = generateResponsiveStyles;
 exports.StyledBar = void 0;
+exports.generateResponsiveStyles = generateResponsiveStyles;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -35,19 +35,20 @@ var largeSizeSettings = {
   marginBottom: 12
 };
 
-function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 
 var StyledBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n    box-sizing: border-box;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 
 exports.StyledBar = StyledBar;

package/dist/cjs/root/ui/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardImageContainer = exports.NewFileExperienceWrapper = exports.calcBreakpointSize = void 0;
+exports.calcBreakpointSize = exports.NewFileExperienceWrapper = exports.CardImageContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -88,8 +88,8 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';
 };
 
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
+var getCursorStyle = function getCursorStyle(cursor) {
+  return "cursor: ".concat(cursor, ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -112,14 +112,14 @@ var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject ||
   var breakpoint = _ref6.breakpoint,
       dimensions = _ref6.dimensions,
       appearance = _ref6.appearance,
-      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
       disableOverlay = _ref6.disableOverlay,
       displayBackground = _ref6.displayBackground,
       selected = _ref6.selected,
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+      shouldDisplayTooltip = _ref6.shouldDisplayTooltip,
+      mediaCardCursor = _ref6.mediaCardCursor;
+  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(mediaCardCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
 
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;

package/dist/cjs/root/ui/tickBox/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.tickboxFixedStyles = exports.tickBoxClassName = void 0;
+exports.tickboxFixedStyles = exports.tickBoxClassName = exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/titleBox/failedTitleBox.js

@@ -17,7 +17,9 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
+
+var _styled2 = require("../../styled");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
@@ -29,7 +31,7 @@ var FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, customMessage)));
+  }), /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

package/dist/cjs/root/ui/titleBox/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErrorMessageWrapper = exports.TitleBoxIcon = exports.TitleBoxFooter = exports.TitleBoxHeader = exports.TitleBoxWrapper = void 0;
+exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/root/ui/titleBox/titleBox.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styled = require("./styled");
 
@@ -19,7 +19,7 @@ var _truncateText = require("@atlaskit/media-ui/truncateText");
 
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 
-var FormattedDate = (0, _reactIntl.injectIntl)(function (_ref) {
+var FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
   var timestamp = _ref.timestamp,
       intl = _ref.intl;