@atlaskit/media-card 75.0.0 → 76.0.0

package/dist/esm/card/cardImageView/cardOverlay/index.js

@@ -1,176 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 { jsx } from '@emotion/react';
-import React from 'react';
-import { Component } from 'react';
-import cx from 'classnames';
-import TickIcon from '@atlaskit/icon/glyph/check';
-import { Ellipsify } from '@atlaskit/media-ui';
-
-// We dont require things directly from "utils" to avoid circular dependencies
-import { FileIcon } from '../../../utils/fileIcon';
-import { ErrorIcon } from '../../../utils/errorIcon';
-import CardActions from '../../../utils/cardActions';
-import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
-import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
-var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
-  // don't show title if error
-  // also when card is uploading + selected, title is already showing outside of the overlay
-  if (error || !mediaName || cardStatus === 'uploading' && !selected) {
-    return '';
-  }
-  return mediaName;
-};
-export var CardOverlay = /*#__PURE__*/function (_Component) {
-  _inherits(CardOverlay, _Component);
-  var _super = _createSuper(CardOverlay);
-  function CardOverlay(props) {
-    var _this;
-    _classCallCheck(this, CardOverlay);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "onMenuToggle", function (attrs) {
-      _this.setState({
-        isMenuExpanded: attrs.isOpen
-      });
-    });
-    _this.state = {
-      isMenuExpanded: false
-    };
-    return _this;
-  }
-  _createClass(CardOverlay, [{
-    key: "wrapperClassNames",
-    get: function get() {
-      var _this$props = this.props,
-        error = _this$props.error,
-        noHover = _this$props.noHover,
-        selectable = _this$props.selectable,
-        selected = _this$props.selected,
-        mediaType = _this$props.mediaType,
-        persistent = _this$props.persistent;
-      var isMenuExpanded = this.state.isMenuExpanded;
-      return error ? cx('overlay', {
-        error: error,
-        active: isMenuExpanded
-      }) : cx('overlay', mediaType, {
-        active: isMenuExpanded,
-        selectable: selectable,
-        selected: selected,
-        // Yes, you right. We put "persistent" class when it is NOT persistent. 🤦
-        persistent: !persistent,
-        noHover: noHover
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        cardStatus = _this$props2.cardStatus,
-        error = _this$props2.error,
-        noHover = _this$props2.noHover,
-        mediaName = _this$props2.mediaName,
-        persistent = _this$props2.persistent,
-        selected = _this$props2.selected,
-        actions = _this$props2.actions;
-      var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-      var menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
-      return jsx(Overlay, {
-        hasError: !!error,
-        noHover: noHover,
-        className: this.wrapperClassNames
-      }, jsx("div", {
-        css: topRowStyles,
-        className: 'top-row'
-      }, this.errorLine(), jsx(TitleWrapper, null, titleText ? jsx(Ellipsify, {
-        testId: "media-card-file-name",
-        text: titleText,
-        lines: 2
-      }) : null), this.tickBox()), jsx("div", {
-        css: bottomRowStyles,
-        className: 'bottom-row'
-      }, jsx("div", {
-        css: leftColumnStyles
-      }, this.bottomLeftColumn()), jsx("div", {
-        css: rightColumnStyles
-      }, actions ? jsx(CardActions, {
-        actions: actions,
-        onToggle: this.onMenuToggle,
-        triggerColor: menuTriggerColor
-      }) : null)));
-    }
-  }, {
-    key: "errorLine",
-    value: function errorLine() {
-      var _this$props3 = this.props,
-        error = _this$props3.error,
-        alt = _this$props3.alt;
-      return error && jsx(React.Fragment, null, jsx("div", {
-        css: errorLineStyles
-      }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
-        css: errorLineStyles
-      }, jsx(AltWrapper, null, alt)));
-    }
-  }, {
-    key: "tickBox",
-    value: function tickBox() {
-      var _this$props4 = this.props,
-        selected = _this$props4.selected,
-        selectable = _this$props4.selectable;
-      var tick = jsx(TickIcon, {
-        label: "tick"
-      });
-      var className = cx('tickbox', {
-        selected: selected
-      });
-      return selectable && jsx("div", {
-        css: tickBoxStyles,
-        className: className
-      }, tick);
-    }
-  }, {
-    key: "bottomLeftColumn",
-    value: function bottomLeftColumn() {
-      var error = this.props.error;
-      if (!error) {
-        var _this$props5 = this.props,
-          mediaType = _this$props5.mediaType,
-          subtitle = _this$props5.subtitle,
-          icon = _this$props5.icon;
-        var classNames = cx('metadata');
-        var fileIcon = mediaType || icon ? jsx(FileIcon, {
-          mediaType: mediaType,
-          iconUrl: icon
-        }) : null;
-        var subtitleEl = subtitle ? jsx("div", {
-          css: subtitleStyles,
-          className: "file-size"
-        }, subtitle) : null;
-        return jsx("div", null, jsx(Metadata, {
-          className: classNames
-        }, fileIcon, subtitleEl));
-      }
-    }
-  }, {
-    key: "removeBtnClick",
-    value: function removeBtnClick(handler) {
-      return function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        handler();
-      };
-    }
-  }]);
-  return CardOverlay;
-}(Component);
-_defineProperty(CardOverlay, "defaultProps", {
-  actions: [],
-  mediaName: ''
-});

