@atlaskit/media-card 77.4.8 → 77.4.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 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
+
+- [#57473](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57473) [`100f90575744`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/100f90575744) - Remove legacy theming logic from @atlaskit/media-avatar-picker, @atlaskit/media-card, @atlaskit/media-ui and @atlaskit/media-viewer.
+
 ## 77.4.8
 
 ### 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.8";
+var packageVersion = "77.4.10";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

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.8";
+var packageVersion = "77.4.10";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/ui/titleBox/styles.js

@@ -10,7 +10,6 @@ var _react = require("@emotion/react");
 var _common = require("../common");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
@@ -21,25 +20,10 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
   return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
 };
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
-var BACKGROUND_COLOR_DARK = '#161a1d';
-var TEXT_COLOR_DARK = '#C7D1DB';
 var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-    titleBoxBgColor = _ref.titleBoxBgColor,
-    theme = _ref.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), (0, _components.themed)({
-    light: "var(--ds-surface, ".concat((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
-    dark: "var(--ds-surface, ".concat((0, _styles.rgba)(
-    // theme does not contain this color, use constant instead
-    titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
-  })({
-    theme: theme
-  }), (0, _components.themed)({
-    light: "var(--ds-text, ".concat(_colors.N800, ")"),
-    dark: "var(--ds-text, ".concat(TEXT_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), generateResponsiveStyles(breakpoint));
+    titleBoxBgColor = _ref.titleBoxBgColor;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), "var(--ds-surface, ".concat((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"), "var(--ds-text, ".concat(_colors.N800, ")"), generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";

package/dist/cjs/card/ui/titleBox/titleBoxComponents.js

@@ -6,20 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-var _components = require("@atlaskit/theme/components");
 /** @jsx jsx */
 
 var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor;
-  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box",
     css: (0, _styles.titleBoxWrapperStyles)({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor,
-      theme: theme
+      titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };

package/dist/cjs/card/ui/wrapper/styles.js

@@ -11,12 +11,10 @@ var _constants = require("@atlaskit/theme/constants");
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _selection = require("@atlaskit/editor-shared-styles/selection");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("../styles");
 var _styles2 = require("../blanket/styles");
 var _styles3 = require("../actionsBar/styles");
 var _templateObject;
-var BACKGROUND_COLOR_DARK = '#22272C';
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
@@ -27,13 +25,7 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
     isPlayButtonClickable = _ref.isPlayButtonClickable,
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-    mediaCardCursor = _ref.mediaCardCursor,
-    theme = _ref.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat((0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+    mediaCardCursor = _ref.mediaCardCursor;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/cjs/card/ui/wrapper/wrapper.js

@@ -7,7 +7,6 @@ exports.Wrapper = void 0;
 var _react = require("@emotion/react");
 var _cardConstants = require("../../cardConstants");
 var _styles = require("./styles");
-var _components = require("@atlaskit/theme/components");
 /**@jsx jsx */
 
 var Wrapper = exports.Wrapper = function Wrapper(props) {
@@ -25,7 +24,6 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     isPlayButtonClickable = props.isPlayButtonClickable,
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
-  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", {
     id: "newFileExperienceWrapper",
     className: _cardConstants.newFileExperienceClassName,
@@ -40,8 +38,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
       isPlayButtonClickable: isPlayButtonClickable,
       isTickBoxSelectable: isTickBoxSelectable,
       shouldDisplayTooltip: shouldDisplayTooltip,
-      mediaCardCursor: mediaCardCursor,
-      theme: theme
+      mediaCardCursor: mediaCardCursor
     }),
     ref: innerRef,
     onClick: onClick,

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.8";
+var packageVersion = "77.4.10";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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.8",
+        packageName: "77.4.10",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

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

@@ -8,15 +8,12 @@ exports.Wrapper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-var _components = require("@atlaskit/theme/components");
 /**@jsx jsx */
 
 var Wrapper = exports.Wrapper = function Wrapper(props) {
-  var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: (0, _styles.wrapperStyles)({
-      dimensions: props.dimensions,
-      theme: theme
+      dimensions: props.dimensions
     })
   }, props), props.children);
 };

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

@@ -8,21 +8,9 @@ exports.wrapperStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
-var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
-  var dimensions = _ref.dimensions,
-    theme = _ref.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-  })({
-    theme: theme
-  }), (0, _components.themed)({
-    light: "var(--ds-icon, ".concat(_colors.N50, ")"),
-    dark: "var(--ds-icon, ".concat(_colors.DN100, ")")
-  })({
-    theme: theme
-  }), _mediaUi.borderRadius, dimensions.width, dimensions.height);
+  var dimensions = _ref.dimensions;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-icon, ".concat(_colors.N50, ")"), _mediaUi.borderRadius, dimensions.width, dimensions.height);
 };

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.8";
+var packageVersion = "77.4.10";
 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.8";
