@atlaskit/media-card 79.0.0 → 79.0.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-card
 
+## 79.0.2
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
+## 79.0.1
+
+### Patch Changes
+
+- [#115525](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115525)
+  [`f3846b2639942`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3846b2639942) -
+  Migrated Media Card to compiled behind a featureflag
+- Updated dependencies
+
 ## 79.0.0
 
 ### Major Changes

package/classnames/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/classnames.js",
   "module": "../dist/esm/classnames.js",
   "module:es2019": "../dist/es2019/classnames.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/classnames.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/card/card.js

@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
 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 && {}.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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.0";
+var packageVersion = "79.0.2";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -8,8 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CardViewBase = exports.CardView = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -37,10 +36,7 @@ var _svgView = require("./svgView");
 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 && {}.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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var identifier = _ref.identifier,
     _ref$innerRef = _ref.innerRef,
@@ -76,18 +72,18 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     overriddenCreationDate = _ref.overriddenCreationDate,
     onSvgError = _ref.onSvgError,
     onSvgLoad = _ref.onSvgLoad;
-  var _useState = (0, _react2.useState)(false),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didSvgRender = _useState2[0],
     setDidSvgRender = _useState2[1];
-  var _useState3 = (0, _react2.useState)(false),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     didImageRender = _useState4[0],
     setDidImageRender = _useState4[1];
-  var divRef = (0, _react2.useRef)(null);
-  var prevCardPreviewRef = (0, _react2.useRef)();
+  var divRef = (0, _react.useRef)(null);
+  var prevCardPreviewRef = (0, _react.useRef)();
   var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
+  (0, _react.useEffect)(function () {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
       setDidImageRender(false);
@@ -152,7 +148,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
         });
       case 'processing':
         return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-          iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage2.CreatingPreview, {
+          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage2.CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         });
@@ -173,12 +169,12 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
         var _iconMessage;
         var _customTitleMessage;
         if ((0, _errors.isUploadError)(error)) {
-          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToUpload, null);
+          _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToUpload, null);
           _customTitleMessage = _mediaUi.messages.failed_to_upload;
         } else if (!metadata) {
-          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToLoad, null);
+          _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToLoad, null);
         } else {
-          _iconMessage = (0, _react.jsx)(_iconMessage2.PreviewUnavailable, null);
+          _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.PreviewUnavailable, null);
         }
         if (!disableOverlay) {
           var _renderFailedTitleBox = !name || !!_customTitleMessage;
@@ -225,7 +221,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var isTitleBoxVisible = renderTitleBox && name;
   var hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
   var metadataRef = (0, _useCurrentValueRef.useCurrentValueRef)(metadata);
-  var actionsWithDetails = (0, _react2.useMemo)(function () {
+  var actionsWithDetails = (0, _react.useMemo)(function () {
     if (!actions) {
       return [];
     }
@@ -248,7 +244,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
-  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
+  var contents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_wrapper.ImageContainer, {
     centerElements: didSvgRender,
     testId: _classnames.fileCardImageViewSelector,
     mediaName: name,
@@ -256,27 +252,27 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     progress: progress,
     selected: selected,
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
-  }, renderTypeIcon && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+  }, renderTypeIcon && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
     testId: "media-card-file-type-icon",
     mediaType: mediaType,
     mimeType: mimeType,
     name: name
-  }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+  }), iconMessage), renderSpinner && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, (0, _react.jsx)(_spinner.default, {
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && (0, _react.jsx)(_svgView.SvgView, {
+  })), renderSvgView && identifier && /*#__PURE__*/_react.default.createElement(_svgView.SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
     wrapperRef: divRef
-  }), renderImageRenderer && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+  }), renderImageRenderer && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,
@@ -286,36 +282,36 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     onImageError: handleOnImageError,
     nativeLazyLoad: nativeLazyLoad,
     forceSyncDisplay: forceSyncDisplay
