@atlaskit/media-card 73.5.0 → 73.7.0

package/dist/es2019/utils/ufoExperiences.js

@@ -1,6 +1,7 @@
 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';
 let concurrentExperience;
 
 const getExperience = id => {
@@ -10,7 +11,8 @@ const getExperience = id => {
         component: 'media-card'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -21,12 +23,13 @@ const getExperience = id => {
 export const startUfoExperience = id => {
   getExperience(id).start();
 };
-export const completeUfoExperience = (id, status, fileAttributes, ssrReliability, error) => {
+export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error) => {
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
         fileAttributes,
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
 
@@ -34,7 +37,8 @@ export const completeUfoExperience = (id, status, fileAttributes, ssrReliability
       failUfoExperience(id, {
         fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
 
@@ -43,7 +47,8 @@ export const completeUfoExperience = (id, status, fileAttributes, ssrReliability
         fileAttributes,
         ...extractErrorInfo(error),
         request: getRenderErrorRequestMetadata(error),
-        ssrReliability
+        ssrReliability,
+        fileStateFlags
       });
       break;
   }
@@ -53,7 +58,9 @@ const succeedUfoExperience = (id, properties) => {
   getExperience(id).success({
     metadata: { ...properties,
       packageName,
-      packageVersion
+      packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     }
   });
 };
@@ -62,7 +69,9 @@ const failUfoExperience = (id, properties) => {
   getExperience(id).failure({
     metadata: { ...properties,
       packageName,
-      packageVersion
+      packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     }
   });
 };

package/dist/es2019/version.json

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

package/dist/esm/root/card/cardAnalytics.js

@@ -1,15 +1,4 @@
-import { filterFeatureFlagNames } from '@atlaskit/media-common';
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var getRelevantFeatureFlagNames = function getRelevantFeatureFlagNames() {
-  return filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: true,
-    timestampOnVideo: true,
-    observedWidth: true,
-    mediaInline: false,
-    folderUploads: false
-  });
-};
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);

package/dist/esm/root/card/index.js

@@ -32,9 +32,9 @@ import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
-import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, getRelevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -63,6 +63,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
 
+    _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "viewportPreAnchorRef", /*#__PURE__*/createRef());
 
     _defineProperty(_assertThisInitialized(_this), "viewportPostAnchorRef", /*#__PURE__*/createRef());
@@ -450,7 +455,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props7.dimensions,
           selected = _this$props7.selected,
           testId = _this$props7.testId,
-          originalDimensions = _this$props7.originalDimensions;
+          originalDimensions = _this$props7.originalDimensions,
+          onFullscreenChange = _this$props7.onFullscreenChange;
       var _this$state = _this.state,
           shouldAutoplay = _this$state.shouldAutoplay,
           cardPreview = _this$state.cardPreview;
@@ -460,6 +466,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         identifier: identifier,
         autoplay: !!shouldAutoplay,
+        onFullscreenChange: onFullscreenChange,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -800,6 +807,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      this.updateFileStateFlag(fileState);
 
       if (isExternalImageIdentifier(identifier) && isDifferent) {
         this.fireCommencedEvent();
@@ -875,6 +883,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       this.fireCommencedEvent();
       this.subscribeInternalFile(identifier);
     }
+  }, {
+    key: "updateFileStateFlag",
+    value: function updateFileStateFlag(fileState) {
+      if (!fileState) {
+        return;
+      }
+
+      var status = fileState.status;
+
+      if (status === 'processing') {
+        this.fileStateFlags.wasStatusProcessing = true;
+      } else if (status === 'uploading') {
+        this.fileStateFlags.wasStatusUploading = true;
+      }
+    }
   }, {
     key: "subscribeInternalFile",
     value: function subscribeInternalFile(identifier) {
@@ -942,7 +965,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
-      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.ssrReliability, error);
+      completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -1015,7 +1038,7 @@ export var Card = withMediaAnalyticsContext({
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {
-  filterFeatureFlags: getRelevantFeatureFlagNames()
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));

package/dist/esm/root/cardView.js

@@ -45,7 +45,6 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
-import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -259,7 +258,6 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
         case 'processing':
-        case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
             iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
               disableAnimation: disableAnimation
@@ -309,6 +307,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
             iconMessage: iconMessage
           });
 
