@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/cjs/card/ui/loadingRateLimited/styles.js

@@ -9,8 +9,6 @@ exports.warningIconWrapperStyles = exports.loadingRateLimitedTextWrapperStyles =
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _styles = require("../progressBar/styles");
@@ -27,7 +25,7 @@ exports.warningIconWrapperStyles = warningIconWrapperStyles;
 var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _styles.generateResponsiveStyles)(breakpoint, positionBottom, false, 1));
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), (0, _styles.generateResponsiveStyles)(breakpoint, positionBottom, false, 1));
 };
 
 exports.loadingRateLimitedTextWrapperStyles = loadingRateLimitedTextWrapperStyles;

package/dist/cjs/card/ui/newFileExperience/newFileExperienceWrapper.js

@@ -11,6 +11,8 @@ var _cardConstants = require("../../cardConstants");
 
 var _styles = require("./styles");
 
+var _components = require("@atlaskit/theme/components");
+
 /**@jsx jsx */
 var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
   var testId = props.testId,
@@ -27,6 +29,7 @@ var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
       isPlayButtonClickable = props.isPlayButtonClickable,
       isTickBoxSelectable = props.isTickBoxSelectable,
       shouldDisplayTooltip = props.shouldDisplayTooltip;
+  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", {
     id: "newFileExperienceWrapper",
     className: _cardConstants.newFileExperienceClassName,
@@ -41,7 +44,8 @@ var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
       isPlayButtonClickable: isPlayButtonClickable,
       isTickBoxSelectable: isTickBoxSelectable,
       shouldDisplayTooltip: shouldDisplayTooltip,
-      mediaCardCursor: mediaCardCursor
+      mediaCardCursor: mediaCardCursor,
+      theme: theme
     }),
     ref: innerRef,
     onClick: onClick,

package/dist/cjs/card/ui/newFileExperience/styles.js

@@ -17,10 +17,10 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _selection = require("@atlaskit/editor-shared-styles/selection");
 
+var _components = require("@atlaskit/theme/components");
+
 var _styles = require("../../styles");
 
 var _styles2 = require("../blanket/styles");
@@ -31,6 +31,8 @@ var _styles4 = require("../styles");
 
 var _templateObject;
 
+var BACKGROUND_COLOR_DARK = '#22272C';
+
 var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
       dimensions = _ref.dimensions,
@@ -41,8 +43,14 @@ var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_re
       isPlayButtonClickable = _ref.isPlayButtonClickable,
       isTickBoxSelectable = _ref.isTickBoxSelectable,
       shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-      mediaCardCursor = _ref.mediaCardCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles4.getWrapperDimensions)(dimensions, appearance), displayBackground && "background-color: ".concat((0, _tokens.token)('color.background.neutral', _colors.N20), ";"), _mediaUi.borderRadius, (0, _styles4.getCursorStyle)(mediaCardCursor), (0, _styles4.getWrapperShadow)(disableOverlay, selected), (0, _styles4.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles4.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles4.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+      mediaCardCursor = _ref.mediaCardCursor,
+      theme = _ref.theme;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles4.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat((0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
+  })({
+    theme: theme
+  }), ";"), _mediaUi.borderRadius, (0, _styles4.getCursorStyle)(mediaCardCursor), (0, _styles4.getWrapperShadow)(disableOverlay, selected), (0, _styles4.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles4.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles4.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
 
 exports.newFileExperienceWrapperStyles = newFileExperienceWrapperStyles;

package/dist/cjs/card/ui/playButton/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var playButtonClassName = 'media-card-play-button';
@@ -25,7 +23,7 @@ var discSize = 48;
 var discSizeHover = 56;
 var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
 exports.fixedPlayButtonStyles = fixedPlayButtonStyles;
-var playButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), (0, _tokens.token)('color.icon.inverse', _colors.N0));
+var playButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), "var(--ds-icon-inverse, ".concat(_colors.N0, ")"));
 exports.playButtonWrapperStyles = playButtonWrapperStyles;
-var backgroundStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, (0, _tokens.token)('color.background.neutral.bold', _colors.N90A));
+var backgroundStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, "var(--ds-background-neutral-bold, ".concat(_colors.N90A, ")"));
 exports.backgroundStyles = backgroundStyles;

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

@@ -17,8 +17,6 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 
 var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
