@atlaskit/media-card 79.0.0 → 79.0.1

package/dist/es2019/card/inlinePlayerWrapper.js

@@ -1,36 +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 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)
-  );
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledInlinePlayerWrapper, props) : /*#__PURE__*/React.createElement(EmotionInlinePlayerWrapper, props);
 };

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.0.0";
+const packageVersion = "79.0.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

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

@@ -0,0 +1,80 @@
+/* svgImage-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./svgImage-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { MediaCardError } from '../../errors';
+import { calculateSvgDimensions } from './helpers';
+import { useResolveSvg, MediaSVGError } from '@atlaskit/media-svg';
+export const 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';
+  }
+};
+const svgRendererStyles = null;
+const svgRendererMaxDimensionStyles = null;
+export const SvgView = ({
+  identifier,
+  resizeMode,
+  onLoad,
+  onError,
+  wrapperRef,
+  alt
+}) => {
+  const [didSvgRender, setDidSvgRender] = useState(false);
+  const [svgDimensions, setSvgDimensions] = useState({});
+  const imgRef = useRef(null);
+  const calculateDimensions = useCallback(targetImgElem => {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode, wrapperRef]);
+  const onSvgLoad = evt => {
+    calculateDimensions(evt.currentTarget);
+    setDidSvgRender(true);
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+  };
+  const onSvgError = err => {
+    const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 ? void 0 : onError(error);
+  };
+  useEffect(() => {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
+  const {
+    svgUrl,
+    source
+  } = useResolveSvg(identifier, onSvgError);
+  const {
+    width,
+    height
+  } = svgDimensions;
+  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: {
+      visibility: didSvgRender ? 'visible' : 'hidden',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...svgDimensions
+    },
+    onLoad: onSvgLoad,
+    onError: () => {
+      onSvgError(new MediaSVGError('img-error'));
+    },
+    ref: imgRef,
+    className: ax(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+  }) : null;
+};

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

@@ -0,0 +1,90 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx, css } from '@emotion/react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { MediaCardError } from '../../errors';
+import { calculateSvgDimensions } from './helpers';
+import { useResolveSvg, MediaSVGError } from '@atlaskit/media-svg';
+export const 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';
+  }
+};
+const svgRendererStyles = css({
+  objectFit: 'contain',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: 'white' // This background color is for transparency
+});
+const svgRendererMaxDimensionStyles = css({
+  maxWidth: '100%',
+  maxHeight: '100%'
+});
+export const SvgView = ({
+  identifier,
+  resizeMode,
+  onLoad,
+  onError,
+  wrapperRef,
+  alt
+}) => {
+  const [didSvgRender, setDidSvgRender] = useState(false);
+  const [svgDimensions, setSvgDimensions] = useState({});
+  const imgRef = useRef(null);
+  const calculateDimensions = useCallback(targetImgElem => {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode, wrapperRef]);
+  const onSvgLoad = evt => {
+    calculateDimensions(evt.currentTarget);
+    setDidSvgRender(true);
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+  };
+  const onSvgError = err => {
+    const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 ? void 0 : onError(error);
+  };
+  useEffect(() => {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
+  const {
+    svgUrl,
+    source
+  } = useResolveSvg(identifier, onSvgError);
+  const {
+    width,
+    height
+  } = svgDimensions;
+  return svgUrl && source ? 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: {
+      visibility: didSvgRender ? 'visible' : 'hidden',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...svgDimensions
+    },
+    onLoad: onSvgLoad,
+    onError: () => {
+      onSvgError(new MediaSVGError('img-error'));
+    },
+    ref: imgRef
+  }) : null;
+};

package/dist/es2019/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)}

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

@@ -0,0 +1,20 @@
+/* actionsBarWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./actionsBarWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { actionsBarClassName } from './styles';
+const wrapperStyles = null;
+const fixedActionBarStyle = null;
+export const ActionsBarWrapper = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "actionsBarWrapper",
+    "data-testId": "actionsBarWrapper",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_v564ybtr _2lx2vrvc _1n261q9c _zulpu2gc _kqswstnw _154iidpf _1xi2idpf _1e0c1txw _1bahusic _ca0qu2gc _n3tdu2gc _u5f3u2gc _19bvu2gc _tzy4idpf", props.isFixed && "_tzy4kb7n", actionsBarClassName]),
+    onClick: event => {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, props.children);
+};
+ActionsBarWrapper.displayName = 'ActionsBarWrapper';

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

@@ -0,0 +1,26 @@
+/**
+ * @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 { wrapperStyles, actionsBarClassName } from './styles';
+export const ActionsBarWrapper = props => {
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    jsx("div", {
+      id: "actionsBarWrapper",
+      "data-testId": "actionsBarWrapper"
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: wrapperStyles(props.isFixed)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: actionsBarClassName,
+      onClick: event => {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }, props.children)
+  );
+};

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

@@ -1,26 +1,5 @@
-/**
- * @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 { wrapperStyles, actionsBarClassName } from './styles';
-export const ActionsBarWrapper = props => {
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    jsx("div", {
-      id: "actionsBarWrapper",
-      "data-testId": "actionsBarWrapper"
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: wrapperStyles(props.isFixed)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: actionsBarClassName,
-      onClick: event => {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }, props.children)
-  );
-};
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ActionsBarWrapper as CompiledActionsBarWrapper } from './actionsBarWrapper-compiled';
+import { ActionsBarWrapper as EmotionActionsBarWrapper } from './actionsBarWrapper-emotion';
+export const ActionsBarWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledActionsBarWrapper, props) : /*#__PURE__*/React.createElement(EmotionActionsBarWrapper, props);

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionButton-compiled.compiled.css

