@atlaskit/media-card 70.9.0 → 72.0.0

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

@@ -5,28 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTitleBoxHeight = exports.responsiveSettings = exports.Breakpoint = void 0;
+exports.getTitleBoxHeight = exports.responsiveSettings = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _responsiveSettings;
-
-var Breakpoint;
-exports.Breakpoint = Breakpoint;
+var _Breakpoint = require("./Breakpoint");
 
-(function (Breakpoint) {
-  Breakpoint["SMALL"] = "small";
-  Breakpoint["LARGE"] = "large";
-})(Breakpoint || (exports.Breakpoint = Breakpoint = {}));
+var _responsiveSettings;
 
-var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.SMALL, {
+var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,
   titleBox: {
     verticalPadding: 4,
     horizontalPadding: 8
   }
-}), (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.LARGE, {
+}), (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.LARGE, {
   fontSize: 14,
   lineHeight: 22,
   titleBox: {

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.RateLimited = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
+exports.PreviewCurrentlyUnavailable = exports.FailedToUpload = exports.FailedToLoad = exports.PreviewUnavailable = exports.CreatingPreview = exports.IconMessage = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,11 +31,12 @@ var IconMessage = function IconMessage(_ref) {
 
 exports.IconMessage = IconMessage;
 
-var CreatingPreview = function CreatingPreview(props) {
-  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+var CreatingPreview = function CreatingPreview(_ref2) {
+  var disableAnimation = _ref2.disableAnimation;
+  return /*#__PURE__*/_react.default.createElement(IconMessage, {
     messageDescriptor: _mediaUi.messages.creating_preview,
-    animated: true
-  }));
+    animated: !disableAnimation
+  });
 };
 
 exports.CreatingPreview = CreatingPreview;
@@ -48,14 +49,21 @@ var PreviewUnavailable = function PreviewUnavailable(props) {
 
 exports.PreviewUnavailable = PreviewUnavailable;
 
-var RateLimited = function RateLimited(props) {
+var FailedToLoad = function FailedToLoad(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
-    messageDescriptor: _mediaUi.messages.preview_rateLimited,
-    reducedFont: true
+    messageDescriptor: _mediaUi.messages.failed_to_load
+  }));
+};
+
+exports.FailedToLoad = FailedToLoad;
+
+var FailedToUpload = function FailedToUpload(props) {
+  return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
+    messageDescriptor: _mediaUi.messages.failed_to_upload
   }));
 };
 
-exports.RateLimited = RateLimited;
+exports.FailedToUpload = FailedToUpload;
 
 var PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {

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

@@ -2,130 +2,47 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageRenderer = exports.ImageRendererBase = exports.resizeModeToMediaImageProps = void 0;
+exports.ImageRenderer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = require("../../../utils/analytics");
-
-var _fileAttributesContext = require("../../../utils/fileAttributesContext");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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 resizeModeToMediaImageProps = function resizeModeToMediaImageProps(resizeMode) {
-  return {
-    crop: resizeMode === 'crop',
-    stretch: resizeMode === 'stretchy-fit'
-  };
-};
-
-exports.resizeModeToMediaImageProps = resizeModeToMediaImageProps;
-
-var ImageRendererBase = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ImageRendererBase, _React$Component);
-
-  var _super = _createSuper(ImageRendererBase);
-
-  function ImageRendererBase() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ImageRendererBase);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
-      var _this$props = _this.props,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent,
-          fileAttributes = _this$props.fileAttributes;
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.SUCCEEDED)) {
-        (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderSucceededEventPayload)(fileAttributes), createAnalyticsEvent);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
-      var _this$props2 = _this.props,
-          onImageError = _this$props2.onImageError,
-          fileAttributes = _this$props2.fileAttributes;
-      onImageError && onImageError();
-
-      if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.FAILED)) {
-        var _this$props3 = _this.props,
-            createAnalyticsEvent = _this$props3.createAnalyticsEvent,
-            mediaItemType = _this$props3.mediaItemType;
-
-        if (mediaItemType === 'file') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedFileUriPayload)(fileAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedExternalUriPayload)(fileAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldFireEvent", function (action) {
-      return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ImageRendererBase, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-      var _this$props4 = this.props,
-          onDisplayImage = _this$props4.onDisplayImage,
-          mediaType = _this$props4.mediaType;
-
-      if (mediaType === 'image' && onDisplayImage) {
-        onDisplayImage();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          dataURI = _this$props5.dataURI,
-          previewOrientation = _this$props5.previewOrientation,
-          alt = _this$props5.alt,
-          resizeMode = _this$props5.resizeMode;
-      return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-        dataURI: dataURI,
-        alt: alt,
-        previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
-      }, resizeModeToMediaImageProps(resizeMode)));
+var _resizeModeToMediaImageProps = require("../../../utils/resizeModeToMediaImageProps");
+
+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; }
+
+var ImageRenderer = function ImageRenderer(_ref) {
+  var dataURI = _ref.dataURI,
+      previewOrientation = _ref.previewOrientation,
+      alt = _ref.alt,
+      resizeMode = _ref.resizeMode,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      onDisplayImage = _ref.onDisplayImage,
+      mediaType = _ref.mediaType;
+  (0, _react.useEffect)(function () {
+    // TODO: trigger accordingly with the succeeded event. This could be a breaking change
+    if (mediaType === 'image' && onDisplayImage) {
+      onDisplayImage();
     }
-  }]);
-  return ImageRendererBase;
-}(_react.default.Component);
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError
+  }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
+};
 
