@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/esm/utils/errorIcon/index.js

@@ -9,10 +9,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import { ErrorIconWrapper } from './styled';
+import { errorIconWrapperStyles } from './styles';
 export var ErrorIcon = /*#__PURE__*/function (_Component) {
   _inherits(ErrorIcon, _Component);
 
@@ -28,7 +29,9 @@ export var ErrorIcon = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var size = this.props.size;
-      return /*#__PURE__*/React.createElement(ErrorIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
+      return jsx("div", {
+        css: errorIconWrapperStyles
+      }, jsx(WarningIcon, {
         label: "Error",
         size: size
       }));

package/dist/esm/utils/errorIcon/styles.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+export var errorIconWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: #ff991f;\n"])));

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

@@ -8,10 +8,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { MediaTypeIcon } from '../mediaTypeIcon';
-import { FileTypeIcon } from './styled';
+import { fileTypeIconStyles } from './styles';
 var fileTypeIconClass = 'file-type-icon';
 export var FileIcon = /*#__PURE__*/function (_Component) {
   _inherits(FileIcon, _Component);
@@ -32,17 +33,18 @@ export var FileIcon = /*#__PURE__*/function (_Component) {
           iconUrl = _this$props.iconUrl,
           style = _this$props.style;
       var type = mediaType || 'unknown';
-      var defaultIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+      var defaultIcon = jsx(MediaTypeIcon, {
         type: mediaType,
         size: "small",
         className: fileTypeIconClass
       });
-      var icon = iconUrl ? /*#__PURE__*/React.createElement("img", {
+      var icon = iconUrl ? jsx("img", {
         src: iconUrl,
         className: "custom-icon",
         alt: type
       }) : defaultIcon;
-      return /*#__PURE__*/React.createElement(FileTypeIcon, {
+      return jsx("div", {
+        css: fileTypeIconStyles,
         style: style,
         className: fileTypeIconClass
       }, icon);

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { size } from '@atlaskit/media-ui';
+export var fileTypeIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), size('12px !important'));

package/dist/esm/utils/lightCards/cardError.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from '../errorIcon';
-import { Wrapper } from './styled';
+import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export var CardError = /*#__PURE__*/function (_Component) {
   _inherits(CardError, _Component);

package/dist/esm/utils/lightCards/cardLoading.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './styled';
+import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
 import FileIcon from '@atlaskit/icon/glyph/file';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

package/dist/esm/utils/lightCards/lightCardWrappers.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+export var Wrapper = function Wrapper(props) {
+  var theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: wrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+export var AnimatedWrapper = function AnimatedWrapper(props) {
+  var theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: animatedWrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};

package/dist/esm/utils/lightCards/styles.js

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+import { keyframes } from '@emotion/react';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
+export var blinkLoadingAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
+export var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
+    light: N20,
+    dark: DN50
+  })({
+    theme: theme
+  }), themed({
+    light: N50,
+    dark: DN100
+  })({
+    theme: theme
+  }), borderRadius, dimensions.width, dimensions.height);
+};
+export var animatedWrapperStyles = function animatedWrapperStyles(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), wrapperStyles(props), blinkLoadingAnimation);
+};

package/dist/esm/utils/mediaTypeIcon/iconWrapper.js

@@ -0,0 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconWrapperStyles } from './styles';
+export var IconWrapper = function IconWrapper(props) {
+  return jsx("div", {
+    id: "iconWrapper",
+    css: iconWrapperStyles(props)
+  }, props.children);
+};

package/dist/esm/utils/mediaTypeIcon/index.js

@@ -15,7 +15,7 @@ import ArchiveIcon from '@atlaskit/icon/glyph/media-services/zip';
 import VideoIcon from '@atlaskit/icon/glyph/media-services/video';
 import DocIcon from '@atlaskit/icon/glyph/document';
 import UnknownIcon from '@atlaskit/icon/glyph/page';
-import { IconWrapper } from './styled';
+import { IconWrapper } from './iconWrapper';
 var icons = {
   image: ImageIcon,
   audio: AudioIcon,

package/dist/esm/utils/mediaTypeIcon/{styled.js → styles.js}

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { Y200, P200, B300 } from '@atlaskit/theme/colors';
 var typeToColorMap = {
   image: Y200,
@@ -13,7 +13,12 @@ var typeToColorMap = {
   archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
 
 };
-export var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  color: ", ";\n"])), function (_ref) {
+
+var getWrapperColor = function getWrapperColor(_ref) {
   var type = _ref.type;
   return typeToColorMap[type] || typeToColorMap.unknown;
-});
+};
+
+export var iconWrapperStyles = function iconWrapperStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
+};

package/dist/esm/utils/mediaTypeIcon/types.js

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

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

