@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/cjs/utils/errorIcon/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,15 +19,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _react = require("@emotion/react");
 
-var _styled = require("./styled");
+var _react2 = require("react");
 
-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); }
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
-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; }
+var _styles = require("./styles");
 
 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); }; }
 
@@ -49,14 +45,16 @@ var ErrorIcon = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var size = this.props.size;
-      return /*#__PURE__*/_react.default.createElement(_styled.ErrorIconWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+      return (0, _react.jsx)("div", {
+        css: _styles.errorIconWrapperStyles
+      }, (0, _react.jsx)(_warning.default, {
         label: "Error",
         size: size
       }));
     }
   }]);
   return ErrorIcon;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ErrorIcon = ErrorIcon;
 (0, _defineProperty2.default)(ErrorIcon, "defaultProps", {

package/dist/cjs/utils/errorIcon/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorIconWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: #ff991f;\n"])));
+exports.errorIconWrapperStyles = errorIconWrapperStyles;

package/dist/cjs/utils/fileIcon/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,15 +17,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _mediaTypeIcon = require("../mediaTypeIcon");
+var _react = require("@emotion/react");
 
-var _styled = require("./styled");
+var _react2 = require("react");
 
-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); }
+var _mediaTypeIcon = require("../mediaTypeIcon");
 
-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; }
+var _styles = require("./styles");
 
 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); }; }
 
@@ -53,25 +49,24 @@ var FileIcon = /*#__PURE__*/function (_Component) {
           iconUrl = _this$props.iconUrl,
           style = _this$props.style;
       var type = mediaType || 'unknown';
-
-      var defaultIcon = /*#__PURE__*/_react.default.createElement(_mediaTypeIcon.MediaTypeIcon, {
+      var defaultIcon = (0, _react.jsx)(_mediaTypeIcon.MediaTypeIcon, {
         type: mediaType,
         size: "small",
         className: fileTypeIconClass
       });
-
-      var icon = iconUrl ? /*#__PURE__*/_react.default.createElement("img", {
+      var icon = iconUrl ? (0, _react.jsx)("img", {
         src: iconUrl,
         className: "custom-icon",
         alt: type
       }) : defaultIcon;
-      return /*#__PURE__*/_react.default.createElement(_styled.FileTypeIcon, {
+      return (0, _react.jsx)("div", {
+        css: _styles.fileTypeIconStyles,
         style: style,
         className: fileTypeIconClass
       }, icon);
     }
   }]);
   return FileIcon;
-}(_react.Component);
+}(_react2.Component);
 
 exports.FileIcon = FileIcon;

package/dist/cjs/utils/fileIcon/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fileTypeIconStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _templateObject;
+
+var fileTypeIconStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), (0, _mediaUi.size)('12px !important'));
+exports.fileTypeIconStyles = fileTypeIconStyles;

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

@@ -25,7 +25,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _errorIcon = require("../errorIcon");
 
-var _styled = require("./styled");
+var _lightCardWrappers = require("./lightCardWrappers");
 
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 
@@ -51,7 +51,7 @@ var CardError = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(this.props.dimensions);
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
         dimensions: dimensions
       }, this.icon);
     }

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

@@ -23,7 +23,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 
-var _styled = require("./styled");
+var _lightCardWrappers = require("./lightCardWrappers");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
@@ -59,14 +59,14 @@ var CardLoading = /*#__PURE__*/function (_Component) {
       var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensionsProp);
 
       if ((0, _mediaCommon.getMediaFeatureFlag)('newCardExperience', featureFlags)) {
-        return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+        return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
           "data-testid": testId || 'media-card-loading',
           "data-test-loading": true,
           dimensions: dimensions
         }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.AnimatedWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.AnimatedWrapper, {
         "data-testid": testId || 'media-card-loading',
         "data-test-loading": true,
         dimensions: dimensions

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.AnimatedWrapper = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+var _components = require("@atlaskit/theme/components");
+
+/**@jsx jsx */
+var Wrapper = function Wrapper(props) {
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _styles.wrapperStyles)({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+
+exports.Wrapper = Wrapper;
+
+var AnimatedWrapper = function AnimatedWrapper(props) {
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _styles.animatedWrapperStyles)({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+
+exports.AnimatedWrapper = AnimatedWrapper;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.blinkLoadingAnimation = exports.animatedWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _components = require("@atlaskit/theme/components");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var blinkLoadingAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
+exports.blinkLoadingAnimation = blinkLoadingAnimation;
+
+var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      theme = _ref.theme;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, (0, _components.themed)({
+    light: _colors.N20,
+    dark: _colors.DN50
+  })({
+    theme: theme
+  }), (0, _components.themed)({
+    light: _colors.N50,
+    dark: _colors.DN100
+  })({
+    theme: theme
+  }), _mediaUi.borderRadius, dimensions.width, dimensions.height);
+};
+
+exports.wrapperStyles = wrapperStyles;
+
+var animatedWrapperStyles = function animatedWrapperStyles(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), wrapperStyles(props), blinkLoadingAnimation);
+};
+
+exports.animatedWrapperStyles = animatedWrapperStyles;

package/dist/cjs/utils/mediaTypeIcon/iconWrapper.js

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

package/dist/cjs/utils/mediaTypeIcon/index.js

@@ -31,7 +31,7 @@ var _document = _interopRequireDefault(require("@atlaskit/icon/glyph/document"))
 
 var _page = _interopRequireDefault(require("@atlaskit/icon/glyph/page"));
 
-var _styled = require("./styled");
+var _iconWrapper = require("./iconWrapper");
 
 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); }; }
 