@@ -0,0 +1,13 @@
+._19itglyw{border:none}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._1bah1h6o{justify-content:center}
+._1bsb1ou6{width:26px}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1ou6{height:26px}
+._bfhk1pja{background-color:var(--ds-surface-overlay,hsla(0,0%,100%,.8))}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._syazilmm{color:var(--ds-icon,#42526e)}
+._d0altlke:hover{cursor:pointer}
+._irr3tl7t:hover{background-color:var(--ds-surface-overlay-hovered,hsla(0,0%,100%,.6))}
+._irr3x5l4:hover{background-color:var(--ds-background-neutral-subtle-hovered,rgba(9,30,66,.06))}

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

@@ -0,0 +1,31 @@
+/* cardActionButton-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./cardActionButton-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+import { N500 } from '@atlaskit/theme/colors';
+const variantStyleMap = {
+  filled: "_bfhk1pja _irr3tl7t",
+  default: "_irr3x5l4"
+};
+const cardActionButtonStyles = null;
+export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
+  var _props$variant;
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    id: "cardActionButton",
+    "data-testid": "media-card-primary-action",
+    "aria-label": props.label,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: {
+      ...props.style,
+      cursor: props.disabled ? 'not-allowed' : 'default'
+    },
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    ref: ref,
+    className: ax(["_19itglyw _2rko1sit _r06hglyw _1e0c1txw _4cvr1h6o _1bah1h6o _1bsb1ou6 _4t3i1ou6 _syazilmm _d0altlke", variantStyleMap[(_props$variant = props.variant) !== null && _props$variant !== void 0 ? _props$variant : 'default']])
+  }), props.children);
+});

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { forwardRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { cardActionButtonStyles } from './styles';
+export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("button", _extends({}, props, {
+    id: "cardActionButton",
+    "data-testid": "media-card-primary-action",
+    "aria-label": props.label
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: cardActionButtonStyles(props)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      ...props.style,
+      cursor: props.disabled ? 'not-allowed' : 'default'
+    },
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    ref: ref
+  }), props.children);
+});

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

@@ -1,28 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { cardActionButtonStyles } from './styles';
-export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx("button", _extends({}, props, {
-    id: "cardActionButton",
-    "data-testid": "media-card-primary-action",
-    "aria-label": props.label
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: cardActionButtonStyles(props)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      ...props.style,
-      cursor: props.disabled ? 'not-allowed' : 'default'
-    },
-    onClick: props.onClick,
-    onMouseDown: props.onMouseDown,
-    ref: ref
-  }), props.children);
-});
+import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { CardActionButton as CompiledCardActionButton } from './cardActionButton-compiled';
+import { CardActionButton as EmotionCardActionButton } from './cardActionButton-compiled';
+export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCardActionButton, _extends({}, props, {
+  ref: ref
+})) : /*#__PURE__*/React.createElement(EmotionCardActionButton, _extends({}, props, {
+  ref: ref
+})));

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

@@ -1,10 +1,4 @@
-/**
- * @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 { Component, Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { CardActionIconButton } from './cardActionIconButton';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 export class CardActionsView extends Component {
@@ -17,7 +11,7 @@ export class CardActionsView extends Component {
     }
     const primaryAction = actions.find(actionWithIcon);
     const otherActions = actions.filter(actionNotEqualTo(primaryAction));
-    return jsx(Fragment, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions));
+    return /*#__PURE__*/React.createElement(Fragment, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions));
   }
   renderActionIconButton(action, isPrimary) {
     const {
@@ -32,7 +26,7 @@ export class CardActionsView extends Component {
       isDisabled,
       tooltip
     } = action;
-    return jsx(CardActionIconButton, {
+    return /*#__PURE__*/React.createElement(CardActionIconButton, {
       icon: icon,
       label: label,
       filename: filename,
@@ -58,7 +52,7 @@ export class CardActionsView extends Component {
       if (firstActionWithIcon && otherActions.length === 0) {
         return this.renderActionIconButton(firstActionWithIcon, false);
       } else {
-        return jsx(CardActionsDropdownMenu, {
+        return /*#__PURE__*/React.createElement(CardActionsDropdownMenu, {
           actions: actions,
           triggerColor: triggerColor,
           onOpenChange: onToggle,

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

@@ -0,0 +1,9 @@
+
+._v564ybtr{transition:all .3s}._154iidpf{top:0}
+._1bsb1osq{width:100%}
+._1ltvidpf{left:0}
+._4t3i1osq{height:100%}
+._bfhkrvv2{background-color:var(--ds-blanket,rgba(9,30,66,.48))}
+._c71l1osq{max-height:100%}
+._kqswstnw{position:absolute}
+._p12f1osq{max-width:100%}

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

@@ -0,0 +1,20 @@
+/* blanket-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./blanket-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N90A } from '@atlaskit/theme/colors';
+export const blanketClassName = 'media-card-blanket';
+export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;
+const blanketStyles = null;
+const fixedBlanketStyle = null;
+export const Blanket = props => {
+  const {
+    isFixed
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_v564ybtr _kqswstnw _1bsb1osq _4t3i1osq _c71l1osq _p12f1osq _1ltvidpf _154iidpf", isFixed && "_bfhkrvv2", blanketClassName]),
+    "data-testid": "media-card-blanket"
+  });
+};
+Blanket.displayName = 'Blanket';

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

@@ -0,0 +1,20 @@
+/**
+ * @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 { blanketStyles, blanketClassName } from './styles';
+export const Blanket = props => {
+  const {
+    isFixed
+  } = props;
+  return jsx("div", {
+    // 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: blanketStyles(isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: blanketClassName,
+    "data-testid": "media-card-blanket"
+  });
+};

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

@@ -1,20 +1,5 @@
-/**
- * @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 { blanketStyles, blanketClassName } from './styles';
-export const Blanket = props => {
-  const {
-    isFixed
-  } = props;
-  return jsx("div", {
-    // 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: blanketStyles(isFixed)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: blanketClassName,
-    "data-testid": "media-card-blanket"
-  });
-};
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Blanket as CompiledBlanket } from './blanket-compiled';
+import { Blanket as EmotionBlanket } from './blanket-emotion';
+export const Blanket = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledBlanket, props) : /*#__PURE__*/React.createElement(EmotionBlanket, props);

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper-compiled.compiled.css

@@ -0,0 +1,14 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1pgl1ytf{animation-timing-function:ease-in-out}
+._1reo15vq{overflow-x:hidden}
+._5sag1nwe{animation-duration:3.5s}
+._j7hqq7op{animation-name:k1o0pcpo}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._otyr1d21{margin-bottom:-1em}
+._syaz1e9r{color:var(--ds-text-subtlest,#7a869a)}
+._tip812c5{animation-iteration-count:infinite}
+._tzy4kb7n{opacity:1}
+._y3gn1h6o{text-align:center}
+@keyframes k1o0pcpo{0%{opacity:1}50%{opacity:.3}to{opacity:1}}

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper-compiled.js

@@ -0,0 +1,16 @@
+/* iconMessageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./iconMessageWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const breatheAnimation = null;
+const animatedStyles = null;
+const baseStyles = null;
+export const IconMessageWrapper = props => {
+  const {
+    animated
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "iconMessageWrapper",
+    className: ax(["_1reo15vq _18m915vq _1rjc1b66 _18zru2gc _tzy4kb7n _k48p1wq8 _syaz1e9r _y3gn1h6o _otyr1d21", animated && "", animated && "_j7hqq7op _5sag1nwe _1pgl1ytf _tip812c5"])
+  }, props.children);
+};

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper-emotion.js

@@ -0,0 +1,46 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { keyframes } from '@emotion/react';
+const breatheAnimation = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const animatedStyles = css({
+  animationName: breatheAnimation,
+  animationDuration: '3.5s',
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite'
+});
+const baseStyles = css({
+  overflow: 'hidden',
+  opacity: 1,
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  color: "var(--ds-text-subtlest, #7A869A)",
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginBottom: '-1em',
+  // Needs pixel precision to align the icon at the center of the box
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
+});
+export const IconMessageWrapper = props => {
+  const {
+    animated
+  } = props;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: [baseStyles, animated && animatedStyles]
+  }, props.children);
+};