@atlaskit/media-card 79.0.0 → 79.0.1

package/dist/cjs/card/ui/titleBox/titleBoxComponents-compiled.js

@@ -0,0 +1,88 @@
+/* titleBoxComponents-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
+require("./titleBoxComponents-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _styles = require("../styles");
+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 smallLineHeight = 14;
+var smallVerticalPadding = 4;
+var smallHorizontalPadding = 8;
+var largeLineHeight = 22;
+var largeVerticalPadding = 8;
+var largeHorizontalPadding = 12;
+var responsiveStyleMap = {
+  small: "_ca0q1y44 _u5f3ftgi _n3td1y44 _19bvftgi _4t3i14no",
+  large: "_ca0qftgi _u5f31crf _n3tdftgi _19bv1crf _4t3i1wqb"
+};
+var HEX_REGEX = /^#[0-9A-F]{6}$/i;
+var titleBoxWrapperStyles = null;
+var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
+  var breakpoint = props.breakpoint,
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
+  var color = titleBoxBgColor && (0, _styles.rgba)(HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxWrapper",
+    "data-testid": "media-title-box",
+    className: (0, _runtime.ax)(["_kqswstnw _94n5idpf _1bsb1osq _bfhkvuon _syaz1o8f _80om1kw7 _lcxvglyw _1e0c1txw _2lx21bp4 _1bah1h6o", responsiveStyleMap[breakpoint]]),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      backgroundColor: color,
+      display: hidden ? 'none' : undefined,
+      "--_ggxzyp": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N800, ")"))
+    }
+  }, props.children);
+};
+TitleBoxWrapper.displayName = 'TitleBoxWrapper';
+var infoStyles = null;
+var iconOverlapStyle = null;
+var titleBoxHeaderStyles = null;
+var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxHeader",
+    "data-testid": "title-box-header"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_k48p1pd9", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
+var titleBoxFooterStyles = null;
+var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxFooter",
+    "data-testid": "title-box-footer"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_1bto1l2s", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxFooter.displayName = 'TitleBoxFooter';
+var titleBoxIconStyles = null;
+var newTitleBoxIconStyles = null;
+var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n51b66", !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n5idpf"])
+  }, props.children);
+};
+var errorMessageWrapperStyles = null;
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpv77o _1e0c1txw _4cvr1h6o _1bah1y6m _bozgv77o _e4kmnkob _1nm41b66 _184u1b66"])
+  }, props.children);
+};

package/dist/cjs/card/ui/titleBox/titleBoxComponents-emotion.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _styles = require("./styles");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
+  var breakpoint = props.breakpoint,
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxWrapper",
+    "data-testid": "media-title-box"
+    // 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.titleBoxWrapperStyles)({
+      breakpoint: breakpoint,
+      display: hidden ? 'none' : 'flex',
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxHeader",
+    "data-testid": "title-box-header"
+    // 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.titleBoxHeaderStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxFooter",
+    "data-testid": "title-box-footer"
+    // 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.titleBoxFooterStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
+  return (0, _react.jsx)("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    css: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _styles.newTitleBoxIconStyles :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _styles.titleBoxIconStyles
+  }, props.children);
+};
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  return (0, _react.jsx)("div", {
+    css: _styles.errorMessageWrapperStyles
+  }, props.children);
+};

package/dist/cjs/card/ui/titleBox/titleBoxComponents.js

@@ -1,72 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var _titleBoxComponentsEmotion = require("./titleBoxComponents-emotion");
 var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
-  var breakpoint = props.breakpoint,
-    titleBoxBgColor = props.titleBoxBgColor,
-    hidden = props.hidden;
-  return (0, _react.jsx)("div", {
-    id: "titleBoxWrapper",
-    "data-testid": "media-title-box"
-    // 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.titleBoxWrapperStyles)({
-      breakpoint: breakpoint,
-      display: hidden ? 'none' : 'flex',
-      titleBoxBgColor: titleBoxBgColor
-    })
-  }, props.children);
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxWrapper, props) : /*#__PURE__*/_react.default.createElement(_titleBoxComponentsEmotion.TitleBoxWrapper, props);
 };
 var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