@@ -8,9 +8,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { ProgressWrapper } from './styled';
+import { progressWrapperStyles } from './styles';
 export var ProgressBar = /*#__PURE__*/function (_Component) {
   _inherits(ProgressBar, _Component);
 
@@ -33,7 +34,9 @@ export var ProgressBar = /*#__PURE__*/function (_Component) {
       var progressBarStyle = {
         width: "".concat(progress * 100, "%")
       };
-      return /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
+        css: progressWrapperStyles
+      }, jsx("div", {
         className: 'progressBar',
         style: progressBarStyle
       }));

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/media-ui';
+export var progressWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), borderRadius);

package/dist/esm/utils/ufoExperiences.js

@@ -5,9 +5,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
-import { name as packageName, version as packageVersion } from '../version.json';
 import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/esm/utils/videoSnapshot.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import VideoSnapshot from 'video-snapshot';
 export var takeSnapshot = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.8.0",
+	"version": "74.0.0",
 	"sideEffects": false
 }

package/dist/types/files/cardImageView/cardImageViewWrapper.d.ts

@@ -0,0 +1,6 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { WrapperProps } from './styles';
+export declare const CardImageViewWrapper: (props: WrapperProps) => jsx.JSX.Element;
+export declare const PlayIconWrapper: (props: any) => jsx.JSX.Element;
+export declare const ProgressBarWrapper: (props: any) => jsx.JSX.Element;

package/dist/types/files/cardImageView/cardOverlay/cardOverlayComponents.d.ts

@@ -0,0 +1,8 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { OverlayProps } from './styles';
+export declare const Overlay: (props: OverlayProps) => jsx.JSX.Element;
+export declare const ErrorMessage: (props: any) => jsx.JSX.Element;
+export declare const AltWrapper: (props: any) => jsx.JSX.Element;
+export declare const TitleWrapper: (props: any) => jsx.JSX.Element;
+export declare const Metadata: (props: any) => jsx.JSX.Element;

package/dist/types/files/cardImageView/cardOverlay/index.d.ts

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { MouseEvent, Component, ReactNode } from 'react';
 import { MediaType } from '@atlaskit/media-client';
 import { CardAction, CardEventHandler } from '../../../actions';
@@ -26,10 +28,10 @@ export declare class CardOverlay extends Component<CardOverlayProps, CardOverlay
     };
     constructor(props: CardOverlayProps);
     private get wrapperClassNames();
-    render(): JSX.Element;
-    errorLine(): false | "" | 0 | JSX.Element | null | undefined;
-    tickBox(): false | JSX.Element | undefined;
-    bottomLeftColumn(): JSX.Element | undefined;
+    render(): jsx.JSX.Element;
+    errorLine(): false | "" | 0 | jsx.JSX.Element | null | undefined;
+    tickBox(): false | jsx.JSX.Element | undefined;
+    bottomLeftColumn(): jsx.JSX.Element | undefined;
     onMenuToggle: (attrs: {
         isOpen: boolean;
     }) => void;

package/dist/types/files/cardImageView/cardOverlay/styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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!
+ */
+/// <reference types="react" />
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
+export interface OverlayProps {
+    hasError?: boolean;
+    noHover?: boolean;
+    className?: string;
+    children?: JSX.Element[];
+}
+export declare const tickBoxStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: (props: OverlayProps) => import("@emotion/react").SerializedStyles;
+export declare const errorLineStyles: import("@emotion/react").SerializedStyles;
+export declare const leftColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const topRowStyles: import("@emotion/react").SerializedStyles;
+export declare const bottomRowStyles: import("@emotion/react").SerializedStyles;
+export declare const rightColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const errorMessageStyles: import("@emotion/react").SerializedStyles;
+export declare const altWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const titleWrapperStyles: (theme: GlobalThemeTokens) => import("@emotion/react").SerializedStyles;
+export declare const subtitleStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataStyles: import("@emotion/react").SerializedStyles;

package/dist/types/files/cardImageView/index.d.ts

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component, ReactNode } from 'react';
 import { MediaItemType, MediaType, ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions, CardStatus } from '../../index';
