@atlaskit/media-card 77.11.1 → 77.11.3

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

@@ -52,7 +52,8 @@ export const CardViewV2Base = ({
   error,
   disableAnimation,
   openMediaViewerButtonRef = null,
-  shouldOpenMediaViewer
+  shouldOpenMediaViewer,
+  overriddenCreationDate
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -205,7 +206,9 @@ export const CardViewV2Base = ({
   } = metadata || {};
   const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
   const contents = 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,
@@ -244,7 +247,7 @@ export const CardViewV2Base = ({
     isFixed: isFixedBlanket
   }), renderTitleBox && name && jsx(TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor

package/dist/es2019/card/v2/cardviews/cardViewWrapper.js

@@ -35,6 +35,7 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   progressBar,
   shouldOpenMediaViewer,
   openMediaViewerButtonRef = null,
+  overriddenCreationDate,
   ...props
 }, ref) => {
   const {
@@ -46,13 +47,15 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   const defaultBlanket = !disableOverlay && jsx(Blanket, null);
   const defaultTitleBox = !disableOverlay && !!name && jsx(TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
   const contents = jsx(React.Fragment, null, jsx("div", _extends({
-    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/v2/cardviews/index.js

@@ -40,7 +40,8 @@ export const CardViewsBase = ({
   error,
   disableAnimation,
   shouldOpenMediaViewer,
-  openMediaViewerButtonRef
+  openMediaViewerButtonRef,
+  overriddenCreationDate
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -98,7 +99,8 @@ export const CardViewsBase = ({
       mediaCardCursor,
       innerRef,
       shouldOpenMediaViewer,
-      openMediaViewerButtonRef
+      openMediaViewerButtonRef,
+      overriddenCreationDate
     };
     switch (status) {
       case 'uploading':

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

@@ -24,6 +24,8 @@ import { CardViews } from './cardviews';
 import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { useFilePreview } from '@atlaskit/media-file-preview';
 import { performanceNow } from './performance';
+import { useContext } from 'react';
+import { DateOverrideContext } from '../../dateOverrideContext';
 const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
 export const FileCard = ({
   appearance = 'auto',
@@ -87,6 +89,8 @@ export const FileCard = ({
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  const dateOverrides = useContext(DateOverrideContext);
+  const overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -517,7 +521,8 @@ export const FileCard = ({
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
       mediaCardCursor: mediaCardCursor,
-      shouldHideTooltip: shouldHideTooltip
+      shouldHideTooltip: shouldHideTooltip,
+      overriddenCreationDate: overridenDate
     });
     return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
       cardEl: cardElement,

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

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -47,13 +47,17 @@ const ErrorBoundaryComponent = ({
       userSelect: 'text'
     })
   };
-  return /*#__PURE__*/React.createElement("span", {
-    style: style
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    label: "error",
-    size: "small",
-    primaryColor: `var(--ds-icon-danger, ${R300})`
-  }), message);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    React.createElement("span", {
+      style: style
+    }, /*#__PURE__*/React.createElement(WarningIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R300})`
+    }), message)
+  );
 };
 class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
   constructor(props) {

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-export const errorIconWrapperStyles = css`
-  display: flex;
-  color: ${"var(--ds-icon-warning, #ff991f)"};
-`;
+export const errorIconWrapperStyles = css({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

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

@@ -3,13 +3,12 @@ import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
   dimensions
-}) => css`
-  ${center}
-  background: ${`var(--ds-background-neutral, ${N20})`};
-  color: ${`var(--ds-icon, ${N50})`};
-  ${borderRadius}
-  max-height: 100%;
-  max-width: 100%;
-  width: ${dimensions.width};
-  height: ${dimensions.height};
-`;
+}) => css(center, {
+  background: `var(--ds-background-neutral, ${N20})`,
+  color: `var(--ds-icon, ${N50})`
+}, borderRadius, {
+  maxHeight: '100%',
+  maxWidth: '100%',
+  width: dimensions.width,
+  height: dimensions.height
+});

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.11.1";
+const packageVersion = "77.11.3";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.1";
+var packageVersion = "77.11.3";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/cardView.js

@@ -201,7 +201,9 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         name = _ref3.name;
       var 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/esm/card/inlinePlayerWrapper.js

@@ -9,7 +9,9 @@ export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
     innerRef = props.innerRef;
   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: selected,

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

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

@@ -4,7 +4,9 @@ import { wrapperStyles, actionsBarClassName } from './styles';
 export var ActionsBarWrapper = function 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/esm/card/ui/actionsBar/cardActions/cardActionButton.js

@@ -8,7 +8,9 @@ export var CardActionButton = /*#__PURE__*/forwardRef(function (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/esm/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -38,7 +38,9 @@ export var CardActionIconButton = /*#__PURE__*/function (_Component) {
         variant = _this$props.variant;
       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/esm/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -72,7 +72,9 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
             var triggerRef = _ref.triggerRef,
               providedProps = _objectWithoutProperties(_ref, _excluded);
             return /*#__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/esm/card/ui/actionsBar/cardActions/styles.js

@@ -1,14 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 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';
-var rootStyles = function rootStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
-};
-export var wrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
+export var wrapperStyles = css({
+  boxSizing: 'border-box',
+  fontFamily: fontFamily(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 export var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -19,5 +23,13 @@ var getVariantStyles = function getVariantStyles(variant) {
 };
 export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
+  return css({
+    appearance: 'none',
+    border: 'none'
+  }, center, borderRadius, size(26), {
+    color: "var(--ds-icon, ".concat(N500, ")"),
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }, getVariantStyles(variant));
 };

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

@@ -1,10 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 export var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+  return 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/esm/card/ui/blanket/blanket.js

@@ -4,7 +4,9 @@ import { blanketStyles, blanketClassName } from './styles';
 export var Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   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/esm/card/ui/blanket/styles.js

@@ -1,11 +1,17 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export var blanketClassName = 'media-card-blanket';
 export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
 export var blanketStyles = function blanketStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), transition(), isFixed ? fixedBlanketStyles : '');
+  return css(transition(), {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    left: 0,
+    top: 0
+  }, isFixed ? fixedBlanketStyles : '');
 };
 blanketStyles.displayName = 'Blanket';

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
@@ -15,6 +13,14 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
 export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
     breakpoint = _ref.breakpoint;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
+  return css({
+    position: 'absolute',
+    width: '100%',
+    height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")"),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
 };
 iconWrapperStyles.displayName = 'MediaIconWrapper';

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { backgroundStyles, bkgClassName } from './styles';
 export var PlayButtonBackground = function 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/esm/card/ui/playButton/playButtonWrapper.js

@@ -2,8 +2,11 @@
 import { jsx } from '@emotion/react';
 import { playButtonClassName, playButtonWrapperStyles } from './styles';
 export var PlayButtonWrapper = function 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/esm/card/ui/playButton/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export var playButtonClassName = 'media-card-play-button';
@@ -7,5 +5,26 @@ export var bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-export var playButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), "var(--ds-icon-inverse, ".concat(N0, ")"));
-export var backgroundStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, "var(--ds-background-neutral-bold, ".concat(N90A, ")"));
+export var playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: "var(--ds-icon-inverse, ".concat(N0, ")"),
+  span: {
+    position: 'absolute'
+  }
+});
+export var backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: "".concat(discSize, "px"),
+  height: "".concat(discSize, "px"),
+  background: "var(--ds-background-neutral-bold, ".concat(N90A, ")"),
+  borderRadius: '100%'
+});

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../styles';
@@ -35,6 +33,6 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export var styledBarStyles = function styledBarStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
@@ -61,7 +59,15 @@ export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTi
   }
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
-export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+export var cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 var defaultTransitionDuration = '.3s';
 export var transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';

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

@@ -29,7 +29,9 @@ wrapperStyles.displayName = 'TickBoxWrapper';
 export var TickBoxWrapper = function 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/esm/card/ui/titleBox/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
@@ -16,20 +14,50 @@ var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.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));
+  return css({
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    backgroundColor: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
+    color: "var(--ds-text, ".concat(N800, ")"),
+    cursor: 'inherit',
+    pointerEvents: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center'
+  }, generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";
 var iconOverlapStyles = "padding-right: 10px;";
 export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return css({
+    fontWeight: 600
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return css({
+    textOverflow: 'ellipsis'
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export var titleBoxIconStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
-export var errorMessageWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+export var titleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+export var 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/esm/card/ui/unhandledErrorCard/index.js

@@ -3,8 +3,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -43,7 +41,20 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
   try {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", ";\n      ", ";\n      background: ", ";\n      color: ", ";\n      max-height: 100%;\n      max-width: 100%;\n      ", ";\n      display: flex;\n      flex-direction: column;\n\n      p {\n        font-size: ", "px;\n        text-align: center;\n        display: ", ";\n      }\n    "])), center, borderRadius, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-text-subtle, ".concat(N800, ")"), getConvertedDimension(dimensions), fontSize(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+    return css(center, borderRadius, {
+      background: "var(--ds-background-neutral, ".concat(N20, ")"),
+      color: "var(--ds-text-subtle, ".concat(N800, ")"),
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: "".concat(fontSize(), "px"),
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
+      }
+    });
   } catch (e) {
     return null;
   }

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

@@ -18,7 +18,9 @@ export var Wrapper = function Wrapper(props) {
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
   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/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.11.1";
+var packageVersion = "77.11.3";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);