@atlaskit/media-card 77.11.1 → 77.11.3

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

@@ -35,6 +35,7 @@ var _cardviews = require("./cardviews");
 var _inlinePlayerLazyV = require("./inlinePlayerLazyV2");
 var _mediaFilePreview = require("@atlaskit/media-file-preview");
 var _performance = require("./performance");
+var _dateOverrideContext = require("../../dateOverrideContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -113,6 +114,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  var dateOverrides = (0, _react.useContext)(_dateOverrideContext.DateOverrideContext);
+  var overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -564,7 +567,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
       mediaCardCursor: mediaCardCursor,
-      shouldHideTooltip: shouldHideTooltip
+      shouldHideTooltip: shouldHideTooltip,
+      overriddenCreationDate: overridenDate
     });
     return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
       cardEl: cardElement,

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

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -60,13 +60,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   }, isSelected ? _objectSpread({}, selectedStyle) : {
     userSelect: 'text'
   });
-  return /*#__PURE__*/_react.default.createElement("span", {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_warning.default, {
-    label: "error",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
-  }), message);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    _react.default.createElement("span", {
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_warning.default, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+    }), message)
+  );
 };
 var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.errorIconWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");
+var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

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

@@ -1,16 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   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);
+  return (0, _react.css)(_mediaUi.center, {
+    background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    color: "var(--ds-icon, ".concat(_colors.N50, ")")
+  }, _mediaUi.borderRadius, {
+    maxHeight: '100%',
+    maxWidth: '100%',
+    width: dimensions.width,
+    height: 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.11.1";
+var packageVersion = "77.11.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.1";
+const packageVersion = "77.11.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/cardView.js

@@ -205,7 +205,9 @@ export class CardViewBase extends React.Component {
       } = metadata || {};
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return jsx(React.Fragment, null, jsx("div", {
-        css: cardImageContainerStyles,
+        css: cardImageContainerStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: fileCardImageViewSelector,
         "data-testid": fileCardImageViewSelector,
         "data-test-media-name": name,

package/dist/es2019/card/inlinePlayerWrapper.js

@@ -11,7 +11,9 @@ export const InlinePlayerWrapper = props => {
   } = props;
   return jsx("div", {
     id: "inlinePlayerWrapper",
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: inlinePlayerClassName,
     css: inlinePlayerWrapperStyles({
       selected,

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.11.1";
+const packageVersion = "77.11.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/actionsBar/actionsBarWrapper.js

@@ -4,7 +4,9 @@ import { wrapperStyles, actionsBarClassName } from './styles';
 export const ActionsBarWrapper = props => {
   return jsx("div", {
     id: "actionsBarWrapper",
-    css: wrapperStyles(props.isFixed),
+    css: wrapperStyles(props.isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: actionsBarClassName
   }, props.children);
 };

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionButton.js

@@ -8,7 +8,9 @@ export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
     "aria-label": props.label,
-    css: cardActionButtonStyles(props),
+    css: cardActionButtonStyles(props)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: props.style,
     onClick: props.onClick,
     onMouseDown: props.onMouseDown,

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -21,7 +21,9 @@ export class CardActionIconButton extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(CardActionButton, {
       onClick: onClick,
-      onMouseDown: this.onMouseDown,
+      onMouseDown: this.onMouseDown
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: {
         color: triggerColor
       },

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -56,7 +56,9 @@ export class CardActionsDropdownMenu extends Component {
           triggerRef,
           ...providedProps
         }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
-          variant: triggerVariant,
+          variant: triggerVariant
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
           style: {
             color: triggerColor
           },

package/dist/es2019/card/ui/actionsBar/cardActions/styles.js

@@ -3,20 +3,16 @@ import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
-const rootStyles = () => css`
-  box-sizing: border-box;
-  font-family: ${fontFamily()};
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-export const wrapperStyles = css`
-  ${rootStyles()}
-  display: flex;
-  position: relative;
-  line-height: 0;
-`;
+export const wrapperStyles = css({
+  boxSizing: 'border-box',
+  fontFamily: fontFamily(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 export let CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -42,17 +38,12 @@ const getVariantStyles = variant => {
 };
 export const cardActionButtonStyles = ({
   variant
-}) => css`
-  appearance: none;
-  border: none;
-  ${center}
-  ${borderRadius}
-    ${size(26)}
-    color: ${`var(--ds-icon, ${N500})`};
-
-  &:hover {
-    cursor: pointer;
+}) => css({
+  appearance: 'none',
+  border: 'none'
+}, center, borderRadius, size(26), {
+  color: `var(--ds-icon, ${N500})`,
+  '&:hover': {
+    cursor: 'pointer'
   }
-
-  ${getVariantStyles(variant)}
-`;
+}, getVariantStyles(variant));

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

@@ -2,14 +2,12 @@ import { css } from '@emotion/react';
 import { transition } from '../styles';
 export const actionsBarClassName = 'media-card-actions-bar';
 export const fixedActionBarStyles = `opacity: 1;`;
-export const wrapperStyles = isFixed => css`
-  ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
-  ${transition()}
-  position: absolute;
-  top: ${"var(--ds-space-100, 8px)"};
-  right: ${"var(--ds-space-100, 8px)"};
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-`;
+export const wrapperStyles = isFixed => css(isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), {
+  position: 'absolute',
+  top: "var(--ds-space-100, 8px)",
+  right: "var(--ds-space-100, 8px)",
+  display: 'flex',
+  flexFlow: 'row nowrap',
+  alignItems: 'center'
+});
 wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -6,7 +6,9 @@ export const Blanket = props => {
     isFixed
   } = props;
   return jsx("div", {
-    css: blanketStyles(isFixed),
+    css: blanketStyles(isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blanketClassName,
     "data-testid": "media-card-blanket"
   });

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

@@ -3,15 +3,13 @@ import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export const blanketClassName = 'media-card-blanket';
 export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;
-export const blanketStyles = isFixed => css`
-  ${transition()}
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  max-width: 100%;
-  left: 0;
-  top: 0;
-  ${isFixed ? fixedBlanketStyles : ''}
-`;
+export const blanketStyles = isFixed => css(transition(), {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  maxWidth: '100%',
+  left: 0,
+  top: 0
+}, isFixed ? fixedBlanketStyles : '');
 blanketStyles.displayName = 'Blanket';

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

@@ -13,13 +13,13 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
 export const iconWrapperStyles = ({
   hasTitleBox,
   breakpoint
-}) => css`
-  position: absolute;
-  width: 100%;
-  height: calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)});
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
+}) => css({
+  position: 'absolute',
+  width: '100%',
+  height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 iconWrapperStyles.displayName = 'MediaIconWrapper';

package/dist/es2019/card/ui/playButton/playButtonBackground.js

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { backgroundStyles, bkgClassName } from './styles';
 export const PlayButtonBackground = () => {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return jsx("div", {
     css: backgroundStyles,
     className: bkgClassName

package/dist/es2019/card/ui/playButton/playButtonWrapper.js

@@ -2,8 +2,11 @@
 import { jsx } from '@emotion/react';
 import { playButtonClassName, playButtonWrapperStyles } from './styles';
 export const PlayButtonWrapper = props => {
-  return jsx("div", {
-    css: playButtonWrapperStyles,
-    className: playButtonClassName
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: playButtonWrapperStyles,
+      className: playButtonClassName
+    }, props.children)
+  );
 };

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

@@ -10,26 +10,26 @@ export const fixedPlayButtonStyles = `
     height: ${discSizeHover}px;
   }
 `;
-export const playButtonWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${`var(--ds-icon-inverse, ${N0})`};
-  span {
-    position: absolute;
+export const playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: `var(--ds-icon-inverse, ${N0})`,
+  span: {
+    position: 'absolute'
   }
-`;
-export const backgroundStyles = css`
-  transition-property: width, height;
-  transition-duration: 0.1s;
-  position: absolute;
-  width: ${discSize}px;
-  height: ${discSize}px;
-  background: ${`var(--ds-background-neutral-bold, ${N90A})`};
-  border-radius: 100%;
-`;
+});
+export const backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: `${discSize}px`,
+  height: `${discSize}px`,
+  background: `var(--ds-background-neutral-bold, ${N90A})`,
+  borderRadius: '100%'
+});

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

@@ -53,8 +53,6 @@ ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export const styledBarStyles = props => {
-  return css`
-    ${getStyledBarStylesBasedOnProps(props)}
-  `;
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -65,16 +65,15 @@ export const getSelectableTickBoxStyles = isTickBoxSelectable => {
     }
   `;
 };
-export const cardImageContainerStyles = css`
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  ${borderRadius}
-`;
+export const cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 const defaultTransitionDuration = '.3s';
 export const transition = (propertyName = 'all') => `
   transition: ${propertyName} ${defaultTransitionDuration};

package/dist/es2019/card/ui/tickBox/tickBoxWrapper.js

@@ -26,7 +26,9 @@ wrapperStyles.displayName = 'TickBoxWrapper';
 export const TickBoxWrapper = props => {
   return jsx("div", {
     id: "tickBoxWrapper",
-    css: wrapperStyles(props.selected),
+    css: wrapperStyles(props.selected)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: tickBoxClassName
   }, props.children);
 };

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

@@ -14,52 +14,47 @@ const HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export const titleBoxWrapperStyles = ({
   breakpoint,
   titleBoxBgColor
-}) => css`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  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;
-  flex-direction: column;
-  justify-content: center;
-  ${generateResponsiveStyles(breakpoint)}
-`;
+}) => css({
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  backgroundColor: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
+  color: `var(--ds-text, ${N800})`,
+  cursor: 'inherit',
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}, generateResponsiveStyles(breakpoint));
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 const infoStyles = `white-space: nowrap;overflow: hidden;`;
 const iconOverlapStyles = `padding-right: 10px;`;
 export const titleBoxHeaderStyles = ({
   hasIconOverlap
-}) => css`
-  font-weight: 600;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  fontWeight: 600
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export const titleBoxFooterStyles = ({
   hasIconOverlap
-}) => css`
-  text-overflow: ellipsis;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  textOverflow: 'ellipsis'
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export const titleBoxIconStyles = css`
-  position: absolute;
-  right: ${"var(--ds-space-050, 4px)"};
-  bottom: 0px;
-`;
-export const errorMessageWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  span {
-    vertical-align: middle;
-    :nth-child(2) {
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      margin-right: ${"var(--ds-space-050, 4px)"};
+export const titleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+export const errorMessageWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  span: {
+    verticalAlign: 'middle',
+    ':nth-child(2)': {
+      marginLeft: "var(--ds-space-050, 4px)",
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }
-`;
+});

package/dist/es2019/card/ui/unhandledErrorCard/index.js

@@ -32,23 +32,20 @@ const getConvertedDimension = dimensions => {
 };
 const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
   try {
-    return css`
-      ${center};
-      ${borderRadius};
-      background: ${`var(--ds-background-neutral, ${N20})`};
-      color: ${`var(--ds-text-subtle, ${N800})`};
-      max-height: 100%;
-      max-width: 100%;
-      ${getConvertedDimension(dimensions)};
-      display: flex;
-      flex-direction: column;
-
-      p {
-        font-size: ${fontSize()}px;
-        text-align: center;
-        display: ${shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'};
+    return css(center, borderRadius, {
+      background: `var(--ds-background-neutral, ${N20})`,
+      color: `var(--ds-text-subtle, ${N800})`,
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: `${fontSize()}px`,
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
       }
-    `;
+    });
   } catch (e) {
     return null;
   }

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

@@ -20,7 +20,9 @@ export const Wrapper = props => {
     shouldDisplayTooltip
   } = props;
   return jsx("div", {
-    id: "newFileExperienceWrapper",
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: newFileExperienceClassName,
     "data-testid": testId,
     css: wrapperStyles({

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