@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/esm/root/cardView.js

@@ -14,37 +14,39 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { FileCardImageView } from '../files';
 import { breakpointSize } from '../utils/breakpoint';
 import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
-import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
+import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
-import { Blanket } from './ui/blanket/styled';
+import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
-import Tooltip from '@atlaskit/tooltip';
-import { IconWrapper } from './ui/iconWrapper/styled';
-import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import SpinnerIcon from '@atlaskit/spinner';
+import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
-import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
+import { Wrapper } from './cardViewWrapper';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -147,9 +149,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       var shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
-        className: newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return jsx(NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -163,7 +164,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+      }, shouldDisplayTooltip ? jsx(Tooltip, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -199,7 +200,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       var errorMessage = getErrorMessage(status);
       var fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return /*#__PURE__*/React.createElement(FileCardImageView, {
+      return jsx(FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -259,7 +260,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
         case 'processing':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           });
@@ -283,14 +284,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
               secondaryError = _ref5.secondaryError;
 
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+            iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            iconMessage = jsx(FailedToUpload, null);
             customTitleMessage = messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+            iconMessage = jsx(FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            iconMessage = jsx(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -343,7 +344,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref6.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -422,8 +424,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onMouseEnter = _this$props6.onMouseEnter,
           testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        "data-testid": testId || 'media-card-view',
+      return jsx(Wrapper, {
+        testId: testId || 'media-card-view',
         shouldUsePointerCursor: true,
         breakpointSize: breakpointSize(this.width),
         dimensions: wrapperDimensions,
@@ -435,10 +437,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSpinner",
     value: function renderSpinner(hasTitleBox) {
-      return /*#__PURE__*/React.createElement(IconWrapper, {
+      return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+      }, jsx(SpinnerIcon, null));
     }
   }, {
     key: "shouldRenderPlayButton",
@@ -459,17 +461,17 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderPlayButton",
     value: function renderPlayButton(hasTitleBox) {
-      return /*#__PURE__*/React.createElement(IconWrapper, {
+      return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/React.createElement(PlayButton, null), ";");
+      }, jsx(PlayButton, null));
     } //This Blanket will provide a shadow backround for uploading status by
     //setting isFixed.
 
   }, {
     key: "renderBlanket",
     value: function renderBlanket(isFixed) {
-      return /*#__PURE__*/React.createElement(Blanket, {
+      return jsx(Blanket, {
         isFixed: isFixed
       });
     }
@@ -485,7 +487,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref10.name,
           createdAt = _ref10.createdAt;
 
-      return !!name && /*#__PURE__*/React.createElement(TitleBox, {
+      return !!name && jsx(TitleBox, {
         name: name,
         createdAt: createdAt,
         breakpoint: this.breakpoint,
@@ -496,7 +498,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderFailedTitleBox",
     value: function renderFailedTitleBox(customMessage) {
-      return /*#__PURE__*/React.createElement(FailedTitleBox, {
+      return jsx(FailedTitleBox, {
         breakpoint: this.breakpoint,
         customMessage: customMessage
       });
@@ -505,7 +507,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderProgressBar",
     value: function renderProgressBar(positionBottom) {
       var progress = this.props.progress;
-      return /*#__PURE__*/React.createElement(ProgressBar, {
+      return jsx(ProgressBar, {
         progress: progress,
         breakpoint: this.breakpoint,
         positionBottom: positionBottom
@@ -525,7 +527,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onDisplayImage = _this$props9.onDisplayImage,
           nativeLazyLoad = _this$props9.nativeLazyLoad,
           forceSyncDisplay = _this$props9.forceSyncDisplay;
-      return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+      return !!cardPreview && jsx(ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
         alt: alt,
@@ -541,7 +543,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderTickBox",
     value: function renderTickBox() {
       var selected = this.props.selected;
-      return /*#__PURE__*/React.createElement(TickBox, {
+      return jsx(TickBox, {
         selected: selected
       });
     }
@@ -555,10 +557,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           mimeType = _ref11.mimeType,
           name = _ref11.name;
 
-      return /*#__PURE__*/React.createElement(IconWrapper, {
+      return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+      }, jsx(MimeTypeIcon, {
         testId: 'media-card-file-type-icon',
         mediaType: mediaType,
         mimeType: mimeType,
@@ -578,7 +580,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ActionsBar, {
+      return jsx(ActionsBar, {
         actions: actionsWithDetails
       });
     }

package/dist/esm/root/cardViewWrapper.js

@@ -0,0 +1,24 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles } from './styles';
+export var Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+      shouldUsePointerCursor = props.shouldUsePointerCursor,
+      breakpointSize = props.breakpointSize,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      innerRef = props.innerRef;
+  return jsx("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: wrapperStyles({
+      shouldUsePointerCursor: shouldUsePointerCursor,
+      breakpointSize: breakpointSize,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};

package/dist/esm/root/inline/loader.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/root/inlinePlayer.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -17,14 +17,13 @@ import React from 'react';
 import { Component } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
-import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
 import { ProgressBar } from './ui/progressBar/progressBar';
-import { calcBreakpointSize } from './ui/styled';
+import { calcBreakpointSize } from './ui/styles';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getElementDimension } from '../utils/getElementDimension';
-export var inlinePlayerClassName = 'media-card-inline-player';
+import { InlinePlayerWrapper } from './inlinePlayerWrapper';
 export var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     var artifacts = fileState.artifacts;
@@ -318,9 +317,10 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-        className: inlinePlayerClassName,
-        "data-testid": testId || 'media-card-inline-player',
-        selected: selected,
+        testId: testId || 'media-card-inline-player',
+        selected: {
+          selected: selected
+        },
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions

package/dist/esm/root/inlinePlayerWrapper.js

@@ -0,0 +1,21 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles';
+export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
+  var testId = props.testId,
+      selected = props.selected,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      innerRef = props.innerRef;
+  return jsx("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: inlinePlayerClassName,
+    css: inlinePlayerWrapperStyles({
+      selected: selected,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};

package/dist/esm/root/styles.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { getCSSUnitValue } from '../utils/getCSSUnitValue';
+import { breakpointStyles } from '../utils/breakpoint';
+import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
+import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+export var inlinePlayerClassName = 'media-card-inline-player';
+
+var getWrapperHeight = function getWrapperHeight(dimensions) {
+  return dimensions && dimensions.height ? "height: ".concat(getCSSUnitValue(dimensions.height), "; max-height: 100%;") : '';
+};
+
+var getWrapperWidth = function getWrapperWidth(dimensions) {
+  return dimensions && dimensions.width ? "width: ".concat(getCSSUnitValue(dimensions.width), "; max-width: 100%;") : '';
+};
+
+export var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      _ref$breakpointSize = _ref.breakpointSize,
+      breakpointSize = _ref$breakpointSize === void 0 ? 'medium' : _ref$breakpointSize,
+      shouldUsePointerCursor = _ref.shouldUsePointerCursor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n      ", "\n  cursor: ", ";\n"])), breakpointStyles({
+    breakpointSize: breakpointSize
+  }), getWrapperHeight(dimensions), getWrapperWidth(dimensions), shouldUsePointerCursor ? 'pointer' : 'default');
+};
+wrapperStyles.displayName = 'CardViewWrapper';
+export var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
+  var dimensions = _ref2.dimensions,
+      selected = _ref2.selected;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), getDimensionsWithDefault(dimensions).width || '100%', getDimensionsWithDefault(dimensions).height || 'auto', borderRadius(), getSelectedBorderStyle(selected));
+};
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/esm/root/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/root/ui/actionsBar/actionsBar.js

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
-import { Wrapper } from './styled';
+import { ActionsBarWrapper } from './actionsBarWrapper';
 export var ActionsBar = /*#__PURE__*/function (_React$Component) {
   _inherits(ActionsBar, _React$Component);
 
@@ -33,7 +33,7 @@ export var ActionsBar = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Wrapper, {
+      return /*#__PURE__*/React.createElement(ActionsBarWrapper, {
         isFixed: isFixed
       }, /*#__PURE__*/React.createElement(CardActionsView, {
         actions: actions,

package/dist/esm/root/ui/actionsBar/actionsBarWrapper.js

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, actionsBarClassName } from './styles';
+export var ActionsBarWrapper = function ActionsBarWrapper(props) {
+  return jsx("div", {
+    id: "actionsBarWrapper",
+    css: wrapperStyles(props.isFixed),
+    className: actionsBarClassName
+  }, props.children);
+};

package/dist/esm/root/ui/actionsBar/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+export var actionsBarClassName = 'media-card-actions-bar';
+export var fixedActionBarStyles = "opacity: 1;";
+export var wrapperStyles = function wrapperStyles(isFixed) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition());
+};
+wrapperStyles.displayName = 'ActionsBarWrapper';

package/dist/esm/root/ui/actionsBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/root/ui/blanket/blanket.js

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { blanketStyles, blanketClassName } from './styles';
+export var Blanket = function Blanket(props) {
+  var isFixed = props.isFixed;
+  return jsx("div", {
+    css: blanketStyles(isFixed),
+    className: blanketClassName
+  });
+};

package/dist/esm/root/ui/blanket/styles.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+import { N90A } from '@atlaskit/theme/colors';
+export var blanketClassName = 'media-card-blanket';
+export var fixedBlanketStyles = "background-color: ".concat(N90A, ";");
+export var blanketStyles = function blanketStyles(isFixed) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), transition(), isFixed ? fixedBlanketStyles : '');
+};
+blanketStyles.displayName = 'Blanket';

package/dist/esm/root/ui/iconMessage/iconMessageWrapper.js

@@ -0,0 +1,14 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconMessageWrapperStyles } from './styles';
+export var IconMessageWrapper = function IconMessageWrapper(props) {
+  var animated = props.animated,
+      reducedFont = props.reducedFont;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: iconMessageWrapperStyles({
+      animated: animated,
+      reducedFont: reducedFont
+    })
+  }, props.children);
+};

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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { IconMessageWrapper } from './styled';
+import { IconMessageWrapper } from './iconMessageWrapper';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
 export var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
       _ref$animated = _ref.animated,
@@ -13,7 +12,7 @@ export var IconMessage = function IconMessage(_ref) {
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export var CreatingPreview = function CreatingPreview(_ref2) {
   var disableAnimation = _ref2.disableAnimation;

package/dist/esm/root/ui/iconMessage/styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, keyframes } from '@emotion/react';
+import { N300 } from '@atlaskit/theme/colors';
+var breatheAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
+var animatedStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation-name: ", ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n"])), breatheAnimation);
+
+var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
+  var animated = _ref.animated,
+      reducedFont = _ref.reducedFont;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', N300, animated ? animatedStyles : '');
+};
+
+export var iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), getStylesBasedOnProps(props));
+};
+iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

package/dist/esm/root/ui/iconMessage/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/root/ui/iconWrapper/iconWrapper.js

@@ -0,0 +1,14 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconWrapperStyles } from './styles';
+export var IconWrapper = function IconWrapper(props) {
+  var breakpoint = props.breakpoint,
+      hasTitleBox = props.hasTitleBox;
+  return jsx("div", {
+    id: "iconWrapper",
+    css: iconWrapperStyles({
+      breakpoint: breakpoint,
+      hasTitleBox: hasTitleBox
+    })
+  }, props.children);
+};

package/dist/esm/root/ui/iconWrapper/{styled.js → styles.js}

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
   // there is no titlebox
@@ -14,9 +14,9 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
   var marginBottom = getTitleBoxHeight(breakpoint);
   return "".concat(marginBottom, "px");
 }
-export var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
       breakpoint = _ref.breakpoint;
-  return "\n    position: absolute;\n    width: 100%;\n    height: calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ");\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n");
-});
-IconWrapper.displayName = 'MediaIconWrapper';
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
+};
+iconWrapperStyles.displayName = 'MediaIconWrapper';

package/dist/esm/root/ui/iconWrapper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/root/ui/loadingRateLimited/styles.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css } from '@emotion/react';
+import { generateResponsiveStyles } from '../progressBar/styles';
+import { N300 } from '@atlaskit/theme/colors';
+export var loadingRateLimitedContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
+export var warningIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  justify-content: center;\n  display: flex;\n  /* Required to allow end users to select text in the error message */\n  cursor: auto;\n  user-select: text;\n  > svg {\n    width: 45px;\n  }\n"])));
+export var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+      positionBottom = _ref.positionBottom;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), N300, generateResponsiveStyles(breakpoint, positionBottom, false, 1));
+};
+loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';
+export var couldntLoadWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));
+export var errorWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-weight: 350;\n"])));

