@atlaskit/media-card 71.0.0 → 73.1.0

package/example-helpers/developmentUseMessage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import InlineMessage from '@atlaskit/inline-message';
+
+const DevelopmentUseMessage: React.FC = () => (
+  <div style={{ textAlign: 'center' }}>
+    <InlineMessage type={'warning'} title={'Development use only'}>
+      The purpose of this example is to explore on edge cases for this
+      component's feature. Some ways of using the component in here might not be
+      the standard way. It is discouraged to use this code as a base for
+      consumers.
+    </InlineMessage>
+  </div>
+);
+export default DevelopmentUseMessage;

package/example-helpers/index.tsx

@@ -3,14 +3,22 @@
 import React from 'react';
 import { FileItem, Identifier } from '@atlaskit/media-client';
 import {
+  createPollingMaxAttemptsError,
+  createRateLimitedError,
   createStorybookMediaClientConfig,
   FeatureFlagsWrapper,
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import FabricAnalyticsListeners, {
+  AnalyticsWebClient,
+} from '@atlaskit/analytics-listeners';
+
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
 import { Card, CardAppearance, CardEvent, CardAction } from '../src';
 import { relevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
+import { MediaCardError } from '../src/errors';
+import DevelopmentUseMessage from './developmentUseMessage';
 
 const mediaClientConfig = createStorybookMediaClientConfig();
 
@@ -116,8 +124,51 @@ export const wrongMediaClientConfig = createStorybookMediaClientConfig({
 });
 export const wrongCollection = 'adfasdf';
 
-export const MainWrapper: React.FC = ({ children }) => (
-  <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
-    {children}
-  </FeatureFlagsWrapper>
+export type MainWrapperProps = {
+  developmentOnly?: boolean;
+};
+
+export const MainWrapper: React.FC<MainWrapperProps> = ({
+  children,
+  developmentOnly,
+}) => (
+  <>
+    {developmentOnly && <DevelopmentUseMessage />}
+    <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
+      {children}
+    </FeatureFlagsWrapper>
+  </>
 );
+
+export const mediaCardErrorState = (
+  error?: string,
+): MediaCardError | undefined => {
+  switch (error) {
+    case 'rateLimitedError':
+      return new MediaCardError('error-file-state', createRateLimitedError());
+    case 'pollingMaxAttemptsError':
+      return new MediaCardError(
+        'error-file-state',
+        createPollingMaxAttemptsError(),
+      );
+    case 'uploadError':
+      return new MediaCardError('upload');
+    default:
+      return undefined;
+  }
+};
+
+export const SSRAnalyticsWrapper: React.FC = ({ children }) => {
+  const mockClient: AnalyticsWebClient = {
+    sendUIEvent: (e) => console.debug('UI event', e),
+    sendOperationalEvent: (e) => console.debug('Operational event', e),
+    sendTrackEvent: (e) => console.debug('Track event', e),
+    sendScreenEvent: (e) => console.debug('Screen event', e),
+  };
+
+  return (
+    <FabricAnalyticsListeners client={mockClient}>
+      {children}
+    </FabricAnalyticsListeners>
+  );
+};

package/example-helpers/selectableCard.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Component } from 'react';
+import { MediaClientConfig } from '@atlaskit/media-core';
 import { Identifier } from '@atlaskit/media-client';
 import { Card } from '../src';
 
 export interface SelectableCardProps {
-  mediaClientConfig: Card['props']['mediaClientConfig'];
+  mediaClientConfig: MediaClientConfig;
   identifier: Identifier;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "71.0.0",
+  "version": "73.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,58 +29,60 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^10.1.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^14.2.0",
-    "@atlaskit/media-common": "^2.9.0",
-    "@atlaskit/media-ui": "^17.0.0",
-    "@atlaskit/media-viewer": "^45.8.0",
+    "@atlaskit/media-client": "^14.3.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/media-ui": "^18.1.0",
+    "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
     "lru-fast": "^0.2.2",
-    "react-lazily-render": "^1.2.0",
+    "react-loadable": "^5.1.0",
     "video-snapshot": "^1.0.11"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-radio-group": "^8.0.0",
-    "@atlaskit/field-range": "^9.0.0",
+    "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.8.0",
+    "@atlaskit/media-test-helpers": "^29.0.0",
+    "@atlaskit/radio": "^5.3.2",
+    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/select": "^15.2.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.6",
+    "@types/react-loadable": "^5.4.1",
     "deepcopy": "0.6.3",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
     "local-cypress": "^1.2.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "typescript": "3.9.6",
     "uuid": "^3.1.0",

package/dist/cjs/root/card/cardSSRView.js

@@ -1,112 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardSSRView = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
-var _getDataURIDimension = require("../../utils/getDataURIDimension");
-
-var _cardDimensions = require("../../utils/cardDimensions");
-
-var _styled = require("../ui/iconWrapper/styled");
-
-var _styledSSR = require("../ui/styledSSR");
-
-var _styled2 = require("../ui/blanket/styled");
-
-var _cardConstants = require("./cardConstants");
-
-var _resizeModeToMediaImageProps = require("../../utils/resizeModeToMediaImageProps");
-
-/*
- * This file is designed to be optimised for maximum performance.
- * Because of this the imports are optimised to import only what is required
- * If you're adding a new dependency please ensure that the
- * imported file only contains and depends on only what is required for it to function.
- */
-var CardSSRView = function CardSSRView(_ref) {
-  var identifier = _ref.identifier,
-      dimensions = _ref.dimensions,
-      mediaClient = _ref.mediaClient,
-      resizeMode = _ref.resizeMode,
-      disableOverlay = _ref.disableOverlay,
-      isLazy = _ref.isLazy;
-  var dataURI;
-
-  try {
-    var _getRequestedDimensio = (0, _getDataURIDimension.getRequestedDimensions)({
-      dimensions: dimensions
-    }),
-        width = _getRequestedDimensio.width,
-        height = _getRequestedDimensio.height;
-
-    var mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
-    dataURI = mediaClient.getImageUrlSync(identifier.id, {
-      collection: identifier.collectionName,
-      mode: mode,
-      width: width,
-      height: height,
-      allowAnimated: true
-    });
-  } catch (e) {
-    // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
-    dataURI = '';
-  }
-
-  var shouldDisplayBackground = !dataURI || !disableOverlay;
-  return /*#__PURE__*/_react.default.createElement(_styledSSR.SSRFileExperienceWrapper, {
-    className: _cardConstants.newFileExperienceClassName,
-    dimensions: dimensions,
-    breakpoint: calculateBreakpoint(dimensions),
-    shouldUsePointerCursor: Boolean(dataURI),
-    displayBackground: shouldDisplayBackground,
-    disableOverlay: disableOverlay,
-    selected: false,
-    "data-testid": "media-card-view"
-  }, /*#__PURE__*/_react.default.createElement(_styledSSR.CardImageContainer, {
-    className: "media-file-card-view",
-    "data-testid": "media-file-card-view"
-  }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
-    breakpoint: calculateBreakpoint(dimensions),
-    hasTitleBox: false
-  }, /*#__PURE__*/_react.default.createElement(_spinner.default, null)), !!dataURI && /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, (0, _extends2.default)({
-    dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
-    // onImageLoad={this.onImageLoad}  // TODO add these back as part of tracking performance.
-    // onImageError={this.onImageError}
-
-  }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode), {
-    loading: getLazyValue(isLazy)
-  })), !disableOverlay && /*#__PURE__*/_react.default.createElement(_styled2.Blanket, {
-    isFixed: false
-  })));
-};
-
-exports.CardSSRView = CardSSRView;
-
-function getLazyValue(isLazy) {
-  switch (isLazy) {
-    case false:
-      return 'eager';
-
-    default:
-      return 'lazy';
-  }
-}
-
-function calculateBreakpoint(dimensions) {
-  var _dimensions$width;
-
-  var width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : _cardDimensions.defaultImageCardDimensions.width;
-  return (0, _styledSSR.calcBreakpointSize)(parseInt("".concat(width), 10));
-}