-  var hasIconOverlap = props.hasIconOverlap;
-  return (0, _react.jsx)("div", {
-    id: "titleBoxHeader",
-    "data-testid": "title-box-header"
-    // 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.titleBoxHeaderStyles)({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxHeader, props) : /*#__PURE__*/_react.default.createElement(_titleBoxComponentsEmotion.TitleBoxHeader, props);
 };
 var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
-  var hasIconOverlap = props.hasIconOverlap;
-  return (0, _react.jsx)("div", {
-    id: "titleBoxFooter",
-    "data-testid": "title-box-footer"
-    // 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.titleBoxFooterStyles)({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxFooter, props) : /*#__PURE__*/_react.default.createElement(_titleBoxComponentsEmotion.TitleBoxFooter, props);
 };
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
-  return (0, _react.jsx)("div", {
-    id: "titleBoxIcon",
-    "data-testid": "title-box-icon",
-    css: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    _styles.newTitleBoxIconStyles :
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    _styles.titleBoxIconStyles
-  }, props.children);
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxIcon, props) : /*#__PURE__*/_react.default.createElement(_titleBoxComponentsEmotion.TitleBoxIcon, props);
 };
 var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  return (0, _react.jsx)("div", {
-    css: _styles.errorMessageWrapperStyles
-  }, props.children);
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.ErrorMessageWrapper, props) : /*#__PURE__*/_react.default.createElement(_titleBoxComponentsEmotion.ErrorMessageWrapper, props);
 };

package/dist/cjs/card/ui/unhandledErrorCard/contentLoadingErrorMessage.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentLoadingErrorMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ContentLoadingErrorMessage = exports.ContentLoadingErrorMessage = function ContentLoadingErrorMessage(_ref) {
+  var isHidden = _ref.isHidden;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    _react.default.createElement("p", {
+      style: {
+        display: isHidden ? 'none' : 'block'
+      }
+    }, "We couldn't load this content")
+  );
+};

package/dist/cjs/card/ui/unhandledErrorCard/index.js

@@ -5,100 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnhandledErrorCard = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
-var _colors = require("@atlaskit/theme/colors");
-var _mediaUi = require("@atlaskit/media-ui");
-var _utils = require("../../../utils");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
-var isPercentage = function isPercentage(value) {
-  return /^\d+(\.\d+)?%$/.test(value);
-};
-var shouldShowText = function shouldShowText(_ref) {
-  var width = _ref.width,
-    height = _ref.height;
-  if (isPercentage(width) || isPercentage(height)) {
-    return false;
-  }
-  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
-};
-var normalizeDimension = function normalizeDimension(value, defaultValue) {
-  var sValue = value.toString();
-  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
-};
-var getConvertedDimension = function getConvertedDimension(dimensions) {
-  var _dimensions$width = dimensions.width,
-    width = _dimensions$width === void 0 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
-    _dimensions$height = dimensions.height,
-    height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
-  return {
-    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
-    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
-  };
-};
-var wrapperStyles = function wrapperStyles() {
-  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
-  try {
-    return (0, _react2.css)(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    _mediaUi.center,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    _mediaUi.borderRadius, {
-      background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-      color: "var(--ds-text-subtle, ".concat(_colors.N800, ")"),
-      maxHeight: '100%',
-      maxWidth: '100%'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    getConvertedDimension(dimensions), {
-      display: 'flex',
-      flexDirection: 'column',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      p: {
-        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-        textAlign: 'center',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
-      }
-    });
-  } catch (e) {
-    return null;
-  }
-};
-var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Component) {
-  function UnhandledErrorCard() {
-    (0, _classCallCheck2.default)(this, UnhandledErrorCard);
-    return _callSuper(this, UnhandledErrorCard, arguments);
-  }
-  (0, _inherits2.default)(UnhandledErrorCard, _Component);
-  return (0, _createClass2.default)(UnhandledErrorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        dimensions = _this$props.dimensions,
-        onClick = _this$props.onClick;
-      return (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
-        (0, _react2.jsx)("div", {
-          css: wrapperStyles(dimensions),
-          onClick: onClick
-        }, (0, _react2.jsx)(_warningEditorWarning.default, {
-          label: "Error",
-          color: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
-          LEGACY_size: "medium",
-          spacing: "spacious"
-        }), (0, _react2.jsx)("p", null, "We couldn't load this content"))
-      );
-    }
-  }]);
-}(_react.Component);
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _unhandledErrorCardCompiled = require("./unhandledErrorCard-compiled");
+var _unhandledErrorCardEmotion = require("./unhandledErrorCard-emotion");
+var UnhandledErrorCard = exports.UnhandledErrorCard = function UnhandledErrorCard(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_unhandledErrorCardCompiled.UnhandledErrorCard, props) : /*#__PURE__*/_react.default.createElement(_unhandledErrorCardEmotion.UnhandledErrorCard, props);
+};

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

