@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/es2019/card/cardState.js

@@ -2,16 +2,21 @@ import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../errors';
 import { getCardStatus, isFinalCardStatus } from './getCardStatus';
 import { extractFilePreviewStatus } from './getCardPreview';
-export const createStateUpdater = newState => prevState => {
-  // Only override if previous status is non-final
-  // or new status is 'complete'
-  if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+/**
+ * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
+ * The output of the updater is shallowly merged with state."
+ */
+
+export const createStateUpdater = (newState, fireErrorEvent) => prevState => {
+  // Only override if previous status is non-final or new status is 'complete'
+  if (!!newState.status && isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    // Log the error if the new state is not going to store it.
+    // i.e. this is a non critical error
+    !!newState.error && fireErrorEvent(newState.error);
     return prevState;
   }
 
-  return { ...prevState,
-    ...newState
-  };
+  return newState;
 };
 export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
   const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));

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

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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';
+
+class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "fireOperationalEvent", (error, info) => {
+      var _window, _window$navigator;
+
+      const {
+        data = {},
+        createAnalyticsEvent
+      } = this.props;
+      const payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaCardRender',
+        attributes: {
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error,
+          info,
+          failReason: 'unexpected-error',
+          ...data
+        }
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    _defineProperty(this, "handleOnClick", event => {
+      try {
+        var _this$props$onClick, _this$props;
+
+        (_this$props$onClick = (_this$props = this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props, {
+          event
+        });
+      } catch (e) {}
+    });
+
+    this.state = {
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    try {
+      this.fireOperationalEvent(error, info);
+    } catch (e) {}
+
+    this.setState({
+      hasError: true
+    });
+  }
+
+  render() {
+    const {
+      hasError
+    } = this.state;
+    const {
+      dimensions,
+      children
+    } = this.props;
+
+    if (hasError) {
+      return /*#__PURE__*/React.createElement(UnhandledErrorCard, {
+        dimensions: dimensions,
+        onClick: this.handleOnClick
+      });
+    }
+
+    return children;
+  }
+
+}
+
+_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.4.1";
+const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(WrappedMediaCardAnalyticsErrorBoundary));
+export default MediaCardAnalyticsErrorBoundary;

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

@@ -1,7 +1,6 @@
 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';
@@ -15,7 +14,7 @@ export const rootStyles = () => css`
   }
 `;
 export const cardShadow = `
-  box-shadow: ${token('elevation.shadow.raised', '0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24)')};
+  box-shadow: ${"var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))"};
 `;
 export const fadeinImageStyles = () => css`
   ${fadeIn};

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

@@ -1,9 +1,8 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export const blanketClassName = 'media-card-blanket';
-export const fixedBlanketStyles = `background-color: ${token('color.blanket', N90A)};`;
+export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;
 export const blanketStyles = isFixed => css`
   ${transition()}
   position: absolute;

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

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 const breatheAnimation = keyframes`
@@ -20,7 +19,7 @@ const getStylesBasedOnProps = ({
   opacity: 1;
   font-weight: 450;
   ${reducedFont ? 'font-size: 0.7em;' : ''}
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   text-align: center;
   ${animated ? animatedStyles : ''}
   margin-bottom: -1em;

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

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { generateResponsiveStyles } from '../progressBar/styles';
 import { N300 } from '@atlaskit/theme/colors';
@@ -27,7 +26,7 @@ export const loadingRateLimitedTextWrapperStyles = ({
 }) => css`
   margin-top: 10px;
   overflow: hidden;
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   display: block;
   width: 100%;
   text-align: center;

