@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/cjs/root/cardView.js

@@ -21,12 +21,24 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
+var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _mediaClient = require("@atlaskit/media-client");
+
 var _files = require("../files");
 
 var _breakpoint = require("../utils/breakpoint");
@@ -39,17 +51,13 @@ var _getCSSUnitValue = require("../utils/getCSSUnitValue");
 
 var _getElementDimension = require("../utils/getElementDimension");
 
-var _styled = require("./styled");
-
 var _analytics = require("../utils/analytics");
 
 var _actions = require("../actions");
 
 var _getErrorMessage = require("../utils/getErrorMessage");
 
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _styled2 = require("./ui/styled");
+var _styles = require("./ui/styles");
 
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
 
@@ -63,25 +71,19 @@ var _playButton = require("./ui/playButton/playButton");
 
 var _tickBox = require("./ui/tickBox/tickBox");
 
-var _styled3 = require("./ui/blanket/styled");
+var _blanket = require("./ui/blanket/blanket");
 
 var _actionsBar = require("./ui/actionsBar/actionsBar");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _styled4 = require("./ui/iconWrapper/styled");
-
-var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
 
 var _iconMessage = require("./ui/iconMessage");
 
-var _mediaClient = require("@atlaskit/media-client");
+var _errors = require("../errors");
 
-var _cardConstants = require("./card/cardConstants");
+var _newFileExperienceWrapper = require("./ui/newFileExperience/newFileExperienceWrapper");
 
