@atlaskit/media-card 79.0.0 → 79.0.2

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

@@ -0,0 +1,86 @@
+/* titleBoxComponents-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./titleBoxComponents-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N800 } from '@atlaskit/theme/colors';
+import { rgba } from '../styles';
+const smallLineHeight = 14;
+const smallVerticalPadding = 4;
+const smallHorizontalPadding = 8;
+const largeLineHeight = 22;
+const largeVerticalPadding = 8;
+const largeHorizontalPadding = 12;
+const responsiveStyleMap = {
+  small: "_ca0q1y44 _u5f3ftgi _n3td1y44 _19bvftgi _4t3i14no",
+  large: "_ca0qftgi _u5f31crf _n3tdftgi _19bv1crf _4t3i1wqb"
+};
+const HEX_REGEX = /^#[0-9A-F]{6}$/i;
+const titleBoxWrapperStyles = null;
+export const TitleBoxWrapper = props => {
+  const {
+    breakpoint,
+    titleBoxBgColor,
+    hidden
+  } = props;
+  const color = titleBoxBgColor && rgba(HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxWrapper",
+    "data-testid": "media-title-box",
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      backgroundColor: color,
+      display: hidden ? 'none' : undefined
+    }
+    // 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: ax(["_kqswstnw _94n5idpf _1bsb1osq _bfhkvuon _syaz1fxt _80om1kw7 _lcxvglyw _1e0c1txw _2lx21bp4 _1bah1h6o", responsiveStyleMap[breakpoint]])
+  }, props.children);
+};
+TitleBoxWrapper.displayName = 'TitleBoxWrapper';
+const infoStyles = null;
+const iconOverlapStyle = null;
+const titleBoxHeaderStyles = null;
+export const TitleBoxHeader = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  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: ax(["_k48p1pd9", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
+const titleBoxFooterStyles = null;
+export const TitleBoxFooter = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  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: ax(["_1bto1l2s", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxFooter.displayName = 'TitleBoxFooter';
+const titleBoxIconStyles = null;
+const newTitleBoxIconStyles = null;
+export const TitleBoxIcon = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    className: ax([fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n51b66", !fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n5idpf"])
+  }, props.children);
+};
+const errorMessageWrapperStyles = null;
+export const 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: ax(["_zulpv77o _1e0c1txw _4cvr1h6o _1bah1y6m _bozgv77o _e4kmnkob _1nm41b66 _184u1b66"])
+  }, props.children);
+};

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

@@ -0,0 +1,71 @@
+/**
+ * @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 { fg } from '@atlaskit/platform-feature-flags';
+import { errorMessageWrapperStyles, newTitleBoxIconStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+export const TitleBoxWrapper = props => {
+  const {
+    breakpoint,
+    titleBoxBgColor,
+    hidden
+  } = props;
+  return 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: titleBoxWrapperStyles({
+      breakpoint: breakpoint,
+      display: hidden ? 'none' : 'flex',
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+export const TitleBoxHeader = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return 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: titleBoxHeaderStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxFooter = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return 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: titleBoxFooterStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxIcon = props => {
+  return jsx("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    css: 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
+    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
+    titleBoxIconStyles
+  }, props.children);
+};
+export const 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 jsx("div", {
+    css: errorMessageWrapperStyles
+  }, props.children);
+};

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

@@ -1,71 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { errorMessageWrapperStyles, newTitleBoxIconStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
-export const TitleBoxWrapper = props => {
-  const {
-    breakpoint,
-    titleBoxBgColor,
-    hidden
-  } = props;
-  return 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: titleBoxWrapperStyles({
-      breakpoint: breakpoint,
-      display: hidden ? 'none' : 'flex',
-      titleBoxBgColor: titleBoxBgColor
-    })
-  }, props.children);
-};
-export const TitleBoxHeader = props => {
-  const {
-    hasIconOverlap
-  } = props;
-  return 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: titleBoxHeaderStyles({
-      hasIconOverlap
-    })
-  }, props.children);
-};
-export const TitleBoxFooter = props => {
-  const {
-    hasIconOverlap
-  } = props;
-  return 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: titleBoxFooterStyles({
-      hasIconOverlap
-    })
-  }, props.children);
-};
-export const TitleBoxIcon = props => {
-  return jsx("div", {
-    id: "titleBoxIcon",
-    "data-testid": "title-box-icon",
-    css: 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
-    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
-    titleBoxIconStyles
-  }, props.children);
-};
-export const 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 jsx("div", {
-    css: errorMessageWrapperStyles
-  }, props.children);
-};
+import { TitleBoxWrapper as CompiledTitleBoxWrapper, TitleBoxHeader as CompiledTitleBoxHeader, TitleBoxFooter as CompiledTitleBoxFooter, TitleBoxIcon as CompiledTitleBoxIcon, ErrorMessageWrapper as CompiledErrorMessageWrapper } from './titleBoxComponents-compiled';
+import { TitleBoxWrapper as EmotionTitleBoxWrapper, TitleBoxHeader as EmotionTitleBoxHeader, TitleBoxFooter as EmotionTitleBoxFooter, TitleBoxIcon as EmotionTitleBoxIcon, ErrorMessageWrapper as EmotionErrorMessageWrapper } from './titleBoxComponents-emotion';
+export const TitleBoxWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxWrapper, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxWrapper, props);
+export const TitleBoxHeader = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxHeader, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxHeader, props);
+export const TitleBoxFooter = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxFooter, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxFooter, props);
+export const TitleBoxIcon = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxIcon, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxIcon, props);
+export const ErrorMessageWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledErrorMessageWrapper, props) : /*#__PURE__*/React.createElement(EmotionErrorMessageWrapper, props);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export const ContentLoadingErrorMessage = ({
+  isHidden
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+React.createElement("p", {
+  style: {
+    display: isHidden ? 'none' : 'block'
+  }
+}, "We couldn't load this content");

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

@@ -1,83 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
-import { N20, N800, Y500 } from '@atlaskit/theme/colors';
-import { center, borderRadius } from '@atlaskit/media-ui';
-import { defaultImageCardDimensions } from '../../../utils';
-const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
-const shouldShowText = ({
-  width,
-  height
-}) => {
-  if (isPercentage(width) || isPercentage(height)) {
-    return false;
-  }
-  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
-};
-const normalizeDimension = (value, defaultValue) => {
-  const sValue = value.toString();
-  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
-};
-const getConvertedDimension = dimensions => {
-  const {
-    width = defaultImageCardDimensions.width,
-    height = defaultImageCardDimensions.height
-  } = dimensions;
-  return {
-    width: normalizeDimension(width, defaultImageCardDimensions.width),
-    height: normalizeDimension(height, defaultImageCardDimensions.height)
-  };
-};
-const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
-  try {
-    return 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
-    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
-    borderRadius, {
-      background: `var(--ds-background-neutral, ${N20})`,
-      color: `var(--ds-text-subtle, ${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;
-  }
-};
-export class UnhandledErrorCard extends Component {
-  render() {
-    const {
-      dimensions,
-      onClick
-    } = this.props;
-    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
-      jsx("div", {
-        css: wrapperStyles(dimensions),
-        onClick: onClick
-      }, jsx(WarningIcon, {
-        label: "Error",
-        color: `var(--ds-icon-warning, ${Y500})`,
-        LEGACY_size: "medium",
-        spacing: "spacious"
-      }), jsx("p", null, "We couldn't load this content"))
-    );
-  }
-}
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { UnhandledErrorCard as CompiledUnhanldedErrorCard } from './unhandledErrorCard-compiled';
+import { UnhandledErrorCard as EmotionUnhanldedErrorCard } from './unhandledErrorCard-emotion';
+export const UnhandledErrorCard = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledUnhanldedErrorCard, props) : /*#__PURE__*/React.createElement(EmotionUnhanldedErrorCard, props);

package/dist/es2019/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}
+._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
+._c71l1osq{max-height:100%}
+._p12f1osq{max-width:100%}
+._syaz1aqp{color:var(--ds-text-subtle,#172b4d)}

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

@@ -0,0 +1,56 @@
+/* unhandledErrorCard-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./unhandledErrorCard-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Component } from 'react';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { defaultImageCardDimensions } from '../../../utils';
+import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
+const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
+const shouldShowText = ({
+  width,
+  height
+}) => {
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+const normalizeDimension = (value, defaultValue) => {
+  const sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+const getConvertedDimension = dimensions => {
+  const {
+    width = defaultImageCardDimensions.width,
+    height = defaultImageCardDimensions.height
+  } = dimensions;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+const wrapperStyle = null;
+export class UnhandledErrorCard extends Component {
+  render() {
+    const {
+      dimensions = defaultImageCardDimensions,
+      onClick
+    } = this.props;
+    const convertedDimensions = getConvertedDimension(dimensions);
+    const hideText = !shouldShowText(getConvertedDimension(dimensions));
+    return /*#__PURE__*/React.createElement("div", {
+      style: convertedDimensions,
+      onClick: onClick,
+      className: ax(["_2rko1l7b _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1s4m _syaz1aqp _c71l1osq _p12f1osq _2lx21bp4 _1i7v1oud _31ku1h6o"])
+    }, /*#__PURE__*/React.createElement(WarningIcon, {
+      label: "Error",
+      color: `var(--ds-icon-warning, ${Y500})`,
+      LEGACY_size: "medium",
+      spacing: "spacious"
+    }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
+      isHidden: hideText
+    }));
+  }
+}

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

@@ -0,0 +1,85 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Component } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../../utils';
+import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
+const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
+const shouldShowText = ({
+  width,
+  height
+}) => {
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+const normalizeDimension = (value, defaultValue) => {
+  const sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+const getConvertedDimension = dimensions => {
+  const {
+    width = defaultImageCardDimensions.width,
+    height = defaultImageCardDimensions.height
+  } = dimensions;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
+  try {
+    return 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
+    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
+    borderRadius, {
+      background: `var(--ds-background-neutral, ${N20})`,
+      color: `var(--ds-text-subtle, ${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;
+  }
+};
+export class UnhandledErrorCard extends Component {
+  render() {
+    const {
+      dimensions,
+      onClick
+    } = this.props;
+    const isErrorHidden = !shouldShowText(getConvertedDimension(dimensions !== null && dimensions !== void 0 ? dimensions : 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
+      jsx("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, jsx(WarningIcon, {
+        label: "Error",
+        color: `var(--ds-icon-warning, ${Y500})`,
+        LEGACY_size: "medium",
+        spacing: "spacious"
+      }), jsx(ContentLoadingErrorMessage, {
+        isHidden: isErrorHidden
+      }))
+    );
+  }
+}

package/dist/es2019/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/es2019/card/ui/wrapper/imageContainer-compiled.js

@@ -0,0 +1,31 @@
+/* imageContainer-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./imageContainer-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fileCardImageViewSelector } from '../../classnames';
+const imageContainerStyles = null;
+const imageContainerCenterStyles = null;
+export const ImageContainer = ({
+  children,
+  mediaName,
+  status,
+  progress,
+  selected,
+  source,
+  centerElements
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": 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: ax(["_1reo15vq _18m915vq _2rko1sit _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", fileCardImageViewSelector]),
+  "data-test-media-name": mediaName,
+  "data-test-status": status,
+  "data-test-progress": progress,
+  "data-test-selected": selected,
+  "data-test-source": source
+}, children);

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

@@ -0,0 +1,47 @@
+/**
+ * @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 { fileCardImageViewSelector } from '../../classnames';
+const imageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+const imageContainerCenterStyles = css({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export const ImageContainer = ({
+  children,
+  mediaName,
+  status,
+  progress,
+  selected,
+  source,
+  centerElements
+}) => jsx("div", {
+  css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+  "data-testid": 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: fileCardImageViewSelector,
+  "data-test-media-name": mediaName,
+  "data-test-status": status,
+  "data-test-progress": progress,
+  "data-test-selected": selected,
+  "data-test-source": source
+}, children);

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

@@ -1,47 +1,5 @@
-/**
- * @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 { fileCardImageViewSelector } from '../../classnames';
-const imageContainerStyles = css({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)"
-});
-const imageContainerCenterStyles = css({
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-export const ImageContainer = ({
-  children,
-  mediaName,
-  status,
-  progress,
-  selected,
-  source,
-  centerElements
-}) => jsx("div", {
-  css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
-  "data-testid": 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: fileCardImageViewSelector,
-  "data-test-media-name": mediaName,
-  "data-test-status": status,
-  "data-test-progress": progress,
-  "data-test-selected": selected,
-  "data-test-source": source
-}, children);
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ImageContainer as CompiledImageContainer } from './imageContainer-compiled';
+import { ImageContainer as EmotionImageContainer } from './imageContainer-compiled';
+export const ImageContainer = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledImageContainer, props) : /*#__PURE__*/React.createElement(EmotionImageContainer, props);