+const packageVersion = "77.4.10";
 export class CardBase extends Component {
   constructor(props) {
     super(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.8";
+const packageVersion = "77.4.10";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/titleBox/styles.js

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../styles';
-import { themed } from '@atlaskit/theme/components';
 const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
   const setting = responsiveSettings[breakpoint];
   const verticalPadding = setting.titleBox.verticalPadding;
@@ -12,30 +11,15 @@ const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
     padding: ${verticalPadding}px ${horizontalPadding}px;`;
 };
 const HEX_REGEX = /^#[0-9A-F]{6}$/i;
-const BACKGROUND_COLOR_DARK = '#161a1d';
-const TEXT_COLOR_DARK = '#C7D1DB';
 export const titleBoxWrapperStyles = ({
   breakpoint,
-  titleBoxBgColor,
-  theme
+  titleBoxBgColor
 }) => css`
   position: absolute;
   bottom: 0;
   width: 100%;
-  background-color: ${themed({
-  light: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
-  dark: `var(--ds-surface, ${rgba(
-  // theme does not contain this color, use constant instead
-  titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1)})`
-})({
-  theme
-})};
-  color: ${themed({
-  light: `var(--ds-text, ${N800})`,
-  dark: `var(--ds-text, ${TEXT_COLOR_DARK})`
-})({
-  theme
-})};
+  background-color: ${`var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`};
+  color: ${`var(--ds-text, ${N800})`};
   cursor: inherit;
   pointer-events: none;
   display: flex;

package/dist/es2019/card/ui/titleBox/titleBoxComponents.js

@@ -1,20 +1,17 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export const TitleBoxWrapper = props => {
   const {
     breakpoint,
     titleBoxBgColor
   } = props;
-  const theme = useGlobalTheme();
   return jsx("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box",
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor,
-      theme
+      titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };

package/dist/es2019/card/ui/wrapper/styles.js

@@ -3,12 +3,10 @@ import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-import { themed } from '@atlaskit/theme/components';
 import { transition } from '../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
 import { fixedActionBarStyles, actionsBarClassName } from '../actionsBar/styles';
 import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
-const BACKGROUND_COLOR_DARK = '#22272C';
 export const wrapperStyles = ({
   breakpoint,
   dimensions,
@@ -19,8 +17,7 @@ export const wrapperStyles = ({
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip,
-  mediaCardCursor,
-  theme
+  mediaCardCursor
 }) => css`
   ${transition()}
   box-sizing: border-box;
@@ -30,12 +27,7 @@ export const wrapperStyles = ({
   position: relative;
   font-family: ${fontFamily()};
   ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground && `background: ${themed({
-  light: `var(--ds-background-neutral, ${N20})`,
-  dark: `var(--ds-background-neutral, ${BACKGROUND_COLOR_DARK})`
-})({
-  theme
-})};`}
+  ${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
   ${borderRadius}
   ${getCursorStyle(mediaCardCursor)}
   ${getWrapperShadow(disableOverlay, selected)}

package/dist/es2019/card/ui/wrapper/wrapper.js

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export const Wrapper = props => {
   const {
     testId,
@@ -20,7 +19,6 @@ export const Wrapper = props => {
     isTickBoxSelectable,
     shouldDisplayTooltip
   } = props;
-  const theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -35,8 +33,7 @@ export const Wrapper = props => {
       isPlayButtonClickable,
       isTickBoxSelectable,
       shouldDisplayTooltip,
-      mediaCardCursor,
-      theme
+      mediaCardCursor
     }),
     ref: innerRef,
     onClick: onClick,

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.8";
+const packageVersion = "77.4.10";
 export const CardV2Base = ({
   identifier,
   ...otherProps

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.8",
+      packageName: "77.4.10",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

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

@@ -2,13 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import { wrapperStyles } 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
+      dimensions: props.dimensions
     })
   }, props), props.children);
 };

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

@@ -1,24 +1,12 @@
 import { css } 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';
+import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
-  dimensions,
-  theme
+  dimensions
 }) => css`
   ${center}
-  background: ${themed({
-  light: `var(--ds-background-neutral, ${N20})`,
-  dark: `var(--ds-background-neutral, ${DN50})`
-})({
-  theme
-})};
-  color: ${themed({
-  light: `var(--ds-icon, ${N50})`,
-  dark: `var(--ds-icon, ${DN100})`
-})({
-  theme
-})};
+  background: ${`var(--ds-background-neutral, ${N20})`};
+  color: ${`var(--ds-icon, ${N50})`};
   ${borderRadius}
   max-height: 100%;
   max-width: 100%;

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.8";
+const packageVersion = "77.4.10";
 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.8";
+var packageVersion = "77.4.10";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

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.8";
+var packageVersion = "77.4.10";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/ui/titleBox/styles.js

@@ -4,7 +4,6 @@ import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
 import { rgba } from '../styles';
-import { themed } from '@atlaskit/theme/components';
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
   var setting = responsiveSettings[breakpoint];
@@ -14,25 +13,10 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
   return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
 };
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
-var BACKGROUND_COLOR_DARK = '#161a1d';
-var TEXT_COLOR_DARK = '#C7D1DB';
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
-    titleBoxBgColor = _ref.titleBoxBgColor,
-    theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), themed({
-    light: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
-    dark: "var(--ds-surface, ".concat(rgba(
-    // theme does not contain this color, use constant instead
-    titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
-  })({
-    theme: theme
-  }), themed({
-    light: "var(--ds-text, ".concat(N800, ")"),
-    dark: "var(--ds-text, ".concat(TEXT_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), generateResponsiveStyles(breakpoint));
+    titleBoxBgColor = _ref.titleBoxBgColor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"), "var(--ds-text, ".concat(N800, ")"), generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";

package/dist/esm/card/ui/titleBox/titleBoxComponents.js

@@ -1,18 +1,15 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor;
-  var theme = useGlobalTheme();
   return jsx("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box",
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
-      titleBoxBgColor: titleBoxBgColor,
-      theme: theme
+      titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };

package/dist/esm/card/ui/wrapper/styles.js

@@ -5,12 +5,10 @@ import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-import { themed } from '@atlaskit/theme/components';
 import { transition } from '../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
 import { fixedActionBarStyles, actionsBarClassName } from '../actionsBar/styles';
 import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
-var BACKGROUND_COLOR_DARK = '#22272C';
 export var wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
@@ -21,13 +19,7 @@ export var wrapperStyles = function wrapperStyles(_ref) {
     isPlayButtonClickable = _ref.isPlayButtonClickable,
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
-    mediaCardCursor = _ref.mediaCardCursor,
-    theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat(themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
-  })({
-    theme: theme
-  }), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+    mediaCardCursor = _ref.mediaCardCursor;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/esm/card/ui/wrapper/wrapper.js

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 export var Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
@@ -18,7 +17,6 @@ export var Wrapper = function Wrapper(props) {
     isPlayButtonClickable = props.isPlayButtonClickable,
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
-  var theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -33,8 +31,7 @@ export var Wrapper = function Wrapper(props) {
       isPlayButtonClickable: isPlayButtonClickable,
       isTickBoxSelectable: isTickBoxSelectable,
       shouldDisplayTooltip: shouldDisplayTooltip,
-      mediaCardCursor: mediaCardCursor,
-      theme: theme
+      mediaCardCursor: mediaCardCursor
     }),
     ref: innerRef,
     onClick: onClick,

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.8";
+var packageVersion = "77.4.10";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

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.8",
+        packageName: "77.4.10",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

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

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

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

@@ -2,20 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } 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';
+import { N20, N50 } from '@atlaskit/theme/colors';
 export var wrapperStyles = function wrapperStyles(_ref) {
-  var dimensions = _ref.dimensions,
-    theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-  })({
-    theme: theme
-  }), themed({
-    light: "var(--ds-icon, ".concat(N50, ")"),
-    dark: "var(--ds-icon, ".concat(DN100, ")")
-  })({
-    theme: theme
-  }), borderRadius, dimensions.width, dimensions.height);
+  var dimensions = _ref.dimensions;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-icon, ".concat(N50, ")"), borderRadius, dimensions.width, dimensions.height);
 };

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.8";
+var packageVersion = "77.4.10";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { TitleBoxFooterProps, TitleBoxHeaderProps, TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, theme, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

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

@@ -2,7 +2,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 import { Breakpoint } from '../common';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../types';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export type TitleBoxProps = {
     name: string;
     breakpoint: Breakpoint;
@@ -17,7 +16,6 @@ export type TitleBoxWrapperProps = {
     breakpoint: Breakpoint;
     titleBoxBgColor?: string;
     children?: JSX.Element | JSX.Element[] | any;
-    theme?: GlobalThemeTokens;
 };
 export type TitleBoxFooterProps = {
     hasIconOverlap: boolean;

package/dist/types/card/ui/wrapper/styles.d.ts

@@ -1,5 +1,5 @@
 import { WrapperProps } from './types';
 export declare const wrapperStyles: {
-    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, theme, }: WrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, }: WrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

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

@@ -3,7 +3,6 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions, CardAppearance } from '../../../types';
 import { Breakpoint } from '../common';
 import { MediaCardCursor } from '../../../types';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface WrapperProps {
     testId?: string;
     breakpoint: Breakpoint;
@@ -21,5 +20,4 @@ export interface WrapperProps {
     shouldDisplayTooltip: boolean;
     innerRef?: RefObject<HTMLDivElement>;
     children?: JSX.Element;
-    theme?: GlobalThemeTokens;
 }

package/dist/types/utils/lightCards/styles.d.ts

@@ -1,2 +1,2 @@
 import { WrapperProps } from './types';
-export declare const wrapperStyles: ({ dimensions, theme }: WrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyles: ({ dimensions }: WrapperProps) => import("@emotion/react").SerializedStyles;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { CardDimensions } from '../../types';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface StaticCardProps {
     dimensions?: CardDimensions;
     testId?: string;
@@ -11,5 +10,4 @@ export interface WrapperProps {
     dimensions: CardDimensions;
     testId?: string;
     children?: JSX.Element;
-    theme?: GlobalThemeTokens;
 }

package/dist/types-ts4.5/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { TitleBoxFooterProps, TitleBoxHeaderProps, TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, theme, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

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

@@ -2,7 +2,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 import { Breakpoint } from '../common';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../types';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export type TitleBoxProps = {
     name: string;
     breakpoint: Breakpoint;
@@ -17,7 +16,6 @@ export type TitleBoxWrapperProps = {
     breakpoint: Breakpoint;
     titleBoxBgColor?: string;
     children?: JSX.Element | JSX.Element[] | any;
-    theme?: GlobalThemeTokens;
 };
 export type TitleBoxFooterProps = {
     hasIconOverlap: boolean;

package/dist/types-ts4.5/card/ui/wrapper/styles.d.ts

@@ -1,5 +1,5 @@
 import { WrapperProps } from './types';
 export declare const wrapperStyles: {
-    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, theme, }: WrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, }: WrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

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

@@ -3,7 +3,6 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions, CardAppearance } from '../../../types';
 import { Breakpoint } from '../common';
 import { MediaCardCursor } from '../../../types';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface WrapperProps {
     testId?: string;
     breakpoint: Breakpoint;
@@ -21,5 +20,4 @@ export interface WrapperProps {
     shouldDisplayTooltip: boolean;
     innerRef?: RefObject<HTMLDivElement>;
     children?: JSX.Element;
-    theme?: GlobalThemeTokens;
 }

package/dist/types-ts4.5/utils/lightCards/styles.d.ts

@@ -1,2 +1,2 @@
 import { WrapperProps } from './types';
-export declare const wrapperStyles: ({ dimensions, theme }: WrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyles: ({ dimensions }: WrapperProps) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/utils/lightCards/types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { CardDimensions } from '../../types';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface StaticCardProps {
     dimensions?: CardDimensions;
     testId?: string;
@@ -11,5 +10,4 @@ export interface WrapperProps {
     dimensions: CardDimensions;
     testId?: string;
     children?: JSX.Element;
-    theme?: GlobalThemeTokens;
 }

package/package.json

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