package/dist/esm/root/ui/newFileExperience/newFileExperienceWrapper.js

@@ -0,0 +1,40 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { newFileExperienceClassName } from '../../../root/card/cardConstants';
+import { newFileExperienceWrapperStyles } from './styles';
+export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
+  var testId = props.testId,
+      dimensions = props.dimensions,
+      appearance = props.appearance,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      innerRef = props.innerRef,
+      breakpoint = props.breakpoint,
+      mediaCardCursor = props.mediaCardCursor,
+      disableOverlay = props.disableOverlay,
+      selected = props.selected,
+      displayBackground = props.displayBackground,
+      isPlayButtonClickable = props.isPlayButtonClickable,
+      isTickBoxSelectable = props.isTickBoxSelectable,
+      shouldDisplayTooltip = props.shouldDisplayTooltip;
+  return jsx("div", {
+    id: "newFileExperienceWrapper",
+    className: newFileExperienceClassName,
+    "data-testid": testId,
+    css: newFileExperienceWrapperStyles({
+      breakpoint: breakpoint,
+      dimensions: dimensions,
+      appearance: appearance,
+      disableOverlay: disableOverlay,
+      displayBackground: displayBackground,
+      selected: selected,
+      isPlayButtonClickable: isPlayButtonClickable,
+      isTickBoxSelectable: isTickBoxSelectable,
+      shouldDisplayTooltip: shouldDisplayTooltip,
+      mediaCardCursor: mediaCardCursor
+    }),
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, props.children);
+};

package/dist/esm/root/ui/newFileExperience/styles.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20 } from '@atlaskit/theme/colors';
+import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../../styles';
+import { fixedBlanketStyles, blanketClassName } from '.././blanket/styles';
+import { fixedActionBarStyles, actionsBarClassName } from '.././actionsBar/styles';
+import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
+export var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+      dimensions = _ref.dimensions,
+      appearance = _ref.appearance,
+      disableOverlay = _ref.disableOverlay,
+      displayBackground = _ref.displayBackground,
+      selected = _ref.selected,
+      isPlayButtonClickable = _ref.isPlayButtonClickable,
+      isTickBoxSelectable = _ref.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref.shouldDisplayTooltip,
+      mediaCardCursor = _ref.mediaCardCursor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ", "\n    ", "\n    &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground ? "background-color: ".concat(N20, ";") : '', borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '');
+};
+newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';