@atlaskit/media-card 76.0.6 → 76.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/media-card
 
+## 76.1.0
+
+### Minor Changes
+
+- [`f486dbd535c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f486dbd535c) - MEX-2481 Fix minor gap between image and border
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 76.0.6
 
 ### Patch Changes

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.6";
+var packageVersion = "76.1.0";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -543,7 +543,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         ssr = _this$props8.ssr,
         useInlinePlayer = _this$props8.useInlinePlayer,
         shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
-        shouldHideTooltip = _this$props8.shouldHideTooltip;
+        shouldHideTooltip = _this$props8.shouldHideTooltip,
+        expandByPixel = _this$props8.expandByPixel;
       var mediaItemType = identifier.mediaItemType;
       var _this$state2 = _this.state,
         status = _this$state2.status,
@@ -568,6 +569,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
       var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
+        expandByPixel: expandByPixel,
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,

package/dist/cjs/card/cardView.js

@@ -334,8 +334,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         resizeMode = _this$props6.resizeMode,
         onDisplayImage = _this$props6.onDisplayImage,
         nativeLazyLoad = _this$props6.nativeLazyLoad,
-        forceSyncDisplay = _this$props6.forceSyncDisplay;
+        forceSyncDisplay = _this$props6.forceSyncDisplay,
+        expandByPixel = _this$props6.expandByPixel;
       return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+        expandByPixel: expandByPixel,
         cardPreview: cardPreview,
         mediaType: mediaType,
         alt: alt,

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

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

@@ -21,7 +21,8 @@ var ImageRenderer = function ImageRenderer(_ref) {
     onDisplayImage = _ref.onDisplayImage,
     mediaType = _ref.mediaType,
     nativeLazyLoad = _ref.nativeLazyLoad,
-    forceSyncDisplay = _ref.forceSyncDisplay;
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    expandByPixel = _ref.expandByPixel;
   (0, _react.useEffect)(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -41,7 +42,8 @@ var ImageRenderer = function ImageRenderer(_ref) {
     onImageLoad: onLoad,
     onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    expandByPixel: expandByPixel
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
 };
 exports.ImageRenderer = ImageRenderer;

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

@@ -18,7 +18,7 @@ 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
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 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/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.6",
+        packageName: "76.1.0",
         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.6";
+var packageVersion = "76.1.0";
 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.6",
+	"version": "76.1.0",
 	"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.6";
+const packageVersion = "76.1.0";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -498,7 +498,8 @@ export class CardBase extends Component {
         ssr,
         useInlinePlayer,
         shouldOpenMediaViewer,
-        shouldHideTooltip
+        shouldHideTooltip,
+        expandByPixel
       } = this.props;
       const {
         mediaItemType
@@ -529,6 +530,7 @@ export class CardBase extends Component {
       const forceSyncDisplay = !!ssr;
       const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
       const card = /*#__PURE__*/React.createElement(CardView, {
+        expandByPixel: expandByPixel,
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,

package/dist/es2019/card/cardView.js

@@ -319,9 +319,11 @@ export class CardViewBase extends React.Component {
       resizeMode,
       onDisplayImage,
       nativeLazyLoad,
-      forceSyncDisplay
+      forceSyncDisplay,
+      expandByPixel
     } = this.props;
     return !!cardPreview && jsx(ImageRenderer, {
+      expandByPixel: expandByPixel,
       cardPreview: cardPreview,
       mediaType: mediaType,
       alt: alt,

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.6";
+const packageVersion = "76.1.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/imageRenderer/imageRenderer.js

@@ -11,7 +11,8 @@ export const ImageRenderer = ({
   onDisplayImage,
   mediaType,
   nativeLazyLoad,
-  forceSyncDisplay
+  forceSyncDisplay,
+  expandByPixel
 }) => {
   useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
@@ -32,6 +33,7 @@ export const ImageRenderer = ({
     onImageLoad: onLoad,
     onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    expandByPixel: expandByPixel
   }, resizeModeToMediaImageProps(resizeMode)));
 };

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

@@ -9,7 +9,7 @@ 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
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const wrapperStyles = selected => css`
   ${transition()}
   font-size: 14px;

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.6",
+      packageName: "76.1.0",
       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.6";
+const packageVersion = "76.1.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "76.0.6",
+	"version": "76.1.0",
 	"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.6";
+var packageVersion = "76.1.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -535,7 +535,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         ssr = _this$props8.ssr,
         useInlinePlayer = _this$props8.useInlinePlayer,
         shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
-        shouldHideTooltip = _this$props8.shouldHideTooltip;
+        shouldHideTooltip = _this$props8.shouldHideTooltip,
+        expandByPixel = _this$props8.expandByPixel;
       var mediaItemType = identifier.mediaItemType;
       var _this$state2 = _this.state,
         status = _this$state2.status,
@@ -560,6 +561,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
       var card = /*#__PURE__*/React.createElement(CardView, {
+        expandByPixel: expandByPixel,
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,

package/dist/esm/card/cardView.js

@@ -328,8 +328,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         resizeMode = _this$props6.resizeMode,
         onDisplayImage = _this$props6.onDisplayImage,
         nativeLazyLoad = _this$props6.nativeLazyLoad,
-        forceSyncDisplay = _this$props6.forceSyncDisplay;
+        forceSyncDisplay = _this$props6.forceSyncDisplay,
+        expandByPixel = _this$props6.expandByPixel;
       return !!cardPreview && jsx(ImageRenderer, {
+        expandByPixel: expandByPixel,
         cardPreview: cardPreview,
         mediaType: mediaType,
         alt: alt,

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

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

@@ -11,7 +11,8 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     onDisplayImage = _ref.onDisplayImage,
     mediaType = _ref.mediaType,
     nativeLazyLoad = _ref.nativeLazyLoad,
-    forceSyncDisplay = _ref.forceSyncDisplay;
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    expandByPixel = _ref.expandByPixel;
   useEffect(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -31,6 +32,7 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     onImageLoad: onLoad,
     onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    expandByPixel: expandByPixel
   }, resizeModeToMediaImageProps(resizeMode)));
 };

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

@@ -9,7 +9,7 @@ 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
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 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/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.6",
+        packageName: "76.1.0",
         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.6";
+var packageVersion = "76.1.0";
 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.6",
+	"version": "76.1.0",
 	"sideEffects": false
 }

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

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

package/dist/types/card/ui/imageRenderer/imageRenderer.d.ts

@@ -11,5 +11,6 @@ export type ImageRendererProps = {
     readonly onImageLoad?: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
+    readonly expandByPixel?: number;
 };
 export declare const ImageRenderer: React.FC<ImageRendererProps>;

package/dist/types/types.d.ts

@@ -59,6 +59,7 @@ export interface SharedCardProps {
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
     readonly titleBoxIcon?: TitleBoxIcon;
+    readonly expandByPixel?: number;
 }
 export interface CardOnClickCallback {
     (result: CardEvent, analyticsEvent?: UIAnalyticsEvent): void;

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

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

package/dist/types-ts4.5/card/ui/imageRenderer/imageRenderer.d.ts

@@ -11,5 +11,6 @@ export type ImageRendererProps = {
     readonly onImageLoad?: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
+    readonly expandByPixel?: number;
 };
 export declare const ImageRenderer: React.FC<ImageRendererProps>;

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

@@ -59,6 +59,7 @@ export interface SharedCardProps {
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
     readonly titleBoxIcon?: TitleBoxIcon;
+    readonly expandByPixel?: number;
 }
 export interface CardOnClickCallback {
     (result: CardEvent, analyticsEvent?: UIAnalyticsEvent): void;

package/example-helpers/cardViewWrapper.tsx

@@ -16,7 +16,7 @@ const cardWrapperStyles = ({
   wrapperDimensions,
   displayInline,
 }: CardViewWrapperProps) =>
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   css`
     ${displayInlineStyles(displayInline)}
     width: ${wrapperDimensions.width};

package/example-helpers/styles.ts

@@ -7,7 +7,7 @@ export const editableCardOptionsStyles = css`
   max-width: 700px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const sliderWrapperStyles = css`
   display: flex;
   width: 50%;
@@ -18,7 +18,7 @@ export const sliderWrapperStyles = css`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const editableCardContentStyles = css`
   /* Not making the wrapper fancier or center elements in order to have a more realistic scenario */
   padding: ${token('space.250', '20px')};
@@ -32,7 +32,7 @@ export const editableCardContentStyles = css`
   box-sizing: border-box;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const optionsWrapperStyles = css`
   display: flex;
 
@@ -42,7 +42,7 @@ export const optionsWrapperStyles = css`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const cardDimensionsWrapperStyles = css`
   margin: 10px 10px ${token('space.250', '20px')} 10px;
   display: flex;
@@ -62,7 +62,7 @@ export const cardPreviewWrapperStyles = css`
   flex: 1;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const cardWrapperStyles = css`
   border: 1px solid ${token('color.border.bold', 'black')};
   padding: 10px;
@@ -74,13 +74,13 @@ export const cardWrapperStyles = css`
   display: inline-block;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const cardFlowHeaderStyles = css`
   margin: ${token('space.250', '20px')} auto;
   padding: 10px 0;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const externalIdentifierWrapperStyles = css`
   display: flex;
   justify-content: space-around;
@@ -104,7 +104,7 @@ export const unhandledErrorCardWrapperStyles = css`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const inlineCardVideoWrapperItemStyles = css`
   padding: 10px;
   border: 1px solid ${token('color.border.bold', 'black')};
@@ -124,7 +124,7 @@ export const mediaViewerExampleWrapperStyles = css`
   display: flex;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const mediaInlineWrapperStyles = css`
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "76.0.6",
+  "version": "76.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,12 +41,12 @@
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/media-client": "^23.1.0",
-    "@atlaskit/media-common": "^7.0.0",
-    "@atlaskit/media-ui": "^23.1.0",
+    "@atlaskit/media-common": "^7.1.0",
+    "@atlaskit/media-ui": "^23.2.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -64,19 +64,11 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.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.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/radio": "^5.6.0",
-    "@atlaskit/range": "^7.1.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -104,4 +96,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/report.api.md

@@ -366,6 +366,8 @@ export interface SharedCardProps {
   // (undocumented)
   readonly disableOverlay?: boolean;
   // (undocumented)
+  readonly expandByPixel?: number;
+  // (undocumented)
   readonly featureFlags?: MediaFeatureFlags;
   // (undocumented)
   readonly originalDimensions?: NumericalCardDimensions;

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

@@ -305,6 +305,8 @@ export interface SharedCardProps {
     // (undocumented)
     readonly disableOverlay?: boolean;
     // (undocumented)
+    readonly expandByPixel?: number;
+    // (undocumented)
     readonly featureFlags?: MediaFeatureFlags;
     // (undocumented)
     readonly originalDimensions?: NumericalCardDimensions;