package/dist/esm/card/cardImageView/cardOverlay/styles.js

@@ -1,42 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-/**
- * Everything about this file change is just wrong.
- * Mostly because we do bad things with classes.
- * This is all wrong and hopefully will be removed from existence with card v3,
- * so please don’t be too sad about all this!
- */
-
-import { css } from '@emotion/react';
-import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import * as colors from '@atlaskit/theme/colors';
-import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
-export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), "var(--ds-surface-overlay, ".concat(rgba('#ffffff', 0.5), ")"), "var(--ds-icon-subtle, #798599)", "var(--ds-icon-inverse, white)", "var(--ds-icon-selected, #0052cc)");
-var getOverlayStyles = function getOverlayStyles(_ref) {
-  var hasError = _ref.hasError,
-    noHover = _ref.noHover;
-  if (hasError || noHover) {
-    return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
-  }
-};
-export var overlayStyles = function overlayStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), "var(--ds-text-information, ".concat(colors.B400, ")"), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-background-neutral-hovered, ".concat(rgba(colors.N900, 0.06), ")"), "var(--ds-background-selected, ".concat(colors.B200, ")"), "var(--ds-background-selected-hovered, ".concat(rgba(colors.N900, 0.16), ")"), "var(--ds-text, ".concat(colors.N900, ")"), "var(--ds-text, white)", "var(--ds-text, white)", "var(--ds-interaction-hovered, ".concat(rgba(colors.N900, 0.5), ")"), "var(--ds-background-selected-bold, ".concat(colors.B200, ")"), "var(--ds-icon-inverse, white)", "var(--ds-text, ".concat(colors.N800, ")"));
-};
-export var errorLineStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
-export var leftColumnStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
-export var topRowStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-export var bottomRowStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
-export var rightColumnStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-export var errorMessageStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, "var(--ds-text-subtlest, ".concat(colors.N70, ")"));
-export var altWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
-export var titleWrapperStyles = function titleWrapperStyles(theme) {
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
-    light: "var(--ds-text, ".concat(colors.N800, ")"),
-    dark: "var(--ds-text, ".concat(colors.DN900, ")")
-  })({
-    theme: theme
-  }));
-};
-export var subtitleStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: ", ";\n"])), ellipsis('100px'), "var(--ds-text-subtlest, #5e6c84)");
-export var metadataStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/card/cardImageView/cardViewWrapper.js

@@ -1,24 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { wrapperStyles } from '../styles/styles';
-export var Wrapper = function Wrapper(props) {
-  var testId = props.testId,
-    shouldUsePointerCursor = props.shouldUsePointerCursor,
-    breakpointSize = props.breakpointSize,
-    dimensions = props.dimensions,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    innerRef = props.innerRef;
-  return jsx("div", {
-    id: "cardViewWrapper",
-    "data-testid": testId,
-    css: wrapperStyles({
-      shouldUsePointerCursor: shouldUsePointerCursor,
-      breakpointSize: breakpointSize,
-      dimensions: dimensions
-    }),
-    onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    ref: innerRef
-  }, props.children);
-};

package/dist/esm/card/cardImageView/fileCardImageView.js

@@ -1,300 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 { jsx } from '@emotion/react';
-import React, { Component } from 'react';
-import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
-import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
-import { CardOverlay } from './cardOverlay';
-import { bodyStyles, cardActionsWrapperStyles, overlayStyles, progressWrapperStyles, titleStyles, playIconBackgroundStyles } from './styles';
-import { CardLoading } from '../../utils/lightCards/cardLoading';
-import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
-import { ProgressBar } from '../../utils/progressBar';
-import CardActions from '../../utils/cardActions';
-import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
-export var FileCardImageView = /*#__PURE__*/function (_Component) {
-  _inherits(FileCardImageView, _Component);
-  var _super = _createSuper(FileCardImageView);
-  function FileCardImageView() {
-    var _this;
-    _classCallCheck(this, FileCardImageView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "wasThumbnailDisplayed", false);
-    _defineProperty(_assertThisInitialized(_this), "renderCardContents", function () {
-      var _this$props = _this.props,
-        status = _this$props.status,
-        mediaType = _this$props.mediaType,
-        fileSize = _this$props.fileSize;
-      if (status === 'error') {
-        return _this.renderErrorContents();
-      } else if (status === 'failed-processing') {
-        return _this.renderFailedContents();
-      }
-
-      // If a video has no errors/failed processing, we want to be able to play it
-      // immediately, even if there's no image preview
-      var isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
-      if (mediaType !== 'video' && !_this.isFileCardImageReadyForDisplay && !isZeroSize) {
-        return _this.renderLoadingContents();
-      }
-      return _this.renderSuccessCardContents();
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderLoadingContents", function () {
-      return jsx("div", {
-        className: "wrapper"
-      }, jsx("div", {
-        className: "img-wrapper"
-      }, jsx(CardLoading, null)));
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderErrorContents", function () {
-      var _this$props2 = _this.props,
-        status = _this$props2.status,
-        error = _this$props2.error,
-        alt = _this$props2.alt,
-        mediaName = _this$props2.mediaName,
-        mediaType = _this$props2.mediaType,
-        actions = _this$props2.actions,
-        fileSize = _this$props2.fileSize;
-      return jsx(React.Fragment, null, jsx("div", {
-        className: "wrapper"
-      }), jsx(CardOverlay, {
-        cardStatus: status,
-        error: error,
-        persistent: true,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        alt: alt,
-        subtitle: fileSize,
-        actions: actions
-      }));
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderFailedContents", function () {
-      var _this$props3 = _this.props,
-        status = _this$props3.status,
-        mediaName = _this$props3.mediaName,
-        mediaType = _this$props3.mediaType,
-        actions = _this$props3.actions,
-        fileSize = _this$props3.fileSize;
-      return jsx(React.Fragment, null, jsx("div", {
-        className: "wrapper"
-      }), jsx(CardOverlay, {
-        cardStatus: status,
-        noHover: true,
-        persistent: true,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        subtitle: fileSize,
-        actions: actions
-      }));
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderUploadingCardOverlay", function () {
-      var _this$props4 = _this.props,
-        status = _this$props4.status,
-        mediaName = _this$props4.mediaName,
-        mediaType = _this$props4.mediaType,
-        dataURI = _this$props4.dataURI,
-        selectable = _this$props4.selectable,
-        selected = _this$props4.selected;
-      var isPersistent = mediaType === 'doc' || !dataURI;
-      return jsx(CardOverlay, {
-        cardStatus: status,
-        persistent: isPersistent,
-        mediaName: mediaName,
-        selectable: selectable,
-        selected: selected
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderPlayButton", function () {
-      var _this$props5 = _this.props,
-        status = _this$props5.status,
-        mediaItemType = _this$props5.mediaItemType,
-        mediaType = _this$props5.mediaType,
-        mimeType = _this$props5.mimeType,
-        selectable = _this$props5.selectable,
-        dataURI = _this$props5.dataURI;
-      if (mediaType !== 'video') {
-        return null;
-      }
-      if (selectable && !shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
-        return null;
-      }
-      return jsx(PlayIconWrapper, null, jsx("div", {
-        css: playIconBackgroundStyles
-      }, jsx(VidPlayIcon, {
-        testId: "media-card-play-button",
-        label: "play",
-        size: "large"
-      })));
-    });
-    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
-      var _this$props6 = _this.props,
-        onImageLoad = _this$props6.onImageLoad,
-        cardPreview = _this$props6.cardPreview;
-      onImageLoad && onImageLoad(cardPreview);
-    });
-    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
-      var _this$props7 = _this.props,
-        onImageError = _this$props7.onImageError,
-        cardPreview = _this$props7.cardPreview;
-      onImageError && onImageError(cardPreview);
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
-      var _this$props8 = _this.props,
-        status = _this$props8.status,
-        mediaItemType = _this$props8.mediaItemType,
-        dataURI = _this$props8.dataURI,
-        mediaType = _this$props8.mediaType,
-        mimeType = _this$props8.mimeType,
-        previewOrientation = _this$props8.previewOrientation,
-        onDisplayImage = _this$props8.onDisplayImage,
-        alt = _this$props8.alt;
-      if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
-        return null;
-      }
-      if (!_this.wasThumbnailDisplayed && onDisplayImage && mediaType === 'image') {
-        onDisplayImage();
-        _this.wasThumbnailDisplayed = true;
-      }
-      return jsx(MediaImage, {
-        dataURI: dataURI,
-        alt: alt,
-        crop: _this.isCropped,
-        stretch: _this.isStretched,
-        previewOrientation: previewOrientation,
-        onImageLoad: _this.onImageLoad,
-        onImageError: _this.onImageError
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
-      var _this$props9 = _this.props,
-        mediaName = _this$props9.mediaName,
-        progress = _this$props9.progress,
-        actions = _this$props9.actions,
-        status = _this$props9.status;
-      if (status !== 'uploading') {
-        return null;
-      }
-      return jsx(ProgressBarWrapper, null, jsx("div", {
-        css: overlayStyles
-      }, jsx("div", {
-        css: titleStyles
-      }, jsx(Ellipsify, {
-        testId: "media-card-file-name",
-        text: mediaName || '',
-        lines: 2
-      })), jsx("div", {
-        css: bodyStyles
-      }, jsx("div", {
-        css: progressWrapperStyles
-      }, jsx(ProgressBar, {
-        progress: progress
-      })), jsx("div", {
-        css: cardActionsWrapperStyles
-      }, actions ? jsx(CardActions, {
-        actions: actions,
-        triggerColor: "var(--ds-icon-inverse, white)"
-      }) : null))));
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
-      var _this$props10 = _this.props,
-        disableOverlay = _this$props10.disableOverlay,
-        selectable = _this$props10.selectable,
-        status = _this$props10.status;
-      var overlay = null;
-      if (!disableOverlay) {
-        if (status === 'uploading') {
-          if (selectable) {
-            overlay = _this.renderUploadingCardOverlay();
-          }
-        } else {
-          overlay = _this.renderSuccessCardOverlay();
-        }
-      }
-      return jsx("div", {
-        className: "wrapper"
-      }, jsx("div", {
-        className: "img-wrapper"
-      }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
-      var _this$props11 = _this.props,
-        status = _this$props11.status,
-        mediaName = _this$props11.mediaName,
-        mediaType = _this$props11.mediaType,
-        fileSize = _this$props11.fileSize,
-        dataURI = _this$props11.dataURI,
-        selectable = _this$props11.selectable,
-        selected = _this$props11.selected,
-        actions = _this$props11.actions;
-      var isPersistent = mediaType === 'doc' || !dataURI;
-      return jsx(CardOverlay, {
-        cardStatus: status,
-        persistent: isPersistent,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        selectable: selectable,
-        selected: selected,
-        subtitle: fileSize,
-        actions: actions
-      });
-    });
-    return _this;
-  }
-  _createClass(FileCardImageView, [{
-    key: "render",
-    value: function render() {
-      var _this$props12 = this.props,
-        disableOverlay = _this$props12.disableOverlay,
-        selectable = _this$props12.selectable,
-        selected = _this$props12.selected,
-        mediaType = _this$props12.mediaType,
-        progress = _this$props12.progress,
-        status = _this$props12.status,
-        mediaName = _this$props12.mediaName;
-      return jsx(CardImageViewWrapper, {
-        mediaName: mediaName,
-        status: status,
-        progress: progress,
-        disableOverlay: disableOverlay,
-        selectable: selectable,
-        selected: selected,
-        mediaType: mediaType
-      }, this.renderCardContents());
-    }
-  }, {
-    key: "isFileCardImageReadyForDisplay",
-    get: function get() {
-      var _this$props13 = this.props,
-        dataURI = _this$props13.dataURI,
-        status = _this$props13.status;
-      return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
-    }
-  }, {
-    key: "isCropped",
-    get: function get() {
-      var resizeMode = this.props.resizeMode;
-      return resizeMode === 'crop';
-    }
-  }, {
-    key: "isStretched",
-    get: function get() {
-      var resizeMode = this.props.resizeMode;
-      return resizeMode === 'stretchy-fit';
-    }
-  }]);
-  return FileCardImageView;
-}(Component);
-_defineProperty(FileCardImageView, "defaultProps", {
-  resizeMode: 'crop',
-  disableOverlay: false
-});

package/dist/esm/card/cardImageView/index.js

@@ -1 +0,0 @@
-export { FileCardImageView } from './fileCardImageView';

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

@@ -1,33 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-import { css } from '@emotion/react';
-import { absolute, borderRadius, size } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import { N20, DN50, N0 } from '@atlaskit/theme/colors';
-import { rootStyles, cardShadow } from '../styles';
-import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
-var getShadowAttribute = function getShadowAttribute(props) {
-  var disableOverlay = props.disableOverlay;
-  return disableOverlay ? '' : cardShadow;
-};
-var getBackgroundColor = function getBackgroundColor(props) {
-  var mediaType = props.mediaType;
-  return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-  })(props), ";");
-};
-export var wrapperStyles = function wrapperStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), rootStyles(), getShadowAttribute(props), borderRadius, getBackgroundColor(props), getSelectedBorderStyle(props), size(), borderRadius, borderRadius);
-};
-export var playIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])), "var(--ds-icon-inverse, white)");
-export var playIconBackgroundStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])), "var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))");
-var bodyHeight = 26;
-export var progressBarWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
-export var overlayStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), absolute(), size(), "var(--ds-blanket, rgba(9, 30, 66, 0.5))");
-export var titleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), "var(--ds-text-inverse, ".concat(N0, ")"));
-export var bodyStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"));
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-export var progressWrapperStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);
-export var cardActionsWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));

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