@@ -0,0 +1,11 @@
+
+._1i7v1oud p{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1l7b{border-radius:3px}._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._31ku1h6o p{text-align:center}
+._4cvr1h6o{align-items:center}
+._bfhklslw{background-color:var(--_1jkcdu5)}
+._c71l1osq{max-height:100%}
+._p12f1osq{max-width:100%}
+._syaz1dfj{color:var(--_i2cu7k)}

package/dist/cjs/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -0,0 +1,88 @@
+/* unhandledErrorCard-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.UnhandledErrorCard = void 0;
+require("./unhandledErrorCard-compiled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
+var _colors = require("@atlaskit/theme/colors");
+var _utils = require("../../../utils");
+var _contentLoadingErrorMessage = require("./contentLoadingErrorMessage");
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+    width = _dimensions$width === void 0 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
+    _dimensions$height = dimensions.height,
+    height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
+    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
+  };
+};
+var wrapperStyle = null;
+var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  function UnhandledErrorCard() {
+    (0, _classCallCheck2.default)(this, UnhandledErrorCard);
+    return _callSuper(this, UnhandledErrorCard, arguments);
+  }
+  (0, _inherits2.default)(UnhandledErrorCard, _Component);
+  return (0, _createClass2.default)(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        _this$props$dimension = _this$props.dimensions,
+        dimensions = _this$props$dimension === void 0 ? _utils.defaultImageCardDimensions : _this$props$dimension,
+        onClick = _this$props.onClick;
+      var convertedDimensions = getConvertedDimension(dimensions);
+      var hideText = !shouldShowText(getConvertedDimension(dimensions));
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: onClick,
+        className: (0, _runtime.ax)(["_2rko1l7b _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7v1oud _31ku1h6o"]),
+        style: _objectSpread(_objectSpread({}, convertedDimensions), {}, {
+          "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")")),
+          "--_i2cu7k": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N800, ")"))
+        })
+      }, /*#__PURE__*/React.createElement(_warningEditorWarning.default, {
+        label: "Error",
+        color: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
+        LEGACY_size: "medium",
+        spacing: "spacious"
+      }), /*#__PURE__*/React.createElement(_contentLoadingErrorMessage.ContentLoadingErrorMessage, {
+        isHidden: hideText
+      }));
+    }
+  }]);
+}(_react.Component);

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnhandledErrorCard = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
+var _colors = require("@atlaskit/theme/colors");
+var _mediaUi = require("@atlaskit/media-ui");
+var _utils = require("../../../utils");
+var _contentLoadingErrorMessage = require("./contentLoadingErrorMessage");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+    width = _dimensions$width === void 0 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
+    _dimensions$height = dimensions.height,
+    height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
+    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
+  };
+};
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
+  try {
+    return (0, _react2.css)(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    _mediaUi.center,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    _mediaUi.borderRadius, {
+      background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+      color: "var(--ds-text-subtle, ".concat(_colors.N800, ")"),
+      maxHeight: '100%',
+      maxWidth: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      p: {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+        textAlign: 'center'
+      }
+    });
+  } catch (e) {
+    return null;
+  }
+};
+var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  function UnhandledErrorCard() {
+    (0, _classCallCheck2.default)(this, UnhandledErrorCard);
+    return _callSuper(this, UnhandledErrorCard, arguments);
+  }
+  (0, _inherits2.default)(UnhandledErrorCard, _Component);
+  return (0, _createClass2.default)(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        dimensions = _this$props.dimensions,
+        onClick = _this$props.onClick;
+      var isErrorHidden = !shouldShowText(getConvertedDimension(dimensions !== null && dimensions !== void 0 ? dimensions : _utils.defaultImageCardDimensions));
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("div", {
+          css: wrapperStyles(dimensions),
+          onClick: onClick
+        }, (0, _react2.jsx)(_warningEditorWarning.default, {
+          label: "Error",
+          color: "var(--ds-icon-warning, ".concat(_colors.Y500, ")"),
+          LEGACY_size: "medium",
+          spacing: "spacious"
+        }), (0, _react2.jsx)(_contentLoadingErrorMessage.ContentLoadingErrorMessage, {
+          isHidden: isErrorHidden
+        }))
+      );
+    }
+  }]);
+}(_react.Component);

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

@@ -0,0 +1,12 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._c71l1osq{max-height:100%}
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}

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

@@ -0,0 +1,41 @@
+/* imageContainer-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageContainer = void 0;
+require("./imageContainer-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _classnames = require("../../classnames");
+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 imageContainerStyles = null;
+var imageContainerCenterStyles = null;
+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 /*#__PURE__*/React.createElement("div", {
+    "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: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1sit _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", _classnames.fileCardImageViewSelector]),
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected,
+    "data-test-source": source
+  }, children);
+};