@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -29,7 +29,9 @@ var ImageRenderer = function ImageRenderer(_ref) {
       onImageLoad = _ref.onImageLoad,
       onImageError = _ref.onImageError,
       onDisplayImage = _ref.onDisplayImage,
-      mediaType = _ref.mediaType;
+      mediaType = _ref.mediaType,
+      nativeLazyLoad = _ref.nativeLazyLoad,
+      forceSyncDisplay = _ref.forceSyncDisplay;
   (0, _react.useEffect)(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -41,7 +43,9 @@ var ImageRenderer = function ImageRenderer(_ref) {
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
 };
 

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

@@ -13,21 +13,23 @@ 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 _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _common.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, {
     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

@@ -11,19 +11,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
-var _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _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"));
 
@@ -20,8 +20,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _templateObject;
 
 var height = 3;
@@ -37,19 +35,20 @@ var largeSizeSettings = {
   marginBottom: 12
 };
 
-function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var setting = breakpoint === _Breakpoint.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+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,38 +5,91 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NewFileExperienceWrapper = void 0;
+exports.calcBreakpointSize = exports.NewFileExperienceWrapper = exports.CardImageContainer = 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("./actionsBar/styled");
+var _styled2 = require("./blanket/styled");
 
-var _styled3 = require("./playButton/styled");
+var _styled3 = require("./actionsBar/styled");
 
-var _styledSSR = require("./styledSSR");
+var _styled4 = require("./playButton/styled");
 
-var _templateObject;
+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 getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref = dimensions || {},
-      width = _ref.width,
-      height = _ref.height;
+  var _ref5 = dimensions || {},
+      width = _ref5.width,
+      height = _ref5.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) {
@@ -44,7 +97,7 @@ var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayB
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled3.playButtonClassName, " {\n      ").concat(_styled3.fixedPlayButtonStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styled4.playButtonClassName, " {\n      ").concat(_styled4.fixedPlayButtonStyles, "\n    }\n  ");
 };
 
 var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
@@ -55,13 +108,23 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(_styled.tickBoxClassName, " {\n      ").concat(_styled.tickboxFixedStyles, "\n    }\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");
+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\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;
-NewFileExperienceWrapper.displayName = '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;

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"));
 
@@ -13,8 +13,6 @@ 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");
@@ -22,7 +20,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] : _Breakpoint.Breakpoint.SMALL;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
   var verticalPadding = setting.titleBox.verticalPadding;
   var horizontalPadding = setting.titleBox.horizontalPadding;

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;
 

package/dist/cjs/styles/index.js

@@ -5,12 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "defaultTransitionDuration", {
-  enumerable: true,
-  get: function get() {
-    return _config.defaultTransitionDuration;
-  }
-});
+exports.Root = exports.FadeinImage = void 0;
 Object.defineProperty(exports, "antialiased", {
   enumerable: true,
   get: function get() {
@@ -29,6 +24,7 @@ Object.defineProperty(exports, "capitalize", {
     return _mixins.capitalize;
   }
 });
+exports.cardShadow = void 0;
 Object.defineProperty(exports, "centerSelf", {
   enumerable: true,
   get: function get() {
@@ -53,55 +49,61 @@ Object.defineProperty(exports, "centerX", {
     return _mixins.centerX;
   }
 });
-Object.defineProperty(exports, "hexToRgb", {
+exports.default = void 0;
+Object.defineProperty(exports, "defaultTransitionDuration", {
   enumerable: true,
   get: function get() {
-    return _mixins.hexToRgb;
+    return _config.defaultTransitionDuration;
   }
 });
-Object.defineProperty(exports, "rgba", {
+Object.defineProperty(exports, "easeOutCubic", {
   enumerable: true,
   get: function get() {
-    return _mixins.rgba;
+    return _easing.easeOutCubic;
   }
 });
-Object.defineProperty(exports, "spaceAround", {
+Object.defineProperty(exports, "easeOutExpo", {
   enumerable: true,
   get: function get() {
-    return _mixins.spaceAround;
+    return _easing.easeOutExpo;
   }
 });
-Object.defineProperty(exports, "transition", {
+Object.defineProperty(exports, "hexToRgb", {
   enumerable: true,
   get: function get() {
-    return _mixins.transition;
+    return _mixins.hexToRgb;
   }
 });
-Object.defineProperty(exports, "withAppearance", {
+Object.defineProperty(exports, "rgba", {
   enumerable: true,
   get: function get() {
-    return _mixins.withAppearance;
+    return _mixins.rgba;
   }
 });
-Object.defineProperty(exports, "easeOutCubic", {
+Object.defineProperty(exports, "spaceAround", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutCubic;
+    return _mixins.spaceAround;
   }
 });
-Object.defineProperty(exports, "easeOutExpo", {
+Object.defineProperty(exports, "spin", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutExpo;
+    return _animations.spin;
   }
 });
-Object.defineProperty(exports, "spin", {
+Object.defineProperty(exports, "transition", {
   enumerable: true,
   get: function get() {
-    return _animations.spin;
+    return _mixins.transition;
+  }
+});
+Object.defineProperty(exports, "withAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _mixins.withAppearance;
   }
 });
-exports.default = exports.FadeinImage = exports.cardShadow = exports.Root = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/styles/mixins.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withAppearance = exports.capitalize = exports.rgba = exports.hexToRgb = exports.transition = exports.spaceAround = exports.borderRadiusLeft = exports.centerSelf = exports.centerSelfX = exports.centerSelfY = exports.antialiased = exports.centerX = void 0;
+exports.withAppearance = exports.transition = exports.spaceAround = exports.rgba = exports.hexToRgb = exports.centerX = exports.centerSelfY = exports.centerSelfX = exports.centerSelf = exports.capitalize = exports.borderRadiusLeft = exports.antialiased = void 0;
 
 var _constants = require("@atlaskit/theme/constants");
 

package/dist/cjs/utils/analytics.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createAndFireMediaCardEvent = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getRenderPreviewableCardPayload = exports.getFileAttributes = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
 
 var _mediaClient = require("@atlaskit/media-client");
 

package/dist/cjs/utils/breakpoint.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.breakpointStyles = exports.cardBreakpointSizes = exports.breakpointSize = void 0;
+exports.cardBreakpointSizes = exports.breakpointStyles = exports.breakpointSize = void 0;
 
 var _mediaUi = require("@atlaskit/media-ui");