@@ -1,4 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { keyframes } from '@emotion/react';
-export var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to { transform: rotate(360deg); }\n"])));

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

@@ -1 +0,0 @@
-export var defaultTransitionDuration = '.3s';

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

@@ -1,2 +0,0 @@
-export var easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
-export var easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';

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

@@ -1,11 +0,0 @@
-import { borderRadius } from '@atlaskit/media-ui';
-import { getSelectionStyles, SelectionStyle, hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-
-/*
- * Used to display the blue border around a selected card without
- * shrinking the image OR growing the card size
- */
-export var getSelectedBorderStyle = function getSelectedBorderStyle(_ref) {
-  var selected = _ref.selected;
-  return "\n    ".concat(hideNativeBrowserTextSelectionStyles, "\n\n    &::after {\n      content: '';\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      top: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n      ").concat(borderRadius, "\n      ").concat(selected ? getSelectionStyles([SelectionStyle.Border]) : '', "\n    }\n  ");
-};

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

@@ -1,13 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { css } from '@emotion/react';
-import { fontFamily } from '@atlaskit/theme/constants';
-export { defaultTransitionDuration } from './config';
-export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance } from './mixins';
-export { easeOutCubic, easeOutExpo } from './easing';
-export { spin } from './animations';
-export var rootStyles = function rootStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
-};
-export var cardShadow = "\n  box-shadow: ".concat("var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))", ";\n");
-export default rootStyles;

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

@@ -1,27 +0,0 @@
-import { borderRadius } from '@atlaskit/theme/constants';
-import { defaultTransitionDuration } from './config';
-export var centerX = "\n  display: flex;\n  justify-content: center;\n";
-export var antialiased = "\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n";
-export var centerSelfY = "\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n";
-export var centerSelfX = "\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n";
-export var centerSelf = "\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n";
-export var borderRadiusLeft = "\n  border-top-left-radius: ".concat(borderRadius(), ";\n  border-bottom-left-radius: ").concat(borderRadius(), ";\n");
-export var spaceAround = "\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n";
-export var transition = function transition() {
-  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
-  return "\n  transition: ".concat(propertyName, " ").concat(defaultTransitionDuration, ";\n");
-};
-export var hexToRgb = function hexToRgb(hex) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
-};
-export var rgba = function rgba(hex, opacity) {
-  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
-};
-export var capitalize = "\n  &::first-letter {\n    text-transform: uppercase;\n  }\n";
-export var withAppearance = function withAppearance(styleMap) {
-  return function (_ref) {
-    var appearance = _ref.appearance;
-    return appearance && styleMap[appearance] || '';
-  };
-};