package/dist/es2019/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 const NewFileExperienceWrapper = props => {
   const {
     testId,
@@ -19,6 +20,7 @@ export const NewFileExperienceWrapper = props => {
     isTickBoxSelectable,
     shouldDisplayTooltip
   } = props;
+  const theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -33,7 +35,8 @@ export const NewFileExperienceWrapper = props => {
       isPlayButtonClickable,
       isTickBoxSelectable,
       shouldDisplayTooltip,
-      mediaCardCursor
+      mediaCardCursor,
+      theme
     }),
     ref: innerRef,
     onClick: onClick,

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

@@ -2,12 +2,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';
+const BACKGROUND_COLOR_DARK = '#22272C';
 export const newFileExperienceWrapperStyles = ({
   breakpoint,
   dimensions,
@@ -18,7 +19,8 @@ export const newFileExperienceWrapperStyles = ({
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip,
-  mediaCardCursor
+  mediaCardCursor,
+  theme
 }) => css`
   ${transition()}
   box-sizing: border-box;
@@ -28,7 +30,12 @@ export const newFileExperienceWrapperStyles = ({
   position: relative;
   font-family: ${fontFamily()};
   ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground && `background-color: ${token('color.background.neutral', N20)};`}
+  ${displayBackground && `background: ${themed({
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${BACKGROUND_COLOR_DARK})`
+})({
+  theme
+})};`}
   ${borderRadius}
   ${getCursorStyle(mediaCardCursor)}
   ${getWrapperShadow(disableOverlay, selected)}

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const playButtonClassName = 'media-card-play-button';
 export const bkgClassName = 'play-icon-background';
 const discSize = 48;
@@ -20,7 +19,7 @@ export const playButtonWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${token('color.icon.inverse', N0)};
+  color: ${`var(--ds-icon-inverse, ${N0})`};
   span {
     position: absolute;
   }
@@ -31,6 +30,6 @@ export const backgroundStyles = css`
   position: absolute;
   width: ${discSize}px;
   height: ${discSize}px;
-  background: ${token('color.background.neutral.bold', N90A)};
+  background: ${`var(--ds-background-neutral-bold, ${N90A})`};
   border-radius: 100%;
 `;

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

@@ -1,7 +1,6 @@
 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';
@@ -39,7 +38,7 @@ export const getWrapperDimensions = (dimensions, appearance) => {
 // CSS outline has no 'radius', therefore we can't achieve the same effect with it
 
 export const getWrapperShadow = (disableOverlay, selected) => {
-  const withOverlayShadow = !disableOverlay ? `${token('elevation.shadow.raised', `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}`)}` : '';
+  const withOverlayShadow = !disableOverlay ? `${`var(--ds-shadow-raised, ${`0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}`})`}` : '';
   const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
   const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
   return shadow ? `box-shadow: ${shadow};` : '';

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

@@ -1,14 +1,13 @@
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const tickBoxClassName = 'media-card-tickbox';
 export const tickboxFixedStyles = `
-  background-color: ${token('color.background.input', N0)};
-  color: ${token('color.icon.subtle', N100)};
+  background-color: ${`var(--ds-background-input, ${N0})`};
+  color: ${`var(--ds-icon-subtle, ${N100})`};
 `;
-export const getSelectedStyles = selected => selected ? `background-color: ${token('color.icon.information', B200)};
-      color: ${token('color.icon.inverse', 'white')};` : ``;
+export const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
+      color: ${"var(--ds-icon-inverse, white)"};` : ``;
 export const wrapperStyles = selected => css`
   ${transition()}
   font-size: 14px;

package/dist/es2019/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 const FailedTitleBox = ({
   breakpoint,
@@ -14,6 +13,6 @@ export const FailedTitleBox = ({
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
-    primaryColor: token('color.text.danger', R300)
+    primaryColor: `var(--ds-text-danger, ${R300})`
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -1,8 +1,8 @@
 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';
 
 const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
   const setting = responsiveSettings[breakpoint];
@@ -14,15 +14,29 @@ const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
 };
 
 const HEX_REGEX = /^#[0-9A-F]{6}$/i;
+const BACKGROUND_COLOR_DARK = '#161a1d';
+const TEXT_COLOR_DARK = '#C7D1DB';
 export const titleBoxWrapperStyles = ({
   breakpoint,
-  titleBoxBgColor
+  titleBoxBgColor,
+  theme
 }) => css`
   position: absolute;
   bottom: 0;
   width: 100%;
-  background-color: ${token('elevation.surface', rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8))};
-  color: inherit;
+  background-color: ${themed({
+  light: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
+  dark: `var(--ds-surface, ${rgba( // theme does not contain this color, use constant instead
+  titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1)})`
+})({
+  theme
+})};
+  color: ${themed({
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${TEXT_COLOR_DARK})`
+})({
+  theme
+})};
   cursor: inherit;
   pointer-events: none;
   display: flex;
@@ -31,8 +45,7 @@ export const titleBoxWrapperStyles = ({
   ${generateResponsiveStyles(breakpoint)}
 `;
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
-const infoStyles = `white-space: nowrap;
-  overflow: hidden;`;
+const infoStyles = `white-space: nowrap;overflow: hidden;`;
 const iconOverlapStyles = `padding-right: 10px;`;
 export const titleBoxHeaderStyles = ({
   hasIconOverlap

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

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

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

@@ -0,0 +1,79 @@
+/** @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';
+
+const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
+
+const shouldShowText = ({
+  width,
+  height
+}) => {
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+
+const normalizeDimension = (value, defaultValue) => {
+  const sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+
+const getConvertedDimension = dimensions => {
+  const {
+    width = defaultImageCardDimensions.width,
+    height = defaultImageCardDimensions.height
+  } = dimensions;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+
+const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
+  try {
+    return css`
+      ${center};
+      ${borderRadius};
+      background: ${`var(--ds-background-neutral, ${N20})`};
+      color: ${`var(--ds-text-subtle, ${N800})`};
+      max-height: 100%;
+      max-width: 100%;
+      ${getConvertedDimension(dimensions)};
+      display: flex;
+      flex-direction: column;
+
+      p {
+        font-size: ${fontSize()}px;
+        text-align: center;
+        display: ${shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'};
+      }
+    `;
+  } catch (e) {
+    return null;
+  }
+};
+
+export class UnhandledErrorCard extends Component {
+  render() {
+    const {
+      dimensions,
+      onClick
+    } = this.props;
+    return jsx("div", {
+      css: wrapperStyles(dimensions),
+      onClick: onClick
+    }, jsx(WarningIcon, {
+      label: "Error",
+      primaryColor: `var(--ds-icon-warning, ${Y500})`,
+      size: "medium"
+    }), jsx("p", null, "We couldn't load this content"));
+  }
+
+}

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

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

package/dist/es2019/errors.js

@@ -76,8 +76,19 @@ export const isRemotePreviewError = err => err instanceof RemotePreviewError;
 export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
 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 const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const 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 const isUploadError = error => error && error.primaryReason === 'upload';

package/dist/es2019/inline/loader.js

@@ -18,15 +18,15 @@ export default class MediaInlineCardLoader extends React.PureComponent {
 
     if (!this.state.MediaInlineCard) {
       try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
+        const [mediaClient, cardModule, mediaInlineErrorBoundaryModule] = await Promise.all([import(
         /* webpackChunkName: "@atlaskit-internal_media-client" */
         '@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')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
-        MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+        MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
 
         if (this.isMounted) {
           this.setState({

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireMediaCardEvent } from '../utils/analytics';
+
+class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "fireOperationalEvent", (error, info) => {
+      var _window, _window$navigator;
+
+      const {
+        data = {},
+        createAnalyticsEvent
+      } = this.props;
+      const payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaInlineRender',
+        attributes: {
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error,
+          failReason: 'unexpected-error',
+          info,
+          ...data
+        }
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    this.state = {
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    try {
+      this.fireOperationalEvent(error, info);
+      this.setState({
+        hasError: true
+      });
+    } catch (e) {}
+  }
+
+  render() {
+    const {
+      hasError
+    } = this.state;
+    const {
+      children
+    } = this.props;
+
+    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;
+  }
+
+}
+
+_defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
+
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.4.1";
+const MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'mediaInlineCard',
+  component: 'mediaInlineCard'
+})(withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary));
+export default MediaInlineAnalyticsErrorBoundary;