@atlaskit/media-card 75.0.1 → 76.0.0

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

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.wrapperStyles = exports.titleStyles = exports.progressWrapperStyles = exports.progressBarWrapperStyles = exports.playIconWrapperStyles = exports.playIconBackgroundStyles = exports.overlayStyles = exports.cardActionsWrapperStyles = exports.bodyStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _mediaUi = require("@atlaskit/media-ui");
-var _components = require("@atlaskit/theme/components");
-var _colors = require("@atlaskit/theme/colors");
-var _styles = require("../styles");
-var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-var getShadowAttribute = function getShadowAttribute(props) {
-  var disableOverlay = props.disableOverlay;
-  return disableOverlay ? '' : _styles.cardShadow;
-};
-var getBackgroundColor = function getBackgroundColor(props) {
-  var mediaType = props.mediaType;
-  return "background: ".concat(mediaType === 'image' ? 'transparent' : (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-  })(props), ";");
-};
-var wrapperStyles = function wrapperStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.rootStyles)(), getShadowAttribute(props), _mediaUi.borderRadius, getBackgroundColor(props), (0, _getSelectedBorderStyle.getSelectedBorderStyle)(props), (0, _mediaUi.size)(), _mediaUi.borderRadius, _mediaUi.borderRadius);
-};
-exports.wrapperStyles = wrapperStyles;
-var playIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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)");
-exports.playIconWrapperStyles = playIconWrapperStyles;
-var playIconBackgroundStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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))");
-exports.playIconBackgroundStyles = playIconBackgroundStyles;
-var bodyHeight = 26;
-var progressBarWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
-exports.progressBarWrapperStyles = progressBarWrapperStyles;
-var overlayStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), (0, _mediaUi.absolute)(), (0, _mediaUi.size)(), "var(--ds-blanket, rgba(9, 30, 66, 0.5))");
-exports.overlayStyles = overlayStyles;
-var titleStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), (0, _mediaUi.absolute)(), "var(--ds-text-inverse, ".concat(_colors.N0, ")"));
-exports.titleStyles = titleStyles;
-var bodyStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"));
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-exports.bodyStyles = bodyStyles;
-var progressWrapperStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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);
-exports.progressWrapperStyles = progressWrapperStyles;
-var cardActionsWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));
-exports.cardActionsWrapperStyles = cardActionsWrapperStyles;

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