-exports.ImageRendererBase = ImageRendererBase;
-var ImageRenderer = (0, _analyticsNext.withAnalyticsEvents)()((0, _fileAttributesContext.withFileAttributes)(ImageRendererBase));
 exports.ImageRenderer = ImageRenderer;

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

@@ -17,11 +17,11 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _reactIntl = require("react-intl");
 
-var _common = require("../common");
+var _Breakpoint = require("../Breakpoint");
 
 var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? true : _ref$positionBottom;
   return /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedContainer, null, /*#__PURE__*/_react.default.createElement(_styled.WarningIconWrapper, null, _errorIcon.errorIcon), /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedTextWrapper, {

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

@@ -11,12 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
-var _common = require("../common");
+var _Breakpoint = require("../Breakpoint");
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;

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

@@ -20,6 +20,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _common = require("../common");
 
+var _Breakpoint = require("../Breakpoint");
+
 var _templateObject;
 
 var height = 3;
@@ -37,7 +39,7 @@ var largeSizeSettings = {
 
 function generateResponsiveStyles(breakpoint, positionBottom) {
   var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var setting = breakpoint === _Breakpoint.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  ");

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

@@ -5,91 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardImageContainer = exports.NewFileExperienceWrapper = exports.calcBreakpointSize = void 0;
+exports.NewFileExperienceWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
 
 var _cardDimensions = require("../../utils/cardDimensions");
 
-var _constants = require("@atlaskit/theme/constants");
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _consts = require("@atlaskit/editor-shared-styles/consts");
-
 var _selection = require("@atlaskit/editor-shared-styles/selection");
 
-var _styles = require("../../styles");
-
 var _styled = require("./tickBox/styled");
 
-var _styled2 = require("./blanket/styled");
+var _styled2 = require("./actionsBar/styled");
 
-var _styled3 = require("./actionsBar/styled");
+var _styled3 = require("./playButton/styled");
 
-var _styled4 = require("./playButton/styled");
+var _styledSSR = require("./styledSSR");
 
-var _common = require("./common");
-
-var _templateObject, _templateObject2;
-
-var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
-
-var calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  var _ref = breakpointSizes.find(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        _breakpoint = _ref4[0],
-        limit = _ref4[1];
-
-    return wrapperWidth <= limit;
-  }) || [_common.Breakpoint.SMALL],
-      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      breakpoint = _ref2[0];
-
-  return breakpoint;
-};
-
-exports.calcBreakpointSize = calcBreakpointSize;
-
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
-  var setting = _common.responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
+var _templateObject;
 
 var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref5 = dimensions || {},
-      width = _ref5.width,
-      height = _ref5.height;
+  var _ref = dimensions || {},
+      width = _ref.width,
+      height = _ref.height;
 
   var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
       defaultWidth = _getDefaultCardDimens.width,
       defaultHeight = _getDefaultCardDimens.height;
 
   return "\n    width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-}; // This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
-
-
-var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
-  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -97,7 +44,7 @@ var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayB
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled4.playButtonClassName, " {\n      ").concat(_styled4.fixedPlayButtonStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styled3.playButtonClassName, " {\n      ").concat(_styled3.fixedPlayButtonStyles, "\n    }\n  ");
 };
 
 var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
