@atlaskit/media-card 75.0.1 → 76.0.0

package/dist/esm/card/cardView.js

@@ -13,21 +13,16 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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 { messages } from '@atlaskit/media-ui';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-import { FileCardImageView } from './cardImageView';
-import { breakpointSize } from '../utils/breakpoint';
-import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
+import { defaultImageCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
-import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from './actions';
-import { getErrorMessage } from '../utils/getErrorMessage';
 import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
@@ -40,8 +35,8 @@ import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isUploadError } from '../errors';
-import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
-import { Wrapper } from './cardImageView/cardViewWrapper';
+import { Wrapper } from './ui/wrapper';
+import { fileCardImageViewSelector } from './classnames';
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -102,110 +97,18 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "renderFileNewExperience", function () {
+    _defineProperty(_assertThisInitialized(_this), "getRenderConfigByStatus", function () {
       var _this$props2 = _this.props,
-        dimensions = _this$props2.dimensions,
-        appearance = _this$props2.appearance,
-        onClick = _this$props2.onClick,
-        onMouseEnter = _this$props2.onMouseEnter,
-        testId = _this$props2.testId,
-        metadata = _this$props2.metadata,
+        cardPreview = _this$props2.cardPreview,
         status = _this$props2.status,
-        selected = _this$props2.selected,
-        selectable = _this$props2.selectable,
+        metadata = _this$props2.metadata,
         disableOverlay = _this$props2.disableOverlay,
-        cardPreview = _this$props2.cardPreview,
-        mediaCardCursor = _this$props2.mediaCardCursor;
+        error = _this$props2.error,
+        selectable = _this$props2.selectable,
+        disableAnimation = _this$props2.disableAnimation;
       var _ref = metadata || {},
-        name = _ref.name;
-      var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
-      var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
-      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-      // Disable tooltip for Media Single
-      var shouldDisplayTooltip = !disableOverlay;
-      return jsx(NewFileExperienceWrapper, {
-        testId: testId || 'media-card-view',
-        dimensions: dimensions,
-        appearance: appearance,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        innerRef: _this.divRef,
-        breakpoint: _this.breakpoint,
-        mediaCardCursor: mediaCardCursor,
-        disableOverlay: !!disableOverlay,
-        selected: !!selected,
-        displayBackground: shouldDisplayBackground,
-        isPlayButtonClickable: isPlayButtonClickable,
-        isTickBoxSelectable: isTickBoxSelectable,
-        shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? jsx(Tooltip, {
-        content: name,
-        position: "bottom",
-        tag: 'div'
-      }, _this.renderNewExperienceCard()) : _this.renderNewExperienceCard());
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderFile", function () {
-      var _this$props3 = _this.props,
-        cardPreview = _this$props3.cardPreview,
-        status = _this$props3.status,
-        mediaItemType = _this$props3.mediaItemType,
-        metadata = _this$props3.metadata,
-        progress = _this$props3.progress,
-        resizeMode = _this$props3.resizeMode,
-        dimensions = _this$props3.dimensions,
-        selectable = _this$props3.selectable,
-        selected = _this$props3.selected,
-        disableOverlay = _this$props3.disableOverlay,
-        alt = _this$props3.alt,
-        onDisplayImage = _this$props3.onDisplayImage,
-        actions = _this$props3.actions;
-      var _ref2 = cardPreview || {},
-        dataURI = _ref2.dataURI,
-        orientation = _ref2.orientation;
-      var _ref3 = metadata || {},
-        name = _ref3.name,
-        mediaType = _ref3.mediaType,
-        mimeType = _ref3.mimeType,
-        size = _ref3.size;
-      var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-      var errorMessage = getErrorMessage(status);
-      var fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return jsx(FileCardImageView, {
-        error: errorMessage,
-        dimensions: dimensions,
-        selectable: selectable,
-        selected: selected,
-        dataURI: dataURI,
-        mediaName: name,
-        mediaType: mediaType,
-        mimeType: mimeType,
-        fileSize: fileSize,
-        status: status,
-        mediaItemType: mediaItemType,
-        progress: progress,
-        resizeMode: resizeMode,
-        onDisplayImage: onDisplayImage,
-        actions: actionsWithDetails,
-        disableOverlay: disableOverlay,
-        previewOrientation: orientation,
-        alt: alt,
-        onImageLoad: _this.onImageLoad,
-        onImageError: _this.onImageError,
-        cardPreview: cardPreview
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getRenderConfigByStatus", function () {
-      var _this$props4 = _this.props,
-        cardPreview = _this$props4.cardPreview,
-        status = _this$props4.status,
-        metadata = _this$props4.metadata,
-        disableOverlay = _this$props4.disableOverlay,
-        error = _this$props4.error,
-        selectable = _this$props4.selectable,
-        disableAnimation = _this$props4.disableAnimation;
-      var _ref4 = metadata || {},
-        name = _ref4.name,
-        mediaType = _ref4.mediaType;
+        name = _ref.name,
+        mediaType = _ref.mediaType;
       var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
@@ -241,8 +144,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
           var iconMessage;
           var customTitleMessage;
-          var _ref5 = error || {},
-            secondaryError = _ref5.secondaryError;
+          var _ref2 = error || {},
+            secondaryError = _ref2.secondaryError;
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
             iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
@@ -275,7 +178,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "renderNewExperienceCard", function () {
+    _defineProperty(_assertThisInitialized(_this), "renderContents", function () {
       var _this$getRenderConfig = _this.getRenderConfigByStatus(),
         renderTypeIcon = _this$getRenderConfig.renderTypeIcon,
         iconMessage = _this$getRenderConfig.iconMessage,
@@ -289,18 +192,18 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         renderTickBox = _this$getRenderConfig.renderTickBox,
         isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
         customTitleMessage = _this$getRenderConfig.customTitleMessage;
-      var _this$props5 = _this.props,
-        progress = _this$props5.progress,
-        selected = _this$props5.selected,
-        status = _this$props5.status,
-        metadata = _this$props5.metadata;
-      var _ref6 = metadata || {},
-        name = _ref6.name;
+      var _this$props3 = _this.props,
+        progress = _this$props3.progress,
+        selected = _this$props3.selected,
+        status = _this$props3.status,
+        metadata = _this$props3.metadata;
+      var _ref3 = metadata || {},
+        name = _ref3.name;
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return jsx(React.Fragment, null, jsx("div", {
         css: cardImageContainerStyles,
-        className: "media-file-card-view",
-        "data-testid": "media-file-card-view",
+        className: fileCardImageViewSelector,
+        "data-testid": fileCardImageViewSelector,
         "data-test-media-name": name,
         "data-test-status": status,
         "data-test-progress": progress,
@@ -318,8 +221,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref7) {
-      var prevCardPreview = _ref7.cardPreview;
+    value: function componentDidUpdate(_ref4) {
+      var prevCardPreview = _ref4.cardPreview;
       var cardPreview = this.props.cardPreview;
       // We should only switch didImageRender to false
       // when cardPreview goes undefined, not when it is updated.
@@ -329,71 +232,30 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         didImageRender: false
       });
     }
-  }, {
-    key: "width",
-    get:
-    // This width is only used to calculate breakpoints, dimensions are passed down as
-    // integrator pass it to the root component
-    function get() {
-      var elementWidth = this.state.elementWidth;
-      if (elementWidth) {
-        return elementWidth;
-      }
-      var _ref8 = this.props.dimensions || {
-          width: undefined
-        },
-        width = _ref8.width;
-      if (!width) {
-        return defaultImageCardDimensions.width;
-      }
-      return getCSSUnitValue(width);
-    }
   }, {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
       return calcBreakpointSize(parseInt("".concat(width), 10));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var featureFlags = this.props.featureFlags;
-      if (getMediaFeatureFlag('newCardExperience', featureFlags)) {
-        return this.renderFileNewExperience();
-      }
-      var _this$props6 = this.props,
-        dimensions = _this$props6.dimensions,
-        appearance = _this$props6.appearance,
-        onClick = _this$props6.onClick,
-        onMouseEnter = _this$props6.onMouseEnter,
-        testId = _this$props6.testId;
-      var wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-      return jsx(Wrapper, {
-        testId: testId || 'media-card-view',
-        shouldUsePointerCursor: true,
-        breakpointSize: breakpointSize(this.width),
-        dimensions: wrapperDimensions,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        innerRef: this.divRef
-      }, this.renderFile());
-    }
   }, {
     key: "renderSpinner",
     value: function renderSpinner(hasTitleBox) {
       return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
-      }, jsx(SpinnerIcon, null));
+      }, jsx(SpinnerIcon, {
+        testId: 'media-card-loading'
+      }));
     }
   }, {
     key: "shouldRenderPlayButton",
     value: function shouldRenderPlayButton() {
-      var _this$props7 = this.props,
-        metadata = _this$props7.metadata,
-        cardPreview = _this$props7.cardPreview;
-      var _ref9 = metadata || {},
-        mediaType = _ref9.mediaType;
+      var _this$props4 = this.props,
+        metadata = _this$props4.metadata,
+        cardPreview = _this$props4.cardPreview;
+      var _ref5 = metadata || {},
+        mediaType = _ref5.mediaType;
       if (mediaType !== 'video' || !cardPreview) {
         return false;
       }
@@ -420,13 +282,13 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTitleBox",
     value: function renderTitleBox() {
-      var _this$props8 = this.props,
-        metadata = _this$props8.metadata,
-        titleBoxBgColor = _this$props8.titleBoxBgColor,
-        titleBoxIcon = _this$props8.titleBoxIcon;
-      var _ref10 = metadata || {},
-        name = _ref10.name,
-        createdAt = _ref10.createdAt;
+      var _this$props5 = this.props,
+        metadata = _this$props5.metadata,
+        titleBoxBgColor = _this$props5.titleBoxBgColor,
+        titleBoxIcon = _this$props5.titleBoxIcon;
+      var _ref6 = metadata || {},
+        name = _ref6.name,
+        createdAt = _ref6.createdAt;
       return !!name && jsx(TitleBox, {
         name: name,
         createdAt: createdAt,
@@ -456,17 +318,17 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderImageRenderer",
     value: function renderImageRenderer() {
-      var _this$props9 = this.props,
-        cardPreview = _this$props9.cardPreview,
-        _this$props9$metadata = _this$props9.metadata,
-        _this$props9$metadata2 = _this$props9$metadata === void 0 ? {} : _this$props9$metadata,
-        _this$props9$metadata3 = _this$props9$metadata2.mediaType,
-        mediaType = _this$props9$metadata3 === void 0 ? 'unknown' : _this$props9$metadata3,
-        alt = _this$props9.alt,
-        resizeMode = _this$props9.resizeMode,
-        onDisplayImage = _this$props9.onDisplayImage,
-        nativeLazyLoad = _this$props9.nativeLazyLoad,
-        forceSyncDisplay = _this$props9.forceSyncDisplay;
+      var _this$props6 = this.props,
+        cardPreview = _this$props6.cardPreview,
+        _this$props6$metadata = _this$props6.metadata,
+        _this$props6$metadata2 = _this$props6$metadata === void 0 ? {} : _this$props6$metadata,
+        _this$props6$metadata3 = _this$props6$metadata2.mediaType,
+        mediaType = _this$props6$metadata3 === void 0 ? 'unknown' : _this$props6$metadata3,
+        alt = _this$props6.alt,
+        resizeMode = _this$props6.resizeMode,
+        onDisplayImage = _this$props6.onDisplayImage,
+        nativeLazyLoad = _this$props6.nativeLazyLoad,
+        forceSyncDisplay = _this$props6.forceSyncDisplay;
       return !!cardPreview && jsx(ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
@@ -491,10 +353,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderMediaTypeIcon",
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
-      var _ref11 = metadata || {},
-        mediaType = _ref11.mediaType,
-        mimeType = _ref11.mimeType,
-        name = _ref11.name;
+      var _ref7 = metadata || {},
+        mediaType = _ref7.mediaType,
+        mimeType = _ref7.mimeType,
+        name = _ref7.name;
       return jsx(IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
@@ -508,10 +370,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderActionsBar",
     value: function renderActionsBar() {
-      var _this$props10 = this.props,
-        disableOverlay = _this$props10.disableOverlay,
-        actions = _this$props10.actions,
-        metadata = _this$props10.metadata;
+      var _this$props7 = this.props,
+        disableOverlay = _this$props7.disableOverlay,
+        actions = _this$props7.actions,
+        metadata = _this$props7.metadata;
       var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       if (disableOverlay || !actions || actions.length === 0) {
         return null;
@@ -520,6 +382,50 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         actions: actionsWithDetails
       });
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props8 = this.props,
+        dimensions = _this$props8.dimensions,
+        appearance = _this$props8.appearance,
+        onClick = _this$props8.onClick,
+        onMouseEnter = _this$props8.onMouseEnter,
+        testId = _this$props8.testId,
+        metadata = _this$props8.metadata,
+        status = _this$props8.status,
+        selected = _this$props8.selected,
+        selectable = _this$props8.selectable,
+        disableOverlay = _this$props8.disableOverlay,
+        cardPreview = _this$props8.cardPreview,
+        mediaCardCursor = _this$props8.mediaCardCursor;
+      var _ref8 = metadata || {},
+        name = _ref8.name;
+      var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+      var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
+      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+      // Disable tooltip for Media Single
+      var shouldDisplayTooltip = !disableOverlay;
+      return jsx(Wrapper, {
+        testId: testId || 'media-card-view',
+        dimensions: dimensions,
+        appearance: appearance,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        innerRef: this.divRef,
+        breakpoint: this.breakpoint,
+        mediaCardCursor: mediaCardCursor,
+        disableOverlay: !!disableOverlay,
+        selected: !!selected,
+        displayBackground: shouldDisplayBackground,
+        isPlayButtonClickable: isPlayButtonClickable,
+        isTickBoxSelectable: isTickBoxSelectable,
+        shouldDisplayTooltip: shouldDisplayTooltip
+      }, shouldDisplayTooltip ? jsx(Tooltip, {
+        content: name,
+        position: "bottom",
+        tag: 'div'
+      }, this.renderContents()) : this.renderContents());
+    }
   }]);
   return CardViewBase;
 }(React.Component);

package/dist/esm/card/getCardStatus.js

@@ -1,42 +1,9 @@
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export var isFinalCardStatus = function isFinalCardStatus(status) {
   return ['complete', 'error', 'failed-processing'].includes(status);
 };
-var getCardStatusBuggy = function getCardStatusBuggy(fileStatus, _ref) {
-  var hasFilesize = _ref.hasFilesize,
-    isPreviewable = _ref.isPreviewable,
+export var getCardStatus = function getCardStatus(fileStatus, _ref) {
+  var isPreviewable = _ref.isPreviewable,
     hasPreview = _ref.hasPreview;
-  switch (fileStatus) {
-    case 'uploading':
-    case 'failed-processing':
-    case 'error':
-      return fileStatus;
-    case 'processing':
-      // Legacy empty files logic
-      // isPreviewable will most likely be false for empty files,
-      // therefore we need to do this cut before that check.
-      // TODO: https://product-fabric.atlassian.net/browse/BMPT-1247
-      if (!hasFilesize) {
-        return 'processing';
-      }
-      // If we show no preview for this file
-      // we won't show the "creating preview" message, i.e. Card is "complete".
-      if (!isPreviewable) {
-        return 'complete';
-      }
-      return 'processing';
-    case 'processed':
-      if (!isPreviewable || !hasPreview) {
-        return 'complete';
-      }
-      return 'loading-preview';
-    default:
-      return 'loading';
-  }
-};
-var getCardStatusFixed = function getCardStatusFixed(fileStatus, _ref2) {
-  var isPreviewable = _ref2.isPreviewable,
-    hasPreview = _ref2.hasPreview;
   switch (fileStatus) {
     case 'uploading':
     case 'failed-processing':
@@ -51,10 +18,4 @@ var getCardStatusFixed = function getCardStatusFixed(fileStatus, _ref2) {
     default:
       return 'loading';
   }
-};
-export var getCardStatus = function getCardStatus(fileStatus, filePreviewStatus, featureFlags) {
-  if (getMediaFeatureFlag('fetchFileStateAfterUpload', featureFlags)) {
-    return getCardStatusFixed(fileStatus, filePreviewStatus);
-  }
-  return getCardStatusBuggy(fileStatus, filePreviewStatus);
 };

package/dist/esm/card/inlinePlayerWrapper.js

@@ -1,6 +1,6 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles/styles';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './inlinePlayerWrapperStyles';
 export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
   var testId = props.testId,
     selected = props.selected,

package/dist/esm/card/inlinePlayerWrapperStyles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+import { getSelectionStyles, SelectionStyle, hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+
+/*
+ * Used to display the blue border around a selected card without
+ * shrinking the image OR growing the card size
+ */
+var getSelectedBorderStyle = function getSelectedBorderStyle(_ref) {
+  var selected = _ref.selected;
+  return "\n    ".concat(hideNativeBrowserTextSelectionStyles, "\n\n    &::after {\n      content: '';\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      top: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n      ").concat(borderRadius, "\n      ").concat(selected ? getSelectionStyles([SelectionStyle.Border]) : '', "\n    }\n  ");
+};
+export var inlinePlayerClassName = 'media-card-inline-player';
+export var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
+  var dimensions = _ref2.dimensions,
+    selected = _ref2.selected;
+  return css(_templateObject || (_templateObject = _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/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "75.0.1";
+var packageVersion = "76.0.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -6,7 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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); }; }
 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; } }
 import React from 'react';
-import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
+import { CardActionIconButtonVariant, CardActionsView } from './cardActions';
 import { ActionsBarWrapper } from './actionsBarWrapper';
 export var ActionsBar = /*#__PURE__*/function (_React$Component) {
   _inherits(ActionsBar, _React$Component);

package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.js

@@ -13,7 +13,7 @@ import { Component } from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../analytics';
+import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
 import { CardActionButton } from './cardActionButton';
 var CardActionButtonWithAnalytics = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({

package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionsView.js

@@ -11,8 +11,8 @@ import { Component } from 'react';
 import { CardActionIconButton } from './cardActionIconButton';
 import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
-import { PreventClickThrough } from '../preventClickThrough';
-import { createAndFireMediaCardEvent } from '../analytics';
+import { PreventClickThrough } from '../../../../utils/preventClickThrough';
+import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 var CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
   return jsx(CardActionIconButton, props);

package/dist/esm/{utils → card/ui/actionsBar}/cardActions/styles.js

@@ -1,11 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
-import { rootStyles } from '../../card/styles';
-import { rgba } from '../../card/styles/mixins';
-export var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
+import { rgba } from '../../styles';
+import { fontFamily } from '@atlaskit/theme/constants';
+var rootStyles = function rootStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
+};
+export var wrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
 export var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -16,5 +19,5 @@ var getVariantStyles = function getVariantStyles(variant) {
 };
 export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
 };

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

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 export var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {

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

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export var blanketClassName = 'media-card-blanket';
 export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");

package/dist/esm/card/ui/imageRenderer/imageRenderer.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
+import { resizeModeToMediaImageProps } from './resizeModeToMediaImageProps';
 export var ImageRenderer = function ImageRenderer(_ref) {
   var cardPreview = _ref.cardPreview,
     alt = _ref.alt,

package/dist/esm/card/ui/progressBar/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
-import { rgba } from '../../styles/mixins';
+import { rgba } from '../styles';
 import { N0 } from '@atlaskit/theme/colors';
 import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 var height = 3;

package/dist/esm/card/ui/styles.js

@@ -61,4 +61,16 @@ export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTi
   }
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
-export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+var defaultTransitionDuration = '.3s';
+export var transition = function transition() {
+  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
+  return "\n  transition: ".concat(propertyName, " ").concat(defaultTransitionDuration, ";\n");
+};
+var hexToRgb = function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
+};
+export var rgba = function rgba(hex, opacity) {
+  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
+};

package/dist/esm/card/ui/tickBox/styles.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { transition } from '../../styles';
+import { transition } from '../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';
 export var tickBoxClassName = 'media-card-tickbox';
 export var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(N100, ")"), ";\n");