@@ -1,12 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.spin = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _templateObject;
-var spin = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  to { transform: rotate(360deg); }\n"])));
-exports.spin = spin;

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

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultTransitionDuration = void 0;
-var defaultTransitionDuration = '.3s';
-exports.defaultTransitionDuration = defaultTransitionDuration;

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

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.easeOutExpo = exports.easeOutCubic = void 0;
-var easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
-exports.easeOutCubic = easeOutCubic;
-var easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';
-exports.easeOutExpo = easeOutExpo;

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

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSelectedBorderStyle = void 0;
-var _mediaUi = require("@atlaskit/media-ui");
-var _selection = require("@atlaskit/editor-shared-styles/selection");
-/*
- * Used to display the blue border around a selected card without
- * shrinking the image OR growing the card size
- */
-var getSelectedBorderStyle = function getSelectedBorderStyle(_ref) {
-  var selected = _ref.selected;
-  return "\n    ".concat(_selection.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(_mediaUi.borderRadius, "\n      ").concat(selected ? (0, _selection.getSelectionStyles)([_selection.SelectionStyle.Border]) : '', "\n    }\n  ");
-};
-exports.getSelectedBorderStyle = getSelectedBorderStyle;

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

@@ -1,121 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "antialiased", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.antialiased;
-  }
-});
-Object.defineProperty(exports, "borderRadiusLeft", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.borderRadiusLeft;
-  }
-});
-Object.defineProperty(exports, "capitalize", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.capitalize;
-  }
-});
-exports.cardShadow = void 0;
-Object.defineProperty(exports, "centerSelf", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.centerSelf;
-  }
-});
-Object.defineProperty(exports, "centerSelfX", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.centerSelfX;
-  }
-});
-Object.defineProperty(exports, "centerSelfY", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.centerSelfY;
-  }
-});
-Object.defineProperty(exports, "centerX", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.centerX;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "defaultTransitionDuration", {
-  enumerable: true,
-  get: function get() {
-    return _config.defaultTransitionDuration;
-  }
-});
-Object.defineProperty(exports, "easeOutCubic", {
-  enumerable: true,
-  get: function get() {
-    return _easing.easeOutCubic;
-  }
-});
-Object.defineProperty(exports, "easeOutExpo", {
-  enumerable: true,
-  get: function get() {
-    return _easing.easeOutExpo;
-  }
-});
-Object.defineProperty(exports, "hexToRgb", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.hexToRgb;
-  }
-});
-Object.defineProperty(exports, "rgba", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.rgba;
-  }
-});
-exports.rootStyles = void 0;
-Object.defineProperty(exports, "spaceAround", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.spaceAround;
-  }
-});
-Object.defineProperty(exports, "spin", {
-  enumerable: true,
-  get: function get() {
-    return _animations.spin;
-  }
-});
-Object.defineProperty(exports, "transition", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.transition;
-  }
-});
-Object.defineProperty(exports, "withAppearance", {
-  enumerable: true,
-  get: function get() {
-    return _mixins.withAppearance;
-  }
-});
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
-var _config = require("./config");
-var _mixins = require("./mixins");
-var _easing = require("./easing");
-var _animations = require("./animations");
-var _templateObject;
-var rootStyles = function rootStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), (0, _constants.fontFamily)());
-};
-exports.rootStyles = rootStyles;
-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");
-exports.cardShadow = cardShadow;
-var _default = rootStyles;
-exports.default = _default;

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

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withAppearance = exports.transition = exports.spaceAround = exports.rgba = exports.hexToRgb = exports.centerX = exports.centerSelfY = exports.centerSelfX = exports.centerSelf = exports.capitalize = exports.borderRadiusLeft = exports.antialiased = void 0;
-var _constants = require("@atlaskit/theme/constants");
-var _config = require("./config");
-var centerX = "\n  display: flex;\n  justify-content: center;\n";
-exports.centerX = centerX;
-var antialiased = "\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n";
-exports.antialiased = antialiased;
-var centerSelfY = "\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n";
-exports.centerSelfY = centerSelfY;
-var centerSelfX = "\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n";
-exports.centerSelfX = centerSelfX;
-var centerSelf = "\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n";
-exports.centerSelf = centerSelf;
-var borderRadiusLeft = "\n  border-top-left-radius: ".concat((0, _constants.borderRadius)(), ";\n  border-bottom-left-radius: ").concat((0, _constants.borderRadius)(), ";\n");
-exports.borderRadiusLeft = borderRadiusLeft;
-var spaceAround = "\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n";
-exports.spaceAround = spaceAround;
-var transition = function transition() {
-  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
-  return "\n  transition: ".concat(propertyName, " ").concat(_config.defaultTransitionDuration, ";\n");
-};
-exports.transition = transition;
-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;
-};
-exports.hexToRgb = hexToRgb;
-var rgba = function rgba(hex, opacity) {
-  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
-};
-exports.rgba = rgba;
-var capitalize = "\n  &::first-letter {\n    text-transform: uppercase;\n  }\n";
-exports.capitalize = capitalize;
-var withAppearance = function withAppearance(styleMap) {
-  return function (_ref) {
-    var appearance = _ref.appearance;
-    return appearance && styleMap[appearance] || '';
-  };
-};
-exports.withAppearance = withAppearance;

package/dist/cjs/card/styles/styles.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.wrapperStyles = exports.inlinePlayerWrapperStyles = exports.inlinePlayerClassName = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
-var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
-var _breakpoint = require("../../utils/breakpoint");
-var _getSelectedBorderStyle = require("./getSelectedBorderStyle");
-var _getDimensionsWithDefault = require("../../utils/lightCards/getDimensionsWithDefault");
-var _templateObject, _templateObject2;
-var inlinePlayerClassName = 'media-card-inline-player';
-exports.inlinePlayerClassName = inlinePlayerClassName;
-var getWrapperHeight = function getWrapperHeight(dimensions) {
-  return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
-};
-var getWrapperWidth = function getWrapperWidth(dimensions) {
-  return dimensions && dimensions.width ? "width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.width), "; max-width: 100%;") : '';
-};
-var wrapperStyles = function wrapperStyles(_ref) {
-  var dimensions = _ref.dimensions,
-    _ref$breakpointSize = _ref.breakpointSize,
-    breakpointSize = _ref$breakpointSize === void 0 ? 'medium' : _ref$breakpointSize,
-    shouldUsePointerCursor = _ref.shouldUsePointerCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n      ", "\n  cursor: ", ";\n"])), (0, _breakpoint.breakpointStyles)({
-    breakpointSize: breakpointSize
-  }), getWrapperHeight(dimensions), getWrapperWidth(dimensions), shouldUsePointerCursor ? 'pointer' : 'default');
-};
-exports.wrapperStyles = wrapperStyles;
-wrapperStyles.displayName = 'CardViewWrapper';
-var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
-  var dimensions = _ref2.dimensions,
-    selected = _ref2.selected;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%', (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto', (0, _constants.borderRadius)(), (0, _getSelectedBorderStyle.getSelectedBorderStyle)(selected));
-};
-exports.inlinePlayerWrapperStyles = inlinePlayerWrapperStyles;
-inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.warningIconWrapperStyles = exports.loadingRateLimitedTextWrapperStyles = exports.loadingRateLimitedContainerStyles = exports.errorWrapperStyles = exports.couldntLoadWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _styles = require("../progressBar/styles");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var loadingRateLimitedContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
-exports.loadingRateLimitedContainerStyles = loadingRateLimitedContainerStyles;
-var warningIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-exports.warningIconWrapperStyles = warningIconWrapperStyles;
-var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
-  var breakpoint = _ref.breakpoint,
-    positionBottom = _ref.positionBottom;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N300, ")"), (0, _styles.generateResponsiveStyles)(breakpoint, positionBottom, false, 1));
-};
-exports.loadingRateLimitedTextWrapperStyles = loadingRateLimitedTextWrapperStyles;
-loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';
-var couldntLoadWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 550;\n"])));
-exports.couldntLoadWrapperStyles = couldntLoadWrapperStyles;
-var errorWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 350;\n"])));
-exports.errorWrapperStyles = errorWrapperStyles;

