@atlaskit/media-card 77.4.9 → 77.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 77.5.0
+
+### Minor Changes
+
+- [#59081](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59081) [`ddeb216a6c03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ddeb216a6c03) - remove extra react loadable breakdown as it is unnecessary
+
+## 77.4.10
+
+### Patch Changes
+
+- [#58827](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58827) [`d0041df63a34`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0041df63a34) - Small code refactor
+
 ## 77.4.9
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardLoader.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _cardLoading = require("../utils/lightCards/cardLoading");
@@ -17,61 +16,18 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = (0, _react.useContext)(MediaCardContext);
   return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, props);
 };
-var MediaCard = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card" */'./card'));
-    }).then(function (mod) {
-      return mod.Card;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'./media-card-analytics-error-boundary'));
-    }).then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
 var MediaCardWithMediaClient = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client" */'./cardWithMediaClient'));
+    }).then(function (mod) {
+      return mod.CardWithMediaClient;
     });
   },
   loading: function loading() {
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var withMediaClient = props.withMediaClient,
-    dimensions = props.dimensions,
-    onClick = props.onClick;
-  var Card = _react.default.useMemo(function () {
-    return withMediaClient(MediaCard);
-  }, [withMediaClient]);
-  return (
-    /*#__PURE__*/
-    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
-    _react.default.createElement(MediaCardErrorBoundary, {
-      dimensions: dimensions,
-      onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement(Card, props))
-  );
-};
 var CardLoader = function CardLoader(props) {
   return /*#__PURE__*/_react.default.createElement(MediaCardContext.Provider, {
     value: props

package/dist/cjs/card/cardWithMediaClient.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardWithMediaClient = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _card = require("./card");
+var _mediaCardAnalyticsErrorBoundary = _interopRequireDefault(require("./media-card-analytics-error-boundary"));
+var CardWithMediaClient = exports.CardWithMediaClient = function CardWithMediaClient(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick;
+  var Card = _react.default.useMemo(function () {
+    return (0, _mediaClientReact.withMediaClient)(_card.Card);
+  }, []);
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    _react.default.createElement(_mediaCardAnalyticsErrorBoundary.default, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(Card, props))
+  );
+};

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/cardV2Loader.js

@@ -6,13 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _cardLoading = require("../../utils/lightCards/cardLoading");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var MediaCardContext = /*#__PURE__*/_react.default.createContext({});
@@ -20,63 +16,16 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = (0, _react.useContext)(MediaCardContext);
   return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, props);
 };
-var MediaV2Card = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-v2" */'./cardV2'));
-    }).then(function (mod) {
-      return mod.CardV2;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'../media-card-analytics-error-boundary'));
-    }).then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var dimensions = props.dimensions,
-    onClick = props.onClick,
-    withMediaClient = props.withMediaClient,
-    featureFlags = props.featureFlags;
-  var Card = _react.default.useMemo(function () {
-    return withMediaClient(MediaV2Card);
-  }, [withMediaClient]);
-  var featureFlagsWithMediaCardV2 = _react.default.useMemo(function () {
-    return _objectSpread(_objectSpread({}, featureFlags), {}, {
-      mediaCardV2: true //used for analytics - internal use only
-    });
-  }, [featureFlags]);
-  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, {
-    dimensions: dimensions,
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(Card, (0, _extends2.default)({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2
-  })));
-};
 var MediaCardWithMediaClientProvider = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client-v2" */'./cardWithMediaClientV2'));
