@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { UnhandledErrorCard } from './ui/unhandledErrorCard';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireMediaCardEvent } from '../utils/analytics';
+
+var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(WrappedMediaCardAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaCardAnalyticsErrorBoundary);
+
+  function WrappedMediaCardAnalyticsErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, WrappedMediaCardAnalyticsErrorBoundary);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_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: 'mediaCardRender',
+        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,
+          info: info,
+          failReason: 'unexpected-error'
+        }, data)
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (event) {
+      try {
+        var _this$props$onClick, _this$props2;
+
+        (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props2, {
+          event: event
+        });
+      } catch (e) {}
+    });
+
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(WrappedMediaCardAnalyticsErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      try {
+        this.fireOperationalEvent(error, info);
+      } catch (e) {}
+
+      this.setState({
+        hasError: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var _this$props3 = this.props,
+          dimensions = _this$props3.dimensions,
+          children = _this$props3.children;
+
+      if (hasError) {
+        return /*#__PURE__*/React.createElement(UnhandledErrorCard, {
+          dimensions: dimensions,
+          onClick: this.handleOnClick
+        });
+      }
+
+      return children;
+    }
+  }]);
+
+  return WrappedMediaCardAnalyticsErrorBoundary;
+}(React.Component);
+
+_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.1";
+var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(WrappedMediaCardAnalyticsErrorBoundary));
+export default MediaCardAnalyticsErrorBoundary;

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

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { fadeIn } from '@atlaskit/media-ui';
-import { token } from '@atlaskit/tokens';
 export { defaultTransitionDuration } from './config';
 export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
@@ -13,7 +12,7 @@ export { spin } from './animations';
 export var rootStyles = function rootStyles() {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
 };
-export var cardShadow = "\n  box-shadow: ".concat(token('elevation.shadow.raised', '0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24)'), ";\n");
+export var cardShadow = "\n  box-shadow: ".concat("var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))", ";\n");
 export var fadeinImageStyles = function fadeinImageStyles() {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), fadeIn);
 };

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

@@ -2,12 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export var blanketClassName = 'media-card-blanket';
-export var fixedBlanketStyles = "background-color: ".concat(token('color.blanket', N90A), ";");
+export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
 export var blanketStyles = function blanketStyles(isFixed) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), transition(), isFixed ? fixedBlanketStyles : '');
 };

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

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 var breatheAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
@@ -11,7 +10,7 @@ var animatedStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplate
 var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
   var animated = _ref.animated,
       reducedFont = _ref.reducedFont;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', token('color.text.subtlest', N300), animated ? animatedStyles : '');
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', "var(--ds-text-subtlest, ".concat(N300, ")"), animated ? animatedStyles : '');
 };
 
 export var iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {

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

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { generateResponsiveStyles } from '../progressBar/styles';
 import { N300 } from '@atlaskit/theme/colors';
@@ -11,7 +10,7 @@ export var warningIconWrapperStyles = css(_templateObject2 || (_templateObject2
 export var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), token('color.text.subtlest', N300), generateResponsiveStyles(breakpoint, positionBottom, false, 1));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(N300, ")"), generateResponsiveStyles(breakpoint, positionBottom, false, 1));
 };
 loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';
 export var couldntLoadWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { newFileExperienceWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
   var testId = props.testId,
       dimensions = props.dimensions,
@@ -17,6 +18,7 @@ export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
       isPlayButtonClickable = props.isPlayButtonClickable,
       isTickBoxSelectable = props.isTickBoxSelectable,
       shouldDisplayTooltip = props.shouldDisplayTooltip;
+  var theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -31,7 +33,8 @@ export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
       isPlayButtonClickable: isPlayButtonClickable,
       isTickBoxSelectable: isTickBoxSelectable,
       shouldDisplayTooltip: shouldDisplayTooltip,
-      mediaCardCursor: mediaCardCursor
+      mediaCardCursor: mediaCardCursor,
+      theme: theme
     }),
     ref: innerRef,
     onClick: onClick,

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

@@ -6,12 +6,13 @@ import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { themed } from '@atlaskit/theme/components';
 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) {
   var breakpoint = _ref.breakpoint,
       dimensions = _ref.dimensions,
@@ -22,7 +23,13 @@ export var newFileExperienceWrapperStyles = function newFileExperienceWrapperSty
       isPlayButtonClickable = _ref.isPlayButtonClickable,
       isTickBoxSelectable = _ref.isTickBoxSelectable,
       shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-      mediaCardCursor = _ref.mediaCardCursor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background-color: ".concat(token('color.background.neutral', N20), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+      mediaCardCursor = _ref.mediaCardCursor,
+      theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat(themed({
+    light: "var(--ds-background-neutral, ".concat(N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
+  })({
+    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';

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

@@ -4,11 +4,10 @@ var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var playButtonClassName = 'media-card-play-button';
 export var bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-export var playButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.icon.inverse', N0));
-export var backgroundStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, token('color.background.neutral.bold', N90A));
+export var playButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N0, ")"));
+export var backgroundStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(N90A, ")"));

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

@@ -6,7 +6,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
@@ -48,7 +47,7 @@ export var getWrapperDimensions = function getWrapperDimensions(dimensions, appe
 // CSS outline has no 'radius', therefore we can't achieve the same effect with it
 
 export var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A))) : '';
