@atlaskit/media-card 70.11.0 → 73.0.0

package/dist/types/root/ui/loadingRateLimited/styled.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ComponentClass } from 'react';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare const LoadingRateLimitedContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const WarningIconWrapper: ComponentClass<HTMLAttributes<{}>>;
 export declare type StyledTextProps = {

package/dist/types/root/ui/playButton/playButton.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlayButton: () => JSX.Element;

package/dist/types/root/ui/progressBar/progressBar.d.ts

@@ -1,4 +1,5 @@
-import { Breakpoint } from '../Breakpoint';
+/// <reference types="react" />
+import { Breakpoint } from '../common';
 export declare type ProgressBarProps = {
     progress?: number;
     breakpoint?: Breakpoint;

package/dist/types/root/ui/progressBar/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, multiplier?: number): string;
 export declare type StyledBarProps = {
     progress: number;

package/dist/types/root/ui/styled.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
-import { BaseNewFileExperienceWrapperProps } from './styledSSR';
-export interface NewFileExperienceWrapperProps extends BaseNewFileExperienceWrapperProps {
+import { CardDimensions, CardAppearance } from '../..';
+import { Breakpoint } from './common';
+export declare const calcBreakpointSize: (wrapperWidth?: number) => Breakpoint;
+export interface NewFileExperienceWrapperProps {
+    breakpoint: Breakpoint;
+    dimensions?: CardDimensions;
+    appearance?: CardAppearance;
+    mediaType?: string;
     shouldUsePointerCursor: boolean;
     disableOverlay: boolean;
     displayBackground: boolean;
@@ -9,4 +15,5 @@ export interface NewFileExperienceWrapperProps extends BaseNewFileExperienceWrap
     isTickBoxSelectable: boolean;
     shouldDisplayTooltip: boolean;
 }
-export declare const NewFileExperienceWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BaseNewFileExperienceWrapperProps & NewFileExperienceWrapperProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BaseNewFileExperienceWrapperProps & NewFileExperienceWrapperProps>;
+export declare const NewFileExperienceWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps>;
+export declare const CardImageContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/types/root/ui/tickBox/tickBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TickBoxProps = {
     selected?: boolean;
 };

package/dist/types/root/ui/titleBox/failedTitleBox.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type OnRetryFunction = () => void;
 export declare type FailedTitleBoxProps = {
     breakpoint: Breakpoint;
+    customMessage?: MessageDescriptor;
 };
 export declare const FailedTitleBox: React.FC<FailedTitleBoxProps>;

package/dist/types/root/ui/titleBox/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare type TitleBoxWrapperProps = {
     breakpoint: Breakpoint;
     titleBoxBgColor?: string;

package/dist/types/root/ui/titleBox/titleBox.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react-intl" />
 import React from 'react';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare type TitleBoxProps = {
     name: string;
     breakpoint: Breakpoint;
@@ -12,13 +11,6 @@ export declare type TitleBoxProps = {
 declare type FormattedDateProps = {
     timestamp: number;
 };
-declare type WithIntlProps = {
-    intl?: {
-        locale?: string;
-    };
-};
-export declare const FormattedDate: React.ComponentClass<FormattedDateProps & WithIntlProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<FormattedDateProps & WithIntlProps & ReactIntl.InjectedIntlProps>;
-};
+export declare const FormattedDate: React.ComponentType<FormattedDateProps>;
 export declare const TitleBox: ({ name, createdAt, breakpoint, titleBoxBgColor, titleBoxIcon, }: TitleBoxProps) => JSX.Element;
 export {};

package/dist/types/styles/mixins.d.ts

@@ -14,8 +14,8 @@ export interface WithAppearanceProps {
     appearance?: CardAppearance;
 }
 export declare const withAppearance: (styleMap: {
-    auto?: string | undefined;
     image?: string | undefined;
+    auto?: string | undefined;
     square?: string | undefined;
     horizontal?: string | undefined;
 }) => ({ appearance }: WithAppearanceProps) => string;

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-export declare type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing' | 'loading-preview';
+export declare type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
 export declare type FilePreviewStatus = {
     hasFilesize: boolean;
     isPreviewable: boolean;
@@ -7,3 +7,9 @@ export declare type FilePreviewStatus = {
 };
 export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
 export declare type CardDimensionValue = number | string;
+export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
+export interface CardPreview {
+    dataURI: string;
+    orientation?: number;
+    source: CardPreviewSource;
+}

package/dist/types/utils/analytics.d.ts

@@ -1,32 +1,31 @@
 import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
-export declare enum RenderEventAction {
-    COMMENCED = "commenced",
-    SUCCEEDED = "succeeded",
-    FAILED = "failed"
-}
 export declare type FileUriFailReason = 'local-uri' | 'remote-uri' | `unknown-uri`;
 export declare type FailedErrorFailReason = MediaCardErrorPrimaryReason | 'nativeError';
-export declare type RenderEventFailReason = FailedErrorFailReason | 'failed-processing' | FileUriFailReason | 'external-uri';
 export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & FailureAttributes & {
-    failReason: RenderEventFailReason;
+    failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
-}, RenderEventAction.FAILED, 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & SuccessAttributes, RenderEventAction.SUCCEEDED, 'mediaCardRender'>;
-export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, RenderEventAction.COMMENCED, 'mediaCardRender'>;
+}, 'failed', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
+export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
 export declare type ClickedEventPayload = UIEventPayload<{
     label?: string;
 }, 'clicked', string>;
-export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload;
-export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: "error" | "uploading" | "processing" | "failed-processing" | "processed" | undefined) => FileAttributes;
+export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAttributes, 'mediaCardRenderScreen'>, 'attributes'> & {
+    attributes: {
+        type: string | undefined;
+        fileAttributes: FileAttributes;
+    };
+};
+export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload;
+export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: "failed-processing" | "uploading" | "processing" | "processed" | "error" | undefined) => FileAttributes;
+export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
 export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
 export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes?: PerformanceAttributes | undefined) => RenderSucceededEventPayload;
-export declare const getFailedFileUriFailReason: (fileStatus?: "error" | "uploading" | "processing" | "failed-processing" | "processed" | undefined) => FileUriFailReason;
-export declare const getRenderFailedFileUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderErrorFailReason: (error: MediaCardError) => FailedErrorFailReason;
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';

package/dist/types/utils/cardDimensions.d.ts

@@ -47,7 +47,7 @@ export declare const maxSquareCardDimensions: {
     width: number;
     height: number;
 };
-export declare const getCardMaxHeight: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getCardMinWidth: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getCardMaxWidth: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getDefaultCardDimensions: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => Required<CardDimensions>;
+export declare const getCardMaxHeight: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getCardMinWidth: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getCardMaxWidth: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getDefaultCardDimensions: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => Required<CardDimensions>;

package/dist/types/utils/dimensionComparer.d.ts

@@ -1,3 +1,3 @@
 import { CardDimensions } from '../';
 export declare const canCompareDimension: (current?: string | number | undefined, next?: string | number | undefined) => boolean;
-export declare const isBigger: (current: CardDimensions, next: CardDimensions) => boolean;
+export declare const isBigger: (current?: CardDimensions | undefined, next?: CardDimensions | undefined) => boolean;

package/dist/types/utils/getErrorMessage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const getErrorMessage: (status: string) => false | JSX.Element;

package/dist/types/utils/metadata.d.ts

@@ -1,2 +1,2 @@
-import { FileState, FileDetails } from '@atlaskit/media-client';
-export declare const getFileDetails: (state: FileState) => FileDetails;
+import { FileDetails, Identifier, ErrorFileState } from '@atlaskit/media-client';
+export declare const getFileDetails: (identifier: Identifier, fileState?: import("@atlaskit/media-client").UploadingFileState | import("@atlaskit/media-client").ProcessingFileState | import("@atlaskit/media-client").ProcessedFileState | ErrorFileState | import("@atlaskit/media-client").ProcessingFailedState | undefined) => FileDetails;

package/dist/types/utils/objectURLCache.d.ts

@@ -1,4 +1,4 @@
-import { CardPreview } from '../root/card/getCardPreview';
+import { CardPreview } from '../';
 export declare const PREVIEW_CACHE_LRU_SIZE = 50;
 export declare class ObjectURLCache {
     private readonly cache;
@@ -6,5 +6,6 @@ export declare class ObjectURLCache {
     has(key: string): boolean;
     get(key: string): CardPreview | undefined;
     set(key: string, value: CardPreview): void;
+    remove(key: string): void;
 }
 export declare const createObjectURLCache: () => ObjectURLCache;

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": "70.11.0",
+  "version": "73.0.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,28 +29,29 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^10.1.0",
-    "@atlaskit/editor-shared-styles": "^1.3.0",
-    "@atlaskit/icon": "^21.8.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
+    "@atlaskit/editor-shared-styles": "^1.6.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^14.2.0",
-    "@atlaskit/media-common": "^2.9.0",
-    "@atlaskit/media-ui": "^16.6.0",
-    "@atlaskit/media-viewer": "^45.8.0",
+    "@atlaskit/media-client": "^14.3.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^11.5.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/theme": "^12.0.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"
   },
@@ -61,26 +62,29 @@
     "@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.7.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.2.0",
+    "@atlaskit/toggle": "^12.3.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,99 +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;
-  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))), !disableOverlay && /*#__PURE__*/_react.default.createElement(_styled2.Blanket, {
-    isFixed: false
-  })));
-};
-
-exports.CardSSRView = CardSSRView;
-
-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 = {}));