@@ -29,7 +31,7 @@ export interface FileCardImageViewProps {
 export declare class FileCardImageView extends Component<FileCardImageViewProps> {
     private wasThumbnailDisplayed;
     static defaultProps: Partial<FileCardImageViewProps>;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     private renderCardContents;
     private renderLoadingContents;
     private renderErrorContents;

package/dist/types/files/cardImageView/styles.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
+import { CardStatus } from '../../index';
+export interface WrapperProps {
+    disableOverlay?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    hasOnClick?: boolean;
+    mediaType?: string;
+    mediaName?: string;
+    progress?: number;
+    status?: CardStatus;
+    theme?: GlobalThemeTokens;
+    children?: JSX.Element | JSX.Element[];
+}
+export declare const wrapperStyles: (props: WrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const playIconWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const playIconBackgroundStyles: import("@emotion/react").SerializedStyles;
+export declare const progressBarWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: import("@emotion/react").SerializedStyles;
+export declare const titleStyles: import("@emotion/react").SerializedStyles;
+export declare const bodyStyles: import("@emotion/react").SerializedStyles;
+export declare const progressWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const cardActionsWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/index.d.ts

@@ -73,5 +73,5 @@ export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
 export { fileCardImageViewSelector, fileCardImageViewSelectedSelector, } from './files/cardImageView/classnames';
-export { inlinePlayerClassName } from './root/inlinePlayer';
+export { inlinePlayerClassName } from './root/styles';
 export { newFileExperienceClassName } from './root/card/cardConstants';

package/dist/types/root/card/getCardPreview/cache.d.ts

@@ -1,18 +1,19 @@
+import { ImageResizeMode } from '@atlaskit/media-client';
 import { ObjectURLCache } from '../../../utils/objectURLCache';
-import { CardDimensions } from '../../../utils/cardDimensions';
 import { CardPreview } from '../../../types';
-export declare const getCacheKey: (id: string, dimensions: CardDimensions) => string;
+declare type Mode = ImageResizeMode | undefined;
+export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface CardPreviewCache {
-    get(id: string, dimensions: CardDimensions): CardPreview | undefined;
-    set(id: string, dimensions: CardDimensions, cardPreview: CardPreview): void;
-    remove(id: string, dimensions: CardDimensions): void;
+    get(id: string, mode: Mode): CardPreview | undefined;
+    set(id: string, mode: Mode, cardPreview: CardPreview): void;
+    remove(id: string, mode: Mode): void;
 }
 export declare class CardPreviewCacheImpl implements CardPreviewCache {
     private previewCache;
     constructor(previewCache: ObjectURLCache);
-    get: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
-    set: (id: string, dimensions: CardDimensions, cardPreview: CardPreview) => void;
-    remove: (id: string, dimensions: CardDimensions) => void;
+    get: (id: string, mode: Mode) => CardPreview | undefined;
+    set: (id: string, mode: Mode, cardPreview: CardPreview) => void;
+    remove: (id: string, mode: Mode) => void;
 }
 declare const _default: CardPreviewCacheImpl;
 export default _default;

package/dist/types/root/card/getCardPreview/index.d.ts

@@ -1,12 +1,13 @@
-import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
 import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
+import { ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions } from '../../../utils/cardDimensions';
 import { MediaCardError } from '../../../errors';
 import { CardStatus, CardPreview } from '../../../types';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview, } from './helpers';
 export { extractFilePreviewStatus } from './filePreviewStatus';
-export declare const getCardPreviewFromCache: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
-export declare const removeCardPreviewFromCache: (id: string, dimensions: CardDimensions) => void;
+export declare const getCardPreviewFromCache: (id: string, mode: ImageResizeMode | undefined) => CardPreview | undefined;
+export declare const removeCardPreviewFromCache: (id: string, mode: ImageResizeMode | undefined) => void;
 /**
  * Will return the preview if available and supported by the browser
  * See extractFilePreviewStatus "hasLocalPreview" logic
@@ -33,11 +34,12 @@ export declare type CardPreviewParams = {
  * hence the use of the optional callback onLocalPreviewError
  */
 export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, }: CardPreviewParams) => Promise<CardPreview>;