-  }), renderPlayButton && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+  }), renderPlayButton && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox
-  }, (0, _react.jsx)(_playButton.PlayButton, null)), renderBlanket && (0, _react.jsx)(_blanket.Blanket, {
+  }, /*#__PURE__*/_react.default.createElement(_playButton.PlayButton, null)), renderBlanket && /*#__PURE__*/_react.default.createElement(_blanket.Blanket, {
     isFixed: isFixedBlanket
-  }), renderTitleBox && (0, _react.jsx)(_titleBox.TitleBox, {
+  }), renderTitleBox && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
     name: name,
     createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor,
     hidden: !isTitleBoxVisible
-  }), renderFailedTitleBox && (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
+  }), renderFailedTitleBox && /*#__PURE__*/_react.default.createElement(_failedTitleBox.FailedTitleBox, {
     breakpoint: breakpoint,
     customMessage: customTitleMessage
-  }), renderProgressBar && (0, _react.jsx)(_progressBar.ProgressBar, {
+  }), renderProgressBar && /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
     progress: progress,
     breakpoint: breakpoint,
     positionBottom: !hasVisibleTitleBox
-  }), renderTickBox && (0, _react.jsx)(_tickBox.TickBox, {
+  }), renderTickBox && /*#__PURE__*/_react.default.createElement(_tickBox.TickBox, {
     selected: selected
-  })), disableOverlay || !actions || actions.length === 0 ? null : (0, _react.jsx)(_actionsBar.ActionsBar, {
+  })), disableOverlay || !actions || actions.length === 0 ? null : /*#__PURE__*/_react.default.createElement(_actionsBar.ActionsBar, {
     filename: name,
     actions: actionsWithDetails
   }));
-  return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldOpenMediaViewer && /*#__PURE__*/_react.default.createElement(_openMediaViewerButton.default, {
     fileName: name !== null && name !== void 0 ? name : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
-  }), (0, _react.jsx)(_wrapper.Wrapper, {
+  }), /*#__PURE__*/_react.default.createElement(_wrapper.Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
@@ -329,7 +325,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     isPlayButtonClickable: isPlayButtonClickable,
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
-  }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
+  }, shouldDisplayTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: name,
     position: "bottom",
     tag: "div"

package/dist/cjs/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/cjs/card/inlinePlayerWrapper-compiled.js

@@ -0,0 +1,52 @@
+/* inlinePlayerWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inlinePlayerClassName = exports.InlinePlayerWrapper = void 0;
+require("./inlinePlayerWrapper-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
+var _vcMedia = require("@atlaskit/react-ufo/vc-media");
+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 && {}.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; }
+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;
+var inlinePlayerClassName = exports.inlinePlayerClassName = 'media-card-inline-player';
+var inlinePlayerWrapperStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var InlinePlayerWrapper = exports.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", (0, _extends2.default)({
+    id: "inlinePlayerWrapper",
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.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
+  }, _vcMedia.VcMediaWrapperProps, {
+    style: {
+      width: (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%',
+      height: (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto',
+      "--_f9up2s": (0, _runtime.ix)("1px solid ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
+  }), props.children);
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlinePlayerWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _inlinePlayerWrapperStyles = require("./inlinePlayerWrapperStyles");
+var _vcMedia = require("@atlaskit/react-ufo/vc-media");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var InlinePlayerWrapper = exports.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
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      id: "inlinePlayerWrapper",
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: _inlinePlayerWrapperStyles.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: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
+        selected: selected,
+        dimensions: dimensions
+      }),
+      onClick: onClick,
+      ref: innerRef
+    }, _vcMedia.VcMediaWrapperProps), props.children)
+  );
+};

package/dist/cjs/card/inlinePlayerWrapper.js

@@ -5,38 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlinePlayerWrapper = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _inlinePlayerWrapperStyles = require("./inlinePlayerWrapperStyles");
-var _vcMedia = require("@atlaskit/react-ufo/vc-media");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _react = _interopRequireDefault(require("react"));
+var _inlinePlayerWrapperCompiled = require("./inlinePlayerWrapper-compiled");
+var _inlinePlayerWrapperEmotion = require("./inlinePlayerWrapper-emotion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var InlinePlayerWrapper = exports.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
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      id: "inlinePlayerWrapper",
-      "data-testid": testId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: _inlinePlayerWrapperStyles.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: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
-        selected: selected,
-        dimensions: dimensions
-      }),
-      onClick: onClick,
-      ref: innerRef
-    }, _vcMedia.VcMediaWrapperProps), props.children)
-  );
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapperCompiled.InlinePlayerWrapper, props) : /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapperEmotion.InlinePlayerWrapper, props);
 };

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

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(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 = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/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/cjs/card/svgView/svgImage-compiled.js

@@ -0,0 +1,94 @@
+/* svgImage-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorReason = exports.SvgView = void 0;
+require("./svgImage-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _errors = require("../../errors");
+var _helpers = require("./helpers");
+var _mediaSvg = require("@atlaskit/media-svg");
+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 && {}.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; }
+var getErrorReason = exports.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;
+var SvgView = exports.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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    svgDimensions = _useState4[0],
+    setSvgDimensions = _useState4[1];
+  var imgRef = (0, _react.useRef)(null);
+  var calculateDimensions = (0, _react.useCallback)(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions((0, _helpers.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 _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 || onError(error);
+  };
+  (0, _react.useEffect)(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
+  var _useResolveSvg = (0, _mediaSvg.useResolveSvg)(identifier, onSvgError),
+    svgUrl = _useResolveSvg.svgUrl,
+    source = _useResolveSvg.source;
+  var width = svgDimensions.width,
+    height = svgDimensions.height;
+  return svgUrl && source ? /*#__PURE__*/_react.default.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 _mediaSvg.MediaSVGError('img-error'));
+    },
+    ref: imgRef,
+    className: (0, _runtime.ax)(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+  }) : null;
+};

