@atlaskit/media-card 79.0.0 → 79.0.1

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageContainer = void 0;
+var _react = require("@emotion/react");
+var _classnames = require("../../classnames");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var imageContainerStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var imageContainerCenterStyles = (0, _react.css)({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
+  var children = _ref.children,
+    mediaName = _ref.mediaName,
+    status = _ref.status,
+    progress = _ref.progress,
+    selected = _ref.selected,
+    source = _ref.source,
+    centerElements = _ref.centerElements;
+  return (0, _react.jsx)("div", {
+    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+    "data-testid": _classnames.fileCardImageViewSelector
+    /**
+     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
+     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
+     * Also, many other consumer tests rely on this selector.
+     */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: _classnames.fileCardImageViewSelector,
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected,
+    "data-test-source": source
+  }, children);
+};

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

@@ -1,55 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageContainer = void 0;
-var _react = require("@emotion/react");
-var _classnames = require("../../classnames");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var imageContainerStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)"
-});
-var imageContainerCenterStyles = (0, _react.css)({
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-var ImageContainer = exports.ImageContainer = function ImageContainer(_ref) {
-  var children = _ref.children,
-    mediaName = _ref.mediaName,
-    status = _ref.status,
-    progress = _ref.progress,
-    selected = _ref.selected,
-    source = _ref.source,
-    centerElements = _ref.centerElements;
-  return (0, _react.jsx)("div", {
-    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
-    "data-testid": _classnames.fileCardImageViewSelector
-    /**
-     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
-     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
-     * Also, many other consumer tests rely on this selector.
-     */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _classnames.fileCardImageViewSelector,
-    "data-test-media-name": mediaName,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    "data-test-selected": selected,
-    "data-test-source": source
-  }, children);
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _imageContainerCompiled = require("./imageContainer-compiled");
+var ImageContainer = exports.ImageContainer = function ImageContainer(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_imageContainerCompiled.ImageContainer, props) : /*#__PURE__*/_react.default.createElement(_imageContainerCompiled.ImageContainer, props);
 };

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

@@ -0,0 +1,24 @@
+
+._2rko1l7b{border-radius:3px}
+button:focus+._1hlmuwsq{outline:var(--_jz8ahf)}._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}
+._1xp5rcbj:hover .media-card-tickbox{color:var(--_13xf2t5)}
+._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
+._1yf91flm:hover .media-card-tickbox{background-color:var(--_mt8cm6)}
+._80omtlke{cursor:pointer}
+._80omv00u{cursor:wait}
+._9m3z1osq>div{width:100%}
+._bfhklslw{background-color:var(--_1jkcdu5)}
+._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)}
+._eg5415te:hover .media-card-blanket{background-color:var(--_1vvetkq)}
+._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/cjs/card/ui/wrapper/wrapper-compiled.js

