@atlaskit/media-card 77.12.1 → 77.12.3

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

@@ -1,6 +1,8 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { tickBoxClassName } from './styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 import { B200 } from '@atlaskit/theme/colors';
@@ -8,7 +10,9 @@ var getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 var wrapperStyles = function wrapperStyles(selected) {
-  return css(transition && transition(), {
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition && transition(), {
     fontSize: '14px',
     width: '14px',
     height: '14px',
@@ -17,18 +21,24 @@ var wrapperStyles = function wrapperStyles(selected) {
     left: "var(--ds-space-075, 7px)",
     borderRadius: '20px',
     color: 'transparent',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     span: {
       display: 'block',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       svg: {
         height: '14px'
       }
     }
-  }, getSelectedStyles(selected));
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getSelectedStyles(selected));
 };
 wrapperStyles.displayName = 'TickBoxWrapper';
 export var TickBoxWrapper = function TickBoxWrapper(props) {
   return jsx("div", {
-    id: "tickBoxWrapper",
+    id: "tickBoxWrapper"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: wrapperStyles(props.selected)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
@@ -18,14 +19,18 @@ export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    backgroundColor: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
+    backgroundColor: "var(--ds-surface, ".concat(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
     color: "var(--ds-text, ".concat(N800, ")"),
     cursor: 'inherit',
     pointerEvents: 'none',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
-  }, generateResponsiveStyles(breakpoint));
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";
@@ -34,27 +39,41 @@ export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;
   return css({
     fontWeight: 600
-  }, infoStyles, hasIconOverlap && iconOverlapStyles);
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  infoStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasIconOverlap && iconOverlapStyles);
 };
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
   return css({
     textOverflow: 'ellipsis'
-  }, infoStyles, hasIconOverlap && iconOverlapStyles);
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  infoStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasIconOverlap && iconOverlapStyles);
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-start',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     verticalAlign: 'middle',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     ':nth-child(2)': {
       marginLeft: "var(--ds-space-050, 4px)",
       marginRight: "var(--ds-space-050, 4px)"

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
@@ -6,7 +7,9 @@ export var TitleBoxWrapper = function TitleBoxWrapper(props) {
     titleBoxBgColor = props.titleBoxBgColor;
   return jsx("div", {
     id: "titleBoxWrapper",
-    "data-testid": "media-title-box",
+    "data-testid": "media-title-box"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
       titleBoxBgColor: titleBoxBgColor
@@ -15,29 +18,39 @@ export var TitleBoxWrapper = function TitleBoxWrapper(props) {
 };
 export var TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxHeader",
-    css: titleBoxHeaderStyles({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxHeader",
+      css: titleBoxHeaderStyles({
+        hasIconOverlap: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export var TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxFooter",
-    css: titleBoxFooterStyles({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxFooter",
+      css: titleBoxFooterStyles({
+        hasIconOverlap: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export var TitleBoxIcon = function TitleBoxIcon(props) {
-  return jsx("div", {
-    id: "titleBoxIcon",
-    css: titleBoxIconStyles
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxIcon",
+      css: titleBoxIconStyles
+    }, props.children)
+  );
 };
 export var ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   return jsx("div", {
     css: errorMessageWrapperStyles
   }, props.children);

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

@@ -7,6 +7,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import { Component } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { N20, N800, Y500 } from '@atlaskit/theme/colors';
@@ -41,17 +42,25 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
   try {
-    return css(center, borderRadius, {
+    return css(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    center,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    borderRadius, {
       background: "var(--ds-background-neutral, ".concat(N20, ")"),
       color: "var(--ds-text-subtle, ".concat(N800, ")"),
       maxHeight: '100%',
       maxWidth: '100%'
-    }, getConvertedDimension(dimensions), {
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    getConvertedDimension(dimensions), {
       display: 'flex',
       flexDirection: 'column',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       p: {
         fontSize: "".concat(fontSize(), "px"),
         textAlign: 'center',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
       }
     });
@@ -72,14 +81,17 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
       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 (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        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;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { fileCardImageViewSelector } from '../../classnames';
 var imageContainerStyles = css({

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

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
@@ -22,7 +23,9 @@ export var Wrapper = function Wrapper(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: newFileExperienceClassName,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: wrapperStyles({
       breakpoint: breakpoint,
       dimensions: dimensions,

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.1";
+var packageVersion = "77.12.3";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/cardViewV2.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/cardviews/cardViewWrapper.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef", "overriddenCreationDate"];
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';

package/dist/esm/card/v2/cardviews/errorCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/cardviews/iconCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';

package/dist/esm/card/v2/cardviews/imageCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/cardviews/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/cardviews/loadingCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import SpinnerIcon from '@atlaskit/spinner';

package/dist/esm/card/v2/cardviews/processingCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/cardviews/videoCardView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/v2/fileCard.js

@@ -312,10 +312,24 @@ export var FileCard = function FileCard(_ref) {
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  var onSvgError = function onSvgError(error) {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   var onImageError = function onImageError(newCardPreview) {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageErrorBase(newCardPreview);
   };
+  var onSvgLoad = function onSvgLoad() {
+    setPreviewDidRender(true);
+  };
   var onImageLoad = function onImageLoad(newCardPreview) {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -440,7 +454,7 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   useEffect(function () {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
@@ -450,7 +464,7 @@ export var FileCard = function FileCard(_ref) {
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -635,8 +649,8 @@ export var FileCard = function FileCard(_ref) {
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,
     progress: uploadProgressRef.current,
-    onImageError: onImageError,
-    onImageLoad: onImageLoad,
+    onError: onSvgError,
+    onLoad: onSvgLoad,
     mediaCardCursor: mediaCardCursor,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     openMediaViewerButtonRef: mediaViewerButtonRef

package/dist/esm/card/v2/svgView/errors.js

@@ -0,0 +1,10 @@
+export var getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    default:
+      return 'svg-unknown-error';
+  }
+};

package/dist/esm/card/v2/svgView/svgView.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React, { useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -13,6 +14,8 @@ import { useBreakpoint } from '../../useBreakpoint';
 import MediaSvg from '@atlaskit/media-svg';
 import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+import { MediaCardError } from '../../../errors';
+import { getErrorReason } from './errors';
 export var convertResizeMode = function convertResizeMode(resizeMode) {
   switch (resizeMode) {
     case 'crop':
@@ -42,7 +45,9 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     resizeMode = _ref.resizeMode,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
-    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB;
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didSvgRender = _useState2[0],
@@ -60,6 +65,11 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   var onSvgLoad = function onSvgLoad(evt) {
     setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  var onSvgError = function onSvgError(err) {
+    var error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
@@ -95,6 +105,7 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.12.1",
+        packageName: "77.12.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/analytics/analytics.js

@@ -46,6 +46,7 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
     action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
@@ -146,6 +147,7 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: _objectSpread(_objectSpread({
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
@@ -178,6 +180,7 @@ export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatus
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',

package/dist/esm/utils/lightCards/errorIcon/index.js

@@ -7,6 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
@@ -22,12 +23,15 @@ export var ErrorIcon = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var size = this.props.size;
-      return jsx("div", {
-        css: errorIconWrapperStyles
-      }, jsx(WarningIcon, {
-        label: "Error",
-        size: size
-      }));
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        jsx("div", {
+          css: errorIconWrapperStyles
+        }, jsx(WarningIcon, {
+          label: "Error",
+          size: size
+        }))
+      );
     }
   }]);
   return ErrorIcon;

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

@@ -1,4 +1,7 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

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

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { wrapperStyles } from './styles';
 export var Wrapper = function Wrapper(props) {
-  return jsx("div", _extends({
-    css: wrapperStyles({
-      dimensions: props.dimensions
-    })
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", _extends({
+      css: wrapperStyles({
+        dimensions: props.dimensions
+      })
+    }, props), props.children)
+  );
 };

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

@@ -1,15 +1,22 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions;
-  return css(center, {
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  center, {
     background: "var(--ds-background-neutral, ".concat(N20, ")"),
     color: "var(--ds-icon, ".concat(N50, ")")
-  }, borderRadius, {
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderRadius, {
     maxHeight: '100%',
     maxWidth: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: dimensions.width,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: dimensions.height
   });
 };

package/dist/esm/utils/ufoExperiences.js

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

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type WrappedComponentProps } from 'react-intl-next';
-export declare const visuallyHiddenStyles: import("@emotion/react").SerializedStyles;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     fileName: string;
     innerRef: React.Ref<HTMLButtonElement>;

package/dist/types/card/v2/svgView/errors.d.ts

@@ -0,0 +1,3 @@
+import { type MediaSVGErrorReason } from '@atlaskit/media-svg';
+import { type SvgPrimaryReason } from '../../../errors';
+export declare const getErrorReason: (svgReason: MediaSVGErrorReason) => SvgPrimaryReason;