@@ -66,7 +66,7 @@ var MediaTypeIcon = /*#__PURE__*/function (_React$Component) {
           size = _this$props$size === void 0 ? 'small' : _this$props$size,
           className = _this$props.className;
       var Icon = type && icons[type] || icons.unknown;
-      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
         type: type || 'unknown'
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         label: "media-type",

package/dist/cjs/utils/mediaTypeIcon/{styled.js → styles.js}

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = void 0;
+exports.iconWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -25,9 +25,13 @@ var typeToColorMap = {
 
 };
 
-var IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), function (_ref) {
+var getWrapperColor = function getWrapperColor(_ref) {
   var type = _ref.type;
   return typeToColorMap[type] || typeToColorMap.unknown;
-});
+};
+
+var iconWrapperStyles = function iconWrapperStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
+};
 
-exports.IconWrapper = IconWrapper;
+exports.iconWrapperStyles = iconWrapperStyles;

package/dist/cjs/utils/mediaTypeIcon/types.js

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

package/dist/cjs/utils/progressBar/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,13 +17,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styled = require("./styled");
+var _react = require("@emotion/react");
 
-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); }
+var _react2 = require("react");
 
-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; }
+var _styles = require("./styles");
 
 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); }; }
 
@@ -52,13 +48,15 @@ var ProgressBar = /*#__PURE__*/function (_Component) {
       var progressBarStyle = {
         width: "".concat(progress * 100, "%")
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.ProgressWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)("div", {
+        css: _styles.progressWrapperStyles
+      }, (0, _react.jsx)("div", {
         className: 'progressBar',
         style: progressBarStyle
       }));
     }
   }]);
   return ProgressBar;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ProgressBar = ProgressBar;

package/dist/cjs/utils/progressBar/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _templateObject;
+
+var progressWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), _mediaUi.borderRadius);
+exports.progressWrapperStyles = progressWrapperStyles;

package/dist/cjs/utils/ufoExperiences.js

@@ -11,16 +11,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ufo = require("@atlaskit/ufo");
 
-var _version = require("../version.json");
-
 var _analytics = require("./analytics");
 
+var _errors = require("../errors");
+
 var _mediaClient = require("@atlaskit/media-client");
 
 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) { (0, _defineProperty2.default)(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; }
 
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.1.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {
@@ -45,7 +47,9 @@ var startUfoExperience = function startUfoExperience(id) {
 
 exports.startUfoExperience = startUfoExperience;
 
-var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
+var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
@@ -65,7 +69,7 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
       break;
 
     case 'error':
-      error && failUfoExperience(id, _objectSpread(_objectSpread({
+      failUfoExperience(id, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, (0, _analytics.extractErrorInfo)(error)), {}, {
         request: (0, _analytics.getRenderErrorRequestMetadata)(error),
@@ -81,8 +85,8 @@ exports.completeUfoExperience = completeUfoExperience;
 var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
@@ -92,8 +96,8 @@ var succeedUfoExperience = function succeedUfoExperience(id, properties) {
 var failUfoExperience = function failUfoExperience(id, properties) {
   getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })

package/dist/cjs/utils/viewportDetector.js

@@ -1,14 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
+exports.ViewportDetector = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _document = _interopRequireDefault(require("./document"));
+
 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; }
@@ -19,31 +23,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-/**
- * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
- * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
- */
 var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
 
-exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
-var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    className: "media-card-viewport-anchor",
-    style: {
-      position: 'absolute',
-      top: "".concat(props.offsetTop, "px"),
-      maxHeight: 0,
-      pointerEvents: 'none'
-    }
-  });
-});
-exports.ViewportAnchor = ViewportAnchor;
-
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -70,26 +51,22 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
 var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
       cardEl = _ref.cardEl,
-      children = _ref.children,
-      preAnchorRef = _ref.preAnchorRef,
-      postAnchorRef = _ref.postAnchorRef;
+      children = _ref.children;
   (0, _react.useEffect)(function () {
-    // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
-    var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
-    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+      root: (0, _document.default)(),
+      rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
+    });
     cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
+  }, [cardEl, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 
 var ViewportDetector = function ViewportDetector(_ref2) {
   var cardEl = _ref2.cardEl,
-      preAnchorRef = _ref2.preAnchorRef,
-      postAnchorRef = _ref2.postAnchorRef,
       onVisible = _ref2.onVisible,
       children = _ref2.children;
 
@@ -99,8 +76,6 @@ var ViewportDetector = function ViewportDetector(_ref2) {
 
   return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
     cardEl: cardEl,
-    preAnchorRef: preAnchorRef,
-    postAnchorRef: postAnchorRef,
     onVisible: onVisible
   }, children);
 };

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -1,3 +1,7 @@
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
 export class MediaCardError extends Error {
   constructor(primaryReason, secondaryError) {
     super(primaryReason); // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget

package/dist/es2019/files/cardImageView/cardImageViewWrapper.js

@@ -0,0 +1,43 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
+import { playIconWrapperStyles, progressBarWrapperStyles, wrapperStyles } from './styles';
+export const CardImageViewWrapper = props => {
+  const {
+    disableOverlay,
+    selectable,
+    selected,
+    mediaType,
+    mediaName,
+    status,
+    progress
+  } = props;
+  const theme = useGlobalTheme();
+  return jsx("div", {
+    id: "cardImageViewWrapper",
+    "data-testid": "media-file-card-view",
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected ? true : undefined,
+    css: wrapperStyles({
+      theme,
+      disableOverlay,
+      selectable,
+      selected,
+      mediaType
+    }),
+    className: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
+  }, props.children);
+};
+export const PlayIconWrapper = props => {
+  return jsx("div", {
+    css: playIconWrapperStyles
+  }, props.children);
+};
+export const ProgressBarWrapper = props => {
+  return jsx("div", {
+    css: progressBarWrapperStyles
+  }, props.children);
+};