@atlaskit/media-card 79.0.0 → 79.0.1

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

@@ -0,0 +1,94 @@
+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, 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 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 = css({
+  objectFit: 'contain',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: 'white' // This background color is for transparency
+});
+var svgRendererMaxDimensionStyles = css({
+  maxWidth: '100%',
+  maxHeight: '100%'
+});
+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 ? 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 MediaSVGError('img-error'));
+    },
+    ref: imgRef
+  }) : null;
+};

package/dist/esm/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/esm/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';
+var wrapperStyles = null;
+var fixedActionBarStyle = null;
+export var ActionsBarWrapper = function 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: function onClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, props.children);
+};
+ActionsBarWrapper.displayName = 'ActionsBarWrapper';

package/dist/esm/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 var ActionsBarWrapper = function 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: function onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }, props.children)
+  );
+};

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

@@ -1,26 +1,7 @@
-/**
- * @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';
+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 var ActionsBarWrapper = function 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: function onClick(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }, props.children)
-  );
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledActionsBarWrapper, props) : /*#__PURE__*/React.createElement(EmotionActionsBarWrapper, props);
 };

package/dist/esm/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}
+._syaz5lkc{color:var(--_1o4qw9f)}
+._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/esm/card/ui/actionsBar/cardActions/cardActionButton-compiled.js

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

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

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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
+ */
+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 var CardActionButton = /*#__PURE__*/forwardRef(function (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: _objectSpread(_objectSpread({}, props.style), {}, {
+      cursor: props.disabled ? 'not-allowed' : 'default'
+    }),
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    ref: ref
+  }), props.children);
+});

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

@@ -1,30 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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
- */
-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';
+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 var CardActionButton = /*#__PURE__*/forwardRef(function (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: _objectSpread(_objectSpread({}, props.style), {}, {
-      cursor: props.disabled ? 'not-allowed' : 'default'
-    }),
-    onClick: props.onClick,
-    onMouseDown: props.onMouseDown,
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCardActionButton, _extends({}, props, {
     ref: ref
-  }), props.children);
+  })) : /*#__PURE__*/React.createElement(EmotionCardActionButton, _extends({}, props, {
+    ref: ref
+  }));
 });

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

