@atlaskit/media-card 77.12.1 → 77.12.3

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

@@ -7,13 +7,16 @@ exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = export
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor;
   return (0, _react.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: (0, _styles.titleBoxWrapperStyles)({
       breakpoint: breakpoint,
       titleBoxBgColor: titleBoxBgColor
@@ -22,29 +25,39 @@ var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props)
 };
 var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (0, _react.jsx)("div", {
-    id: "titleBoxHeader",
-    css: (0, _styles.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
+    (0, _react.jsx)("div", {
+      id: "titleBoxHeader",
+      css: (0, _styles.titleBoxHeaderStyles)({
+        hasIconOverlap: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (0, _react.jsx)("div", {
-    id: "titleBoxFooter",
-    css: (0, _styles.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
+    (0, _react.jsx)("div", {
+      id: "titleBoxFooter",
+      css: (0, _styles.titleBoxFooterStyles)({
+        hasIconOverlap: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
-  return (0, _react.jsx)("div", {
-    id: "titleBoxIcon",
-    css: _styles.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
+    (0, _react.jsx)("div", {
+      id: "titleBoxIcon",
+      css: _styles.titleBoxIconStyles
+    }, props.children)
+  );
 };
 var ErrorMessageWrapper = exports.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 (0, _react.jsx)("div", {
     css: _styles.errorMessageWrapperStyles
   }, props.children);

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

@@ -18,7 +18,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _mediaUi = require("@atlaskit/media-ui");
 var _utils = require("../../../utils");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+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
 var isPercentage = function isPercentage(value) {
   return /^\d+(\.\d+)?%$/.test(value);
 };
@@ -47,17 +47,25 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
   try {
-    return (0, _react2.css)(_mediaUi.center, _mediaUi.borderRadius, {
+    return (0, _react2.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
+    _mediaUi.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
+    _mediaUi.borderRadius, {
       background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
       color: "var(--ds-text-subtle, ".concat(_colors.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((0, _constants.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'
       }
     });
@@ -78,14 +86,17 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
       var _this$props = this.props,
         dimensions = _this$props.dimensions,
         onClick = _this$props.onClick;
-      return (0, _react2.jsx)("div", {
-        css: wrapperStyles(dimensions),
-        onClick: onClick
-      }, (0, _react2.jsx)(_warning.default, {
-        label: "Error",
-        primaryColor: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
-        size: "medium"
-      }), (0, _react2.jsx)("p", null, "We couldn't load this content"));
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("div", {
+          css: wrapperStyles(dimensions),
+          onClick: onClick
+        }, (0, _react2.jsx)(_warning.default, {
+          label: "Error",
+          primaryColor: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
+          size: "medium"
+        }), (0, _react2.jsx)("p", null, "We couldn't load this content"))
+      );
     }
   }]);
   return UnhandledErrorCard;

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

@@ -7,6 +7,7 @@ exports.ImageContainer = void 0;
 var _react = require("@emotion/react");
 var _classnames = require("../../classnames");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var imageContainerStyles = (0, _react.css)({
   display: 'flex',

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

@@ -14,7 +14,7 @@ var _selection = require("@atlaskit/editor-shared-styles/selection");
 var _styles = require("../styles");
 var _styles2 = require("../blanket/styles");
 var _styles3 = require("../actionsBar/styles");
-var _templateObject;
+var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,

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

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _cardConstants = require("../../cardConstants");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var Wrapper = exports.Wrapper = function Wrapper(props) {
   var testId = props.testId,
@@ -29,7 +30,9 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: _cardConstants.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: (0, _styles.wrapperStyles)({
       breakpoint: breakpoint,
       dimensions: dimensions,

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

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.1";
+var packageVersion = "77.12.3";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -35,7 +35,7 @@ var _openMediaViewerButton = _interopRequireDefault(require("../ui/openMediaView
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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 */
+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) { (0, _defineProperty2.default)(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
 var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
   var innerRef = _ref.innerRef,
     onImageLoad = _ref.onImageLoad,

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

@@ -20,6 +20,7 @@ var _classnames = require("../../classnames");
 var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
 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
 var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var cardPreview = _ref.cardPreview,
     testId = _ref.testId,

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

@@ -19,6 +19,7 @@ var _iconMessage = require("../../ui/iconMessage");
 var _errors = require("../../../errors");
 var _mediaUi = require("@atlaskit/media-ui");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var IconMessage = function IconMessage(_ref) {
   var error = _ref.error,

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

@@ -17,6 +17,7 @@ var _cardViewWrapper = require("./cardViewWrapper");
 var _progressBar = require("../../ui/progressBar/progressBar");
 var _blanket = require("../../ui/blanket/blanket");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // NOTE: should we call this Icon or UploadingCardView since we now have ProgressBar?
 

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

@@ -16,6 +16,7 @@ var _cardViewWrapper = require("./cardViewWrapper");
 var _progressBar = require("../../ui/progressBar/progressBar");
 var _blanket = require("../../ui/blanket/blanket");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ImageCardViewBase = function ImageCardViewBase(props) {
   var status = props.status,

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

@@ -22,6 +22,7 @@ var _loadingCardView = require("./loadingCardView");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
   var innerRef = _ref.innerRef,

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

@@ -15,6 +15,7 @@ var _iconWrapper = require("../../ui/iconWrapper/iconWrapper");
 var _useBreakpoint = require("../../useBreakpoint");
 var _cardViewWrapper = require("./cardViewWrapper");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var LoadingCardViewBase = function LoadingCardViewBase(props) {
   var dimensions = props.dimensions,

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

@@ -16,6 +16,7 @@ var _iconMessage = require("../../ui/iconMessage");
 var _useBreakpoint = require("../../useBreakpoint");
 var _cardViewWrapper = require("./cardViewWrapper");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ProcessingCardViewBase = function ProcessingCardViewBase(props) {
   var disableAnimation = props.disableAnimation,

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

@@ -18,6 +18,7 @@ var _cardViewWrapper = require("./cardViewWrapper");
 var _progressBar = require("../../ui/progressBar/progressBar");
 var _blanket = require("../../ui/blanket/blanket");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var VideoCardViewBase = function VideoCardViewBase(props) {
   var status = props.status,

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

@@ -321,10 +321,24 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  var onSvgError = function onSvgError(error) {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   var onImageError = function onImageError(newCardPreview) {
+    if ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -449,7 +463,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') &&
+    if ((0, _platformFeatureFlags.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
@@ -459,7 +473,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -644,8 +658,8 @@ var FileCard = exports.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/cjs/card/v2/svgView/errors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorReason = void 0;
+var getErrorReason = exports.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/cjs/card/v2/svgView/svgView.js

@@ -20,9 +20,12 @@ var _useBreakpoint = require("../../useBreakpoint");
 var _mediaSvg = _interopRequireDefault(require("@atlaskit/media-svg"));
 var _helpers = require("./helpers");
 var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
+var _errors = require("../../../errors");
+var _errors2 = require("./errors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var convertResizeMode = exports.convertResizeMode = function convertResizeMode(resizeMode) {
   switch (resizeMode) {
@@ -53,7 +56,9 @@ var SvgViewBase = exports.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 = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didSvgRender = _useState2[0],
@@ -71,6 +76,11 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
   var onSvgLoad = function onSvgLoad(evt) {
     setSvgDimensions((0, _helpers.calculateSvgDimensions)(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  var onSvgError = function onSvgError(err) {
+    var error = new _errors.MediaCardError((0, _errors2.getErrorReason)(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
@@ -106,6 +116,7 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/analytics/analytics.js

@@ -55,6 +55,7 @@ var getRenderSucceededEventPayload = exports.getRenderSucceededEventPayload = fu
     action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
@@ -155,6 +156,7 @@ var getRenderErrorEventPayload = exports.getRenderErrorEventPayload = function g
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: _objectSpread(_objectSpread({
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
@@ -187,6 +189,7 @@ var getRenderFailedFileStatusPayload = exports.getRenderFailedFileStatusPayload
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',

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

@@ -16,7 +16,7 @@ var _react2 = require("react");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 var _styles = require("./styles");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**@jsx jsx */
+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
 var ErrorIcon = exports.ErrorIcon = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ErrorIcon, _Component);
   var _super = _createSuper(ErrorIcon);
@@ -28,12 +28,15 @@ var ErrorIcon = exports.ErrorIcon = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var size = this.props.size;
-      return (0, _react.jsx)("div", {
-        css: _styles.errorIconWrapperStyles
-      }, (0, _react.jsx)(_warning.default, {
-        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
+        (0, _react.jsx)("div", {
+          css: _styles.errorIconWrapperStyles
+        }, (0, _react.jsx)(_warning.default, {
+          label: "Error",
+          size: size
+        }))
+      );
     }
   }]);
   return ErrorIcon;

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

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.errorIconWrapperStyles = void 0;
 var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

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

@@ -9,11 +9,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var Wrapper = exports.Wrapper = function Wrapper(props) {
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.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
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: (0, _styles.wrapperStyles)({
+        dimensions: props.dimensions
+      })
+    }, props), props.children)
+  );
 };

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

@@ -7,15 +7,23 @@ exports.wrapperStyles = void 0;
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions;
-  return (0, _react.css)(_mediaUi.center, {
+  return (0, _react.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
+  _mediaUi.center, {
     background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     color: "var(--ds-icon, ".concat(_colors.N50, ")")
-  }, _mediaUi.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
+  _mediaUi.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/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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) { (0, _defineProperty2.default)(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; }
 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/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.1";
+const packageVersion = "77.12.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/cardView.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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 { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/es2019/card/inlinePlayerWrapper.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 { inlinePlayerWrapperStyles, inlinePlayerClassName } from './inlinePlayerWrapperStyles';
 export const InlinePlayerWrapper = props => {
@@ -14,7 +15,9 @@ export const InlinePlayerWrapper = props => {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: inlinePlayerClassName,
+    className: inlinePlayerClassName
+    // 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: inlinePlayerWrapperStyles({
       selected,
       dimensions

package/dist/es2019/card/inlinePlayerWrapperStyles.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 { borderRadius } from '@atlaskit/theme/constants';
 import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.1";
+const packageVersion = "77.12.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/actionsBar/actionsBarWrapper.js

@@ -1,9 +1,12 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { wrapperStyles, actionsBarClassName } from './styles';
 export const ActionsBarWrapper = props => {
   return jsx("div", {
-    id: "actionsBarWrapper",
+    id: "actionsBarWrapper"
+    // 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(props.isFixed)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionButton.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { forwardRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { cardActionButtonStyles } from './styles';
 export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx("button", _extends({}, props, {
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
-    "aria-label": props.label,
+    "aria-label": props.label
+    // 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: cardActionButtonStyles(props)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionsView.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 { Component } from 'react';
 import { CardActionIconButton } from './cardActionIconButton';