@atlaskit/media-card 77.12.0 → 77.12.2

package/dist/es2019/card/v2/cardviews/index.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, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/es2019/card/v2/cardviews/loadingCardView.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 SpinnerIcon from '@atlaskit/spinner';

package/dist/es2019/card/v2/cardviews/processingCardView.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';

package/dist/es2019/card/v2/cardviews/videoCardView.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';

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

@@ -400,7 +400,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   useEffect(() => {
-    if (getBooleanFF('platform.media-svg-rendering') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before

package/dist/es2019/card/v2/svgView/svgView.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, { useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';

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

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -17,17 +17,17 @@ const ErrorBoundaryComponent = ({
   };
 
   /* Note:
-   - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
-   - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
-     color: `${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600),
-    })}`,
-    backgroundColor: `${themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80),
-    })}`,
-   */
+    - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
+    - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
+      color: `${themed({
+       light: token('color.text', N900),
+       dark: token('color.text', DN600),
+     })}`,
+     backgroundColor: `${themed({
+       light: token('color.background.neutral', N30A),
+       dark: token('color.background.neutral', DN80),
+     })}`,
+    */
 
   const style = {
     lineHeight: '16px',

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
@@ -9,12 +10,15 @@ export class ErrorIcon extends Component {
     const {
       size
     } = this.props;
-    return jsx("div", {
-      css: errorIconWrapperStyles
-    }, jsx(WarningIcon, {
-      label: "Error",
-      size: size
-    }));
+    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", {
+        css: errorIconWrapperStyles
+      }, jsx(WarningIcon, {
+        label: "Error",
+        size: size
+      }))
+    );
   }
 }
 _defineProperty(ErrorIcon, "defaultProps", {

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

@@ -1,4 +1,7 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

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

@@ -1,11 +1,15 @@
 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 { wrapperStyles } from './styles';
 export const Wrapper = props => {
-  return jsx("div", _extends({
-    css: wrapperStyles({
-      dimensions: props.dimensions
-    })
-  }, props), 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", _extends({
+      css: wrapperStyles({
+        dimensions: props.dimensions
+      })
+    }, props), props.children)
+  );
 };

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

@@ -1,14 +1,21 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
   dimensions
-}) => css(center, {
+}) => 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, {
   background: `var(--ds-background-neutral, ${N20})`,
   color: `var(--ds-icon, ${N50})`
-}, 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
+borderRadius, {
   maxHeight: '100%',
   maxWidth: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: dimensions.width,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   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.12.0";
+const packageVersion = "77.12.2";
 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.12.0";
+var packageVersion = "77.12.2";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -281,8 +281,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-        */
+             If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview)) {
           _this.ssrReliability.server = failedSSRObject;
@@ -330,8 +330,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
-        */
+             If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
           _this.ssrReliability.server = {

package/dist/esm/card/cardView.js

@@ -10,6 +10,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 = _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 */
+// 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 { withAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/card/inlinePlayerWrapper.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 { inlinePlayerWrapperStyles, inlinePlayerClassName } from './inlinePlayerWrapperStyles';
 export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
@@ -12,7 +13,9 @@ export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: inlinePlayerClassName,
+    className: inlinePlayerClassName
+    // 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: inlinePlayerWrapperStyles({
       selected: selected,
       dimensions: dimensions

package/dist/esm/card/inlinePlayerWrapperStyles.js

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
@@ -17,6 +18,6 @@ export var inlinePlayerClassName = 'media-card-inline-player';
 export var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
   var dimensions = _ref2.dimensions,
     selected = _ref2.selected;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), getDimensionsWithDefault(dimensions).width || '100%', getDimensionsWithDefault(dimensions).height || 'auto', borderRadius(), getSelectedBorderStyle(selected));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: ", ";\n\theight: ", ";\n\toverflow: hidden;\n\tborder-radius: ", "px;\n\tposition: relative;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\n\t", "\n\n\tvideo {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), getDimensionsWithDefault(dimensions).width || '100%', getDimensionsWithDefault(dimensions).height || 'auto', borderRadius(), getSelectedBorderStyle(selected));
 };
 inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

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

@@ -1,9 +1,12 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { wrapperStyles, actionsBarClassName } from './styles';
 export var ActionsBarWrapper = function ActionsBarWrapper(props) {
   return jsx("div", {
-    id: "actionsBarWrapper",
+    id: "actionsBarWrapper"
+    // 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(props.isFixed)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { forwardRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { cardActionButtonStyles } from './styles';
 export var CardActionButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx("button", _extends({}, props, {
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
-    "aria-label": props.label,
+    "aria-label": props.label
+    // 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: cardActionButtonStyles(props)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/card/ui/actionsBar/cardActions/cardActionsView.js

@@ -6,6 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { CardActionIconButton } from './cardActionIconButton';

package/dist/esm/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 var 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'
   },
@@ -26,10 +30,18 @@ export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   return 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, ".concat(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/esm/card/ui/actionsBar/styles.js

@@ -1,15 +1,19 @@
+// 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 var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {
-  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'
-  });
+  return (
+    // 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)",
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      alignItems: 'center'
+    })
+  );
 };
 wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -1,9 +1,11 @@
 /**@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 var Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   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/esm/card/ui/blanket/styles.js

@@ -1,10 +1,13 @@
+// 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 var blanketClassName = 'media-card-blanket';
 export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
 export var blanketStyles = function blanketStyles(isFixed) {
-  return css(transition(), {
+  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
+  transition(), {
     position: 'absolute',
     width: '100%',
     height: '100%',
@@ -12,6 +15,8 @@ export var blanketStyles = function blanketStyles(isFixed) {
     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/esm/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';
 var breatheAnimation = keyframes({
   '0%': {

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

@@ -1,11 +1,14 @@
 /**@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 var IconWrapper = function IconWrapper(props) {
   var breakpoint = props.breakpoint,
     hasTitleBox = props.hasTitleBox;
   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: breakpoint,
       hasTitleBox: hasTitleBox

package/dist/esm/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 var iconWrapperStyles = function iconWrapperStyles(_ref) {
   return css({
     position: 'absolute',
     width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")"),
     display: 'flex',
     flexDirection: 'column',

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

@@ -1,37 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["fileName", "innerRef"];
-/** @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 var 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';
 var OpenMediaViewerButton = function OpenMediaViewerButton(_ref) {
   var fileName = _ref.fileName,
     innerRef = _ref.innerRef,
     props = _objectWithoutProperties(_ref, _excluded);
   var 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
-  }));
+  })));
 };
 var OpenMediaViewerButtonWrapper = function 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/esm/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 var PlayButtonBackground = function 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/esm/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 var PlayButtonWrapper = function 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/esm/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 var playButtonClassName = 'media-card-play-button';
@@ -5,6 +6,8 @@ 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");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -15,10 +18,13 @@ export var playButtonWrapperStyles = css({
   alignItems: 'center',
   justifyContent: 'center',
   color: "var(--ds-icon-inverse, ".concat(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 var backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

package/dist/esm/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 var StyledBar = function StyledBar(props) {
@@ -9,7 +10,9 @@ export var StyledBar = function 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: progress,
       breakpoint: breakpoint,

package/dist/esm/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';
@@ -33,6 +34,7 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export var styledBarStyles = function 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';