@atlaskit/media-card 77.12.1 → 77.12.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-card
 
+## 77.12.3
+
+### Patch Changes
+
+- [`cd38da52e02b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd38da52e02b7) -
+  Media Card handles SVG errors and logs extra info for monitoring
+
+## 77.12.2
+
+### Patch Changes
+
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+
 ## 77.12.1
 
 ### Patch Changes

package/compass.yml

@@ -1,6 +1,10 @@
 name: Media Card
 id: 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/6d687ccf-d7c3-4faf-90a7-7397622c140f'
-description: This package provides the capability to display a preview of a file that has been already uploaded. It leverages the returned id opon a successful file upload and does all the work required to show the preview. Additionaly it also takes care of displaying the upload status of the file.
+description:
+  This package provides the capability to display a preview of a file that has been already
+  uploaded. It leverages the returned id opon a successful file upload and does all the work
+  required to show the preview. Additionaly it also takes care of displaying the upload status of
+  the file.
 configVersion: 1
 typeId: UI_ELEMENT
 ownerId: 'ari:cloud:teams::team/ef910622-ce0a-44a0-b441-ba89efe7891b'
@@ -44,6 +48,5 @@ links:
 relationships:
   DEPENDS_ON:
     - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/652381b6-c323-4b50-bf31-c94941a0b6ef'
-
 # Learn more about formatting compass.yml:
-# https://go.atlassian.com/compass-yml-format
+# https://go.atlassian.com/compass-yml-format

package/dist/cjs/card/card.js

@@ -50,7 +50,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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.1";
+var packageVersion = "77.12.3";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardView.js

@@ -42,7 +42,7 @@ var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewe
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
+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
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.

package/dist/cjs/card/inlinePlayerWrapper.js

@@ -7,6 +7,7 @@ exports.InlinePlayerWrapper = void 0;
 var _react = require("@emotion/react");
 var _inlinePlayerWrapperStyles = require("./inlinePlayerWrapperStyles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWrapper(props) {
   var testId = props.testId,
@@ -19,7 +20,9 @@ var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWra
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: _inlinePlayerWrapperStyles.inlinePlayerClassName,
+    className: _inlinePlayerWrapperStyles.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: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
       selected: selected,
       dimensions: dimensions

package/dist/cjs/card/inlinePlayerWrapperStyles.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
 var _selection = require("@atlaskit/editor-shared-styles/selection");
-var _templateObject;
+var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /*
  * Used to display the blue border around a selected card without
  * shrinking the image OR growing the card size

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.1";
+var packageVersion = "77.12.3";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -7,10 +7,13 @@ exports.ActionsBarWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ActionsBarWrapper = exports.ActionsBarWrapper = function ActionsBarWrapper(props) {
   return (0, _react.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: (0, _styles.wrapperStyles)(props.isFixed)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -11,11 +11,15 @@ var _react2 = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var CardActionButton = exports.CardActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)("button", (0, _extends2.default)({}, 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: (0, _styles.cardActionButtonStyles)(props)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

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

@@ -19,7 +19,7 @@ var _preventClickThrough = require("../../../../utils/preventClickThrough");
 var _analytics = require("../../../../utils/analytics");
 var _analyticsNext = require("@atlaskit/analytics-next");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
+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
 var CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
   return (0, _react.jsx)(_cardActionIconButton.CardActionIconButton, props);
 };

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

@@ -9,9 +9,13 @@ var _colors = require("@atlaskit/theme/colors");
 var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("../../styles");
 var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
   boxSizing: 'border-box',
   fontFamily: (0, _constants.fontFamily)(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '*': {
     boxSizing: 'border-box'
   },
@@ -32,10 +36,18 @@ var cardActionButtonStyles = exports.cardActionButtonStyles = function cardActio
   return (0, _react.css)({
     appearance: 'none',
     border: 'none'
-  }, _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.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
+  _mediaUi.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
+  _mediaUi.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
+  (0, _mediaUi.size)(26), {
     color: "var(--ds-icon, ".concat(_colors.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/cjs/card/ui/actionsBar/styles.js

@@ -6,16 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
 var _react = require("@emotion/react");
 var _styles = require("../styles");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var actionsBarClassName = exports.actionsBarClassName = 'media-card-actions-bar';
 var fixedActionBarStyles = exports.fixedActionBarStyles = "opacity: 1;";
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(isFixed) {
-  return (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.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
+    (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.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/cjs/card/ui/blanket/blanket.js

@@ -7,10 +7,12 @@ exports.Blanket = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var Blanket = exports.Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   return (0, _react.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: (0, _styles.blanketStyles)(isFixed)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -7,10 +7,14 @@ exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName =
 var _react = require("@emotion/react");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var blanketClassName = exports.blanketClassName = 'media-card-blanket';
 var fixedBlanketStyles = exports.fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(_colors.N90A, ")"), ";");
 var blanketStyles = exports.blanketStyles = function blanketStyles(isFixed) {
-  return (0, _react.css)((0, _styles.transition)(), {
+  return (0, _react.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
+  (0, _styles.transition)(), {
     position: 'absolute',
     width: '100%',
     height: '100%',
@@ -18,6 +22,8 @@ var blanketStyles = exports.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/cjs/card/ui/iconMessage/iconMessageWrapper.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.IconMessageWrapper = void 0;
 var _react = require("@emotion/react");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var breatheAnimation = (0, _react.keyframes)({
   '0%': {

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

@@ -7,12 +7,15 @@ exports.IconWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var IconWrapper = exports.IconWrapper = function IconWrapper(props) {
   var breakpoint = props.breakpoint,
     hasTitleBox = props.hasTitleBox;
   return (0, _react.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: (0, _styles.iconWrapperStyles)({
       breakpoint: breakpoint,
       hasTitleBox: hasTitleBox

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

@@ -7,6 +7,8 @@ exports.iconWrapperStyles = void 0;
 exports.titleBoxHeight = titleBoxHeight;
 var _react = require("@emotion/react");
 var _common = require("../common");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 function titleBoxHeight(hasTitleBox, breakpoint) {
   // there is no titlebox
   if (!hasTitleBox) {
@@ -23,6 +25,7 @@ var iconWrapperStyles = exports.iconWrapperStyles = function iconWrapperStyles(_
   return (0, _react.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/cjs/card/ui/openMediaViewerButton/openMediaViewerButton.js

@@ -4,41 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visuallyHiddenStyles = exports.default = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
+var _primitives = require("@atlaskit/primitives");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["fileName", "innerRef"];
-/** @jsx jsx */
-var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react.css)({
-  width: '1px',
-  height: '1px',
-  padding: 0,
-  position: 'absolute',
-  border: 0,
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-});
 var OpenMediaViewerButton = function OpenMediaViewerButton(_ref) {
   var fileName = _ref.fileName,
     innerRef = _ref.innerRef,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)("button", (0, _extends2.default)({
-    ref: innerRef,
-    css: visuallyHiddenStyles
+  return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
+    ref: innerRef
   }, props), intl.formatMessage(_mediaUi.messages.open_file_in_viewer, {
     name: fileName
-  }));
+  })));
 };
 var OpenMediaViewerButtonWrapper = function OpenMediaViewerButtonWrapper(props) {
-  return props.intl ? (0, _react.jsx)(OpenMediaViewerButton, props) : (0, _react.jsx)(_reactIntlNext.IntlProvider, {
+  return props.intl ? /*#__PURE__*/_react.default.createElement(OpenMediaViewerButton, props) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
     locale: "en"
-  }, (0, _react.jsx)(OpenMediaViewerButton, props));
+  }, /*#__PURE__*/_react.default.createElement(OpenMediaViewerButton, props));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(OpenMediaViewerButtonWrapper, {
   enforceContext: false

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

@@ -7,9 +7,10 @@ exports.PlayButtonBackground = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var PlayButtonBackground = exports.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 (0, _react.jsx)("div", {
     css: _styles.backgroundStyles,
     className: _styles.bkgClassName

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

@@ -7,10 +7,11 @@ exports.PlayButtonWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var PlayButtonWrapper = exports.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
     (0, _react.jsx)("div", {
       css: _styles.playButtonWrapperStyles,
       className: _styles.playButtonClassName

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.playButtonWrapperStyles = exports.playButtonClassName = exports.fixedPlayButtonStyles = exports.bkgClassName = exports.backgroundStyles = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var playButtonClassName = exports.playButtonClassName = 'media-card-play-button';
 var bkgClassName = exports.bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 var fixedPlayButtonStyles = exports.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
 var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)({
   position: 'absolute',
   top: 0,
@@ -21,10 +25,13 @@ var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)(
   alignItems: 'center',
   justifyContent: 'center',
   color: "var(--ds-icon-inverse, ".concat(_colors.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
 var backgroundStyles = exports.backgroundStyles = (0, _react.css)({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

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

@@ -7,6 +7,7 @@ exports.StyledBar = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var StyledBar = exports.StyledBar = function StyledBar(props) {
   var progress = props.progress,
@@ -16,7 +17,9 @@ var StyledBar = exports.StyledBar = function StyledBar(props) {
   return (0, _react.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: (0, _styles.styledBarStyles)({
       progress: progress,
       breakpoint: breakpoint,

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

@@ -10,6 +10,8 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _common = require("../common");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var height = 3;
 var padding = 1;
 var width = 95; // %
@@ -40,6 +42,7 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var styledBarStyles = exports.styledBarStyles = function styledBarStyles(props) {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return (0, _react.css)(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -9,12 +9,17 @@ var _styles = require("./styles");
 var _styles2 = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(_colors.B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 var wrapperStyles = function wrapperStyles(selected) {
-  return (0, _react.css)(_styles2.transition && (0, _styles2.transition)(), {
+  return (0, _react.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
+  _styles2.transition && (0, _styles2.transition)(), {
     fontSize: '14px',
     width: '14px',
     height: '14px',
@@ -23,18 +28,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';
 var TickBoxWrapper = exports.TickBoxWrapper = function TickBoxWrapper(props) {
   return (0, _react.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/cjs/card/ui/titleBox/styles.js

@@ -8,6 +8,8 @@ var _react = require("@emotion/react");
 var _common = require("../common");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
@@ -24,14 +26,18 @@ var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWra
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    backgroundColor: "var(--ds-surface, ".concat((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
+    backgroundColor: "var(--ds-surface, ".concat(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    (0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
     color: "var(--ds-text, ".concat(_colors.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;";
@@ -40,27 +46,41 @@ var titleBoxHeaderStyles = exports.titleBoxHeaderStyles = function titleBoxHeade
   var hasIconOverlap = _ref2.hasIconOverlap;
   return (0, _react.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';
 var titleBoxFooterStyles = exports.titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
   return (0, _react.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
 var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.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
 var errorMessageWrapperStyles = exports.errorMessageWrapperStyles = (0, _react.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)"