+    }).then(function (mod) {
+      return mod.CardWithMediaClientV2;
     });
   },
   loading: function loading() {
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
 var CardLoader = function CardLoader(props) {

package/dist/cjs/card/v2/cardWithMediaClientV2.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardWithMediaClientV2 = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaCardAnalyticsErrorBoundary = _interopRequireDefault(require("../media-card-analytics-error-boundary"));
+var _cardV = require("./cardV2");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CardWithMediaClientV2 = exports.CardWithMediaClientV2 = function CardWithMediaClientV2(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick,
+    featureFlags = props.featureFlags;
+  var Card = _react.default.useMemo(function () {
+    return (0, _mediaClientReact.withMediaClient)(_cardV.CardV2);
+  }, []);
+  var featureFlagsWithMediaCardV2 = _react.default.useMemo(function () {
+    return _objectSpread(_objectSpread({}, featureFlags), {}, {
+      mediaCardV2: true //used for analytics - internal use only
+    });
+  }, [featureFlags]);
+  return /*#__PURE__*/_react.default.createElement(_mediaCardAnalyticsErrorBoundary.default, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(Card, (0, _extends2.default)({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
+  })));
+};

package/dist/cjs/card/v2/useFilePreview.js

@@ -37,31 +37,27 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)('loading'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
+    status = _useState2[0],
+    setStatus = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    nonCriticalError = _useState4[0],
-    setNonCriticalError = _useState4[1];
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    nonCriticalError = _useState6[0],
+    setNonCriticalError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isBannedLocalPreview = _useState8[0],
+    setIsBannedLocalPreview = _useState8[1];
+  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
+  var ssrReliabilityRef = (0, _react.useRef)(initialSsrReliability);
   var requestDimensions = (0, _react.useMemo)(function () {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
-
-  //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
-  //----------------------------------------------------------------//
-
-  var ssrDataRef = (0, _react.useRef)();
-  var ssrReliabilityRef = (0, _react.useRef)({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   var imageURLParams = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
@@ -71,14 +67,13 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     });
   }, [requestDimensions, identifier.collectionName, resizeMode]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
-    var _ssrDataRef$current, _ssrDataRef$current2;
-    ssrDataRef.current = (0, _globalScope.getSSRData)(identifier);
-    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+    var ssrData = (0, _globalScope.getSSRData)(identifier);
+    if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
       ssrReliabilityRef.current.server = _objectSpread({
         status: 'fail'
-      }, ssrDataRef.current.error);
+      }, ssrData.error);
     }
-    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+    if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
       try {
         return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
       } catch (e) {
@@ -87,9 +82,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         }, (0, _analytics.extractErrorInfo)(e));
       }
     } else {
-      var _ssrDataRef$current3 = ssrDataRef.current,
-        _dimensions = _ssrDataRef$current3.dimensions,
-        dataURI = _ssrDataRef$current3.dataURI;
+      var _dimensions = ssrData.dimensions,
+        dataURI = ssrData.dataURI;
       return {
         dataURI: dataURI,
         dimensions: _dimensions,
@@ -107,33 +101,19 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }
     return cardPreview;
   };
-  var _useState5 = (0, _react.useState)(cardPreviewInitializer),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    cardPreview = _useState6[0],
-    setCardPreview = _useState6[1];
+  var _useState9 = (0, _react.useState)(cardPreviewInitializer),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    cardPreview = _useState10[0],
+    setCardPreview = _useState10[1];
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey
     }),
     fileState = _useFileState.fileState;
-
-  //----------------------------------------------------------------//
-  //------------ State, Refs & Initial Values ----------------------//
-  //----------------------------------------------------------------//
-
-  var _useState7 = (0, _react.useState)('loading'),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
   (0, _react.useEffect)(function () {
     setStatus('loading');
   }, [identifier]);
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    isBannedLocalPreview = _useState10[0],
-    setIsBannedLocalPreview = _useState10[1];
-  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
 
   //----------------------------------------------------------------//
   //---------------------- Helper Functions  -----------------------//
@@ -606,4 +586,12 @@ var createRequestDimensions = function createRequestDimensions(dimensions) {
     result.height = height * retinaFactor;
   }
   return result;
+};
+var initialSsrReliability = {
+  server: {
+    status: 'unknown'
+  },
+  client: {
+    status: 'unknown'
+  }
 };

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.9",
+        packageName: "77.5.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.9";
+const packageVersion = "77.5.0";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/cardLoader.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import Loadable from 'react-loadable';
 import { CardLoading } from '../utils/lightCards/cardLoading';
@@ -7,39 +6,10 @@ const CardLoadingWithContext = () => {
   const props = useContext(MediaCardContext);
   return /*#__PURE__*/React.createElement(CardLoading, props);
 };
-const MediaCard = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card" */'./card').then(mod => mod.Card),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
-});
-const MediaCardErrorBoundary = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'./media-card-analytics-error-boundary').then(mod => mod.default),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
-});
 const MediaCardWithMediaClient = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