@@ -108,23 +55,13 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(_styled.tickBoxClassName, " {\n      ").concat(_styled.tickboxFixedStyles, "\n    }\n  ");
 };
 
-var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref6) {
-  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    &: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");
+var NewFileExperienceWrapper = (0, _styledComponents.default)(_styledSSR.SSRFileExperienceWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref2) {
+  var dimensions = _ref2.dimensions,
+      appearance = _ref2.appearance,
+      isPlayButtonClickable = _ref2.isPlayButtonClickable,
+      isTickBoxSelectable = _ref2.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref2.shouldDisplayTooltip;
+  return "\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\n    &:hover .").concat(_styled2.actionsBarClassName, " {\n      ").concat(_styled2.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
 });
-
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
-
-var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
-
-exports.CardImageContainer = CardImageContainer;
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcBreakpointSize = exports.CardImageContainer = exports.getWrapperDimensions = exports.SSRFileExperienceWrapper = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _selection = require("@atlaskit/editor-shared-styles/selection");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _styles = require("../../styles");
+
+var _cardDimensions = require("../../utils/cardDimensions");
+
+var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
+
+var _styled = require("./blanket/styled");
+
+var _common = require("./common");
+
+var _Breakpoint = require("./Breakpoint");
+
+var _templateObject, _templateObject2;
+
+var SSRFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &:hover .", " {\n    ", "\n  }\n"])), function (_ref) {
+  var breakpoint = _ref.breakpoint,
+      dimensions = _ref.dimensions,
+      appearance = _ref.appearance,
+      shouldUsePointerCursor = _ref.shouldUsePointerCursor,
+      displayBackground = _ref.displayBackground,
+      disableOverlay = _ref.disableOverlay,
+      selected = _ref.selected;
+  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(generateResponsiveStyles(breakpoint), "\n  ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n  ").concat(getWrapperShadow(disableOverlay, selected), "\n  ");
+}, _styled.blanketClassName, _styled.fixedBlanketStyles);
+
+exports.SSRFileExperienceWrapper = SSRFileExperienceWrapper;
+SSRFileExperienceWrapper.displayName = 'SSRFileExperienceWrapper';
+
+var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
+  var _ref2 = dimensions || {},
+      width = _ref2.width,
+      height = _ref2.height;
+
+  var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
+      defaultWidth = _getDefaultCardDimens.width,
+      defaultHeight = _getDefaultCardDimens.height;
+
+  return "\n    width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n    max-height: 100%;\n  ");
+};
+
+exports.getWrapperDimensions = getWrapperDimensions;
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
+  var setting = _common.responsiveSettings[breakpoint];
+  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
+};
+
+var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
+  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
+  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
+  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
+};
+
+var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
+
+exports.CardImageContainer = CardImageContainer;
+var breakpointSizes = [[_Breakpoint.Breakpoint.SMALL, 599], [_Breakpoint.Breakpoint.LARGE, Infinity]];
+
+var calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  var _ref3 = breakpointSizes.find(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+        _breakpoint = _ref6[0],
+        limit = _ref6[1];
+
+    return wrapperWidth <= limit;
+  }) || [_Breakpoint.Breakpoint.SMALL],
+      _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+      breakpoint = _ref4[0];
+
+  return breakpoint;
+};
+
+exports.calcBreakpointSize = calcBreakpointSize;

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

@@ -13,19 +13,23 @@ var _styled = require("./styled");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _getErrorMessage = require("../../../utils/getErrorMessage");
+var _reactIntl = require("react-intl");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), (0, _getErrorMessage.getErrorMessage)('error')));
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, customMessage)));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

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

@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _common = require("../common");
 
+var _Breakpoint = require("../Breakpoint");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _mixins = require("../../../styles/mixins");
@@ -20,7 +22,7 @@ var _mixins = require("../../../styles/mixins");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
   var verticalPadding = setting.titleBox.verticalPadding;
   var horizontalPadding = setting.titleBox.horizontalPadding;