@@ -78,7 +76,7 @@ var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance)
 exports.getWrapperDimensions = getWrapperDimensions;
 
 var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A))) : '';
+  var withOverlayShadow = !disableOverlay ? "".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A), ")")) : '';
   var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
   var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';

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

@@ -15,17 +15,15 @@ var _styles = require("../../styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var tickBoxClassName = 'media-card-tickbox';
 exports.tickBoxClassName = tickBoxClassName;
-var tickboxFixedStyles = "\n  background-color: ".concat((0, _tokens.token)('color.background.input', _colors.N0), ";\n  color: ").concat((0, _tokens.token)('color.icon.subtle', _colors.N100), ";\n");
+var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(_colors.N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(_colors.N100, ")"), ";\n");
 exports.tickboxFixedStyles = tickboxFixedStyles;
 
 var getSelectedStyles = function getSelectedStyles(selected) {
-  return selected ? "background-color: ".concat((0, _tokens.token)('color.icon.information', _colors.B200), ";\n      color: ").concat((0, _tokens.token)('color.icon.inverse', 'white'), ";") : "";
+  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(_colors.B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 
 exports.getSelectedStyles = getSelectedStyles;

package/dist/cjs/card/ui/titleBox/failedTitleBox.js

@@ -17,8 +17,6 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _titleBoxComponents = require("./titleBoxComponents");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
@@ -30,7 +28,7 @@ var FailedTitleBox = function FailedTitleBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
-    primaryColor: (0, _tokens.token)('color.text.danger', _colors.R300)
+    primaryColor: "var(--ds-text-danger, ".concat(_colors.R300, ")")
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };
 

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

@@ -11,14 +11,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _common = require("../common");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _mixins = require("../../styles/mixins");
 
+var _components = require("@atlaskit/theme/components");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var generateResponsiveStyles = function generateResponsiveStyles() {
@@ -31,16 +31,30 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
 };
 
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
+var BACKGROUND_COLOR_DARK = '#161a1d';
+var TEXT_COLOR_DARK = '#C7D1DB';
 
 var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-      titleBoxBgColor = _ref.titleBoxBgColor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: inherit;\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), (0, _tokens.token)('elevation.surface', (0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 0.8)), generateResponsiveStyles(breakpoint));
+      titleBoxBgColor = _ref.titleBoxBgColor,
+      theme = _ref.theme;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), (0, _components.themed)({
+    light: "var(--ds-surface, ".concat((0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
+    dark: "var(--ds-surface, ".concat((0, _mixins.rgba)( // theme does not contain this color, use constant instead
+    titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
+  })({
+    theme: theme
+  }), (0, _components.themed)({
+    light: "var(--ds-text, ".concat(_colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(TEXT_COLOR_DARK, ")")
+  })({
+    theme: theme
+  }), generateResponsiveStyles(breakpoint));
 };
 
 exports.titleBoxWrapperStyles = titleBoxWrapperStyles;
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
-var infoStyles = "white-space: nowrap;\n  overflow: hidden;";
+var infoStyles = "white-space: nowrap;overflow: hidden;";
 var iconOverlapStyles = "padding-right: 10px;";
 
 var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {

package/dist/cjs/card/ui/titleBox/titleBoxComponents.js

@@ -9,15 +9,19 @@ var _react = require("@emotion/react");
 
 var _styles = require("./styles");
 
+var _components = require("@atlaskit/theme/components");
+
 /** @jsx jsx */
 var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
       titleBoxBgColor = props.titleBoxBgColor;
+  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", {
     id: "titleBoxWrapper",
     css: (0, _styles.titleBoxWrapperStyles)({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor
+      titleBoxBgColor: titleBoxBgColor,
+      theme: theme
     })
   }, props.children);
 };

package/dist/cjs/card/ui/unhandledErrorCard/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnhandledErrorCard = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _utils = require("../../../utils");
+
+var _templateObject;
+
+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); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+      width = _dimensions$width === void 0 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
+      _dimensions$height = dimensions.height,
+      height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
+    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
+  };
+};
+
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
+
+  try {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      ", ";\n      ", ";\n      background: ", ";\n      color: ", ";\n      max-height: 100%;\n      max-width: 100%;\n      ", ";\n      display: flex;\n      flex-direction: column;\n\n      p {\n        font-size: ", "px;\n        text-align: center;\n        display: ", ";\n      }\n    "])), _mediaUi.center, _mediaUi.borderRadius, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-text-subtle, ".concat(_colors.N800, ")"), getConvertedDimension(dimensions), (0, _constants.fontSize)(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+  } catch (e) {
+    return null;
+  }
+};
+
+var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(UnhandledErrorCard, _Component);
+
+  var _super = _createSuper(UnhandledErrorCard);
+
+  function UnhandledErrorCard() {
+    (0, _classCallCheck2.default)(this, UnhandledErrorCard);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          dimensions = _this$props.dimensions,
+          onClick = _this$props.onClick;
+      return (0, _react2.jsx)("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, (0, _react2.jsx)(_warning.default, {
+        label: "Error",
+        primaryColor: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
+        size: "medium"
+      }), (0, _react2.jsx)("p", null, "We couldn't load this content"));
+    }
+  }]);
+  return UnhandledErrorCard;
+}(_react.Component);
+
+exports.UnhandledErrorCard = UnhandledErrorCard;

