@atlaskit/media-card 72.1.0 → 73.0.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @atlaskit/media-card
 
+## 73.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 72.1.0
 
 ### Minor Changes

package/dist/cjs/errors.js

@@ -5,9 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMediaCardError = isMediaCardError;
+exports.getImageLoadPrimaryReason = exports.ensureMediaCardError = exports.SsrPreviewError = exports.RemotePreviewError = exports.MediaCardError = exports.LocalPreviewError = exports.ImageLoadError = void 0;
 exports.isImageLoadError = isImageLoadError;
-exports.isUploadError = exports.ensureMediaCardError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = exports.isLocalPreviewError = exports.ImageLoadError = exports.getImageLoadPrimaryReason = exports.SsrPreviewError = exports.RemotePreviewError = exports.LocalPreviewError = exports.MediaCardError = void 0;
+exports.isLocalPreviewError = void 0;
+exports.isMediaCardError = isMediaCardError;
+exports.isUploadError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/files/cardImageView/cardOverlay/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Metadata = exports.Subtitle = exports.TitleWrapper = exports.AltWrapper = exports.ErrorMessage = exports.RightColumn = exports.BottomRow = exports.TopRow = exports.LeftColumn = exports.ErrorLine = exports.Overlay = exports.TickBox = void 0;
+exports.TopRow = exports.TitleWrapper = exports.TickBox = exports.Subtitle = exports.RightColumn = exports.Overlay = exports.Metadata = exports.LeftColumn = exports.ErrorMessage = exports.ErrorLine = exports.BottomRow = exports.AltWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/files/cardImageView/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FileCardImageView = exports.fileCardImageViewSelectedSelector = exports.fileCardImageViewSelector = void 0;
+exports.fileCardImageViewSelector = exports.fileCardImageViewSelectedSelector = exports.FileCardImageView = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/files/cardImageView/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardActionsWrapper = exports.ProgressWrapper = exports.Body = exports.Title = exports.Overlay = exports.ProgressBarWrapper = exports.PlayIconBackground = exports.PlayIconWrapper = exports.Wrapper = void 0;
+exports.Wrapper = exports.Title = exports.ProgressWrapper = exports.ProgressBarWrapper = exports.PlayIconWrapper = exports.PlayIconBackground = exports.Overlay = exports.CardActionsWrapper = exports.Body = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/index.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "Card", {
     return _root.Card;
   }
 });