package/dist/cjs/utils/breakpoint.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.cardBreakpointSizes = exports.breakpointStyles = exports.breakpointSize = void 0;
-var _mediaUi = require("@atlaskit/media-ui");
-var breakpointSize = function breakpointSize(width) {
-  var sizes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : cardBreakpointSizes;
-  var value = parseInt("".concat(width), 10); // Normalize value
-  var keys = Object.keys(sizes);
-  var defaultValue = keys[0];
-  var breakpoint;
-  keys.forEach(function (label) {
-    if (value < sizes[label] && !breakpoint) {
-      breakpoint = label;
-    }
-  });
-  return breakpoint || defaultValue;
-};
-exports.breakpointSize = breakpointSize;
-var cardBreakpointSizes = {
-  small: 173,
-  medium: 225,
-  large: 300,
-  xlarge: Infinity
-};
-exports.cardBreakpointSizes = cardBreakpointSizes;
-var breakpointStyles = function breakpointStyles(_ref) {
-  var breakpointSize = _ref.breakpointSize;
-  switch (breakpointSize) {
-    case 'small':
-      return "\n        .title {\n          font-size: 12px;\n        }\n        .file-type-icon span {\n          // We need to use important here since we can't use the dimensions provided by the Icon component\n          ".concat((0, _mediaUi.size)('14px !important'), "\n        }\n      ");
-    case 'medium':
-      return "\n        .title {\n          font-size: 14px;\n        }\n        .file-type-icon span {\n          ".concat((0, _mediaUi.size)('16px !important'), "\n        }\n      ");
-    case 'large':
-      return "\n        .overlay {\n          padding: 24px;\n        }\n        .title {\n          font-size: 14px;\n        }\n        .file-size {\n          font-size: 14px;\n        }\n        .file-type-icon span {\n          ".concat((0, _mediaUi.size)('18px !important'), "\n        }\n      ");
-    case 'xlarge':
-      return "\n        border-radius: 2px;\n\n        .title {\n          font-size: 16px;\n        }\n\n        .file-size {\n          font-size: 14px;\n        }\n        \n        .wrapper, .img-wrapper {\n          border-radius: 2px;\n        }\n\n        .overlay {\n          padding: 24px;\n        }\n\n        .file-type-icon span {\n          ".concat((0, _mediaUi.size)('18px !important'), "\n        }\n      ");
-  }
-};
-exports.breakpointStyles = breakpointStyles;

package/dist/cjs/utils/fileIcon/index.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileIcon = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
-var _styles = require("./styles");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
-var fileTypeIconClass = 'file-type-icon';
-var FileIcon = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(FileIcon, _Component);
-  var _super = _createSuper(FileIcon);
-  function FileIcon() {
-    (0, _classCallCheck2.default)(this, FileIcon);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(FileIcon, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        mediaType = _this$props.mediaType,
-        iconUrl = _this$props.iconUrl,
-        style = _this$props.style;
-      var type = mediaType || 'unknown';
-      var defaultIcon = (0, _react.jsx)(_mediaTypeIcon.MediaTypeIcon, {
-        type: mediaType,
-        size: "small",
-        className: fileTypeIconClass
-      });
-      var icon = iconUrl ? (0, _react.jsx)("img", {
-        src: iconUrl,
-        className: "custom-icon",
-        alt: type
-      }) : defaultIcon;
-      return (0, _react.jsx)("div", {
-        css: _styles.fileTypeIconStyles,
-        style: style,
-        className: fileTypeIconClass
-      }, icon);
-    }
-  }]);
-  return FileIcon;
-}(_react2.Component);
-exports.FileIcon = FileIcon;