-  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
-    withMediaClient: loaded.withMediaClient
-  }))
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client" */'./cardWithMediaClient').then(mod => mod.CardWithMediaClient),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
-const CardWithMediaClient = props => {
-  const {
-    withMediaClient,
-    dimensions,
-    onClick
-  } = props;
-  const Card = React.useMemo(() => {
-    return withMediaClient(MediaCard);
-  }, [withMediaClient]);
-  return (
-    /*#__PURE__*/
-    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
-    React.createElement(MediaCardErrorBoundary, {
-      dimensions: dimensions,
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(Card, props))
-  );
-};
 const CardLoader = props => {
   return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
     value: props

package/dist/es2019/card/cardWithMediaClient.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { withMediaClient } from '@atlaskit/media-client-react';
+import { Card as MediaCard } from './card';
+import MediaCardAnalyticsErrorBoundary from './media-card-analytics-error-boundary';
+export const CardWithMediaClient = props => {
+  const {
+    dimensions,
+    onClick
+  } = props;
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard);
+  }, []);
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    React.createElement(MediaCardAnalyticsErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Card, props))
+  );
+};

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.9";
+const packageVersion = "77.5.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.9";
+const packageVersion = "77.5.0";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/card/v2/cardV2Loader.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import Loadable from 'react-loadable';
 import { CardLoading } from '../../utils/lightCards/cardLoading';
@@ -7,41 +6,9 @@ const CardLoadingWithContext = () => {
   const props = useContext(MediaCardContext);
   return /*#__PURE__*/React.createElement(CardLoading, props);
 };
-const MediaV2Card = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-v2" */'./cardV2').then(mod => mod.CardV2),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
-});
-const MediaCardErrorBoundary = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'../media-card-analytics-error-boundary').then(mod => mod.default),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
-});
-const CardWithMediaClient = props => {
-  const {
-    dimensions,
-    onClick,
-    withMediaClient,
-    featureFlags
-  } = props;
-  const Card = React.useMemo(() => {
-    return withMediaClient(MediaV2Card);
-  }, [withMediaClient]);
-  const featureFlagsWithMediaCardV2 = React.useMemo(() => ({
-    ...featureFlags,
-    mediaCardV2: true //used for analytics - internal use only
-  }), [featureFlags]);
-  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, {
-    dimensions: dimensions,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2
-  })));
-};
 const MediaCardWithMediaClientProvider = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'),
-  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
-  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
-    withMediaClient: loaded.withMediaClient
-  }))
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client-v2" */'./cardWithMediaClientV2').then(mod => mod.CardWithMediaClientV2),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
 const CardLoader = props => {
   return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {

package/dist/es2019/card/v2/cardWithMediaClientV2.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { withMediaClient } from '@atlaskit/media-client-react';
+import MediaCardAnalyticsErrorBoundary from '../media-card-analytics-error-boundary';
+import { CardV2 } from './cardV2';
+export const CardWithMediaClientV2 = props => {
+  const {
+    dimensions,
+    onClick,
+    featureFlags
+  } = props;
+  const Card = React.useMemo(() => {
+    return withMediaClient(CardV2);
+  }, []);
+  const featureFlagsWithMediaCardV2 = React.useMemo(() => ({
+    ...featureFlags,
+    mediaCardV2: true //used for analytics - internal use only
+  }), [featureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardAnalyticsErrorBoundary, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
+  })));
+};

package/dist/es2019/card/v2/useFilePreview.js