package/dist/cjs/root/card/getCardPreview/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/cjs/root/ui/Breakpoint.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Breakpoint = void 0;
-var Breakpoint;
-exports.Breakpoint = Breakpoint;
-
-(function (Breakpoint) {
-  Breakpoint["SMALL"] = "small";
-  Breakpoint["LARGE"] = "large";
-})(Breakpoint || (exports.Breakpoint = Breakpoint = {}));

package/dist/cjs/root/ui/styledSSR.js

@@ -1,108 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calcBreakpointSize = exports.CardImageContainer = exports.getWrapperDimensions = exports.SSRFileExperienceWrapper = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _consts = require("@atlaskit/editor-shared-styles/consts");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _selection = require("@atlaskit/editor-shared-styles/selection");
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _styles = require("../../styles");
-
-var _cardDimensions = require("../../utils/cardDimensions");
-
-var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
-
-var _styled = require("./blanket/styled");
-
-var _common = require("./common");
-
-var _Breakpoint = require("./Breakpoint");
-
-var _templateObject, _templateObject2;
-
-var SSRFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &:hover .", " {\n    ", "\n  }\n"])), function (_ref) {
-  var breakpoint = _ref.breakpoint,
-      dimensions = _ref.dimensions,
-      appearance = _ref.appearance,
-      shouldUsePointerCursor = _ref.shouldUsePointerCursor,
-      displayBackground = _ref.displayBackground,
-      disableOverlay = _ref.disableOverlay,
-      selected = _ref.selected;
-  return "\n  ".concat((0, _styles.transition)(), "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  ").concat(getWrapperDimensions(dimensions, appearance), "\n  ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n  ").concat(_mediaUi.borderRadius, "\n  ").concat(getCursorStyle(shouldUsePointerCursor), "\n  ").concat(generateResponsiveStyles(breakpoint), "\n  ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n  ").concat(getWrapperShadow(disableOverlay, selected), "\n  ");
-}, _styled.blanketClassName, _styled.fixedBlanketStyles);
-
-exports.SSRFileExperienceWrapper = SSRFileExperienceWrapper;
-SSRFileExperienceWrapper.displayName = 'SSRFileExperienceWrapper';
-
-var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref2 = dimensions || {},
-      width = _ref2.width,
-      height = _ref2.height;
-
-  var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
-      defaultWidth = _getDefaultCardDimens.width,
-      defaultHeight = _getDefaultCardDimens.height;
-
-  return "\n    width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-};
-
-exports.getWrapperDimensions = getWrapperDimensions;
-
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
-  var setting = _common.responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
-
-var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
-  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
-}; // 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
-
-
-var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
-  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-
-var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _mediaUi.borderRadius);
-
-exports.CardImageContainer = CardImageContainer;
-var breakpointSizes = [[_Breakpoint.Breakpoint.SMALL, 599], [_Breakpoint.Breakpoint.LARGE, Infinity]];
-
-var calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  var _ref3 = breakpointSizes.find(function (_ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        _breakpoint = _ref6[0],
-        limit = _ref6[1];
-
-    return wrapperWidth <= limit;
-  }) || [_Breakpoint.Breakpoint.SMALL],
-      _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
-      breakpoint = _ref4[0];
-
-  return breakpoint;
-};
-
-exports.calcBreakpointSize = calcBreakpointSize;

