@atlaskit/media-card 75.0.1 → 76.0.1

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

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
-import { rgba } from '../../styles/mixins';
+import { rgba } from '../styles';
 import { themed } from '@atlaskit/theme/components';
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;

package/dist/esm/card/ui/wrapper/index.js

@@ -0,0 +1 @@
+export { Wrapper } from './wrapper';

package/dist/esm/card/ui/{newFileExperience → wrapper}/styles.js

@@ -6,12 +6,12 @@ import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { themed } from '@atlaskit/theme/components';
-import { transition } from '../../styles';
+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';
 var BACKGROUND_COLOR_DARK = '#22272C';
-export var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
+export var wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
     appearance = _ref.appearance,
@@ -30,4 +30,4 @@ export var newFileExperienceWrapperStyles = function newFileExperienceWrapperSty
     theme: theme
   }), ";"), 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';
+wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/esm/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js}

@@ -1,9 +1,9 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
-import { newFileExperienceWrapperStyles } from './styles';
+import { wrapperStyles } from './styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
+export var Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
     appearance = props.appearance,
@@ -23,7 +23,7 @@ export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
     "data-testid": testId,
-    css: newFileExperienceWrapperStyles({
+    css: wrapperStyles({
       breakpoint: breakpoint,
       dimensions: dimensions,
       appearance: appearance,

package/dist/esm/classnames.js

@@ -2,4 +2,4 @@
  * Entry Point: @atlaskit/media-card/classnames
  * tsconfig.entry-points.json
  */
-export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './card/cardImageView/classnames';
+export { fileCardImageViewSelector } from './card/classnames';

package/dist/esm/index.js

@@ -8,6 +8,6 @@ export { MediaInlineCard } from './inline';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
-export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './card/cardImageView/classnames';
-export { inlinePlayerClassName } from './card/styles/styles';
+export { fileCardImageViewSelector } from './card/classnames';
+export { inlinePlayerClassName } from './card/inlinePlayerWrapperStyles';
 export { newFileExperienceClassName } from './card/cardConstants';

package/dist/esm/inline/loader.js

@@ -12,6 +12,7 @@ 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; } }
 import React from 'react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(MediaInlineCardLoader, _React$PureComponent);
   var _super = _createSuper(MediaInlineCardLoader);
@@ -22,7 +23,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "mounted", false);
     _defineProperty(_assertThisInitialized(_this), "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -37,7 +38,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              this.isMounted = true;
+              this.mounted = true;
               if (this.state.MediaInlineCard) {
                 _context.next = 17;
                 break;
@@ -53,7 +54,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
               mediaInlineErrorBoundaryModule = _yield$Promise$all2[2];
               MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
               MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
-              if (this.isMounted) {
+              if (this.mounted) {
                 this.setState({
                   MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
                   ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -82,7 +83,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              this.isMounted = false;
+              this.mounted = false;
             case 1:
             case "end":
               return _context2.stop();
@@ -100,14 +101,22 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         MediaInlineCard = _this$state.MediaInlineCard,
         ErrorBoundary = _this$state.ErrorBoundary;
+      var analyticsContext = {
+        packageVersion: "@atlaskit/media-card",
+        packageName: "76.0.1",
+        componentName: 'mediaInlineCard',
+        component: 'mediaInlineCard'
+      };
       if (!MediaInlineCard || !ErrorBoundary) {
         return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
           message: ""
         });
       }
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: analyticsContext
+      }, /*#__PURE__*/React.createElement(ErrorBoundary, {
         isSelected: this.props.isSelected
-      }, /*#__PURE__*/React.createElement(MediaInlineCard, this.props));
+      }, /*#__PURE__*/React.createElement(MediaInlineCard, this.props)));
     }
   }]);
   return MediaInlineCardLoader;

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -10,7 +10,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -119,12 +118,5 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
   return WrappedMediaInlineAnalyticsErrorBoundary;
 }(React.Component);
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
-var packageName = "@atlaskit/media-card";
-var packageVersion = "75.0.1";
-var MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
-  packageVersion: packageVersion,
-  packageName: packageName,
-  componentName: 'mediaInlineCard',
-  component: 'mediaInlineCard'
-})(withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary));
+var MediaInlineAnalyticsErrorBoundary = withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary);
 export default MediaInlineAnalyticsErrorBoundary;

package/dist/esm/inline/mediaInlineCard.js

@@ -1,12 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { FileFetcherError } from '@atlaskit/media-client';
 import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import Tooltip from '@atlaskit/tooltip';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
+import { fireMediaCardEvent } from '../utils/analytics';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MediaCardError } from '../errors';
+import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 // UI component which renders an inline link in the appropiate state based on a media file
 export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