@@ -24,23 +24,13 @@ export const useFilePreview = ({
   mediaBlobUrlAttrs
 }) => {
   const mediaClient = useMediaClient();
+  const [status, setStatus] = useState('loading');
   const [error, setError] = useState();
   const [nonCriticalError, setNonCriticalError] = useState();
+  const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
+  const wasResolvedUpfrontPreviewRef = useRef(false);
+  const ssrReliabilityRef = useRef(initialSsrReliability);
   const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
-
-  //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
-  //----------------------------------------------------------------//
-
-  const ssrDataRef = useRef();
-  const ssrReliabilityRef = useRef({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   const imageURLParams = useMemo(() => ({
     collection: identifier.collectionName,
     mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
@@ -48,15 +38,14 @@ export const useFilePreview = ({
     allowAnimated: true
   }), [requestDimensions, identifier.collectionName, resizeMode]);
   const getSSRPreview = (ssr, identifier, mediaClient) => {
-    var _ssrDataRef$current, _ssrDataRef$current2;
-    ssrDataRef.current = getSSRData(identifier);
-    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+    const ssrData = getSSRData(identifier);
+    if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
       ssrReliabilityRef.current.server = {
         status: 'fail',
-        ...ssrDataRef.current.error
+        ...ssrData.error
       };
     }
-    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+    if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
       try {
         return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
       } catch (e) {
@@ -69,7 +58,7 @@ export const useFilePreview = ({
       const {
         dimensions,
         dataURI
-      } = ssrDataRef.current;
+      } = ssrData;
       return {
         dataURI,
         dimensions,
@@ -97,17 +86,9 @@ export const useFilePreview = ({
     collectionName: identifier.collectionName,
     occurrenceKey: identifier.occurrenceKey
   });
-
-  //----------------------------------------------------------------//
-  //------------ State, Refs & Initial Values ----------------------//
-  //----------------------------------------------------------------//
-
-  const [status, setStatus] = useState('loading');
   useEffect(() => {
     setStatus('loading');
   }, [identifier]);
-  const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
-  const wasResolvedUpfrontPreviewRef = useRef(false);
 
   //----------------------------------------------------------------//
   //---------------------- Helper Functions  -----------------------//
@@ -515,4 +496,12 @@ const createRequestDimensions = dimensions => {
     result.height = height * retinaFactor;
   }
   return result;
+};
+const initialSsrReliability = {
+  server: {
+    status: 'unknown'
+  },
+  client: {
+    status: 'unknown'
+  }
 };

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.4.9",
+      packageName: "77.5.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.9";
+const packageVersion = "77.5.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/cardLoader.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import Loadable from 'react-loadable';
 import { CardLoading } from '../utils/lightCards/cardLoading';
@@ -7,55 +6,16 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = useContext(MediaCardContext);
   return /*#__PURE__*/React.createElement(CardLoading, props);
 };
-var MediaCard = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-card" */'./card').then(function (mod) {
-      return mod.Card;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'./media-card-analytics-error-boundary').then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  }
-});
 var MediaCardWithMediaClient = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react');
+    return import( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client" */'./cardWithMediaClient').then(function (mod) {
+      return mod.CardWithMediaClient;
+    });
   },
   loading: function loading() {
     return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var withMediaClient = props.withMediaClient,
-    dimensions = props.dimensions,
-    onClick = props.onClick;
-  var Card = React.useMemo(function () {
-    return withMediaClient(MediaCard);
-  }, [withMediaClient]);
-  return (
-    /*#__PURE__*/
-    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
-    React.createElement(MediaCardErrorBoundary, {
-      dimensions: dimensions,
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(Card, props))
-  );
-};
 var CardLoader = function CardLoader(props) {
   return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
     value: props

package/dist/esm/card/cardWithMediaClient.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withMediaClient } from '@atlaskit/media-client-react';
+import { Card as MediaCard } from './card';
+import MediaCardAnalyticsErrorBoundary from './media-card-analytics-error-boundary';
+export var CardWithMediaClient = function CardWithMediaClient(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick;
+  var Card = React.useMemo(function () {
+    return withMediaClient(MediaCard);
+  }, []);
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    React.createElement(MediaCardAnalyticsErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Card, props))
+  );
+};

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/cardV2Loader.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useContext } from 'react';
 import Loadable from 'react-loadable';
 import { CardLoading } from '../../utils/lightCards/cardLoading';
@@ -10,57 +6,14 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = useContext(MediaCardContext);
   return /*#__PURE__*/React.createElement(CardLoading, props);
 };