package/dist/cjs/utils/fileAttributesContext.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withFileAttributes = withFileAttributes;
-exports.FileAttributesProvider = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var FileAttributesContext = /*#__PURE__*/_react.default.createContext(null);
-
-var FileAttributesProvider = function FileAttributesProvider(_ref) {
-  var children = _ref.children,
-      data = _ref.data;
-  return data ? /*#__PURE__*/_react.default.createElement(FileAttributesContext.Provider, {
-    value: data
-  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-};
-
-exports.FileAttributesProvider = FileAttributesProvider;
-
-function withFileAttributes(Component) {
-  return function (props) {
-    var fileAttributes = (0, _react.useContext)(FileAttributesContext);
-    return fileAttributes ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-      fileAttributes: fileAttributes
-    })) : /*#__PURE__*/_react.default.createElement(Component, props);
-  };
-}

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

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LazyContent = 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 = _interopRequireDefault(require("react"));
-
-var _styled = require("./styled");
-
-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; } }
-
-var LazyContent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(LazyContent, _React$Component);
-
-  var _super = _createSuper(LazyContent);
-
-  function LazyContent() {
-    (0, _classCallCheck2.default)(this, LazyContent);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(LazyContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          placeholder = _this$props.placeholder,
-          onRender = _this$props.onRender;
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        offset: 300,
-        onRender: onRender,
-        placeholder: placeholder,
-        content: children
-      });
-    }
-  }]);
-  return LazyContent;
-}(_react.default.Component);
-
-exports.LazyContent = LazyContent;