package/dist/cjs/utils/fileIcon/styles.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fileTypeIconStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _mediaUi = require("@atlaskit/media-ui");
-var _templateObject;
-var fileTypeIconStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), (0, _mediaUi.size)('12px !important'));
-exports.fileTypeIconStyles = fileTypeIconStyles;

package/dist/cjs/utils/getErrorMessage.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getErrorMessage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _mediaUi = require("@atlaskit/media-ui");
-var getErrorMessage = function getErrorMessage(status) {
-  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.failed_to_load);
-};
-exports.getErrorMessage = getErrorMessage;

package/dist/cjs/utils/progressBar/index.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = require("@emotion/react");
-var _react2 = require("react");
-var _styles = require("./styles");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
-var ProgressBar = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ProgressBar, _Component);
-  var _super = _createSuper(ProgressBar);
-  function ProgressBar() {
-    (0, _classCallCheck2.default)(this, ProgressBar);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(ProgressBar, [{
-    key: "render",
-    value: function render() {
-      if (typeof this.props.progress !== 'number') {
-        return null;
-      }
-      var progress = Math.min(1, Math.max(0, this.props.progress));
-      var progressBarStyle = {
-        width: "".concat(progress * 100, "%")
-      };
-      return (0, _react.jsx)("div", {
-        css: _styles.progressWrapperStyles
-      }, (0, _react.jsx)("div", {
-        className: 'progressBar',
-        style: progressBarStyle
-      }));
-    }
-  }]);
-  return ProgressBar;
-}(_react2.Component);
-exports.ProgressBar = ProgressBar;

package/dist/cjs/utils/progressBar/styles.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.progressWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _mediaUi = require("@atlaskit/media-ui");
-var _templateObject;
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var progressWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), _mediaUi.borderRadius);
-exports.progressWrapperStyles = progressWrapperStyles;

package/dist/cjs/utils/shouldDisplayImageThumbnail.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldDisplayImageThumbnail = void 0;
-var _mediaClient = require("@atlaskit/media-client");
-var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatus, mediaItemType, dataURI, mediaType, mimeType) {
-  if (mediaType === 'doc' || !mimeType && mediaItemType === 'file') {
-    return false;
-  }
-  if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
-  }
-  return false;
-};
-exports.shouldDisplayImageThumbnail = shouldDisplayImageThumbnail;

package/dist/es2019/card/cardImageView/cardImageViewWrapper.js

@@ -1,43 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './classnames';
-import { playIconWrapperStyles, progressBarWrapperStyles, wrapperStyles } from './styles';
-export const CardImageViewWrapper = props => {
-  const {
-    disableOverlay,
-    selectable,
-    selected,
-    mediaType,
-    mediaName,
-    status,
-    progress
-  } = props;
-  const theme = useGlobalTheme();
-  return jsx("div", {
-    id: "cardImageViewWrapper",
-    "data-testid": "media-file-card-view",
-    "data-test-media-name": mediaName,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    "data-test-selected": selected ? true : undefined,
-    css: wrapperStyles({
-      theme,
-      disableOverlay,
-      selectable,
-      selected,
-      mediaType
-    }),
-    className: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
-  }, props.children);
-};
-export const PlayIconWrapper = props => {
-  return jsx("div", {
-    css: playIconWrapperStyles
-  }, props.children);
-};
-export const ProgressBarWrapper = props => {
-  return jsx("div", {
-    css: progressBarWrapperStyles
-  }, props.children);
-};

package/dist/es2019/card/cardImageView/cardOverlay/cardOverlayComponents.js

@@ -1,41 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { altWrapperStyles, errorMessageStyles, metadataStyles, overlayStyles, titleWrapperStyles } from './styles';
-export const Overlay = props => {
-  const {
-    hasError,
-    noHover,
-    className
-  } = props;
-  return jsx("div", {
-    css: overlayStyles({
-      hasError,
-      noHover
-    }),
-    className: className
-  }, props.children);
-};
-export const ErrorMessage = props => {
-  return jsx("div", {
-    css: errorMessageStyles
-  }, props.children);
-};
-export const AltWrapper = props => {
-  return jsx("div", {
-    css: altWrapperStyles
-  }, props.children);
-};
-export const TitleWrapper = props => {
-  const theme = useGlobalTheme();
-  return jsx("div", {
-    css: titleWrapperStyles(theme),
-    className: 'title'
-  }, props.children);
-};
-export const Metadata = props => {
-  return jsx("div", {
-    css: metadataStyles,
-    className: props.className
-  }, props.children);
-};