@atlaskit/media-card 77.12.1 → 77.12.3

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

@@ -271,10 +271,24 @@ export const FileCard = ({
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  const onSvgError = error => {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   const onImageError = newCardPreview => {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageErrorBase(newCardPreview);
   };
+  const onSvgLoad = () => {
+    setPreviewDidRender(true);
+  };
   const onImageLoad = newCardPreview => {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -400,7 +414,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   useEffect(() => {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
     /**
      * 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
@@ -410,7 +424,7 @@ export const FileCard = ({
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -595,8 +609,8 @@ export const FileCard = ({
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,
     progress: uploadProgressRef.current,
-    onImageError: onImageError,
-    onImageLoad: onImageLoad,
+    onError: onSvgError,
+    onLoad: onSvgLoad,
     mediaCardCursor: mediaCardCursor,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     openMediaViewerButtonRef: mediaViewerButtonRef

package/dist/es2019/card/v2/svgView/errors.js

@@ -0,0 +1,10 @@
+export const getErrorReason = svgReason => {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    default:
+      return 'svg-unknown-error';
+  }
+};

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';
@@ -12,6 +13,8 @@ import { useBreakpoint } from '../../useBreakpoint';
 import MediaSvg from '@atlaskit/media-svg';
 import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+import { MediaCardError } from '../../../errors';
+import { getErrorReason } from './errors';
 export const convertResizeMode = resizeMode => {
   switch (resizeMode) {
     case 'crop':
@@ -40,7 +43,9 @@ export const SvgViewBase = ({
   alt,
   resizeMode,
   shouldOpenMediaViewer,
-  openMediaViewerButtonRef = null
+  openMediaViewerButtonRef = null,
+  onLoad,
+  onError
 }) => {
   const [didSvgRender, setDidSvgRender] = useState(false);
   const [didPreviewRender, setDidPreviewRender] = useState(false);
@@ -50,6 +55,11 @@ export const SvgViewBase = ({
   const onSvgLoad = evt => {
     setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  const onSvgError = err => {
+    const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   const onPreviewLoad = () => {
     setDidPreviewRender(true);
@@ -85,6 +95,7 @@ export const SvgViewBase = ({
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

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

package/dist/es2019/utils/analytics/analytics.js

@@ -38,6 +38,7 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'success',
@@ -130,6 +131,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
   action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'fail',
@@ -158,6 +160,7 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
   action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'fail',

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

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';

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.1";
+var packageVersion = "77.12.3";
 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';