@atlaskit/media-card 77.12.0 → 77.12.2

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

@@ -1,11 +1,15 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const wrapperStyles = css({
   boxSizing: 'border-box',
   fontFamily: fontFamily(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '*': {
     boxSizing: 'border-box'
   },
@@ -41,9 +45,17 @@ export const cardActionButtonStyles = ({
 }) => css({
   appearance: 'none',
   border: 'none'
-}, center, borderRadius, size(26), {
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+center,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+borderRadius,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+size(26), {
   color: `var(--ds-icon, ${N500})`,
   '&:hover': {
     cursor: 'pointer'
   }
-}, getVariantStyles(variant));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getVariantStyles(variant));

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

@@ -1,8 +1,11 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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(), {
+export const wrapperStyles = isFixed =>
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+css(isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), {
   position: 'absolute',
   top: "var(--ds-space-100, 8px)",
   right: "var(--ds-space-100, 8px)",

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { blanketStyles, blanketClassName } from './styles';
 export const Blanket = props => {
@@ -6,6 +7,7 @@ export const Blanket = props => {
     isFixed
   } = props;
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: blanketStyles(isFixed)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -1,9 +1,12 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 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(), {
+export const blanketStyles = isFixed => css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+transition(), {
   position: 'absolute',
   width: '100%',
   height: '100%',
@@ -11,5 +14,7 @@ export const blanketStyles = isFixed => css(transition(), {
   maxWidth: '100%',
   left: 0,
   top: 0
-}, isFixed ? fixedBlanketStyles : '');
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+isFixed ? fixedBlanketStyles : '');
 blanketStyles.displayName = 'Blanket';

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper.js

@@ -1,5 +1,7 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { keyframes } from '@emotion/react';
 const breatheAnimation = keyframes({
   '0%': {

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { iconWrapperStyles } from './styles';
 export const IconWrapper = props => {
@@ -7,7 +8,9 @@ export const IconWrapper = props => {
     hasTitleBox
   } = props;
   return jsx("div", {
-    id: "iconWrapper",
+    id: "iconWrapper"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: iconWrapperStyles({
       breakpoint,
       hasTitleBox

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
@@ -16,6 +17,7 @@ export const iconWrapperStyles = ({
 }) => css({
   position: 'absolute',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`,
   display: 'flex',
   flexDirection: 'column',

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

@@ -1,36 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react';
 import React from 'react';
 import { injectIntl, IntlProvider, useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
-export const visuallyHiddenStyles = css({
-  width: '1px',
-  height: '1px',
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-});
+import { Pressable } from '@atlaskit/primitives';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const OpenMediaViewerButton = ({
   fileName,
   innerRef,
   ...props
 }) => {
   const intl = useIntl();
-  return jsx("button", _extends({
-    ref: innerRef,
-    css: visuallyHiddenStyles
+  return /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(Pressable, _extends({
+    ref: innerRef
   }, props), intl.formatMessage(messages.open_file_in_viewer, {
     name: fileName
-  }));
+  })));
 };
 const OpenMediaViewerButtonWrapper = props => {
-  return props.intl ? jsx(OpenMediaViewerButton, props) : jsx(IntlProvider, {
+  return props.intl ? /*#__PURE__*/React.createElement(OpenMediaViewerButton, props) : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
-  }, jsx(OpenMediaViewerButton, props));
+  }, /*#__PURE__*/React.createElement(OpenMediaViewerButton, props));
 };
 export default injectIntl(OpenMediaViewerButtonWrapper, {
   enforceContext: false

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

@@ -1,8 +1,9 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   return jsx("div", {
     css: backgroundStyles,
     className: bkgClassName

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

@@ -1,9 +1,10 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { playButtonClassName, playButtonWrapperStyles } from './styles';
 export const PlayButtonWrapper = props => {
   return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
       css: playButtonWrapperStyles,
       className: playButtonClassName

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export const playButtonClassName = 'media-card-play-button';
@@ -10,6 +11,8 @@ export const fixedPlayButtonStyles = `
     height: ${discSizeHover}px;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -20,10 +23,13 @@ export const playButtonWrapperStyles = css({
   alignItems: 'center',
   justifyContent: 'center',
   color: `var(--ds-icon-inverse, ${N0})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     position: 'absolute'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { styledBarStyles } from './styles';
 export const StyledBar = props => {
@@ -11,7 +12,9 @@ export const StyledBar = props => {
   return jsx("div", {
     id: "styledBar",
     role: "progressbar",
-    "aria-valuenow": progress,
+    "aria-valuenow": progress
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: styledBarStyles({
       progress,
       breakpoint,

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../styles';
@@ -53,6 +54,7 @@ ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export const styledBarStyles = props => {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -1,12 +1,16 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { tickBoxClassName } from './styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 import { B200 } from '@atlaskit/theme/colors';
 const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
       color: ${"var(--ds-icon-inverse, white)"};` : ``;
-const wrapperStyles = selected => css(transition && transition(), {
+const wrapperStyles = selected => css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+transition && transition(), {
   fontSize: '14px',
   width: '14px',
   height: '14px',
@@ -15,17 +19,23 @@ const wrapperStyles = selected => css(transition && transition(), {
   left: "var(--ds-space-075, 7px)",
   borderRadius: '20px',
   color: 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     display: 'block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     svg: {
       height: '14px'
     }
   }
-}, getSelectedStyles(selected));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getSelectedStyles(selected));
 wrapperStyles.displayName = 'TickBoxWrapper';
 export const TickBoxWrapper = props => {
   return jsx("div", {
-    id: "tickBoxWrapper",
+    id: "tickBoxWrapper"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: wrapperStyles(props.selected)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
@@ -18,14 +19,18 @@ export const titleBoxWrapperStyles = ({
   position: 'absolute',
   bottom: 0,
   width: '100%',
-  backgroundColor: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
+  backgroundColor: `var(--ds-surface, ${
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  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));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+generateResponsiveStyles(breakpoint));
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 const infoStyles = `white-space: nowrap;overflow: hidden;`;
 const iconOverlapStyles = `padding-right: 10px;`;
@@ -33,25 +38,39 @@ export const titleBoxHeaderStyles = ({
   hasIconOverlap
 }) => css({
   fontWeight: 600
-}, infoStyles, hasIconOverlap && iconOverlapStyles);
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+infoStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+hasIconOverlap && iconOverlapStyles);
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export const titleBoxFooterStyles = ({
   hasIconOverlap
 }) => css({
   textOverflow: 'ellipsis'
-}, infoStyles, hasIconOverlap && iconOverlapStyles);
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+infoStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-start',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     verticalAlign: 'middle',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     ':nth-child(2)': {
       marginLeft: "var(--ds-space-050, 4px)",
       marginRight: "var(--ds-space-050, 4px)"

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
 export const TitleBoxWrapper = props => {
@@ -8,7 +9,9 @@ export const TitleBoxWrapper = props => {
   } = props;
   return jsx("div", {
     id: "titleBoxWrapper",
-    "data-testid": "media-title-box",
+    "data-testid": "media-title-box"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
       titleBoxBgColor: titleBoxBgColor
@@ -19,31 +22,41 @@ export const TitleBoxHeader = props => {
   const {
     hasIconOverlap
   } = props;
-  return jsx("div", {
-    id: "titleBoxHeader",
-    css: titleBoxHeaderStyles({
-      hasIconOverlap
-    })
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxHeader",
+      css: titleBoxHeaderStyles({
+        hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export const TitleBoxFooter = props => {
   const {
     hasIconOverlap
   } = props;
-  return jsx("div", {
-    id: "titleBoxFooter",
-    css: titleBoxFooterStyles({
-      hasIconOverlap
-    })
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxFooter",
+      css: titleBoxFooterStyles({
+        hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export const TitleBoxIcon = props => {
-  return jsx("div", {
-    id: "titleBoxIcon",
-    css: titleBoxIconStyles
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      id: "titleBoxIcon",
+      css: titleBoxIconStyles
+    }, props.children)
+  );
 };
 export const ErrorMessageWrapper = props => {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   return jsx("div", {
     css: errorMessageWrapperStyles
   }, props.children);

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { N20, N800, Y500 } from '@atlaskit/theme/colors';
@@ -32,17 +33,25 @@ const getConvertedDimension = dimensions => {
 };
 const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
   try {
-    return css(center, borderRadius, {
+    return css(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    center,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    borderRadius, {
       background: `var(--ds-background-neutral, ${N20})`,
       color: `var(--ds-text-subtle, ${N800})`,
       maxHeight: '100%',
       maxWidth: '100%'
-    }, getConvertedDimension(dimensions), {
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    getConvertedDimension(dimensions), {
       display: 'flex',
       flexDirection: 'column',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       p: {
         fontSize: `${fontSize()}px`,
         textAlign: 'center',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
       }
     });
@@ -56,13 +65,16 @@ export class UnhandledErrorCard extends Component {
       dimensions,
       onClick
     } = this.props;
-    return jsx("div", {
-      css: wrapperStyles(dimensions),
-      onClick: onClick
-    }, jsx(WarningIcon, {
-      label: "Error",
-      primaryColor: `var(--ds-icon-warning, ${Y500})`,
-      size: "medium"
-    }), jsx("p", null, "We couldn't load this content"));
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      jsx("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, jsx(WarningIcon, {
+        label: "Error",
+        primaryColor: `var(--ds-icon-warning, ${Y500})`,
+        size: "medium"
+      }), jsx("p", null, "We couldn't load this content"))
+    );
   }
 }

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { fileCardImageViewSelector } from '../../classnames';
 const imageContainerStyles = css({

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
@@ -19,36 +20,36 @@ export const wrapperStyles = ({
   shouldDisplayTooltip,
   mediaCardCursor
 }) => css`
-  ${transition()}
-  box-sizing: border-box;
-  * {
-    box-sizing: border-box;
-  }
-  position: relative;
-  font-family: ${fontFamily()};
-  ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
+	${transition()}
+	box-sizing: border-box;
+	* {
+		box-sizing: border-box;
+	}
+	position: relative;
+	font-family: ${fontFamily()};
+	${getWrapperDimensions(dimensions, appearance)}
+	${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
   ${borderRadius}
   ${getCursorStyle(mediaCardCursor)}
   ${getWrapperShadow(disableOverlay, selected)}
   ${generateResponsiveStyles(breakpoint)};
-  ${hideNativeBrowserTextSelectionStyles}
+	${hideNativeBrowserTextSelectionStyles}
 
-  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
+	/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
   ${getClickablePlayButtonStyles(isPlayButtonClickable)}
   ${getSelectableTickBoxStyles(isTickBoxSelectable)}
   &:hover .${blanketClassName} {
-    ${fixedBlanketStyles}
-  }
-  &:hover .${actionsBarClassName}, &:focus-within .${actionsBarClassName} {
-    ${fixedActionBarStyles}
-  }
+		${fixedBlanketStyles}
+	}
+	&:hover .${actionsBarClassName}, &:focus-within .${actionsBarClassName} {
+		${fixedActionBarStyles}
+	}
 
-  /* Tooltip does not support percentage dimensions. We enforce them here */
-  ${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
+	/* Tooltip does not support percentage dimensions. We enforce them here */
+	${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
 
-  button:focus + & {
-    outline: solid 2px ${`var(--ds-border-focused, ${B100})`};
-  }
+	button:focus + & {
+		outline: solid 2px ${`var(--ds-border-focused, ${B100})`};
+	}
 `;
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
@@ -24,7 +25,9 @@ export const Wrapper = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: newFileExperienceClassName,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: wrapperStyles({
       breakpoint,
       dimensions,

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

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useEffect, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';