-Object.defineProperty(exports, "MediaInlineCard", {
+Object.defineProperty(exports, "CardError", {
   enumerable: true,
   get: function get() {
-    return _root.MediaInlineCard;
+    return _cardError.CardError;
   }
 });
 Object.defineProperty(exports, "CardLoading", {
@@ -21,10 +21,10 @@ Object.defineProperty(exports, "CardLoading", {
     return _cardLoading.CardLoading;
   }
 });
-Object.defineProperty(exports, "CardError", {
+Object.defineProperty(exports, "MediaInlineCard", {
   enumerable: true,
   get: function get() {
-    return _cardError.CardError;
+    return _root.MediaInlineCard;
   }
 });
 Object.defineProperty(exports, "defaultImageCardDimensions", {
@@ -33,16 +33,16 @@ Object.defineProperty(exports, "defaultImageCardDimensions", {
     return _cardDimensions.defaultImageCardDimensions;
   }
 });
-Object.defineProperty(exports, "fileCardImageViewSelector", {
+Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelector;
+    return _cardImageView.fileCardImageViewSelectedSelector;
   }
 });
-Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
+Object.defineProperty(exports, "fileCardImageViewSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelectedSelector;
+    return _cardImageView.fileCardImageViewSelector;
   }
 });
 Object.defineProperty(exports, "inlinePlayerClassName", {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = exports.fireOperationalEvent = exports.relevantFeatureFlagNames = void 0;
+exports.relevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../../utils/analytics");
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardPreviewCacheImpl = exports.getCacheKey = void 0;
+exports.getCacheKey = exports.default = exports.CardPreviewCacheImpl = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -44,7 +44,10 @@ var isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3) {
   var isPreviewable = _ref3.isPreviewable,
       hasPreview = _ref3.hasPreview,
       isSupportedByBrowser = _ref3.isSupportedByBrowser;
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
 };
 
 exports.isPreviewableStatus = isPreviewableStatus;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCardPreviewFromBackend = exports.getCardPreviewFromFilePreview = exports.isSupportedLocalPreview = void 0;
+exports.isSupportedLocalPreview = exports.getCardPreviewFromFilePreview = exports.getCardPreviewFromBackend = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

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

@@ -5,31 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "getCardPreviewFromFilePreview", {
+Object.defineProperty(exports, "extractFilePreviewStatus", {
   enumerable: true,
   get: function get() {
-    return _helpers.getCardPreviewFromFilePreview;
+    return _filePreviewStatus.extractFilePreviewStatus;
   }
 });
+exports.getCardPreview = exports.fetchAndCacheRemotePreview = void 0;
 Object.defineProperty(exports, "getCardPreviewFromBackend", {
   enumerable: true,
   get: function get() {
     return _helpers.getCardPreviewFromBackend;
   }
 });
-Object.defineProperty(exports, "isSupportedLocalPreview", {
+exports.getCardPreviewFromCache = void 0;
+Object.defineProperty(exports, "getCardPreviewFromFilePreview", {
   enumerable: true,
   get: function get() {
-    return _helpers.isSupportedLocalPreview;
+    return _helpers.getCardPreviewFromFilePreview;
   }
 });
-Object.defineProperty(exports, "extractFilePreviewStatus", {
+exports.isSSRServerPreview = exports.isSSRPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.getFilePreviewFromFileState = void 0;
+Object.defineProperty(exports, "isSupportedLocalPreview", {
   enumerable: true,
   get: function get() {
-    return _filePreviewStatus.extractFilePreviewStatus;
+    return _helpers.isSupportedLocalPreview;
   }
 });
-exports.fetchAndCacheRemotePreview = exports.isSSRClientPreview = exports.isSSRServerPreview = exports.isSSRPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.shouldResolvePreview = exports.getCardPreview = exports.getFilePreviewFromFileState = exports.removeCardPreviewFromCache = exports.getCardPreviewFromCache = void 0;
+exports.shouldResolvePreview = exports.removeCardPreviewFromCache = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCardStatus = exports.isFinalCardStatus = void 0;
+exports.isFinalCardStatus = exports.getCardStatus = void 0;
 
 var isFinalCardStatus = function isFinalCardStatus(status) {
   return ['complete', 'error', 'failed-processing'].includes(status);

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Card = exports.CardBase = void 0;
+exports.CardBase = exports.Card = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -45,7 +45,7 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _cardView = require("../cardView");
 
@@ -827,7 +827,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
 
-      return this.context.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+      return this.props.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, innerContent);
     }
@@ -844,10 +844,6 @@ exports.CardBase = CardBase;
   // Media Feature Flag defaults are defined in @atlaskit/media-common
   featureFlags: {}
 });
-(0, _defineProperty2.default)(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: _reactIntl.intlShape
-});
 var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: _version.version,
   packageName: _version.name,
@@ -855,5 +851,7 @@ var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: _cardAnalytics.relevantFeatureFlagNames
-})((0, _analyticsNext.withAnalyticsEvents)()(CardBase));
+})((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardBase, {
+  enforceContext: false
+})));
 exports.Card = Card;

package/dist/cjs/root/cardView.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardView = exports.CardViewBase = void 0;
+exports.CardViewBase = exports.CardView = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/root/inline/mediaInlineCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaInlineCard = exports.MediaInlineCardInternal = void 0;
+exports.MediaInlineCardInternal = exports.MediaInlineCard = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
@@ -87,6 +87,15 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     return null;
   };
 
+  var renderContent = function renderContent(children) {
+    return intl ? children : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  var defaultIntl = (0, _reactIntlNext.createIntl)({
+    locale: 'en'
+  });
   (0, _react.useEffect)(function () {
     mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -102,14 +111,14 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   if (!fileState) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
-      message: intl.formatMessage(_mediaUi.messages.loading_file),
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.loading_file),
       isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -123,7 +132,7 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -157,7 +166,7 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     formattedDate = (0, _formatDate.formatDate)(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return renderContent( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     position: "bottom",
     content: formattedDate,
     tag: "span"
@@ -166,9 +175,11 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
 
 exports.MediaInlineCardInternal = MediaInlineCardInternal;
-var MediaInlineCard = (0, _reactIntl.injectIntl)(MediaInlineCardInternal);
+var MediaInlineCard = (0, _reactIntlNext.injectIntl)(MediaInlineCardInternal, {
+  enforceContext: false
+});
 exports.MediaInlineCard = MediaInlineCard;

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"));
 

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/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"));
 

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/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"));
 

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"));
 

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;