+  var withOverlayShadow = !disableOverlay ? "".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A), ")")) : '';
   var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
   var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';

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

@@ -5,11 +5,10 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var tickBoxClassName = 'media-card-tickbox';
-export var tickboxFixedStyles = "\n  background-color: ".concat(token('color.background.input', N0), ";\n  color: ").concat(token('color.icon.subtle', N100), ";\n");
+export var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(N100, ")"), ";\n");
 export var getSelectedStyles = function getSelectedStyles(selected) {
-  return selected ? "background-color: ".concat(token('color.icon.information', B200), ";\n      color: ").concat(token('color.icon.inverse', 'white'), ";") : "";
+  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 export var wrapperStyles = function wrapperStyles(selected) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), transition(), getSelectedStyles(selected));

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

@@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl-next';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
@@ -14,6 +13,6 @@ export var FailedTitleBox = function FailedTitleBox(_ref) {
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
-    primaryColor: token('color.text.danger', R300)
+    primaryColor: "var(--ds-text-danger, ".concat(R300, ")")
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -3,10 +3,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
-import { N0 } from '@atlaskit/theme/colors';
+import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../../styles/mixins';
+import { themed } from '@atlaskit/theme/components';
 
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
@@ -18,13 +18,27 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
 };
 
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
+var BACKGROUND_COLOR_DARK = '#161a1d';
+var TEXT_COLOR_DARK = '#C7D1DB';
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-      titleBoxBgColor = _ref.titleBoxBgColor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('elevation.surface', rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)), generateResponsiveStyles(breakpoint));
+      titleBoxBgColor = _ref.titleBoxBgColor,
+      theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), themed({
+    light: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
+    dark: "var(--ds-surface, ".concat(rgba( // theme does not contain this color, use constant instead
+    titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
+  })({
+    theme: theme
+  }), themed({
+    light: "var(--ds-text, ".concat(N800, ")"),
+    dark: "var(--ds-text, ".concat(TEXT_COLOR_DARK, ")")
+  })({
+    theme: theme
+  }), generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
-var infoStyles = "white-space: nowrap;\n  overflow: hidden;";
+var infoStyles = "white-space: nowrap;overflow: hidden;";
 var iconOverlapStyles = "padding-right: 10px;";
 export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;

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

@@ -1,14 +1,17 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
       titleBoxBgColor = props.titleBoxBgColor;
+  var theme = useGlobalTheme();
   return jsx("div", {
     id: "titleBoxWrapper",
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor
+      titleBoxBgColor: titleBoxBgColor,
+      theme: theme
     })
   }, props.children);
 };

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

@@ -0,0 +1,93 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../../utils';
+
+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 ? defaultImageCardDimensions.width : _dimensions$width,
+      _dimensions$height = dimensions.height,
+      height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
+
+  try {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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    "])), center, borderRadius, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-text-subtle, ".concat(N800, ")"), getConvertedDimension(dimensions), fontSize(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+  } catch (e) {
+    return null;
+  }
+};
+
+export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  _inherits(UnhandledErrorCard, _Component);
+
+  var _super = _createSuper(UnhandledErrorCard);
+
+  function UnhandledErrorCard() {
+    _classCallCheck(this, UnhandledErrorCard);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          dimensions = _this$props.dimensions,
+          onClick = _this$props.onClick;
+      return jsx("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, jsx(WarningIcon, {
+        label: "Error",
+        primaryColor: "var(--ds-icon-warning, ".concat(Y500, ")"),
+        size: "medium"
+      }), jsx("p", null, "We couldn't load this content"));
+    }
+  }]);
+
+  return UnhandledErrorCard;
+}(Component);

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/errors.js

@@ -142,11 +142,20 @@ export var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewEr
 };
 export 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
 
-export var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
-  return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export 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);
 };
 export var isUploadError = function isUploadError(error) {
   return error && error.primaryReason === 'upload';

package/dist/esm/inline/loader.js

@@ -46,7 +46,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
+        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaInlineErrorBoundaryModule;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -66,17 +66,17 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 '@atlaskit/media-client'), import(
                 /* webpackChunkName: "@atlaskit-internal_inline-media-card" */
                 './mediaInlineCard'), import(
-                /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-                '../utils/media-card-analytics-error-boundary')]);
+                /* webpackChunkName: "@atlaskit-internal_media-inline-error-boundary" */
+                './mediaInlineAnalyticsErrorBoundary')]);
 
               case 5:
                 _yield$Promise$all = _context.sent;
                 _yield$Promise$all2 = _slicedToArray(_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/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -0,0 +1,99 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireMediaCardEvent } from '../utils/analytics';
+
+var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaInlineAnalyticsErrorBoundary);
+
+  function WrappedMediaInlineAnalyticsErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, WrappedMediaInlineAnalyticsErrorBoundary);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_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)
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(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.createElement(React.Fragment, null);
+      }
+
+      return children;
+    }
+  }]);
+
+  return WrappedMediaInlineAnalyticsErrorBoundary;
+}(React.Component);
+
+_defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
+
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.1";
+var MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaInlineCard',
+  component: 'mediaInlineCard'
+})(withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary));
+export default MediaInlineAnalyticsErrorBoundary;