-var _errors = require("../errors");
+var _cardViewWrapper = require("./cardViewWrapper");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -113,7 +115,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       didImageRender: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react2.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (prevCardPreview) {
       var _this$props = _this.props,
           onImageLoad = _this$props.onImageLoad,
@@ -186,9 +188,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       var shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/_react.default.createElement(_styled2.NewFileExperienceWrapper, {
-        className: _cardConstants.newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return (0, _react.jsx)(_newFileExperienceWrapper.NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -202,7 +203,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -237,7 +238,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
       var errorMessage = (0, _getErrorMessage.getErrorMessage)(status);
       var fileSize = !size ? '' : (0, _mediaUi.toHumanReadableMediaSize)(size);
-      return /*#__PURE__*/_react.default.createElement(_files.FileCardImageView, {
+      return (0, _react.jsx)(_files.FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -296,7 +297,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
         case 'processing':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage.CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           });
@@ -320,14 +321,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
               secondaryError = _ref5.secondaryError;
 
           if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
           } else if ((0, _errors.isUploadError)(error)) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.FailedToUpload, null);
             customTitleMessage = _mediaUi.messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
+            iconMessage = (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -379,7 +380,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref6.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.CardImageContainer, {
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
+        css: _styles.cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -437,7 +439,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
-      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
     } // If the dimensions.width is a percentage, we need to transform it
     // into a pixel value in order to get the right breakpoints applied.
 
@@ -457,8 +459,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onMouseEnter = _this$props6.onMouseEnter,
           testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : (0, _cardDimensions.getDefaultCardDimensions)(appearance);
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        "data-testid": testId || 'media-card-view',
+      return (0, _react.jsx)(_cardViewWrapper.Wrapper, {
+        testId: testId || 'media-card-view',
         shouldUsePointerCursor: true,
         breakpointSize: (0, _breakpoint.breakpointSize)(this.width),
         dimensions: wrapperDimensions,
@@ -470,10 +472,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSpinner",
     value: function renderSpinner(hasTitleBox) {
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
+      }, (0, _react.jsx)(_spinner.default, null));
     }
   }, {
     key: "shouldRenderPlayButton",
@@ -494,17 +496,17 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderPlayButton",
     value: function renderPlayButton(hasTitleBox) {
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_playButton.PlayButton, null), ";");
+      }, (0, _react.jsx)(_playButton.PlayButton, null));
     } //This Blanket will provide a shadow backround for uploading status by
     //setting isFixed.
 
   }, {
     key: "renderBlanket",
     value: function renderBlanket(isFixed) {
-      return /*#__PURE__*/_react.default.createElement(_styled3.Blanket, {
+      return (0, _react.jsx)(_blanket.Blanket, {
         isFixed: isFixed
       });
     }
@@ -520,7 +522,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           name = _ref10.name,
           createdAt = _ref10.createdAt;
 
-      return !!name && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
+      return !!name && (0, _react.jsx)(_titleBox.TitleBox, {
         name: name,
         createdAt: createdAt,
         breakpoint: this.breakpoint,
@@ -531,7 +533,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderFailedTitleBox",
     value: function renderFailedTitleBox(customMessage) {
-      return /*#__PURE__*/_react.default.createElement(_failedTitleBox.FailedTitleBox, {
+      return (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
         breakpoint: this.breakpoint,
         customMessage: customMessage
       });
@@ -540,7 +542,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderProgressBar",
     value: function renderProgressBar(positionBottom) {
       var progress = this.props.progress;
-      return /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+      return (0, _react.jsx)(_progressBar.ProgressBar, {
         progress: progress,
         breakpoint: this.breakpoint,
         positionBottom: positionBottom
@@ -560,7 +562,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onDisplayImage = _this$props9.onDisplayImage,
           nativeLazyLoad = _this$props9.nativeLazyLoad,
           forceSyncDisplay = _this$props9.forceSyncDisplay;
-      return !!cardPreview && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
+      return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
         alt: alt,
@@ -576,7 +578,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderTickBox",
     value: function renderTickBox() {
       var selected = this.props.selected;
-      return /*#__PURE__*/_react.default.createElement(_tickBox.TickBox, {
+      return (0, _react.jsx)(_tickBox.TickBox, {
         selected: selected
       });
     }
@@ -590,10 +592,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           mimeType = _ref11.mimeType,
           name = _ref11.name;
 
-      return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
+      return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
+      }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
         testId: 'media-card-file-type-icon',
         mediaType: mediaType,
         mimeType: mimeType,
@@ -613,13 +615,13 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_actionsBar.ActionsBar, {
+      return (0, _react.jsx)(_actionsBar.ActionsBar, {
         actions: actionsWithDetails
       });
     }
   }]);
   return CardViewBase;
-}(_react.default.Component);
+}(_react2.default.Component);
 
 exports.CardViewBase = CardViewBase;
 (0, _defineProperty2.default)(CardViewBase, "defaultProps", {

package/dist/cjs/root/cardViewWrapper.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+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 (0, _react.jsx)("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: (0, _styles.wrapperStyles)({
+      shouldUsePointerCursor: shouldUsePointerCursor,
+      breakpointSize: breakpointSize,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};
+
+exports.Wrapper = Wrapper;

package/dist/cjs/root/inlinePlayer.js

@@ -7,12 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inlinePlayerClassName = exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -35,20 +35,20 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _styled = require("./styled");
-
 var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
 var _progressBar = require("./ui/progressBar/progressBar");
 
-var _styled2 = require("./ui/styled");
+var _styles = require("./ui/styles");
 
 var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
 
 var _getElementDimension = require("../utils/getElementDimension");
 
+var _inlinePlayerWrapper = require("./inlinePlayerWrapper");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,9 +57,6 @@ 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; } }
 
-var inlinePlayerClassName = 'media-card-inline-player';
-exports.inlinePlayerClassName = inlinePlayerClassName;
-
 var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     var artifacts = fileState.artifacts;
@@ -316,7 +313,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _.defaultImageCardDimensions.width;
-      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
     }
   }, {
     key: "render",
@@ -346,10 +343,11 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.InlinePlayerWrapper, {
-        className: inlinePlayerClassName,
-        "data-testid": testId || 'media-card-inline-player',
-        selected: selected,
+      return /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapper.InlinePlayerWrapper, {
+        testId: testId || 'media-card-inline-player',
+        selected: {
+          selected: selected
+        },
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions

package/dist/cjs/root/inlinePlayerWrapper.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlinePlayerWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
+  var testId = props.testId,
+      selected = props.selected,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      innerRef = props.innerRef;
+  return (0, _react.jsx)("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: _styles.inlinePlayerClassName,
+    css: (0, _styles.inlinePlayerWrapperStyles)({
+      selected: selected,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};
+
+exports.InlinePlayerWrapper = InlinePlayerWrapper;

package/dist/cjs/root/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.inlinePlayerWrapperStyles = exports.inlinePlayerClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _getCSSUnitValue = require("../utils/getCSSUnitValue");
+
+var _breakpoint = require("../utils/breakpoint");
+
+var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
+
+var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
+
+var _templateObject, _templateObject2;
+
+var inlinePlayerClassName = 'media-card-inline-player';
+exports.inlinePlayerClassName = inlinePlayerClassName;
+
+var getWrapperHeight = function getWrapperHeight(dimensions) {
+  return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
+};
+
+var getWrapperWidth = function getWrapperWidth(dimensions) {
+  return dimensions && dimensions.width ? "width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.width), "; max-width: 100%;") : '';
+};
+
+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 (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n      ", "\n  cursor: ", ";\n"])), (0, _breakpoint.breakpointStyles)({
+    breakpointSize: breakpointSize
+  }), getWrapperHeight(dimensions), getWrapperWidth(dimensions), shouldUsePointerCursor ? 'pointer' : 'default');
+};
+
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'CardViewWrapper';
+
+var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
+  var dimensions = _ref2.dimensions,
+      selected = _ref2.selected;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%', (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto', (0, _constants.borderRadius)(), (0, _getSelectedBorderStyle.getSelectedBorderStyle)(selected));
+};
+
+exports.inlinePlayerWrapperStyles = inlinePlayerWrapperStyles;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/cjs/root/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -21,7 +21,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _cardActions = require("../../../utils/cardActions");
 
-var _styled = require("./styled");
+var _actionsBarWrapper = require("./actionsBarWrapper");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -48,7 +48,7 @@ var ActionsBar = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      return /*#__PURE__*/_react.default.createElement(_actionsBarWrapper.ActionsBarWrapper, {
         isFixed: isFixed
       }, /*#__PURE__*/_react.default.createElement(_cardActions.CardActionsView, {
         actions: actions,

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsBarWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var ActionsBarWrapper = function ActionsBarWrapper(props) {
+  return (0, _react.jsx)("div", {
+    id: "actionsBarWrapper",
+    css: (0, _styles.wrapperStyles)(props.isFixed),
+    className: _styles.actionsBarClassName
+  }, props.children);
+};
+
+exports.ActionsBarWrapper = ActionsBarWrapper;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("../../../styles");
+
+var _templateObject;
+
+var actionsBarClassName = 'media-card-actions-bar';
+exports.actionsBarClassName = actionsBarClassName;
+var fixedActionBarStyles = "opacity: 1;";
+exports.fixedActionBarStyles = fixedActionBarStyles;
+
+var wrapperStyles = function wrapperStyles(isFixed) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;', (0, _styles.transition)());
+};
+
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Blanket = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var Blanket = function Blanket(props) {
+  var isFixed = props.isFixed;
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.blanketStyles)(isFixed),
+    className: _styles.blanketClassName
+  });
+};
+
+exports.Blanket = Blanket;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("../../../styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject;
+
+var blanketClassName = 'media-card-blanket';
+exports.blanketClassName = blanketClassName;
+var fixedBlanketStyles = "background-color: ".concat(_colors.N90A, ";");
+exports.fixedBlanketStyles = fixedBlanketStyles;
+
+var blanketStyles = function blanketStyles(isFixed) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.transition)(), isFixed ? fixedBlanketStyles : '');
+};
+
+exports.blanketStyles = blanketStyles;
+blanketStyles.displayName = 'Blanket';

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMessageWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var IconMessageWrapper = function IconMessageWrapper(props) {
+  var animated = props.animated,
+      reducedFont = props.reducedFont;
+  return (0, _react.jsx)("div", {
+    id: "iconMessageWrapper",
+    css: (0, _styles.iconMessageWrapperStyles)({
+      animated: animated,
+      reducedFont: reducedFont
+    })
+  }, props.children);
+};
+
+exports.IconMessageWrapper = IconMessageWrapper;