@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { Component } from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
-import { CardActionButton } from './styled';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../analytics';
+import { CardActionButton } from './cardActionButton';
 
 const CardActionButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionButton, props);
 

package/dist/es2019/utils/cardActions/cardActionsView.js

@@ -1,13 +1,14 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Wrapper } from './styled';
 import { CardActionIconButton } from './cardActionIconButton';
+import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 import { PreventClickThrough } from '../preventClickThrough';
 import { createAndFireMediaCardEvent } from '../analytics';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 
-const CardActionIconButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionIconButton, props);
+const CardActionIconButtonWithProps = props => jsx(CardActionIconButton, props);
 
 export class CardActionsView extends Component {
   render() {
@@ -21,7 +22,9 @@ export class CardActionsView extends Component {
 
     const primaryAction = actions.find(actionWithIcon);
     const otherActions = actions.filter(actionNotEqualTo(primaryAction));
-    return /*#__PURE__*/React.createElement(PreventClickThrough, null, /*#__PURE__*/React.createElement(Wrapper, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
+    return jsx(PreventClickThrough, null, jsx("div", {
+      css: wrapperStyles
+    }, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
   }
 
   renderActionIconButton(action, isPrimary) {
@@ -46,7 +49,7 @@ export class CardActionsView extends Component {
         }
       })
     })(CardActionIconButtonWithProps);
-    return /*#__PURE__*/React.createElement(CardActionIconButtonWithAnalytics, {
+    return jsx(CardActionIconButtonWithAnalytics, {
       icon: icon,
       triggerColor: triggerColor,
       onClick: () => handler(),
@@ -69,7 +72,7 @@ export class CardActionsView extends Component {
       if (firstActionWithIcon && otherActions.length === 0) {
         return this.renderActionIconButton(firstActionWithIcon, false);
       } else {
-        return /*#__PURE__*/React.createElement(CardActionsDropdownMenu, {
+        return jsx(CardActionsDropdownMenu, {
           actions: actions,
           triggerColor: triggerColor,
           onOpenChange: onToggle,

package/dist/es2019/utils/cardActions/index.js

@@ -1,4 +1,4 @@
 export { CardActionsView as default, CardActionsView } from './cardActionsView';
 export { CardActionIconButton } from './cardActionIconButton';
 export { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
-export { CardActionIconButtonVariant } from './styled';
+export { CardActionIconButtonVariant } from './styles';

package/dist/es2019/utils/cardActions/{styled.js → styles.js}

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
-import { Root } from '../../styles';
-export const Wrapper = styled(Root)`
+import { rootStyles } from '../../styles';
+export const wrapperStyles = css`
+  ${rootStyles()}
   display: flex;
   position: relative;
   line-height: 0;
@@ -34,16 +35,17 @@ const getVariantStyles = variant => {
   `;
 };
 
-export const CardActionButton = styled.div`
-  ${({
+export const cardActionButtonStyles = ({
   variant
-}) => `
-    ${center} ${borderRadius} ${size(26)} color: ${N500};
+}) => css`
+  ${center}
+  ${borderRadius}
+    ${size(26)}
+    color: ${N500};
 
-    &:hover {
-      cursor: pointer;
-    }
+  &:hover {
+    cursor: pointer;
+  }
 
-    ${getVariantStyles(variant)}
-  `}
+  ${getVariantStyles(variant)}
 `;

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

@@ -1,14 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 class ErrorIcon extends Component {
   render() {
     const {
       size
     } = this.props;
-    return /*#__PURE__*/React.createElement(ErrorIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    return jsx("div", {
+      css: errorIconWrapperStyles
+    }, jsx(WarningIcon, {
       label: "Error",
       size: size
     }));

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

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const errorIconWrapperStyles = css`
+  display: flex;
+  color: #ff991f;
+`;

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

@@ -1,7 +1,8 @@
-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';
 const fileTypeIconClass = 'file-type-icon';
 export class FileIcon extends Component {
   render() {
@@ -11,17 +12,18 @@ export class FileIcon extends Component {
       style
     } = this.props;
     const type = mediaType || 'unknown';
-    const defaultIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+    const defaultIcon = jsx(MediaTypeIcon, {
       type: mediaType,
       size: "small",
       className: fileTypeIconClass
     });
-    const icon = iconUrl ? /*#__PURE__*/React.createElement("img", {
+    const 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/es2019/utils/fileIcon/{styled.js → styles.js}

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { size } from '@atlaskit/media-ui';
-export const FileTypeIcon = styled.div`
+export const fileTypeIconStyles = css`
   float: left;
   margin-right: 6px;
   position: relative;

package/dist/es2019/utils/getMediaCardCursor.js

@@ -1,8 +1,12 @@
 import { MediaCardCursor } from '../types';
+
+/**
+ * When the returned value is undefined, we'd expect the media card to take the parent's cursor style.
+ */
 export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) => {
   // If error status or no action is requested = NoAction
   if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
-    return MediaCardCursor.NoAction;
+    return;
   }
 
   if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
@@ -15,5 +19,5 @@ export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatu
     return MediaCardCursor.Action;
   }
 
-  return MediaCardCursor.NoAction;
+  return;
 };

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 class CardError extends Component {
   render() {

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

@@ -1,7 +1,7 @@
 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/es2019/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 const Wrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: wrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+export const AnimatedWrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: animatedWrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};

package/dist/es2019/utils/lightCards/{styled.js → styles.js}

@@ -1,4 +1,5 @@
-import styled, { keyframes } from 'styled-components';
+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';
@@ -15,25 +16,31 @@ export const blinkLoadingAnimation = keyframes`
     opacity: 1;
   }
 `;
-export const Wrapper = styled.div`
-  ${center} background: ${themed({
+export const wrapperStyles = ({
+  dimensions,
+  theme
+}) => css`
+  ${center}
+  background: ${themed({
   light: N20,
   dark: DN50
+})({
+  theme
 })};
   color: ${themed({
   light: N50,
   dark: DN100
+})({
+  theme
 })};
   ${borderRadius}
   max-height: 100%;
   max-width: 100%;
-
-  ${props => `
-      width: ${props.dimensions.width};
-      height: ${props.dimensions.height};
-    `}
+  width: ${dimensions.width};
+  height: ${dimensions.height};
 `;
-export const AnimatedWrapper = styled(Wrapper)`
+export const animatedWrapperStyles = props => css`
+  ${wrapperStyles(props)}
   > span {
     animation: ${blinkLoadingAnimation} 0.8s infinite;
   }

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

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

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

@@ -5,7 +5,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';
 const icons = {
   image: ImageIcon,
   audio: AudioIcon,

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { Y200, P200, B300 } from '@atlaskit/theme/colors';
 const typeToColorMap = {
   image: Y200,
@@ -9,9 +9,14 @@ const typeToColorMap = {
   archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
 
 };
-export const IconWrapper = styled.div`
-  display: inline-flex;
-  color: ${({
+
+const getWrapperColor = ({
   type
-}) => typeToColorMap[type] || typeToColorMap.unknown};
+}) => {
+  return typeToColorMap[type] || typeToColorMap.unknown;
+};
+
+export const iconWrapperStyles = props => css`
+  display: inline-flex;
+  color: ${getWrapperColor(props)};
 `;

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

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

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

@@ -1,6 +1,7 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { ProgressWrapper } from './styled';
+import { progressWrapperStyles } from './styles';
 export class ProgressBar extends Component {
   render() {
     if (typeof this.props.progress !== 'number') {
@@ -11,7 +12,9 @@ export class ProgressBar extends Component {
     const progressBarStyle = {
       width: `${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/es2019/utils/progressBar/{styled.js → styles.js}

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
-export const ProgressWrapper = styled.div`
+export const progressWrapperStyles = css`
   ${borderRadius} z-index: 30;
   overflow: hidden;
   background-color: rgba(255, 255, 255, 0.3);

package/dist/es2019/utils/ufoExperiences.js

@@ -1,10 +1,11 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
-import { name as packageName, version as packageVersion } from '../version.json';
-import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
+import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.0.0";
 let concurrentExperience;
 
-const getExperience = (id, featureFlagsKeys) => {
+const getExperience = id => {
   if (!concurrentExperience) {
     const inlineExperience = {
       platform: {
@@ -12,7 +13,7 @@ const getExperience = (id, featureFlagsKeys) => {
       },
       type: ExperienceTypes.Experience,
       performanceType: ExperiencePerformanceTypes.InlineResult,
-      featureFlagsKeys
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -20,13 +21,13 @@ const getExperience = (id, featureFlagsKeys) => {
   return concurrentExperience.getInstance(id);
 };
 
-export const startUfoExperience = (id, featureFlagsKeys) => {
-  getExperience(id, featureFlagsKeys).start();
+export const startUfoExperience = id => {
+  getExperience(id).start();
 };
-export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) => {
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error) => {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, featureFlagsKeys, {
+      succeedUfoExperience(id, {
         fileAttributes,
         ssrReliability,
         fileStateFlags
@@ -34,7 +35,7 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, featureFlagsKeys, {
+      failUfoExperience(id, {
         fileAttributes,
         failReason: 'failed-processing',
         ssrReliability,
@@ -43,7 +44,7 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
 
     case 'error':
-      error && failUfoExperience(id, featureFlagsKeys, {
+      error && failUfoExperience(id, {
         fileAttributes,
         ...extractErrorInfo(error),
         request: getRenderErrorRequestMetadata(error),
@@ -54,8 +55,8 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
   }
 };
 
-const succeedUfoExperience = (id, featureFlagsKeys, properties) => {
-  getExperience(id, featureFlagsKeys).success({
+const succeedUfoExperience = (id, properties) => {
+  getExperience(id).success({
     metadata: { ...properties,
       packageName,
       packageVersion,
@@ -65,8 +66,8 @@ const succeedUfoExperience = (id, featureFlagsKeys, properties) => {
   });
 };
 
-const failUfoExperience = (id, featureFlagsKeys, properties) => {
-  getExperience(id, featureFlagsKeys).failure({
+const failUfoExperience = (id, properties) => {
+  getExperience(id).failure({
     metadata: { ...properties,
       packageName,
       packageVersion,

package/dist/es2019/version.json

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

package/dist/esm/files/cardImageView/cardImageViewWrapper.js

@@ -0,0 +1,41 @@
+/**@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 var CardImageViewWrapper = function CardImageViewWrapper(props) {
+  var disableOverlay = props.disableOverlay,
+      selectable = props.selectable,
+      selected = props.selected,
+      mediaType = props.mediaType,
+      mediaName = props.mediaName,
+      status = props.status,
+      progress = props.progress;
+  var 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: theme,
+      disableOverlay: disableOverlay,
+      selectable: selectable,
+      selected: selected,
+      mediaType: mediaType
+    }),
+    className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
+  }, props.children);
+};
+export var PlayIconWrapper = function PlayIconWrapper(props) {
+  return jsx("div", {
+    css: playIconWrapperStyles
+  }, props.children);
+};
+export var ProgressBarWrapper = function ProgressBarWrapper(props) {
+  return jsx("div", {
+    css: progressBarWrapperStyles
+  }, props.children);
+};

package/dist/esm/files/cardImageView/cardOverlay/cardOverlayComponents.js

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

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

@@ -10,6 +10,8 @@ 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
@@ -19,7 +21,8 @@ import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things direct
 import { FileIcon } from '../../../utils/fileIcon';
 import { ErrorIcon } from '../../../utils/errorIcon';
 import CardActions from '../../../utils/cardActions';
-import { TickBox, Overlay, ErrorLine, LeftColumn, TopRow, BottomRow, RightColumn, ErrorMessage, TitleWrapper, Subtitle, Metadata, AltWrapper } from './styled';
+import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
+import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
 
 var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
   // don't show title if error
@@ -91,21 +94,25 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
       var menuTriggerColor = !persistent ? 'white' : undefined;
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(Overlay, {
         hasError: !!error,
         noHover: noHover,
         className: this.wrapperClassNames
-      }, /*#__PURE__*/React.createElement(TopRow, {
+      }, jsx("div", {
+        css: topRowStyles,
         className: 'top-row'
-      }, this.errorLine(), /*#__PURE__*/React.createElement(TitleWrapper, {
-        className: 'title'
-      }, titleText ? /*#__PURE__*/React.createElement(Ellipsify, {
+      }, this.errorLine(), jsx(TitleWrapper, null, titleText ? jsx(Ellipsify, {
         testId: "media-card-file-name",
         text: titleText,
         lines: 2
-      }) : null), this.tickBox()), /*#__PURE__*/React.createElement(BottomRow, {
+      }) : null), this.tickBox()), jsx("div", {
+        css: bottomRowStyles,
         className: 'bottom-row'
-      }, /*#__PURE__*/React.createElement(LeftColumn, null, this.bottomLeftColumn()), /*#__PURE__*/React.createElement(RightColumn, null, actions ? /*#__PURE__*/React.createElement(CardActions, {
+      }, jsx("div", {
+        css: leftColumnStyles
+      }, this.bottomLeftColumn()), jsx("div", {
+        css: rightColumnStyles
+      }, actions ? jsx(CardActions, {
         actions: actions,
         onToggle: this.onMenuToggle,
         triggerColor: menuTriggerColor
@@ -117,7 +124,11 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           error = _this$props3.error,
           alt = _this$props3.alt;
-      return error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(ErrorIcon, null), /*#__PURE__*/React.createElement(ErrorMessage, null, error)), alt && /*#__PURE__*/React.createElement(ErrorLine, null, /*#__PURE__*/React.createElement(AltWrapper, null, alt)));
+      return error && jsx(React.Fragment, null, jsx("div", {
+        css: errorLineStyles
+      }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
+        css: errorLineStyles
+      }, jsx(AltWrapper, null, alt)));
     }
   }, {
     key: "tickBox",
@@ -125,15 +136,16 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       var _this$props4 = this.props,
           selected = _this$props4.selected,
           selectable = _this$props4.selectable;
-      var tick = /*#__PURE__*/React.createElement(TickIcon, {
+      var tick = jsx(TickIcon, {
         label: "tick"
       });
       var className = cx('tickbox', {
         selected: selected
       });
-      return selectable && /*#__PURE__*/React.createElement(TickBox, {
+      return selectable && jsx("div", {
+        css: tickBoxStyles,
         className: className
-      }, " ", tick, " ");
+      }, tick);
     }
   }, {
     key: "bottomLeftColumn",
@@ -146,14 +158,15 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
             subtitle = _this$props5.subtitle,
             icon = _this$props5.icon;
         var classNames = cx('metadata');
-        var fileIcon = mediaType || icon ? /*#__PURE__*/React.createElement(FileIcon, {
+        var fileIcon = mediaType || icon ? jsx(FileIcon, {
           mediaType: mediaType,
           iconUrl: icon
         }) : null;
-        var subtitleEl = subtitle ? /*#__PURE__*/React.createElement(Subtitle, {
+        var subtitleEl = subtitle ? jsx("div", {
+          css: subtitleStyles,
           className: "file-size"
         }, subtitle) : null;
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Metadata, {
+        return jsx("div", null, jsx(Metadata, {
           className: classNames
         }, fileIcon, subtitleEl));
       }