@atlaskit/media-card 74.5.1 → 74.5.2

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

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import { iconWrapperStyles } from './styles';
 export var IconWrapper = function IconWrapper(props) {
   var breakpoint = props.breakpoint,
-      hasTitleBox = props.hasTitleBox;
+    hasTitleBox = props.hasTitleBox;
   return jsx("div", {
     id: "iconWrapper",
     css: iconWrapperStyles({

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

@@ -1,22 +1,20 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
   // there is no titlebox
   if (!hasTitleBox) {
     return "0px";
-  } // calculate height of the titlebox
-
+  }
 
+  // calculate height of the titlebox
   var marginBottom = getTitleBoxHeight(breakpoint);
   return "".concat(marginBottom, "px");
 }
 export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
-      breakpoint = _ref.breakpoint;
+    breakpoint = _ref.breakpoint;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
 };
 iconWrapperStyles.displayName = 'MediaIconWrapper';

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

@@ -4,29 +4,26 @@ import { MediaImage } from '@atlaskit/media-ui';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
 export var ImageRenderer = function ImageRenderer(_ref) {
   var cardPreview = _ref.cardPreview,
-      alt = _ref.alt,
-      resizeMode = _ref.resizeMode,
-      onImageLoad = _ref.onImageLoad,
-      onImageError = _ref.onImageError,
-      onDisplayImage = _ref.onDisplayImage,
-      mediaType = _ref.mediaType,
-      nativeLazyLoad = _ref.nativeLazyLoad,
-      forceSyncDisplay = _ref.forceSyncDisplay;
+    alt = _ref.alt,
+    resizeMode = _ref.resizeMode,
+    onImageLoad = _ref.onImageLoad,
+    onImageError = _ref.onImageError,
+    onDisplayImage = _ref.onDisplayImage,
+    mediaType = _ref.mediaType,
+    nativeLazyLoad = _ref.nativeLazyLoad,
+    forceSyncDisplay = _ref.forceSyncDisplay;
   useEffect(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
-
   var onLoad = function onLoad() {
     onImageLoad && onImageLoad(cardPreview);
   };
-
   var onError = function onError() {
     onImageError && onImageError(cardPreview);
   };
-
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
     dataURI: cardPreview.dataURI,
     alt: alt,

package/dist/esm/card/ui/loadingRateLimited/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import { css } from '@emotion/react';
 import { generateResponsiveStyles } from '../progressBar/styles';
 import { N300 } from '@atlaskit/theme/colors';
@@ -9,7 +7,7 @@ export var loadingRateLimitedContainerStyles = css(_templateObject || (_template
 export var warningIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  justify-content: center;\n  display: flex;\n  /* Required to allow end users to select text in the error message */\n  cursor: auto;\n  user-select: text;\n  > svg {\n    width: 45px;\n  }\n"])));
 export var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
+    positionBottom = _ref.positionBottom;
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), generateResponsiveStyles(breakpoint, positionBottom, false, 1));
 };
 loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';

package/dist/esm/card/ui/newFileExperience/newFileExperienceWrapper.js

@@ -5,19 +5,19 @@ import { newFileExperienceWrapperStyles } from './styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 export var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
   var testId = props.testId,
-      dimensions = props.dimensions,
-      appearance = props.appearance,
-      onClick = props.onClick,
-      onMouseEnter = props.onMouseEnter,
-      innerRef = props.innerRef,
-      breakpoint = props.breakpoint,
-      mediaCardCursor = props.mediaCardCursor,
-      disableOverlay = props.disableOverlay,
-      selected = props.selected,
-      displayBackground = props.displayBackground,
-      isPlayButtonClickable = props.isPlayButtonClickable,
-      isTickBoxSelectable = props.isTickBoxSelectable,
-      shouldDisplayTooltip = props.shouldDisplayTooltip;
+    dimensions = props.dimensions,
+    appearance = props.appearance,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    innerRef = props.innerRef,
+    breakpoint = props.breakpoint,
+    mediaCardCursor = props.mediaCardCursor,
+    disableOverlay = props.disableOverlay,
+    selected = props.selected,
+    displayBackground = props.displayBackground,
+    isPlayButtonClickable = props.isPlayButtonClickable,
+    isTickBoxSelectable = props.isTickBoxSelectable,
+    shouldDisplayTooltip = props.shouldDisplayTooltip;
   var theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",

package/dist/esm/card/ui/newFileExperience/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
@@ -15,16 +13,16 @@ import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle,
 var BACKGROUND_COLOR_DARK = '#22272C';
 export var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-      dimensions = _ref.dimensions,
-      appearance = _ref.appearance,
-      disableOverlay = _ref.disableOverlay,
-      displayBackground = _ref.displayBackground,
-      selected = _ref.selected,
-      isPlayButtonClickable = _ref.isPlayButtonClickable,
-      isTickBoxSelectable = _ref.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-      mediaCardCursor = _ref.mediaCardCursor,
-      theme = _ref.theme;
+    dimensions = _ref.dimensions,
+    appearance = _ref.appearance,
+    disableOverlay = _ref.disableOverlay,
+    displayBackground = _ref.displayBackground,
+    selected = _ref.selected,
+    isPlayButtonClickable = _ref.isPlayButtonClickable,
+    isTickBoxSelectable = _ref.isTickBoxSelectable,
+    shouldDisplayTooltip = _ref.shouldDisplayTooltip,
+    mediaCardCursor = _ref.mediaCardCursor,
+    theme = _ref.theme;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat(themed({
     light: "var(--ds-background-neutral, ".concat(N20, ")"),
     dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")

package/dist/esm/card/ui/playButton/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export var playButtonClassName = 'media-card-play-button';

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

@@ -6,12 +6,12 @@ export var getNormalizedProgress = function getNormalizedProgress(progress) {
 };
 export var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
-      _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,
-      _ref$positionBottom = _ref.positionBottom,
-      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
-      _ref$showOnTop = _ref.showOnTop,
-      showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
+    _ref$breakpoint = _ref.breakpoint,
+    breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,
+    _ref$positionBottom = _ref.positionBottom,
+    positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
+    _ref$showOnTop = _ref.showOnTop,
+    showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: getNormalizedProgress(progress),
     breakpoint: breakpoint,

package/dist/esm/card/ui/progressBar/styledBar.js

@@ -3,9 +3,9 @@ import { jsx } from '@emotion/react';
 import { styledBarStyles } from './styles';
 export var StyledBar = function StyledBar(props) {
   var progress = props.progress,
-      breakpoint = props.breakpoint,
-      positionBottom = props.positionBottom,
-      showOnTop = props.showOnTop;
+    breakpoint = props.breakpoint,
+    positionBottom = props.positionBottom,
+    showOnTop = props.showOnTop;
   return jsx("div", {
     id: "styledBar",
     css: styledBarStyles({

package/dist/esm/card/ui/progressBar/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../styles/mixins';
@@ -10,7 +8,6 @@ import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 var height = 3;
 var padding = 1;
 var width = 95; // %
-
 var left = (100 - width) / 2; // %
 
 var smallSizeSettings = {
@@ -26,18 +23,17 @@ export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop)
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
   return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_ref) {
   var progress = _ref.progress,
-      breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom,
-      showOnTop = _ref.showOnTop;
+    breakpoint = _ref.breakpoint,
+    positionBottom = _ref.positionBottom,
+    showOnTop = _ref.showOnTop;
   return "\n".concat(borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat(rgba(N0, 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: #44546F;\n  ").concat(borderRadius, "\n  display: block;\n}\n").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-
 export var styledBarStyles = function styledBarStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
 };

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

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
@@ -15,17 +13,14 @@ import { Breakpoint, responsiveSettings } from './common';
 var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
 export var calcBreakpointSize = function calcBreakpointSize() {
   var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
   var _ref = breakpointSizes.find(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
+      var _ref4 = _slicedToArray(_ref3, 2),
         _breakpoint = _ref4[0],
         limit = _ref4[1];
-
-    return wrapperWidth <= limit;
-  }) || [Breakpoint.SMALL],
-      _ref2 = _slicedToArray(_ref, 1),
-      breakpoint = _ref2[0];
-
+      return wrapperWidth <= limit;
+    }) || [Breakpoint.SMALL],
+    _ref2 = _slicedToArray(_ref, 1),
+    breakpoint = _ref2[0];
   return breakpoint;
 };
 export var generateResponsiveStyles = function generateResponsiveStyles() {
@@ -35,17 +30,16 @@ export var generateResponsiveStyles = function generateResponsiveStyles() {
 };
 export var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
   var _ref5 = dimensions || {},
-      width = _ref5.width,
-      height = _ref5.height;
-
+    width = _ref5.width,
+    height = _ref5.height;
   var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
-      defaultWidth = _getDefaultCardDimens.width,
-      defaultHeight = _getDefaultCardDimens.height;
-
+    defaultWidth = _getDefaultCardDimens.width,
+    defaultHeight = _getDefaultCardDimens.height;
   return "\n    width: ".concat(getCSSUnitValue(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-}; // This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+};
 
+// This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
 export var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   var withOverlayShadow = !disableOverlay ? "".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A), ")")) : '';
   var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
@@ -59,14 +53,12 @@ export var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(
   if (!isPlayButtonClickable) {
     return '';
   }
-
   return "\n    &:hover .".concat(playButtonClassName, " {\n      ").concat(fixedPlayButtonStyles, "\n    }\n  ");
 };
 export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
   if (!isTickBoxSelectable) {
     return '';
   }
-
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
 export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);

package/dist/esm/card/ui/tickBox/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';

package/dist/esm/card/ui/titleBox/failedTitleBox.js

@@ -6,8 +6,8 @@ import { R300 } from '@atlaskit/theme/colors';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
-      _ref$customMessage = _ref.customMessage,
-      customMessage = _ref$customMessage === void 0 ? messages.failed_to_load : _ref$customMessage;
+    _ref$customMessage = _ref.customMessage,
+    customMessage = _ref$customMessage === void 0 ? messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {

package/dist/esm/card/ui/titleBox/styles.js

@@ -1,13 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../../styles/mixins';
 import { themed } from '@atlaskit/theme/components';
-
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
   var setting = responsiveSettings[breakpoint];
@@ -16,17 +13,17 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
   var height = getTitleBoxHeight(breakpoint);
   return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
 };
-
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 var BACKGROUND_COLOR_DARK = '#161a1d';
 var TEXT_COLOR_DARK = '#C7D1DB';
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-      titleBoxBgColor = _ref.titleBoxBgColor,
-      theme = _ref.theme;
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    theme = _ref.theme;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), themed({
     light: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
-    dark: "var(--ds-surface, ".concat(rgba( // theme does not contain this color, use constant instead
+    dark: "var(--ds-surface, ".concat(rgba(
+    // theme does not contain this color, use constant instead
     titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
   })({
     theme: theme

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

@@ -6,22 +6,20 @@ import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
 export var FormattedDate = injectIntl(function (_ref) {
   var timestamp = _ref.timestamp,
-      intl = _ref.intl;
-
+    intl = _ref.intl;
   var _ref2 = intl || {
-    locale: 'en'
-  },
-      _ref2$locale = _ref2.locale,
-      locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
-
+      locale: 'en'
+    },
+    _ref2$locale = _ref2.locale,
+    locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
   return /*#__PURE__*/React.createElement(React.Fragment, null, formatDate(timestamp, locale));
 });
 export var TitleBox = function TitleBox(_ref3) {
   var name = _ref3.name,
-      createdAt = _ref3.createdAt,
-      breakpoint = _ref3.breakpoint,
-      titleBoxBgColor = _ref3.titleBoxBgColor,
-      titleBoxIcon = _ref3.titleBoxIcon;
+    createdAt = _ref3.createdAt,
+    breakpoint = _ref3.breakpoint,
+    titleBoxBgColor = _ref3.titleBoxBgColor,
+    titleBoxIcon = _ref3.titleBoxIcon;
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint,
     titleBoxBgColor: titleBoxBgColor

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

@@ -4,7 +4,7 @@ import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles,
 import { useGlobalTheme } from '@atlaskit/theme/components';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
-      titleBoxBgColor = props.titleBoxBgColor;
+    titleBoxBgColor = props.titleBoxBgColor;
   var theme = useGlobalTheme();
   return jsx("div", {
     id: "titleBoxWrapper",

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

@@ -4,13 +4,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -19,65 +15,52 @@ import { N20, N800, Y500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../../../utils';
-
 var isPercentage = function isPercentage(value) {
   return /^\d+(\.\d+)?%$/.test(value);
 };
-
 var shouldShowText = function shouldShowText(_ref) {
   var width = _ref.width,
-      height = _ref.height;
-
+    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 ? defaultImageCardDimensions.width : _dimensions$width,
-      _dimensions$height = dimensions.height,
-      height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
+    width = _dimensions$width === void 0 ? defaultImageCardDimensions.width : _dimensions$width,
+    _dimensions$height = dimensions.height,
+    height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
   return {
     width: normalizeDimension(width, defaultImageCardDimensions.width),
     height: normalizeDimension(height, defaultImageCardDimensions.height)
   };
 };
-
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
-
   try {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", ";\n      ", ";\n      background: ", ";\n      color: ", ";\n      max-height: 100%;\n      max-width: 100%;\n      ", ";\n      display: flex;\n      flex-direction: column;\n\n      p {\n        font-size: ", "px;\n        text-align: center;\n        display: ", ";\n      }\n    "])), center, borderRadius, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-text-subtle, ".concat(N800, ")"), getConvertedDimension(dimensions), fontSize(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
   } catch (e) {
     return null;
   }
 };
-
 export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
   _inherits(UnhandledErrorCard, _Component);
-
   var _super = _createSuper(UnhandledErrorCard);
-
   function UnhandledErrorCard() {
     _classCallCheck(this, UnhandledErrorCard);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(UnhandledErrorCard, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          dimensions = _this$props.dimensions,
-          onClick = _this$props.onClick;
+        dimensions = _this$props.dimensions,
+        onClick = _this$props.onClick;
       return jsx("div", {
         css: wrapperStyles(dimensions),
         onClick: onClick
@@ -88,6 +71,5 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
       }), jsx("p", null, "We couldn't load this content"));
     }
   }]);
-
   return UnhandledErrorCard;
 }(Component);