@@ -21,14 +26,36 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
     setFileState = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    isErrored = _useState4[0],
-    setIsErrored = _useState4[1];
+    subscribeError = _useState4[0],
+    setSubscribeError = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isMediaViewerVisible = _useState6[0],
-    setMediaViewerVisible = _useState6[1];
+    isSucceededEventSent = _useState6[0],
+    setIsSucceededEventSent = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFailedEventSent = _useState8[0],
+    setIsFailedEventSent = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMediaViewerVisible = _useState10[0],
+    setMediaViewerVisible = _useState10[1];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
+    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new MediaCardError('missing-error-data');
+    var failReason = arguments.length > 1 ? arguments[1] : undefined;
+    var payload = failReason ? getFailedProcessingStatusPayload(fileState) : getErrorStatusPayload(error, fileState);
+    setIsFailedEventSent(true);
+    fireMediaCardEvent(payload, createAnalyticsEvent);
+  };
+  var fireSucceededOperationalEvent = function fireSucceededOperationalEvent() {
+    var payload = getSucceededStatusPayload(fileState);
+    setIsSucceededEventSent(true);
+    fireMediaCardEvent(payload, createAnalyticsEvent);
+  };
   var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (onClick) {
       var inlineCardEvent = {
@@ -70,25 +97,45 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     }).subscribe({
       next: function next(fileState) {
         setFileState(fileState);
-        setIsErrored(false);
+        setSubscribeError(undefined);
       },
-      error: function error() {
-        setIsErrored(true);
+      error: function error(e) {
+        setSubscribeError(e);
       }
     });
     return function () {
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (isErrored && (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+  if (subscribeError) {
+    var errorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? messages.failed_to_upload : messages.couldnt_load_file;
+    var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+    !isFailedEventSent && fireFailedOperationalEvent(new MediaCardError(errorReason, subscribeError));
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: (intl || defaultIntl).formatMessage(messages.failed_to_upload),
+      message: (intl || defaultIntl).formatMessage(errorMessage),
+      isSelected: isSelected
+    });
+  }
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    var error = new MediaCardError('error-file-state', new Error(fileState.message));
+    !isFailedEventSent && fireFailedOperationalEvent(error);
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
-  if (isErrored || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing' ||
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
   // Empty file handling
-  fileState && !fileState.name) {
+  if (fileState && !fileState.name) {
+    var _error = new MediaCardError('metadata-fetch', new FileFetcherError('emptyFileName', fileState.id));
+    !isFailedEventSent && fireFailedOperationalEvent(_error);
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
       message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
@@ -126,6 +173,9 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
       locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
     formattedDate = formatDate(fileState.createdAt, locale);
   }
+  if (fileState.status === 'processed' && !isSucceededEventSent) {
+    fireSucceededOperationalEvent();
+  }
   if (shouldDisplayToolTip === undefined || shouldDisplayToolTip === true) {
     return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
       position: "bottom",

package/dist/esm/inline/mediaInlineCardAnalytics.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { extractErrorInfo } from '../utils/analytics';
+export var getSucceededStatusPayload = function getSucceededStatusPayload(fileState) {
+  return {
+    eventType: 'operational',
+    action: 'succeeded',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'success',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileSize: fileState === null || fileState === void 0 ? void 0 : fileState.size,
+        fileMediatype: fileState === null || fileState === void 0 ? void 0 : fileState.mediaType,
+        fileMimetype: fileState === null || fileState === void 0 ? void 0 : fileState.mimeType,
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      }
+    }
+  };
+};
+export var getErrorStatusPayload = function getErrorStatusPayload(error, fileState) {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: _objectSpread({
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      }
+    }, extractErrorInfo(error))
+  };
+};
+export var getFailedProcessingStatusPayload = function getFailedProcessingStatusPayload(fileState) {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      },
+      failReason: 'failed-processing'
+    }
+  };
+};

package/dist/esm/utils/cardDimensions.js

