@atlaskit/media-card 76.0.4 → 76.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 76.0.6
+
+### Patch Changes
+
+- [`4807883cf8e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4807883cf8e) - [MEX-2468] Disable Tooltip in Media Card in Hybrid Renderer
+
+## 76.0.5
+
+### Patch Changes
+
+- [`48e4a655534`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48e4a655534) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 76.0.4
 
 ### Patch Changes

package/compass.yml

@@ -0,0 +1,49 @@
+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.
+configVersion: 1
+typeId: UI_ELEMENT
+ownerId: 'ari:cloud:teams::team/ef910622-ce0a-44a0-b441-ba89efe7891b'
+fields:
+  lifecycle: Active
+  tier: 2
+labels:
+  - atlassian-platform
+customFields:
+  - name: Dev Owner
+    type: user
+    value: null
+  - name: Product
+    type: text
+    value: null
+  - name: Test
+    type: text
+    value: null
+links:
+  - name: ''
+    type: REPOSITORY
+    url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/media/media-card/'
+  - name: ''
+    type: DOCUMENT
+    url: 'https://atlaskit.atlassian.com/packages/media/media-card'
+  - name: '' # Tome Capability
+    type: OTHER_LINK
+    url: 'https://tome.prod.atl-paas.net/capability/b7288340-829a-4e42-a694-6cd257dfe552'
+  - name: Media By Product
+    type: DASHBOARD
+    url: 'https://atlassian.signalfx.com/#/dashboard/E-vk3wqAwAA?groupId=E-vkzo1AwAA&configId=E-vk5fsAwAA&startTime=-7d&endTime=Now'
+  - name: ''
+    type: CHAT_CHANNEL
+    url: 'https://atlassian.slack.com/archives/C020CGJDJ3A'
+  - name: ''
+    type: ON_CALL
+    url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/b62291ff-4029-4f26-b7fc-d75d46d7aebc'
+  - name: ''
+    type: PROJECT
+    url: 'https://product-fabric.atlassian.net/jira/software/c/projects/MEX/boards/713'
+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

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "76.0.4";
+var packageVersion = "76.0.6";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -542,7 +542,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         titleBoxIcon = _this$props8.titleBoxIcon,
         ssr = _this$props8.ssr,
         useInlinePlayer = _this$props8.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer;
+        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
+        shouldHideTooltip = _this$props8.shouldHideTooltip;
       var mediaItemType = identifier.mediaItemType;
       var _this$state2 = _this.state,
         status = _this$state2.status,
@@ -593,7 +594,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         onImageLoad: withCallbacks ? _this.onImageLoad : undefined,
         nativeLazyLoad: nativeLazyLoad,
         forceSyncDisplay: forceSyncDisplay,
-        mediaCardCursor: mediaCardCursor
+        mediaCardCursor: mediaCardCursor,
+        shouldHideTooltip: shouldHideTooltip
       });
       return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
         cardEl: cardRef,

package/dist/cjs/card/cardView.js

@@ -403,14 +403,15 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         selectable = _this$props8.selectable,
         disableOverlay = _this$props8.disableOverlay,
         cardPreview = _this$props8.cardPreview,
-        mediaCardCursor = _this$props8.mediaCardCursor;
+        mediaCardCursor = _this$props8.mediaCardCursor,
+        shouldHideTooltip = _this$props8.shouldHideTooltip;
       var _ref8 = metadata || {},
         name = _ref8.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
       // Disable tooltip for Media Single
-      var shouldDisplayTooltip = !disableOverlay;
+      var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
       return (0, _react.jsx)(_wrapper.Wrapper, {
         testId: testId || 'media-card-view',
         dimensions: dimensions,

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 = "76.0.4";
+var packageVersion = "76.0.6";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -14,7 +14,7 @@ exports.actionsBarClassName = actionsBarClassName;
 var fixedActionBarStyles = "opacity: 1;";
 exports.fixedActionBarStyles = fixedActionBarStyles;
 var wrapperStyles = function wrapperStyles(isFixed) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)());
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 };
 exports.wrapperStyles = wrapperStyles;
 wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -17,6 +17,8 @@ exports.tickboxFixedStyles = tickboxFixedStyles;
 var getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(_colors.B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.getSelectedStyles = getSelectedStyles;
 var wrapperStyles = function wrapperStyles(selected) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), (0, _styles.transition)(), getSelectedStyles(selected));

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

@@ -57,7 +57,7 @@ var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
 };
 exports.titleBoxFooterStyles = titleBoxFooterStyles;
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-var titleBoxIconStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  bottom: 0px;\n"])));
+var titleBoxIconStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
 exports.titleBoxIconStyles = titleBoxIconStyles;
-var errorMessageWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: 4px;\n      margin-right: 4px;\n    }\n  }\n"])));
+var errorMessageWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.errorMessageWrapperStyles = errorMessageWrapperStyles;

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "76.0.4",
+        packageName: "76.0.6",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "76.0.4";
+var packageVersion = "76.0.6";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "76.0.4",
+	"version": "76.0.6",
 	"sideEffects": false
 }

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "76.0.4";
+const packageVersion = "76.0.6";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -497,7 +497,8 @@ export class CardBase extends Component {
         titleBoxIcon,
         ssr,
         useInlinePlayer,
-        shouldOpenMediaViewer
+        shouldOpenMediaViewer,
+        shouldHideTooltip
       } = this.props;
       const {
         mediaItemType
@@ -554,7 +555,8 @@ export class CardBase extends Component {
         onImageLoad: withCallbacks ? this.onImageLoad : undefined,
         nativeLazyLoad: nativeLazyLoad,
         forceSyncDisplay: forceSyncDisplay,
-        mediaCardCursor: mediaCardCursor
+        mediaCardCursor: mediaCardCursor,
+        shouldHideTooltip: shouldHideTooltip
       });
       return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
         cardEl: cardRef,

package/dist/es2019/card/cardView.js

@@ -387,7 +387,8 @@ export class CardViewBase extends React.Component {
       selectable,
       disableOverlay,
       cardPreview,
-      mediaCardCursor
+      mediaCardCursor,
+      shouldHideTooltip
     } = this.props;
     const {
       name
@@ -396,7 +397,7 @@ export class CardViewBase extends React.Component {
     const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
     const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
     // Disable tooltip for Media Single
-    const shouldDisplayTooltip = !disableOverlay;
+    const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
     return jsx(Wrapper, {
       testId: testId || 'media-card-view',
       dimensions: dimensions,

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "76.0.4";
+const packageVersion = "76.0.6";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -6,8 +6,8 @@ export const wrapperStyles = isFixed => css`
   ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
   ${transition()}
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: ${"var(--ds-space-100, 8px)"};
+  right: ${"var(--ds-space-100, 8px)"};
   display: flex;
   flex-flow: row nowrap;
   align-items: center;

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

@@ -8,6 +8,8 @@ export const tickboxFixedStyles = `
 `;
 export const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
       color: ${"var(--ds-icon-inverse, white)"};` : ``;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const wrapperStyles = selected => css`
   ${transition()}
   font-size: 14px;

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

@@ -64,7 +64,7 @@ export const titleBoxFooterStyles = ({
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 export const titleBoxIconStyles = css`
   position: absolute;
-  right: 4px;
+  right: ${"var(--ds-space-050, 4px)"};
   bottom: 0px;
 `;
 export const errorMessageWrapperStyles = css`
@@ -74,8 +74,8 @@ export const errorMessageWrapperStyles = css`
   span {
     vertical-align: middle;
     :nth-child(2) {
-      margin-left: 4px;
-      margin-right: 4px;
+      margin-left: ${"var(--ds-space-050, 4px)"};
+      margin-right: ${"var(--ds-space-050, 4px)"};
     }
   }
 `;

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: "76.0.4",
+      packageName: "76.0.6",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

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 = "76.0.4";
+const packageVersion = "76.0.6";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "76.0.4",
+	"version": "76.0.6",
 	"sideEffects": false
 }

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "76.0.4";
+var packageVersion = "76.0.6";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -534,7 +534,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         titleBoxIcon = _this$props8.titleBoxIcon,
         ssr = _this$props8.ssr,
         useInlinePlayer = _this$props8.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer;
+        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
+        shouldHideTooltip = _this$props8.shouldHideTooltip;
       var mediaItemType = identifier.mediaItemType;
       var _this$state2 = _this.state,
         status = _this$state2.status,
@@ -585,7 +586,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         onImageLoad: withCallbacks ? _this.onImageLoad : undefined,
         nativeLazyLoad: nativeLazyLoad,
         forceSyncDisplay: forceSyncDisplay,
-        mediaCardCursor: mediaCardCursor
+        mediaCardCursor: mediaCardCursor,
+        shouldHideTooltip: shouldHideTooltip
       });
       return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
         cardEl: cardRef,

package/dist/esm/card/cardView.js

@@ -397,14 +397,15 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         selectable = _this$props8.selectable,
         disableOverlay = _this$props8.disableOverlay,
         cardPreview = _this$props8.cardPreview,
-        mediaCardCursor = _this$props8.mediaCardCursor;
+        mediaCardCursor = _this$props8.mediaCardCursor,
+        shouldHideTooltip = _this$props8.shouldHideTooltip;
       var _ref8 = metadata || {},
         name = _ref8.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
       // Disable tooltip for Media Single
-      var shouldDisplayTooltip = !disableOverlay;
+      var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
       return jsx(Wrapper, {
         testId: testId || 'media-card-view',
         dimensions: dimensions,

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

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

@@ -5,6 +5,6 @@ import { transition } from '../styles';
 export var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition());
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 };
 wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -8,6 +8,8 @@ export var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-backgr
 export var getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var wrapperStyles = function wrapperStyles(selected) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), transition(), getSelectedStyles(selected));
 };

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

@@ -47,5 +47,5 @@ export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export var titleBoxIconStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  bottom: 0px;\n"])));
-export var errorMessageWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: 4px;\n      margin-right: 4px;\n    }\n  }\n"])));
+export var titleBoxIconStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
+export var errorMessageWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "76.0.4",
+        packageName: "76.0.6",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "76.0.4";
+var packageVersion = "76.0.6";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "76.0.4",
+	"version": "76.0.6",
 	"sideEffects": false
 }

package/dist/types/card/cardView.d.ts

@@ -25,6 +25,7 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
 }
 export interface CardViewState {
     elementWidth?: number;

package/dist/types/types.d.ts

@@ -85,6 +85,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;
     readonly ssr?: SSR;
+    readonly shouldHideTooltip?: boolean;
 }
 export interface CardState {
     status: CardStatus;

package/dist/types-ts4.5/card/cardView.d.ts

@@ -25,6 +25,7 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
 }
 export interface CardViewState {
     elementWidth?: number;

package/dist/types-ts4.5/types.d.ts

@@ -85,6 +85,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;
     readonly ssr?: SSR;
+    readonly shouldHideTooltip?: boolean;
 }
 export interface CardState {
     status: CardStatus;

package/example-helpers/cardViewWrapper.tsx

@@ -1,5 +1,6 @@
 /**@jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
 
 type CardViewWrapperProps = {
   wrapperDimensions: { width: string; height: string };
@@ -14,12 +15,14 @@ const displayInlineStyles = (displayInline?: boolean) => {
 const cardWrapperStyles = ({
   wrapperDimensions,
   displayInline,
-}: CardViewWrapperProps) => css`
-  ${displayInlineStyles(displayInline)}
-  width: ${wrapperDimensions.width};
-  height: ${wrapperDimensions.height};
-  margin: 15px 20px;
-`;
+}: CardViewWrapperProps) =>
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  css`
+    ${displayInlineStyles(displayInline)}
+    width: ${wrapperDimensions.width};
+    height: ${wrapperDimensions.height};
+    margin: 15px ${token('space.250', '20px')};
+  `;
 
 export const CardViewWrapper = (props: CardViewWrapperProps) => {
   return <div css={cardWrapperStyles(props)}>{props.children}</div>;

package/example-helpers/styles.ts

@@ -2,11 +2,12 @@ import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
 export const editableCardOptionsStyles = css`
-  padding: 20px;
+  padding: ${token('space.250', '20px')};
   border-bottom: 1px solid ${token('color.border', '#ccc')};
   max-width: 700px;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const sliderWrapperStyles = css`
   display: flex;
   width: 50%;
@@ -17,9 +18,10 @@ export const sliderWrapperStyles = css`
   }
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const editableCardContentStyles = css`
   /* Not making the wrapper fancier or center elements in order to have a more realistic scenario */
-  padding: 20px;
+  padding: ${token('space.250', '20px')};
   border: 2px dashed;
   margin: 0 10px 50px 10px;
   overflow: hidden;
@@ -30,6 +32,7 @@ export const editableCardContentStyles = css`
   box-sizing: border-box;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const optionsWrapperStyles = css`
   display: flex;
 
@@ -39,8 +42,9 @@ export const optionsWrapperStyles = css`
   }
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const cardDimensionsWrapperStyles = css`
-  margin: 10px 10px 20px 10px;
+  margin: 10px 10px ${token('space.250', '20px')} 10px;
   display: flex;
 
   > div {
@@ -58,6 +62,7 @@ export const cardPreviewWrapperStyles = css`
   flex: 1;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const cardWrapperStyles = css`
   border: 1px solid ${token('color.border.bold', 'black')};
   padding: 10px;
@@ -69,11 +74,13 @@ export const cardWrapperStyles = css`
   display: inline-block;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const cardFlowHeaderStyles = css`
-  margin: 20px auto;
+  margin: ${token('space.250', '20px')} auto;
   padding: 10px 0;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const externalIdentifierWrapperStyles = css`
   display: flex;
   justify-content: space-around;
@@ -85,18 +92,19 @@ export const externalIdentifierWrapperStyles = css`
 `;
 
 export const unhandledErrorCardWrapperStyles = css`
-  padding: 20px;
+  padding: ${token('space.250', '20px')};
 
   > div:first-child {
     display: flex;
-    margin-bottom: 20px;
+    margin-bottom: ${token('space.250', '20px')};
   }
 
   label {
-    margin-right: 20px;
+    margin-right: ${token('space.250', '20px')};
   }
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const inlineCardVideoWrapperItemStyles = css`
   padding: 10px;
   border: 1px solid ${token('color.border.bold', 'black')};
@@ -116,6 +124,7 @@ export const mediaViewerExampleWrapperStyles = css`
   display: flex;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const mediaInlineWrapperStyles = css`
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "76.0.4",
+  "version": "76.0.6",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/dropdown-menu": "^11.9.0",
+    "@atlaskit/dropdown-menu": "^11.10.0",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/media-client": "^23.0.0",
+    "@atlaskit/media-client": "^23.1.0",
     "@atlaskit/media-common": "^7.0.0",
-    "@atlaskit/media-ui": "^23.0.0",
+    "@atlaskit/media-ui": "^23.1.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -64,12 +64,12 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.5.0",
     "@atlaskit/media-core": "^34.1.0",
-    "@atlaskit/media-picker": "^66.0.0",
+    "@atlaskit/media-picker": "^66.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
@@ -98,7 +98,8 @@
   "techstack": {
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   },

package/report.api.md

@@ -152,6 +152,8 @@ export interface CardProps extends SharedCardProps, CardEventProps {
   // (undocumented)
   readonly shouldEnableDownloadButton?: boolean;
   // (undocumented)
+  readonly shouldHideTooltip?: boolean;
+  // (undocumented)
   readonly shouldOpenMediaViewer?: boolean;
   // (undocumented)
   readonly ssr?: SSR;

package/tmp/api-report-tmp.d.ts

@@ -129,6 +129,8 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     // (undocumented)
     readonly shouldEnableDownloadButton?: boolean;
     // (undocumented)
+    readonly shouldHideTooltip?: boolean;
+    // (undocumented)
     readonly shouldOpenMediaViewer?: boolean;
     // (undocumented)
     readonly ssr?: SSR;