-var MediaV2Card = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-card-v2" */'./cardV2').then(function (mod) {
-      return mod.CardV2;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'../media-card-analytics-error-boundary').then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  }
-});
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var dimensions = props.dimensions,
-    onClick = props.onClick,
-    withMediaClient = props.withMediaClient,
-    featureFlags = props.featureFlags;
-  var Card = React.useMemo(function () {
-    return withMediaClient(MediaV2Card);
-  }, [withMediaClient]);
-  var featureFlagsWithMediaCardV2 = React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, featureFlags), {}, {
-      mediaCardV2: true //used for analytics - internal use only
-    });
-  }, [featureFlags]);
-  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, {
-    dimensions: dimensions,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2
-  })));
-};
 var MediaCardWithMediaClientProvider = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react');
+    return import( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client-v2" */'./cardWithMediaClientV2').then(function (mod) {
+      return mod.CardWithMediaClientV2;
+    });
   },
   loading: function loading() {
     return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
 var CardLoader = function CardLoader(props) {

package/dist/esm/card/v2/cardWithMediaClientV2.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { withMediaClient } from '@atlaskit/media-client-react';
+import MediaCardAnalyticsErrorBoundary from '../media-card-analytics-error-boundary';
+import { CardV2 } from './cardV2';
+export var CardWithMediaClientV2 = function CardWithMediaClientV2(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick,
+    featureFlags = props.featureFlags;
+  var Card = React.useMemo(function () {
+    return withMediaClient(CardV2);
+  }, []);
+  var featureFlagsWithMediaCardV2 = React.useMemo(function () {
+    return _objectSpread(_objectSpread({}, featureFlags), {}, {
+      mediaCardV2: true //used for analytics - internal use only
+    });
+  }, [featureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardAnalyticsErrorBoundary, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
+  })));
+};

package/dist/esm/card/v2/useFilePreview.js

@@ -30,31 +30,27 @@ export var useFilePreview = function useFilePreview(_ref) {
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
   var mediaClient = useMediaClient();
-  var _useState = useState(),
+  var _useState = useState('loading'),
     _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
+    status = _useState2[0],
+    setStatus = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    nonCriticalError = _useState4[0],
-    setNonCriticalError = _useState4[1];
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    nonCriticalError = _useState6[0],
+    setNonCriticalError = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isBannedLocalPreview = _useState8[0],
+    setIsBannedLocalPreview = _useState8[1];
+  var wasResolvedUpfrontPreviewRef = useRef(false);
+  var ssrReliabilityRef = useRef(initialSsrReliability);
   var requestDimensions = useMemo(function () {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
-
-  //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
-  //----------------------------------------------------------------//
-
-  var ssrDataRef = useRef();
-  var ssrReliabilityRef = useRef({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   var imageURLParams = useMemo(function () {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
@@ -64,14 +60,13 @@ export var useFilePreview = function useFilePreview(_ref) {
     });
   }, [requestDimensions, identifier.collectionName, resizeMode]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
-    var _ssrDataRef$current, _ssrDataRef$current2;
-    ssrDataRef.current = getSSRData(identifier);
-    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+    var ssrData = getSSRData(identifier);
+    if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
       ssrReliabilityRef.current.server = _objectSpread({
         status: 'fail'
-      }, ssrDataRef.current.error);
+      }, ssrData.error);
     }
-    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+    if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
       try {
         return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
       } catch (e) {
@@ -80,9 +75,8 @@ export var useFilePreview = function useFilePreview(_ref) {
         }, extractErrorInfo(e));
       }
     } else {
-      var _ssrDataRef$current3 = ssrDataRef.current,
-        _dimensions = _ssrDataRef$current3.dimensions,
-        dataURI = _ssrDataRef$current3.dataURI;
+      var _dimensions = ssrData.dimensions,
+        dataURI = ssrData.dataURI;
       return {
         dataURI: dataURI,
         dimensions: _dimensions,
@@ -100,33 +94,19 @@ export var useFilePreview = function useFilePreview(_ref) {
     }
     return cardPreview;
   };
-  var _useState5 = useState(cardPreviewInitializer),
-    _useState6 = _slicedToArray(_useState5, 2),
-    cardPreview = _useState6[0],
-    setCardPreview = _useState6[1];
+  var _useState9 = useState(cardPreviewInitializer),
+    _useState10 = _slicedToArray(_useState9, 2),
+    cardPreview = _useState10[0],
+    setCardPreview = _useState10[1];
   var _useFileState = useFileState(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey
     }),
     fileState = _useFileState.fileState;