package/dist/cjs/card/ui/unhandledErrorCard/types.js

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

package/dist/cjs/errors.js

@@ -184,12 +184,21 @@ exports.isUnsupportedLocalPreviewError = isUnsupportedLocalPreviewError;
 
 function isImageLoadError(err) {
   return err instanceof ImageLoadError;
-} // In a try/catch statement, the error caught is the type of any.
+} // In a try/catch statement, the error caught is the type of unknown.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
+// If updatePrimaryReason is true, if it's a MediaCardError already, it will update it's primary reason
 
 
-var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
-  return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+var ensureMediaCardError = function ensureMediaCardError(primaryReason, error, updatePrimaryReason) {
+  if (isMediaCardError(error)) {
+    if (updatePrimaryReason && error.primaryReason !== primaryReason) {
+      return new MediaCardError(primaryReason, error.secondaryError);
+    }
+
+    return error;
+  }
+
+  return new MediaCardError(primaryReason, error);
 };
 
 exports.ensureMediaCardError = ensureMediaCardError;

package/dist/cjs/inline/loader.js

@@ -68,7 +68,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
+        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaInlineErrorBoundaryModule;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -88,7 +88,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 }), Promise.resolve().then(function () {
                   return _interopRequireWildcard(require('./mediaInlineCard'));
                 }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../utils/media-card-analytics-error-boundary'));
+                  return _interopRequireWildcard(require('./mediaInlineAnalyticsErrorBoundary'));
                 })]);
 
               case 5:
@@ -96,9 +96,9 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
                 mediaClient = _yield$Promise$all2[0];
                 cardModule = _yield$Promise$all2[1];
-                mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
+                mediaInlineErrorBoundaryModule = _yield$Promise$all2[2];
                 MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
-                MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+                MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
 
                 if (this.isMounted) {
                   this.setState({

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mediaCommon = require("@atlaskit/media-common");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../utils/analytics");
+
+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; }
+
+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); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaInlineAnalyticsErrorBoundary);
+
+  function WrappedMediaInlineAnalyticsErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, WrappedMediaInlineAnalyticsErrorBoundary);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireOperationalEvent", function (error, info) {
+      var _window, _window$navigator;
+
+      var _this$props = _this.props,
+          _this$props$data = _this$props.data,
+          data = _this$props$data === void 0 ? {} : _this$props$data,
+          createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      var payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaInlineRender',
+        attributes: _objectSpread({
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error: error,
+          failReason: 'unexpected-error',
+          info: info
+        }, data)
+      };
+      (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+    });
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(WrappedMediaInlineAnalyticsErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      try {
+        this.fireOperationalEvent(error, info);
+        this.setState({
+          hasError: true
+        });
+      } catch (e) {}
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var children = this.props.children;
+
+      if (hasError) {
+        // TODO refactor error boundary for inline card https://product-fabric.atlassian.net/browse/MEX-2140
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      }
+
+      return children;
+    }
+  }]);
+  return WrappedMediaInlineAnalyticsErrorBoundary;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.1";
+var MediaInlineAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaInlineCard',
+  component: 'mediaInlineCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaInlineAnalyticsErrorBoundary));
+var _default = MediaInlineAnalyticsErrorBoundary;
+exports.default = _default;