@@ -5,13 +5,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/**
- * @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 var CardActionsView = /*#__PURE__*/function (_Component) {
@@ -29,7 +23,7 @@ export var CardActionsView = /*#__PURE__*/function (_Component) {
       }
       var primaryAction = actions.find(actionWithIcon);
       var 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));
     }
   }, {
     key: "renderActionIconButton",
@@ -43,7 +37,7 @@ export var CardActionsView = /*#__PURE__*/function (_Component) {
         label = action.label,
         isDisabled = action.isDisabled,
         tooltip = action.tooltip;
-      return jsx(CardActionIconButton, {
+      return /*#__PURE__*/React.createElement(CardActionIconButton, {
         icon: icon,
         label: label,
         filename: filename,
@@ -72,7 +66,7 @@ export var CardActionsView = /*#__PURE__*/function (_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/esm/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%}
+._bfhk326j{background-color:var(--_1ox8nit)}
+._c71l1osq{max-height:100%}
+._kqswstnw{position:absolute}
+._p12f1osq{max-width:100%}

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

@@ -0,0 +1,21 @@
+/* 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 var blanketClassName = 'media-card-blanket';
+export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
+var blanketStyles = null;
+var fixedBlanketStyle = null;
+export var Blanket = function Blanket(props) {
+  var isFixed = props.isFixed;
+  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 && "_bfhk326j", blanketClassName]),
+    "data-testid": "media-card-blanket",
+    style: {
+      "--_1ox8nit": ix("var(--ds-blanket, ".concat(N90A, ")"))
+    }
+  });
+};
+Blanket.displayName = 'Blanket';

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

@@ -0,0 +1,18 @@
+/**
+ * @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 var Blanket = function Blanket(props) {
+  var isFixed = props.isFixed;
+  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/esm/card/ui/blanket/blanket.js

@@ -1,18 +1,7 @@
-/**
- * @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';
+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 var Blanket = function Blanket(props) {
-  var isFixed = props.isFixed;
-  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"
-  });
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledBlanket, props) : /*#__PURE__*/React.createElement(EmotionBlanket, props);
 };

package/dist/esm/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/esm/card/ui/iconMessage/iconMessageWrapper-compiled.js

@@ -0,0 +1,14 @@
+/* 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";
+var breatheAnimation = null;
+var animatedStyles = null;
+var baseStyles = null;
+export var IconMessageWrapper = function IconMessageWrapper(props) {
+  var animated = props.animated;
+  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/esm/card/ui/iconMessage/iconMessageWrapper-emotion.js

@@ -0,0 +1,44 @@
+/**
+ * @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';
+var breatheAnimation = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+var animatedStyles = css({
+  animationName: breatheAnimation,
+  animationDuration: '3.5s',
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite'
+});
+var 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 var IconMessageWrapper = function IconMessageWrapper(props) {
+  var animated = props.animated;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: [baseStyles, animated && animatedStyles]
+  }, props.children);
+};

package/dist/esm/card/ui/iconMessage/iconMessageWrapper.js

@@ -1,44 +1,7 @@
-/**
- * @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';
-var breatheAnimation = keyframes({
-  '0%': {
-    opacity: 1
-  },
-  '50%': {
-    opacity: 0.3
-  },
-  '100%': {
-    opacity: 1
-  }
-});
-var animatedStyles = css({
-  animationName: breatheAnimation,
-  animationDuration: '3.5s',
-  animationTimingFunction: 'ease-in-out',
-  animationIterationCount: 'infinite'
-});
-var 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)"
-});
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IconMessageWrapper as CompiledIconMessageWrapper } from './iconMessageWrapper-compiled';
+import { IconMessageWrapper as EmotionIconMessageWrapper } from './iconMessageWrapper-emotion';
 export var IconMessageWrapper = function IconMessageWrapper(props) {
-  var animated = props.animated;
-  return jsx("div", {
-    id: "iconMessageWrapper",
-    css: [baseStyles, animated && animatedStyles]
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledIconMessageWrapper, props) : /*#__PURE__*/React.createElement(EmotionIconMessageWrapper, props);
 };

package/dist/esm/card/ui/iconWrapper/iconWrapper-compiled.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._kqswstnw{position:absolute}

package/dist/esm/card/ui/iconWrapper/iconWrapper-compiled.js

@@ -0,0 +1,28 @@
+/* iconWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./iconWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getTitleBoxHeight } from '../common';
+export function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return "0px";
+  }
+
+  // calculate height of the titlebox
+  var marginBottom = getTitleBoxHeight(breakpoint);
+  return "".concat(marginBottom, "px");
+}
+var iconWrapperStyles = null;
+export var IconWrapper = function IconWrapper(props) {
+  var breakpoint = props.breakpoint,
+    hasTitleBox = props.hasTitleBox;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "iconWrapper",
+    style: {
+      height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")")
+    },
+    className: ax(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, props.children);
+};
+IconWrapper.displayName = 'MediaIconWrapper';

package/dist/esm/card/ui/iconWrapper/iconWrapper-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 { iconWrapperStyles } from './styles';
+export var IconWrapper = function IconWrapper(props) {
+  var breakpoint = props.breakpoint,
+    hasTitleBox = props.hasTitleBox;
+  return jsx("div", {
+    id: "iconWrapper"
+    // 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: iconWrapperStyles({
+      breakpoint: breakpoint,
+      hasTitleBox: hasTitleBox
+    })
+  }, props.children);
+};

package/dist/esm/card/ui/iconWrapper/iconWrapper.js

@@ -1,20 +1,7 @@
-/**
- * @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 { iconWrapperStyles } from './styles';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IconWrapper as CompiledIconWrapper } from './iconWrapper-compiled';
+import { IconWrapper as EmotionIconWrapper } from './iconWrapper-emotion';
 export var IconWrapper = function IconWrapper(props) {
-  var breakpoint = props.breakpoint,
-    hasTitleBox = props.hasTitleBox;
-  return jsx("div", {
-    id: "iconWrapper"
-    // 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: iconWrapperStyles({
-      breakpoint: breakpoint,
-      hasTitleBox: hasTitleBox
-    })
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledIconWrapper, props) : /*#__PURE__*/React.createElement(EmotionIconWrapper, props);
 };