@atlaskit/media-card 79.0.0 → 79.0.2

package/dist/es2019/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko1l7b{border-radius:3px}
+button:focus+._1hlmvd8c{outline:solid 2px var(--ds-border-focused,#4c9aff)}._10pb1osq>div{height:100%}
+._14r11j28::-moz-selection, ._1np21j28 ::-moz-selection{background-color:transparent}
+._16qs64c8{box-shadow:var(--ds-shadow-raised,0 1px 1px rgba(9,30,66,.31),0 0 1px 0 rgba(9,30,66,.31))}
+._16qs666x{box-shadow:0 0 0 1px var(--ds-border-selected,#0c66e4)}
+._16qshzij{box-shadow:0 0 0 1px var(--ds-border-selected,#0c66e4),var(--ds-shadow-raised,0 1px 1px rgba(9,30,66,.31),0 0 1px 0 rgba(9,30,66,.31))}
+._19zy8vuz:hover .media-card-play-button .play-icon-background{height:56px}
+._1p1y1j28::selection, ._1rk81j28 ::selection{background-color:transparent}
+._1rquusvi *{box-sizing:border-box}
+._1xp5kufk:hover .media-card-tickbox{color:var(--ds-icon-subtle,#7a869a)}
+._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
+._1yf91j9a:hover .media-card-tickbox{background-color:var(--ds-background-input,#fff)}
+._80omtlke{cursor:pointer}
+._80omv00u{cursor:wait}
+._9m3z1osq>div{width:100%}
+._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
+._c71l1osq{max-height:100%}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._eg541blz:hover .media-card-blanket{background-color:var(--ds-background-input,rgba(9,30,66,.48))}
+._kqswh2mm{position:relative}
+._mts3kb7n:focus-within .media-card-actions-bar, ._1ntskb7n:hover .media-card-actions-bar{opacity:1}
+._p12f1osq{max-width:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/card/ui/wrapper/wrapper-compiled.js

@@ -0,0 +1,86 @@
+/* wrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./wrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { newFileExperienceClassName } from '../../cardConstants';
+import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
+import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
+import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
+const wrapperStyles = null;
+const backgroundStyle = null;
+const cursorStyleMap = {
+  pointer: "_80omtlke",
+  wait: "_80omv00u"
+};
+const shadowStyleMap = {
+  withOverlay: "_16qs64c8",
+  selected: "_16qs666x",
+  selectedWithOverlay: "_16qshzij"
+};
+const getShadowKey = (disableOverlay, selected) => {
+  if (!disableOverlay && selected) {
+    return 'selectedWithOverlay';
+  }
+  if (!disableOverlay) {
+    return 'withOverlay';
+  }
+  if (selected) {
+    return 'selected';
+  }
+  return '';
+};
+const hideNativeBrowserTextSelectionStyles = null;
+const clickableButtonPlayButtonStyles = null;
+const selectableTickboxStyle = null;
+const tooltipStyle = null;
+const getResponsiveStyles = breakpoint => {
+  // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
+  return breakpoint === 'small' ? {
+    ['fontSize']: '11x',
+    ['lineHeight']: '14px'
+  } : {
+    ['fontSize']: '14px',
+    ['lineHeight']: '22px'
+  };
+};
+export const Wrapper = props => {
+  const {
+    testId,
+    dimensions,
+    appearance,
+    onClick,
+    onMouseEnter,
+    innerRef,
+    breakpoint,
+    mediaCardCursor,
+    disableOverlay,
+    selected,
+    displayBackground,
+    isPlayButtonClickable,
+    isTickBoxSelectable,
+    shouldDisplayTooltip
+  } = props;
+  const defaultImageCardDimensions = getDefaultCardDimensions(appearance);
+  const width = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
+  const height = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
+  const wrapperShadowKey = getShadowKey(disableOverlay, selected);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_2rko1l7b _vchhusvi _kqswh2mm _ect41sbm _p12f1osq _c71l1osq _1hlmvd8c _1rquusvi _eg541blz _mts3kb7n _1ntskb7n", displayBackground && "_bfhk1s4m", mediaCardCursor && cursorStyleMap[mediaCardCursor], wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5kufk", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    "data-testid": testId,
+    style: {
+      width,
+      height,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...getResponsiveStyles(breakpoint)
+    },
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, VcMediaWrapperProps), props.children);
+};
+Wrapper.displayName = 'NewFileExperienceWrapper';

package/dist/es2019/card/ui/wrapper/wrapper-emotion.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @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';
+import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+export const Wrapper = props => {
+  const {
+    testId,
+    dimensions,
+    appearance,
+    onClick,
+    onMouseEnter,
+    innerRef,
+    breakpoint,
+    mediaCardCursor,
+    disableOverlay,
+    selected,
+    displayBackground,
+    isPlayButtonClickable,
+    isTickBoxSelectable,
+    shouldDisplayTooltip
+  } = props;
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    jsx("div", _extends({
+      id: "newFileExperienceWrapper"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: newFileExperienceClassName,
+      "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,
+        dimensions,
+        appearance,
+        disableOverlay,
+        displayBackground,
+        selected,
+        isPlayButtonClickable,
+        isTickBoxSelectable,
+        shouldDisplayTooltip,
+        mediaCardCursor
+      }),
+      ref: innerRef,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter
+    }, VcMediaWrapperProps), props.children)
+  );
+};

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

@@ -1,55 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @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';
-import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
-export const Wrapper = props => {
-  const {
-    testId,
-    dimensions,
-    appearance,
-    onClick,
-    onMouseEnter,
-    innerRef,
-    breakpoint,
-    mediaCardCursor,
-    disableOverlay,
-    selected,
-    displayBackground,
-    isPlayButtonClickable,
-    isTickBoxSelectable,
-    shouldDisplayTooltip
-  } = props;
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({
-      id: "newFileExperienceWrapper"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: newFileExperienceClassName,
-      "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,
-        dimensions,
-        appearance,
-        disableOverlay,
-        displayBackground,
-        selected,
-        isPlayButtonClickable,
-        isTickBoxSelectable,
-        shouldDisplayTooltip,
-        mediaCardCursor
-      }),
-      ref: innerRef,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter
-    }, VcMediaWrapperProps), props.children)
-  );
-};
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Wrapper as CompiledWrapper } from './wrapper-compiled';
+import { Wrapper as EmotionWrapper } from './wrapper-emotion';
+export const Wrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledWrapper, props) : /*#__PURE__*/React.createElement(EmotionWrapper, props);

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "79.0.0",
+      packageName: "79.0.2",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -5,7 +5,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.0.0";
+const packageVersion = "79.0.2";
 const SAMPLE_RATE = 0.05;
 let concurrentExperience;
 const getExperience = id => {

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.0";
+var packageVersion = "79.0.2";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -2,12 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-/**
- * @jsxRuntime classic
- * @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, useMemo } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
@@ -144,7 +138,7 @@ export var CardViewBase = function CardViewBase(_ref) {
         });
       case 'processing':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
+          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         });
@@ -165,12 +159,12 @@ export var CardViewBase = function CardViewBase(_ref) {
         var _iconMessage;
         var _customTitleMessage;
         if (isUploadError(error)) {
-          _iconMessage = jsx(FailedToUpload, null);
+          _iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
           _customTitleMessage = messages.failed_to_upload;
         } else if (!metadata) {
-          _iconMessage = jsx(FailedToLoad, null);
+          _iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
         } else {
-          _iconMessage = jsx(PreviewUnavailable, null);
+          _iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
         }
         if (!disableOverlay) {
           var _renderFailedTitleBox = !name || !!_customTitleMessage;
@@ -240,7 +234,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
-  var contents = jsx(React.Fragment, null, jsx(ImageContainer, {
+  var contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender,
     testId: fileCardImageViewSelector,
     mediaName: name,
@@ -248,27 +242,27 @@ export var CardViewBase = function CardViewBase(_ref) {
     progress: progress,
     selected: selected,
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
-  }, renderTypeIcon && jsx(IconWrapper, {
+  }, renderTypeIcon && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, jsx(MimeTypeIcon, {
+  }, /*#__PURE__*/React.createElement(MimeTypeIcon, {
     testId: "media-card-file-type-icon",
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && jsx(IconWrapper, {
+  }), iconMessage), renderSpinner && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, jsx(SpinnerIcon, {
+  }, /*#__PURE__*/React.createElement(SpinnerIcon, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && jsx(SvgView, {
+  })), renderSvgView && identifier && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
     wrapperRef: divRef
-  }), renderImageRenderer && jsx(ImageRenderer, {
+  }), renderImageRenderer && /*#__PURE__*/React.createElement(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,
@@ -278,36 +272,36 @@ export var CardViewBase = function CardViewBase(_ref) {
     onImageError: handleOnImageError,
     nativeLazyLoad: nativeLazyLoad,
     forceSyncDisplay: forceSyncDisplay
-  }), renderPlayButton && jsx(IconWrapper, {
+  }), renderPlayButton && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, jsx(PlayButton, null)), renderBlanket && jsx(Blanket, {
+  }, /*#__PURE__*/React.createElement(PlayButton, null)), renderBlanket && /*#__PURE__*/React.createElement(Blanket, {
     isFixed: isFixedBlanket
-  }), renderTitleBox && jsx(TitleBox, {
+  }), renderTitleBox && /*#__PURE__*/React.createElement(TitleBox, {
     name: name,
     createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor,
     hidden: !isTitleBoxVisible
-  }), renderFailedTitleBox && jsx(FailedTitleBox, {
+  }), renderFailedTitleBox && /*#__PURE__*/React.createElement(FailedTitleBox, {
     breakpoint: breakpoint,
     customMessage: customTitleMessage
-  }), renderProgressBar && jsx(ProgressBar, {
+  }), renderProgressBar && /*#__PURE__*/React.createElement(ProgressBar, {
     progress: progress,
     breakpoint: breakpoint,
     positionBottom: !hasVisibleTitleBox
-  }), renderTickBox && jsx(TickBox, {
+  }), renderTickBox && /*#__PURE__*/React.createElement(TickBox, {
     selected: selected
-  })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {
+  })), disableOverlay || !actions || actions.length === 0 ? null : /*#__PURE__*/React.createElement(ActionsBar, {
     filename: name,
     actions: actionsWithDetails
   }));
-  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldOpenMediaViewer && /*#__PURE__*/React.createElement(OpenMediaViewerButton, {
     fileName: name !== null && name !== void 0 ? name : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
-  }), jsx(Wrapper, {
+  }), /*#__PURE__*/React.createElement(Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
@@ -321,7 +315,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     isPlayButtonClickable: isPlayButtonClickable,
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
-  }, shouldDisplayTooltip ? jsx(Tooltip, {
+  }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
     content: name,
     position: "bottom",
     tag: "div"

package/dist/esm/card/inlinePlayerWrapper-compiled.compiled.css

@@ -0,0 +1,19 @@
+
+._14mj1sit:after{border-radius:var(--ds-border-radius,3px)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._eq4314x9:after{border:var(--_f9up2s)}._11fnglyw:after{pointer-events:none}
+._14r11j28::-moz-selection, ._1np21j28 ::-moz-selection{background-color:transparent}
+._15l2idpf:after{top:0}
+._18m915vq{overflow-y:hidden}
+._18postnw:after{position:absolute}
+._1p1y1j28::selection, ._1rk81j28 ::selection{background-color:transparent}
+._1qdg1osq:after{height:100%}
+._1reo15vq{overflow-x:hidden}
+._1y2k1osq video{width:100%}
+._631ousvi:after{box-sizing:border-box}
+._aetrb3bt:after{content:""}
+._c71l1osq{max-height:100%}
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}
+._z0ai1osq:after{width:100%}
+._z18o1osq video{height:100%}

package/dist/esm/card/inlinePlayerWrapper-compiled.js

@@ -0,0 +1,42 @@
+/* inlinePlayerWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./inlinePlayerWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
+import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+var hideNativeBrowserTextSelectionStyles = null;
+var selectedBorderStyle = null;
+
+/*
+ * Used to display the blue border around a selected card without
+ * shrinking the image OR growing the card size
+ */
+var borderStyle = null;
+export var inlinePlayerClassName = 'media-card-inline-player';
+var inlinePlayerWrapperStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
+  var testId = props.testId,
+    selected = props.selected,
+    dimensions = props.dimensions,
+    onClick = props.onClick,
+    innerRef = props.innerRef;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: "inlinePlayerWrapper",
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_1reo15vq _18m915vq _2rko1sit _kqswh2mm _p12f1osq _c71l1osq _1y2k1osq _z18o1osq", selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", "_14mj1sit _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw", selected && "_eq4314x9", inlinePlayerClassName]),
+    onClick: onClick,
+    ref: innerRef
+  }, VcMediaWrapperProps, {
+    style: {
+      width: getDimensionsWithDefault(dimensions).width || '100%',
+      height: getDimensionsWithDefault(dimensions).height || 'auto',
+      "--_f9up2s": ix("1px solid ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
+  }), props.children);
+};

package/dist/esm/card/inlinePlayerWrapper-emotion.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @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';
+import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
+  var testId = props.testId,
+    selected = props.selected,
+    dimensions = props.dimensions,
+    onClick = props.onClick,
+    innerRef = props.innerRef;
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    jsx("div", _extends({
+      id: "inlinePlayerWrapper",
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      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: selected,
+        dimensions: dimensions
+      }),
+      onClick: onClick,
+      ref: innerRef
+    }, VcMediaWrapperProps), props.children)
+  );
+};

package/dist/esm/card/inlinePlayerWrapper.js

@@ -1,34 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @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';
-import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import React from 'react';
+import { InlinePlayerWrapper as CompiledInlinePlayerWrapper } from './inlinePlayerWrapper-compiled';
+import { InlinePlayerWrapper as EmotionInlinePlayerWrapper } from './inlinePlayerWrapper-emotion';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
-  var testId = props.testId,
-    selected = props.selected,
-    dimensions = props.dimensions,
-    onClick = props.onClick,
-    innerRef = props.innerRef;
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({
-      id: "inlinePlayerWrapper",
-      "data-testid": testId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      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: selected,
-        dimensions: dimensions
-      }),
-      onClick: onClick,
-      ref: innerRef
-    }, VcMediaWrapperProps), props.children)
-  );
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledInlinePlayerWrapper, props) : /*#__PURE__*/React.createElement(EmotionInlinePlayerWrapper, props);
 };

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.0";
+var packageVersion = "79.0.2";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/svgView/svgImage-compiled.compiled.css