package/dist/cjs/card/svgView/svgImage-emotion.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorReason = exports.SvgView = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _errors = require("../../errors");
+var _helpers = require("./helpers");
+var _mediaSvg = require("@atlaskit/media-svg");
+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 && {}.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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var getErrorReason = exports.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 = (0, _react.css)({
+  objectFit: 'contain',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: 'white' // This background color is for transparency
+});
+var svgRendererMaxDimensionStyles = (0, _react.css)({
+  maxWidth: '100%',
+  maxHeight: '100%'
+});
+var SvgView = exports.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 = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = (0, _react2.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    svgDimensions = _useState4[0],
+    setSvgDimensions = _useState4[1];
+  var imgRef = (0, _react2.useRef)(null);
+  var calculateDimensions = (0, _react2.useCallback)(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions((0, _helpers.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 _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 || onError(error);
+  };
+  (0, _react2.useEffect)(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
+  var _useResolveSvg = (0, _mediaSvg.useResolveSvg)(identifier, onSvgError),
+    svgUrl = _useResolveSvg.svgUrl,
+    source = _useResolveSvg.source;
+  var width = svgDimensions.width,
+    height = svgDimensions.height;
+  return svgUrl && source ? (0, _react.jsx)("img", {
+    "data-testid": 'media-card-svg',
+    "data-fileid": identifier.id,
+    "data-filecollection": identifier.collectionName,
+    "data-source": source,
+    src: svgUrl,
+    alt: alt,
+    css: [svgRendererStyles, !width && !height && svgRendererMaxDimensionStyles],
+    style: _objectSpread({
+      visibility: didSvgRender ? 'visible' : 'hidden'
+    }, svgDimensions),
+    onLoad: onSvgLoad,
+    onError: function onError() {
+      onSvgError(new _mediaSvg.MediaSVGError('img-error'));
+    },
+    ref: imgRef
+  }) : null;
+};

package/dist/cjs/card/ui/actionsBar/actionsBarWrapper-compiled.compiled.css

@@ -0,0 +1,15 @@
+
+._v564ybtr{transition:all .3s}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._154iidpf{top:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bahusic{justify-content:right}
+._1e0c1txw{display:flex}
+._1n261q9c{flex-wrap:nowrap}
+._1xi2idpf{right:0}
+._2lx2vrvc{flex-direction:row}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswstnw{position:absolute}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._tzy4idpf{opacity:0}
+._tzy4kb7n{opacity:1}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}