package/dist/cjs/utils/lazyContent/styled.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _reactLazilyRender = _interopRequireDefault(require("react-lazily-render"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _templateObject;
-
-// We need to override the element provided by the library
-// in order to make it get the parent dimensions.
-var Wrapper = (0, _styledComponents.default)(_reactLazilyRender.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), (0, _mediaUi.size)());
-exports.Wrapper = Wrapper;

package/dist/es2019/root/card/cardSSRView.js

@@ -1,92 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/*
- * This file is designed to be optimised for maximum performance.
- * Because of this the imports are optimised to import only what is required
- * If you're adding a new dependency please ensure that the
- * imported file only contains and depends on only what is required for it to function.
- */
-import React from 'react';
-import { MediaImage } from '@atlaskit/media-ui';
-import SpinnerIcon from '@atlaskit/spinner';
-import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { defaultImageCardDimensions } from '../../utils/cardDimensions';
-import { IconWrapper } from '../ui/iconWrapper/styled';
-import { SSRFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from '../ui/styledSSR';
-import { Blanket } from '../ui/blanket/styled';
-import { newFileExperienceClassName } from './cardConstants';
-import { resizeModeToMediaImageProps } from '../../utils/resizeModeToMediaImageProps';
-export const CardSSRView = ({
-  identifier,
-  dimensions,
-  mediaClient,
-  resizeMode,
-  disableOverlay,
-  isLazy
-}) => {
-  let dataURI;
-
-  try {
-    const {
-      width,
-      height
-    } = getRequestedDimensions({
-      dimensions
-    });
-    const mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
-    dataURI = mediaClient.getImageUrlSync(identifier.id, {
-      collection: identifier.collectionName,
-      mode,
-      width,
-      height,
-      allowAnimated: true
-    });
-  } catch (e) {
-    // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
-    dataURI = '';
-  }
-
-  const shouldDisplayBackground = !dataURI || !disableOverlay;
-  return /*#__PURE__*/React.createElement(SSRFileExperienceWrapper, {
-    className: newFileExperienceClassName,
-    dimensions: dimensions,
-    breakpoint: calculateBreakpoint(dimensions),
-    shouldUsePointerCursor: Boolean(dataURI),
-    displayBackground: shouldDisplayBackground,
-    disableOverlay: disableOverlay,
-    selected: false,
-    "data-testid": "media-card-view"
-  }, /*#__PURE__*/React.createElement(CardImageContainer, {
-    className: "media-file-card-view",
-    "data-testid": "media-file-card-view"
-  }, /*#__PURE__*/React.createElement(IconWrapper, {
-    breakpoint: calculateBreakpoint(dimensions),
-    hasTitleBox: false
-  }, /*#__PURE__*/React.createElement(SpinnerIcon, null)), !!dataURI && /*#__PURE__*/React.createElement(MediaImage, _extends({
-    dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
-    // onImageLoad={this.onImageLoad}  // TODO add these back as part of tracking performance.
-    // onImageError={this.onImageError}
-
-  }, resizeModeToMediaImageProps(resizeMode), {
-    loading: getLazyValue(isLazy)
-  })), !disableOverlay && /*#__PURE__*/React.createElement(Blanket, {
-    isFixed: false
-  })));
-};
-
-function getLazyValue(isLazy) {
-  switch (isLazy) {
-    case false:
-      return 'eager';
-
-    default:
-      return 'lazy';
-  }
-}
-
-function calculateBreakpoint(dimensions) {
-  var _dimensions$width;
-
-  const width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : defaultImageCardDimensions.width;
-  return calcBreakpointSize(parseInt(`${width}`, 10));
-}

package/dist/es2019/root/card/getCardPreview/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/root/ui/Breakpoint.js

@@ -1,6 +0,0 @@
-export let Breakpoint;
-
-(function (Breakpoint) {
-  Breakpoint["SMALL"] = "small";
-  Breakpoint["LARGE"] = "large";
-})(Breakpoint || (Breakpoint = {}));