@@ -1,9 +1,3 @@
-// Default dimensions
-
-export var defaultSmallCardDimensions = {
-  width: '100%',
-  height: 42
-};
 export var defaultImageCardDimensions = {
   width: 156,
   height: 125
@@ -16,76 +10,6 @@ export var defaultSquareCardDimensions = {
   width: 300,
   height: 300
 };
-
-// Small dimensions
-
-export var minSmallCardDimensions = {
-  width: 200,
-  height: 32
-};
-export var minImageCardDimensions = {
-  width: 144,
-  height: 96
-};
-export var minSquareCardDimensions = {
-  width: 272,
-  height: 275
-};
-export var minHorizontalCardDimensions = {
-  width: 400,
-  height: 125
-};
-
-// Max dimensions
-
-export var maxImageCardDimensions = {
-  width: 480,
-  height: 360
-};
-export var maxHorizontalCardDimensions = {
-  width: 400,
-  height: 116
-};
-export var maxSquareCardDimensions = {
-  width: 400,
-  height: 348
-};
-export var getCardMaxHeight = function getCardMaxHeight(appearance) {
-  if (appearance === 'image') {
-    return maxImageCardDimensions.height;
-  }
-  if (appearance === 'horizontal') {
-    return maxHorizontalCardDimensions.height;
-  }
-  if (appearance === 'square') {
-    return maxSquareCardDimensions.height;
-  }
-  return maxSquareCardDimensions.width;
-};
-export var getCardMinWidth = function getCardMinWidth(appearance) {
-  if (appearance === 'image') {
-    return minImageCardDimensions.width;
-  }
-  if (appearance === 'horizontal') {
-    return minHorizontalCardDimensions.width;
-  }
-  if (appearance === 'square') {
-    return minSquareCardDimensions.width;
-  }
-  return minSmallCardDimensions.width;
-};
-export var getCardMaxWidth = function getCardMaxWidth(appearance) {
-  if (appearance === 'image') {
-    return maxImageCardDimensions.width;
-  }
-  if (appearance === 'horizontal') {
-    return maxHorizontalCardDimensions.width;
-  }
-  if (appearance === 'square') {
-    return maxSquareCardDimensions.width;
-  }
-  return maxSquareCardDimensions.width;
-};
 export var getDefaultCardDimensions = function getDefaultCardDimensions(appearance) {
   if (appearance === 'image') {
     return defaultImageCardDimensions;

package/dist/esm/utils/index.js

@@ -1,9 +1,5 @@
-export { ErrorIcon } from './errorIcon';
-export { FileIcon } from './fileIcon';
-export { CardActionIconButton, CardActionsDropdownMenu, CardActionsView, default } from './cardActions';
 export { isRetina } from './isRetina';
-export { defaultHorizontalCardDimensions, defaultImageCardDimensions, defaultSmallCardDimensions, defaultSquareCardDimensions, getCardMaxHeight, getCardMaxWidth, getCardMinWidth, getDefaultCardDimensions, maxHorizontalCardDimensions, maxImageCardDimensions, maxSquareCardDimensions, minHorizontalCardDimensions, minImageCardDimensions, minSmallCardDimensions, minSquareCardDimensions } from './cardDimensions';
-export { breakpointSize, breakpointStyles, cardBreakpointSizes } from './breakpoint';
+export { defaultHorizontalCardDimensions, defaultImageCardDimensions, defaultSquareCardDimensions, getDefaultCardDimensions } from './cardDimensions';
 export { isValidPercentageUnit } from './isValidPercentageUnit';
 export { getElementDimension } from './getElementDimension';
 export { containsPixelUnit } from './containsPixelUnit';

package/dist/esm/utils/lightCards/cardError.js

@@ -8,7 +8,7 @@ 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; } }
 import React from 'react';
 import { Component } from 'react';
-import { ErrorIcon } from '../errorIcon';
+import { ErrorIcon } from './errorIcon';
 import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export var CardError = /*#__PURE__*/function (_Component) {

package/dist/esm/utils/lightCards/cardLoading.js

@@ -8,10 +8,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
+import { Wrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
-import FileIcon from '@atlaskit/icon/glyph/file';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export var CardLoading = /*#__PURE__*/function (_Component) {
   _inherits(CardLoading, _Component);
   var _super = _createSuper(CardLoading);
@@ -24,24 +22,13 @@ export var CardLoading = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         dimensionsProp = _this$props.dimensions,
-        testId = _this$props.testId,
-        featureFlags = _this$props.featureFlags;
+        testId = _this$props.testId;
       var dimensions = getDimensionsWithDefault(dimensionsProp);
-      if (getMediaFeatureFlag('newCardExperience', featureFlags)) {
-        return /*#__PURE__*/React.createElement(Wrapper, {
-          "data-testid": testId || 'media-card-loading',
-          "data-test-loading": true,
-          dimensions: dimensions
-        }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
-      }
-      return /*#__PURE__*/React.createElement(AnimatedWrapper, {
+      return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": testId || 'media-card-loading',
         "data-test-loading": true,
         dimensions: dimensions
-      }, /*#__PURE__*/React.createElement(FileIcon, {
-        label: "loading",
-        size: "medium"
-      }));
+      }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
     }
   }]);
   return CardLoading;

package/dist/esm/utils/lightCards/lightCardWrappers.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { wrapperStyles } from './styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 export var Wrapper = function Wrapper(props) {
   var theme = useGlobalTheme();
@@ -11,13 +11,4 @@ export var Wrapper = function Wrapper(props) {
       theme: theme
     })
   }, props), props.children);