-export declare const shouldResolvePreview: ({ status, fileState, dimensions, prevDimensions, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
+export declare const shouldResolvePreview: ({ status, fileState, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
     dimensions?: CardDimensions | undefined;
-    prevDimensions?: CardDimensions | undefined;
+    identifier: FileIdentifier;
+    fileImageMode?: ImageResizeMode | undefined;
     hasCardPreview: boolean;
     isBannedLocalPreview: boolean;
     featureFlags?: MediaFeatureFlags | undefined;

package/dist/types/root/cardView.d.ts

@@ -1,10 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
 import { MediaCardError } from '../errors';
 import { CardPreview } from '..';
-import { MessageDescriptor } from 'react-intl-next';
 import { MediaCardCursor } from '../types';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
@@ -58,7 +60,7 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private get width();
     private get breakpoint();
     saveElementWidth: () => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     private renderSpinner;
     private shouldRenderPlayButton;
     private renderPlayButton;

package/dist/types/root/cardViewWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { WrapperProps } from './types';
+export declare const Wrapper: (props: WrapperProps) => jsx.JSX.Element;

package/dist/types/root/inlinePlayer.d.ts

@@ -4,7 +4,6 @@ import { MediaClient, FileIdentifier, FileState, MediaFileArtifacts, MediaSubscr
 import { CardDimensions, NumericalCardDimensions } from '..';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { CardPreview } from '..';
-export declare const inlinePlayerClassName = "media-card-inline-player";
 export interface InlinePlayerOwnProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;

package/dist/types/root/inlinePlayerWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { InlinePlayerWrapperProps } from './types';
+export declare const InlinePlayerWrapper: (props: InlinePlayerWrapperProps) => jsx.JSX.Element;

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

@@ -0,0 +1,10 @@
+import { InlinePlayerWrapperProps, WrapperProps } from './types';
+export declare const inlinePlayerClassName = "media-card-inline-player";
+export declare const wrapperStyles: {
+    ({ dimensions, breakpointSize, shouldUsePointerCursor, }: WrapperProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};
+export declare const inlinePlayerWrapperStyles: {
+    ({ dimensions, selected, }: InlinePlayerWrapperProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

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

@@ -0,0 +1,24 @@
+import React, { MouseEvent, ReactElement, RefObject } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardDimensions } from '../';
+import { BreakpointSizeValue } from '../utils/breakpoint';
+export interface WrapperProps {
+    testId?: string;
+    shouldUsePointerCursor?: boolean;
+    dimensions?: CardDimensions;
+    breakpointSize?: BreakpointSizeValue;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    innerRef?: RefObject<HTMLDivElement>;
+    children?: JSX.Element;
+}
+export declare type InlinePlayerWrapperProps = {
+    testId?: string;
+    dimensions?: CardDimensions;
+    selected: {
+        selected?: boolean | undefined;
+    };
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    innerRef?: RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | undefined;
+    children?: JSX.Element[] | ReactElement<any, any> | null | any;
+};

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

@@ -1,9 +1,5 @@
 import React from 'react';
-import { CardAction } from '../../../actions';
-export interface ActionsBarProps {
-    actions: Array<CardAction>;
-    isFixed?: boolean;
-}
+import { ActionsBarProps } from './types';
 export declare class ActionsBar extends React.Component<ActionsBarProps> {
     render(): JSX.Element | null;
 }

package/dist/types/root/ui/actionsBar/actionsBarWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { ActionBarWrapperProps } from './types';
+export declare const ActionsBarWrapper: (props: ActionBarWrapperProps) => jsx.JSX.Element;

package/dist/types/root/ui/actionsBar/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const actionsBarClassName = "media-card-actions-bar";
+export declare const fixedActionBarStyles = "opacity: 1;";
+export declare const wrapperStyles: {
+    (isFixed?: boolean | undefined): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { CardAction } from '../../../actions';
+export interface ActionsBarProps {
+    actions: Array<CardAction>;
+    isFixed?: boolean;
+}
+export declare type ActionBarWrapperProps = {
+    isFixed?: boolean;
+    children?: ReactNode;
+};

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

@@ -0,0 +1,6 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+export interface BlanketProps {
+    isFixed?: boolean;
+}
+export declare const Blanket: (props: BlanketProps) => jsx.JSX.Element;

package/dist/types/root/ui/blanket/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const blanketClassName = "media-card-blanket";
+export declare const fixedBlanketStyles: string;
+export declare const blanketStyles: {
+    (isFixed?: boolean | undefined): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};

package/dist/types/root/ui/iconMessage/iconMessageWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { IconMessageWrapperProps } from './types';
+export declare const IconMessageWrapper: (props: IconMessageWrapperProps) => jsx.JSX.Element;

package/dist/types/root/ui/iconMessage/index.d.ts

@@ -1,17 +1,8 @@
 import React from 'react';
-import { MessageDescriptor } from 'react-intl-next';
-export declare type InternalIconMessageProps = {
-    messageDescriptor: MessageDescriptor;
-    animated?: boolean;
-    reducedFont?: boolean;
-};
-declare type CreatingPreviewProps = {
-    disableAnimation?: boolean;
-};
+import { InternalIconMessageProps, CreatingPreviewProps } from './types';
 export declare const IconMessage: React.FC<InternalIconMessageProps>;
 export declare const CreatingPreview: React.FC<CreatingPreviewProps>;
 export declare const PreviewUnavailable: React.FC;
 export declare const FailedToLoad: React.FC;
 export declare const FailedToUpload: React.FC;
 export declare const PreviewCurrentlyUnavailable: React.FC;
-export {};

package/dist/types/root/ui/iconMessage/styles.d.ts

@@ -0,0 +1,5 @@
+import { StyledTextProps } from './types';
+export declare const iconMessageWrapperStyles: {
+    (props: StyledTextProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};