@@ -0,0 +1,96 @@
+/* wrapper-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.Wrapper = void 0;
+require("./wrapper-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _cardConstants = require("../../cardConstants");
+var _vcMedia = require("@atlaskit/react-ufo/vc-media");
+var _colors = require("@atlaskit/theme/colors");
+var _cardDimensions = require("../../../utils/cardDimensions");
+var _getCSSUnitValue = require("../../../utils/getCSSUnitValue");
+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 wrapperStyles = null;
+var backgroundStyle = null;
+var cursorStyleMap = {
+  pointer: "_80omtlke",
+  wait: "_80omv00u"
+};
+var shadowStyleMap = {
+  withOverlay: "_16qs64c8",
+  selected: "_16qs666x",
+  selectedWithOverlay: "_16qshzij"
+};
+var getShadowKey = function getShadowKey(disableOverlay, selected) {
+  if (!disableOverlay && selected) {
+    return 'selectedWithOverlay';
+  }
+  if (!disableOverlay) {
+    return 'withOverlay';
+  }
+  if (selected) {
+    return 'selected';
+  }
+  return '';
+};
+var hideNativeBrowserTextSelectionStyles = null;
+var clickableButtonPlayButtonStyles = null;
+var selectableTickboxStyle = null;
+var tooltipStyle = null;
+var getResponsiveStyles = function getResponsiveStyles(breakpoint) {
+  // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
+  return breakpoint === "small" ? (0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'fontSize', '11x'), 'lineHeight', '14px') : (0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'fontSize', '14px'), 'lineHeight', '22px');
+};
+var Wrapper = exports.Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+    dimensions = props.dimensions,
+    appearance = props.appearance,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    innerRef = props.innerRef,
+    breakpoint = props.breakpoint,
+    mediaCardCursor = props.mediaCardCursor,
+    disableOverlay = props.disableOverlay,
+    selected = props.selected,
+    displayBackground = props.displayBackground,
+    isPlayButtonClickable = props.isPlayButtonClickable,
+    isTickBoxSelectable = props.isTickBoxSelectable,
+    shouldDisplayTooltip = props.shouldDisplayTooltip;
+  var defaultImageCardDimensions = (0, _cardDimensions.getDefaultCardDimensions)(appearance);
+  var width = (0, _getCSSUnitValue.getCSSUnitValue)((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
+  var height = (0, _getCSSUnitValue.getCSSUnitValue)((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
+  var wrapperShadowKey = getShadowKey(disableOverlay, selected);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_2rko1l7b _vchhusvi _kqswh2mm _ect41sbm _p12f1osq _c71l1osq _1hlmuwsq _1rquusvi _eg5415te _mts3kb7n _1ntskb7n", displayBackground && "_bfhklslw", mediaCardCursor && cursorStyleMap[mediaCardCursor], wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
+    "data-testid": testId,
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, _vcMedia.VcMediaWrapperProps, {
+    style: _objectSpread(_objectSpread({
+      width: width,
+      height: height
+    }, getResponsiveStyles(breakpoint)), {}, {
+      "--_1vvetkq": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N90A, ")")),
+      "--_jz8ahf": (0, _runtime.ix)("solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))),
+      "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")")),
+      "--_mt8cm6": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N0, ")")),
+      "--_13xf2t5": (0, _runtime.ix)("var(--ds-icon-subtle, ".concat(_colors.N100, ")"))
+    })
+  }), props.children);
+};
+Wrapper.displayName = 'NewFileExperienceWrapper';

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _cardConstants = require("../../cardConstants");
+var _styles = require("./styles");
+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 Wrapper = exports.Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+    dimensions = props.dimensions,
+    appearance = props.appearance,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    innerRef = props.innerRef,
+    breakpoint = props.breakpoint,
+    mediaCardCursor = props.mediaCardCursor,
+    disableOverlay = props.disableOverlay,
+    selected = props.selected,
+    displayBackground = props.displayBackground,
+    isPlayButtonClickable = props.isPlayButtonClickable,
+    isTickBoxSelectable = props.isTickBoxSelectable,
+    shouldDisplayTooltip = props.shouldDisplayTooltip;
+  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: "newFileExperienceWrapper"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: _cardConstants.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: (0, _styles.wrapperStyles)({
+        breakpoint: breakpoint,
+        dimensions: dimensions,
+        appearance: appearance,
+        disableOverlay: disableOverlay,
+        displayBackground: displayBackground,
+        selected: selected,
+        isPlayButtonClickable: isPlayButtonClickable,
+        isTickBoxSelectable: isTickBoxSelectable,
+        shouldDisplayTooltip: shouldDisplayTooltip,
+        mediaCardCursor: mediaCardCursor
+      }),
+      ref: innerRef,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter
+    }, _vcMedia.VcMediaWrapperProps), props.children)
+  );
+};

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

@@ -5,57 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Wrapper = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _cardConstants = require("../../cardConstants");
-var _styles = require("./styles");
-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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _wrapperCompiled = require("./wrapper-compiled");
+var _wrapperEmotion = require("./wrapper-emotion");
 var Wrapper = exports.Wrapper = function Wrapper(props) {
-  var testId = props.testId,
-    dimensions = props.dimensions,
-    appearance = props.appearance,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    innerRef = props.innerRef,
-    breakpoint = props.breakpoint,
-    mediaCardCursor = props.mediaCardCursor,
-    disableOverlay = props.disableOverlay,
-    selected = props.selected,
-    displayBackground = props.displayBackground,
-    isPlayButtonClickable = props.isPlayButtonClickable,
-    isTickBoxSelectable = props.isTickBoxSelectable,
-    shouldDisplayTooltip = props.shouldDisplayTooltip;
-  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: "newFileExperienceWrapper"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: _cardConstants.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: (0, _styles.wrapperStyles)({
-        breakpoint: breakpoint,
-        dimensions: dimensions,
-        appearance: appearance,
-        disableOverlay: disableOverlay,
-        displayBackground: displayBackground,
-        selected: selected,
-        isPlayButtonClickable: isPlayButtonClickable,
-        isTickBoxSelectable: isTickBoxSelectable,
-        shouldDisplayTooltip: shouldDisplayTooltip,
-        mediaCardCursor: mediaCardCursor
-      }),
-      ref: innerRef,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter
-    }, _vcMedia.VcMediaWrapperProps), props.children)
-  );
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_wrapperCompiled.Wrapper, props) : /*#__PURE__*/_react.default.createElement(_wrapperEmotion.Wrapper, props);
 };

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,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 = "79.0.0";
+var packageVersion = "79.0.1";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.0.0";
+const packageVersion = "79.0.1";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -1,9 +1,3 @@
-/**
- * @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';
@@ -138,7 +132,7 @@ export const CardViewBase = ({
       case 'processing':
         return {
           ...defaultConfig,
-          iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
+          iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
             disableAnimation: disableAnimation
           }) : undefined
         };
@@ -160,12 +154,12 @@ export const CardViewBase = ({
         let iconMessage;
         let 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) {
           const renderFailedTitleBox = !name || !!customTitleMessage;
@@ -238,7 +232,7 @@ export const CardViewBase = ({
     setDidSvgRender(true);
     onSvgLoad === null || onSvgLoad === void 0 ? void 0 : onSvgLoad();
   };
-  const contents = jsx(React.Fragment, null, jsx(ImageContainer, {
+  const contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
     centerElements: didSvgRender,
     testId: fileCardImageViewSelector,
     mediaName: name,
@@ -246,27 +240,27 @@ export const CardViewBase = ({
     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,
@@ -276,36 +270,36 @@ export const CardViewBase = ({
     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,
@@ -319,7 +313,7 @@ export const CardViewBase = ({
     isPlayButtonClickable: isPlayButtonClickable,
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
-  }, shouldDisplayTooltip ? jsx(Tooltip, {
+  }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
     content: name,
     position: "bottom",
     tag: "div"

package/dist/es2019/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)}
+._eq43qm0p:after{border:1px solid var(--ds-border-selected,#0c66e4)}._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/es2019/card/inlinePlayerWrapper-compiled.js

@@ -0,0 +1,45 @@
+/* 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';
+const hideNativeBrowserTextSelectionStyles = null;
+const selectedBorderStyle = null;
+
+/*
+ * Used to display the blue border around a selected card without
+ * shrinking the image OR growing the card size
+ */
+const borderStyle = null;
+export const inlinePlayerClassName = 'media-card-inline-player';
+const inlinePlayerWrapperStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+export const InlinePlayerWrapper = props => {
+  const {
+    testId,
+    selected,
+    dimensions,
+    onClick,
+    innerRef
+  } = props;
+  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 && "_eq43qm0p", inlinePlayerClassName]),
+    style: {
+      width: getDimensionsWithDefault(dimensions).width || '100%',
+      height: getDimensionsWithDefault(dimensions).height || 'auto'
+    }
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+
+    onClick: onClick,
+    ref: innerRef
+  }, VcMediaWrapperProps), props.children);
+};

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

@@ -0,0 +1,36 @@
+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 const InlinePlayerWrapper = props => {
+  const {
+    testId,
+    selected,
+    dimensions,
+    onClick,
+    innerRef
+  } = props;
+  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,
+        dimensions
+      }),
+      onClick: onClick,
+      ref: innerRef
+    }, VcMediaWrapperProps), props.children)
+  );
+};