@atlaskit/media-card 77.12.1 → 77.12.2

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

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

@@ -1,6 +1,8 @@
 /**@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';
@@ -8,7 +10,9 @@ var getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 var wrapperStyles = function wrapperStyles(selected) {
-  return css(transition && 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 && transition(), {
     fontSize: '14px',
     width: '14px',
     height: '14px',
@@ -17,18 +21,24 @@ var wrapperStyles = function wrapperStyles(selected) {
     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 var TickBoxWrapper = function 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/esm/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 var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    backgroundColor: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
+    backgroundColor: "var(--ds-surface, ".concat(
+    // 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, ".concat(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';
 var infoStyles = "white-space: nowrap;overflow: hidden;";
@@ -34,27 +39,41 @@ export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;
   return 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 var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
   return 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 var 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 var 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/esm/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 var TitleBoxWrapper = function TitleBoxWrapper(props) {
@@ -6,7 +7,9 @@ export var TitleBoxWrapper = function TitleBoxWrapper(props) {
     titleBoxBgColor = props.titleBoxBgColor;
   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
@@ -15,29 +18,39 @@ export var TitleBoxWrapper = function TitleBoxWrapper(props) {
 };
 export var TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxHeader",
-    css: titleBoxHeaderStyles({
-      hasIconOverlap: 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: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export var TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxFooter",
-    css: titleBoxFooterStyles({
-      hasIconOverlap: 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: hasIconOverlap
+      })
+    }, props.children)
+  );
 };
 export var TitleBoxIcon = function 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 var ErrorMessageWrapper = function 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/esm/card/ui/unhandledErrorCard/index.js

@@ -7,6 +7,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @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';
@@ -41,17 +42,25 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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, ".concat(N20, ")"),
       color: "var(--ds-text-subtle, ".concat(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: "".concat(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'
       }
     });
@@ -72,14 +81,17 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         dimensions = _this$props.dimensions,
         onClick = _this$props.onClick;
-      return jsx("div", {
-        css: wrapperStyles(dimensions),
-        onClick: onClick
-      }, jsx(WarningIcon, {
-        label: "Error",
-        primaryColor: "var(--ds-icon-warning, ".concat(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, ".concat(Y500, ")"),
+          size: "medium"
+        }), jsx("p", null, "We couldn't load this content"))
+      );
     }
   }]);
   return UnhandledErrorCard;

package/dist/esm/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';
 var imageContainerStyles = css({

package/dist/esm/card/ui/wrapper/styles.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 { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';