-
-  //----------------------------------------------------------------//
-  //------------ State, Refs & Initial Values ----------------------//
-  //----------------------------------------------------------------//
-
-  var _useState7 = useState('loading'),
-    _useState8 = _slicedToArray(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
   useEffect(function () {
     setStatus('loading');
   }, [identifier]);
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isBannedLocalPreview = _useState10[0],
-    setIsBannedLocalPreview = _useState10[1];
-  var wasResolvedUpfrontPreviewRef = useRef(false);
 
   //----------------------------------------------------------------//
   //---------------------- Helper Functions  -----------------------//
@@ -599,4 +579,12 @@ var createRequestDimensions = function createRequestDimensions(dimensions) {
     result.height = height * retinaFactor;
   }
   return result;
+};
+var initialSsrReliability = {
+  server: {
+    status: 'unknown'
+  },
+  client: {
+    status: 'unknown'
+  }
 };

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.9",
+        packageName: "77.5.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.9";
+var packageVersion = "77.5.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/cardLoader.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
-import type { CardBaseProps } from './card';
-export type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
+import type { CardWithMediaClientConfigProps } from './types';
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

package/dist/types/card/cardSwitcher.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CardWithMediaClientConfigProps } from './cardLoader';
+import { CardWithMediaClientConfigProps } from './types';
 declare function CardSwitcher(props: CardWithMediaClientConfigProps): JSX.Element;
 export default CardSwitcher;

package/dist/types/card/cardWithMediaClient.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CardWithMediaClientConfigProps } from './types';
+export declare const CardWithMediaClient: React.FC<CardWithMediaClientConfigProps>;

package/dist/types/card/types.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactElement, RefObject } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
+import type { CardBaseProps } from './card';
 import { CardDimensions } from '../types';
 export type InlinePlayerWrapperProps = {
     testId?: string;
@@ -11,3 +13,4 @@ export type InlinePlayerWrapperProps = {
     innerRef?: RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | undefined;
     children?: JSX.Element[] | ReactElement<any, any> | null | any;
 };
+export type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;

package/dist/types/card/v2/cardV2Loader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CardWithMediaClientConfigProps } from '../cardLoader';
+import { CardWithMediaClientConfigProps } from '../types';
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

package/dist/types/card/v2/cardWithMediaClientV2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardWithMediaClientConfigProps } from '../types';
+export declare const CardWithMediaClientV2: React.FC<CardWithMediaClientConfigProps>;

package/dist/types-ts4.5/card/cardLoader.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
-import type { CardBaseProps } from './card';
-export type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
+import type { CardWithMediaClientConfigProps } from './types';
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

package/dist/types-ts4.5/card/cardSwitcher.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CardWithMediaClientConfigProps } from './cardLoader';
+import { CardWithMediaClientConfigProps } from './types';
 declare function CardSwitcher(props: CardWithMediaClientConfigProps): JSX.Element;
 export default CardSwitcher;

package/dist/types-ts4.5/card/cardWithMediaClient.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CardWithMediaClientConfigProps } from './types';
+export declare const CardWithMediaClient: React.FC<CardWithMediaClientConfigProps>;

package/dist/types-ts4.5/card/types.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactElement, RefObject } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
+import type { CardBaseProps } from './card';
 import { CardDimensions } from '../types';
 export type InlinePlayerWrapperProps = {
     testId?: string;
@@ -11,3 +13,4 @@ export type InlinePlayerWrapperProps = {
     innerRef?: RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | undefined;
     children?: JSX.Element[] | ReactElement<any, any> | null | any;
 };
+export type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;

package/dist/types-ts4.5/card/v2/cardV2Loader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CardWithMediaClientConfigProps } from '../cardLoader';
+import { CardWithMediaClientConfigProps } from '../types';
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

package/dist/types-ts4.5/card/v2/cardWithMediaClientV2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardWithMediaClientConfigProps } from '../types';
+export declare const CardWithMediaClientV2: React.FC<CardWithMediaClientConfigProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.4.9",
+  "version": "77.5.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"