+        case 'loading-preview':
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
@@ -589,8 +588,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto',
-  mediaCardCursor: MediaCardCursor.NoAction
+  appearance: 'auto'
 });
 
 export var CardView = withAnalyticsEvents({

package/dist/esm/root/inlinePlayer.js

@@ -303,7 +303,8 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           identifier = _this$props4.identifier,
           forwardRef = _this$props4.forwardRef,
           autoplay = _this$props4.autoplay,
-          cardPreview = _this$props4.cardPreview;
+          cardPreview = _this$props4.cardPreview,
+          onFullscreenChange = _this$props4.onFullscreenChange;
       var _this$state = this.state,
           fileSrc = _this$state.fileSrc,
           isUploading = _this$state.isUploading,
@@ -327,6 +328,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/React.createElement(CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
+          onFullscreenChange: onFullscreenChange,
           fileId: identifier.id,
           isAutoPlay: autoplay,
           isHDAvailable: false,

package/dist/esm/root/ui/styled.js

@@ -62,7 +62,7 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
 };
 
 var getCursorStyle = function getCursorStyle(cursor) {
-  return "cursor: ".concat(cursor, ";");
+  return !!cursor ? "cursor: ".concat(cursor, ";") : '';
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {

package/dist/esm/root/ui/titleBox/styled.js

@@ -20,7 +20,7 @@ var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export var TitleBoxWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       titleBoxBgColor = _ref.titleBoxBgColor;
-  return "\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background-color: ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8), ";\n    color: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
+  return "\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background-color: ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8), ";\n    color: inherit;\n    cursor: inherit;\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
 });
 TitleBoxWrapper.displayName = 'TitleBoxWrapper';
 var infoStyles = "\n  white-space: nowrap;\n  overflow: hidden;\n";

package/dist/esm/types.js

@@ -2,6 +2,5 @@ export var MediaCardCursor;
 
 (function (MediaCardCursor) {
   MediaCardCursor["Action"] = "pointer";
-  MediaCardCursor["NoAction"] = "default";
   MediaCardCursor["NotReady"] = "wait";
 })(MediaCardCursor || (MediaCardCursor = {}));

package/dist/esm/utils/analytics.js

@@ -5,9 +5,20 @@ 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 { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, filterFeatureFlagNames, filterFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
+var relevantFlags = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: false
+};
+export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export var LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,

package/dist/esm/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 var getMediaCardCursor = function 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 var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, use
     return MediaCardCursor.Action;
   }
 
-  return MediaCardCursor.NoAction;
+  return;
 };

package/dist/esm/utils/ufoExperiences.js

@@ -6,7 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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';
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {
@@ -16,7 +17,8 @@ var getExperience = function getExperience(id) {
         component: 'media-card'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -27,12 +29,13 @@ var getExperience = function getExperience(id) {
 export var startUfoExperience = function startUfoExperience(id) {
   getExperience(id).start();
 };
-export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, ssrReliability, error) {
+export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
   switch (status) {
     case 'complete':
       succeedUfoExperience(id, {
         fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
@@ -40,7 +43,8 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
       failUfoExperience(id, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       });
       break;
 
@@ -49,7 +53,8 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
         fileAttributes: fileAttributes
       }, extractErrorInfo(error)), {}, {
         request: getRenderErrorRequestMetadata(error),
-        ssrReliability: ssrReliability
+        ssrReliability: ssrReliability,
+        fileStateFlags: fileStateFlags
       }));
       break;
   }
@@ -59,7 +64,9 @@ var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
-      packageVersion: packageVersion
+      packageVersion: packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     })
   });
 };
@@ -68,7 +75,9 @@ var failUfoExperience = function failUfoExperience(id, properties) {
   getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
-      packageVersion: packageVersion
+      packageVersion: packageVersion,
+      mediaEnvironment: getMediaEnvironment(),
+      mediaRegion: getMediaRegion()
     })
   });
 };

package/dist/esm/version.json

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

package/dist/types/errors.d.ts

@@ -24,7 +24,7 @@ export declare class SsrPreviewError extends MediaCardError {
     readonly secondaryError?: Error | undefined;
     constructor(primaryReason: SsrPreviewPrimaryReason, secondaryError?: Error | undefined);
 }
-export declare const getImageLoadPrimaryReason: (source?: "local" | "remote" | "ssr-server" | "ssr-client" | "ssr-data" | "cache-local" | "cache-remote" | "cache-ssr-client" | "cache-ssr-server" | "external" | undefined) => ImageLoadPrimaryReason;
+export declare const getImageLoadPrimaryReason: (source?: import("./types").CardPreviewSource | undefined) => ImageLoadPrimaryReason;
 export declare class ImageLoadError extends MediaCardError {
     constructor(source?: CardPreview['source']);
 }

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

@@ -11,13 +11,13 @@ export interface OverlayProps {
 }
 export declare const TickBox: ComponentClass<HTMLAttributes<{}> & OverlayProps>;
 export declare const Overlay: ComponentClass<HTMLAttributes<{}> & OverlayProps>;
-export declare const ErrorLine: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const LeftColumn: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const TopRow: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const BottomRow: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const RightColumn: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const ErrorMessage: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const AltWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const TitleWrapper: import("styled-components").StyledComponentClass<(import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").CustomThemeProps) | (import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").NoThemeProps), any, (import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").AtlaskitThemeProps) | (import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").CustomThemeProps) | (import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & import("@atlaskit/theme").NoThemeProps)>;
-export declare const Subtitle: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const Metadata: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ErrorLine: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const LeftColumn: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const TopRow: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const BottomRow: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const RightColumn: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const ErrorMessage: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const AltWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const TitleWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const Subtitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
+export declare const Metadata: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;