@@ -0,0 +1,4 @@
+._5ral1f51{object-fit:contain}
+._bfhku67f{background-color:#fff}
+._c71l1osq{max-height:100%}
+._p12f1osq{max-width:100%}

package/dist/esm/card/svgView/svgImage-compiled.js

@@ -0,0 +1,84 @@
+/* svgImage-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./svgImage-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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; }
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { MediaCardError } from '../../errors';
+import { calculateSvgDimensions } from './helpers';
+import { useResolveSvg, MediaSVGError } from '@atlaskit/media-svg';
+export var getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    case 'blob-to-datauri':
+      return 'svg-blob-to-datauri';
+    default:
+      return 'svg-unknown-error';
+  }
+};
+var svgRendererStyles = null;
+var svgRendererMaxDimensionStyles = null;
+export var SvgView = function SvgView(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    wrapperRef = _ref.wrapperRef,
+    alt = _ref.alt;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    svgDimensions = _useState4[0],
+    setSvgDimensions = _useState4[1];
+  var imgRef = useRef(null);
+  var calculateDimensions = useCallback(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode, wrapperRef]);
+  var onSvgLoad = function onSvgLoad(evt) {
+    calculateDimensions(evt.currentTarget);
+    setDidSvgRender(true);
+    onLoad === null || onLoad === void 0 || onLoad();
+  };
+  var onSvgError = function onSvgError(err) {
+    var error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 || onError(error);
+  };
+  useEffect(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
+  var _useResolveSvg = useResolveSvg(identifier, onSvgError),
+    svgUrl = _useResolveSvg.svgUrl,
+    source = _useResolveSvg.source;
+  var width = svgDimensions.width,
+    height = svgDimensions.height;
+  return svgUrl && source ? /*#__PURE__*/React.createElement("img", {
+    "data-testid": 'media-card-svg',
+    "data-fileid": identifier.id,
+    "data-filecollection": identifier.collectionName,
+    "data-source": source,
+    src: svgUrl,
+    alt: alt,
+    style: _objectSpread({
+      visibility: didSvgRender ? 'visible' : 'hidden'
+    }, svgDimensions),
+    onLoad: onSvgLoad,
+    onError: function onError() {
+      onSvgError(new MediaSVGError('img-error'));
+    },
+    ref: imgRef,
+    className: ax(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+  }) : null;
+};