-};
-export var AnimatedWrapper = function AnimatedWrapper(props) {
-  var theme = useGlobalTheme();
-  return jsx("div", _extends({
-    css: animatedWrapperStyles({
-      dimensions: props.dimensions,
-      theme: theme
-    })
-  }, props), props.children);
 };

package/dist/esm/utils/lightCards/styles.js

@@ -1,14 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
-import { css, keyframes } from '@emotion/react';
+var _templateObject;
+import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
-export var blinkLoadingAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
 export var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions,
     theme = _ref.theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
     light: "var(--ds-background-neutral, ".concat(N20, ")"),
     dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })({
@@ -19,7 +18,4 @@ export var wrapperStyles = function wrapperStyles(_ref) {
   })({
     theme: theme
   }), borderRadius, dimensions.width, dimensions.height);
-};
-export var animatedWrapperStyles = function animatedWrapperStyles(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), wrapperStyles(props), blinkLoadingAnimation);
 };

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "75.0.1";
+var packageVersion = "76.0.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "75.0.1",
+	"version": "76.0.1",
 	"sideEffects": false
 }

package/dist/types/card/cardView.d.ts

@@ -57,10 +57,8 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     componentDidUpdate({ cardPreview: prevCardPreview }: CardViewProps): void;
     private onImageLoad;
     private onImageError;
-    private get width();
     private get breakpoint();
-    saveElementWidth: () => void;
-    render(): jsx.JSX.Element;
+    private saveElementWidth;
     private renderSpinner;
     private shouldRenderPlayButton;
     private renderPlayButton;
@@ -72,9 +70,8 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private renderTickBox;
     private renderMediaTypeIcon;
     private renderActionsBar;
-    private renderFileNewExperience;
-    private renderFile;
+    render(): jsx.JSX.Element;
     private getRenderConfigByStatus;
-    private renderNewExperienceCard;
+    private renderContents;
 }
 export declare const CardView: React.ForwardRefExoticComponent<Pick<Omit<CardViewProps, keyof WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<CardViewProps, keyof WithAnalyticsEventsProps>, keyof CardViewOwnProps>> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;

package/dist/types/card/getCardStatus.d.ts

@@ -1,5 +1,4 @@
 import { FileStatus } from '@atlaskit/media-client';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { CardStatus, FilePreviewStatus } from '../types';
 export declare const isFinalCardStatus: (status: CardStatus) => boolean;
-export declare const getCardStatus: (fileStatus: FileStatus, filePreviewStatus: FilePreviewStatus, featureFlags?: MediaFeatureFlags) => CardStatus;
+export declare const getCardStatus: (fileStatus: FileStatus, { isPreviewable, hasPreview }: FilePreviewStatus) => CardStatus;

package/dist/{types-ts4.5/card/styles/styles.d.ts → types/card/inlinePlayerWrapperStyles.d.ts}

@@ -1,9 +1,5 @@
-import { InlinePlayerWrapperProps, WrapperProps } from '../types';
+import { InlinePlayerWrapperProps } from './types';
 export declare const inlinePlayerClassName = "media-card-inline-player";
-export declare const wrapperStyles: {
-    ({ dimensions, breakpointSize, shouldUsePointerCursor, }: WrapperProps): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};
 export declare const inlinePlayerWrapperStyles: {
     ({ dimensions, selected, }: InlinePlayerWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;

package/dist/types/card/types.d.ts

@@ -1,17 +1,6 @@
-import React, { MouseEvent, ReactElement, RefObject } from 'react';
+import React, { ReactElement, RefObject } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions } from '../types';
-import { BreakpointSizeValue } from '../utils/breakpoint';
-export interface WrapperProps {
-    testId?: string;
-    shouldUsePointerCursor?: boolean;
-    dimensions?: CardDimensions;
-    breakpointSize?: BreakpointSizeValue;
-    onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
-    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
-    innerRef?: RefObject<HTMLDivElement>;
-    children?: JSX.Element;
-}
 export type InlinePlayerWrapperProps = {
     testId?: string;
     dimensions?: CardDimensions;

package/dist/{types-ts4.5/utils → types/card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { CardAction } from '../../card/actions';
+import { CardAction } from '../../../actions';
 import { CardActionIconButtonVariant } from './styles';
 export type CardActionsDropdownMenuProps = {
     readonly actions: CardAction[];

package/dist/{types-ts4.5/utils → types/card/ui/actionsBar}/cardActions/cardActionsView.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { CardAction } from '../../card/actions';
+import { CardAction } from '../../../actions';
 import { CardActionIconButtonVariant } from './styles';
 export interface CardActionsViewProps {
     readonly actions: CardAction[];