@atlaskit/renderer 108.11.16 → 108.11.17

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/renderer
 
+## 108.11.17
+
+### Patch Changes
+
+- [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
+- Updated dependencies
+
 ## 108.11.16
 
 ### Patch Changes

package/dist/cjs/react/nodes/media/index.js

@@ -64,7 +64,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
-        expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -80,14 +79,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: (0, _styles.borderStyle)(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
+      }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: (0, _styles.linkStyle)(!!borderMark)
+        css: _styles.linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {

package/dist/cjs/react/nodes/media/styles.js

@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.linkStyle = exports.borderStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject, _templateObject2;
-var linkStyle = function linkStyle(hasBorderMark) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: ", " !important;\n  height: ", " !important;\n"])), hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%', hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%');
-};
+var linkStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
 exports.linkStyle = linkStyle;
-var borderStyle = function borderStyle(hasLinkMark, color, width) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", " !important;\n  height: ", " !important;\n  border-color: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-radius: ", "px;\n"])), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), color, width, width * 2);
+var borderStyle = function borderStyle(color, width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };
 exports.borderStyle = borderStyle;

package/dist/cjs/ui/MediaCard.js

@@ -227,8 +227,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props3.alt,
         featureFlags = _this$props3.featureFlags,
         ssr = _this$props3.ssr,
-        rendererAppearance = _this$props3.rendererAppearance,
-        expandByPixel = _this$props3.expandByPixel;
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -242,7 +241,6 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
-        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -278,8 +276,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
         featureFlags = _this$props4.featureFlags,
         shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
-        ssr = _this$props4.ssr,
-        expandByPixel = _this$props4.expandByPixel;
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -315,7 +312,6 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
-        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.16";
+var packageVersion = "108.11.17";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/nodes/media/index.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
@@ -45,7 +46,6 @@ export default class Media extends PureComponent {
           }
         }
       }, jsx(MediaCard, _extends({
-        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -61,14 +61,16 @@ export default class Media extends PureComponent {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: borderStyle(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: borderStyle(paletteColorValue, borderWidth)
+      }, jsx(MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: linkStyle(!!borderMark)
+        css: linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(this, "handleMediaLinkClick", event => {

package/dist/es2019/react/nodes/media/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
-export const linkStyle = hasBorderMark => css`
+export const linkStyle = css`
   position: absolute;
   background: transparent;
   top: 0;
@@ -8,14 +7,13 @@ export const linkStyle = hasBorderMark => css`
   bottom: 0;
   left: 0;
   cursor: pointer;
-  width: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'} !important;
-  height: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'} !important;
+  width: 100% !important;
+  height: 100% !important;
 `;
-export const borderStyle = (hasLinkMark, color, width) => css`
-  width: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`} !important;
-  height: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`} !important;
-  border-color: ${color};
-  border-width: ${width}px;
-  border-style: solid;
-  border-radius: ${width * 2}px;
+export const borderStyle = (color, width) => css`
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: ${width}px;
+  box-shadow: 0 0 0 ${width}px ${color};
 `;

package/dist/es2019/ui/MediaCard.js

@@ -158,8 +158,7 @@ export class MediaCardInternal extends Component {
       alt,
       featureFlags,
       ssr,
-      rendererAppearance,
-      expandByPixel
+      rendererAppearance
     } = this.props;
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
@@ -174,7 +173,6 @@ export class MediaCardInternal extends Component {
     // context is not really used when the type is external and we want to render the component asap
     , {
       mediaClientConfig: mediaClientConfig,
-      expandByPixel: expandByPixel,
       alt: alt,
       identifier: identifier,
       dimensions: cardDimensions,
@@ -209,8 +207,7 @@ export class MediaCardInternal extends Component {
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
       shouldEnableDownloadButton,
-      ssr,
-      expandByPixel
+      ssr
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -247,7 +244,6 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       fileState
     }), /*#__PURE__*/React.createElement(Card, {
-      expandByPixel: expandByPixel,
       identifier: identifier,
       alt: alt,
       contextId: contextId,

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.11.16";
+const packageVersion = "108.11.17";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/nodes/media/index.js

@@ -9,13 +9,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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() { 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; } }
 /** @jsx jsx */
+
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
@@ -56,7 +57,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, jsx(MediaCard, _extends({
-        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -72,14 +72,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: borderStyle(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: borderStyle(paletteColorValue, borderWidth)
+      }, jsx(MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: linkStyle(!!borderMark)
+        css: linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(_assertThisInitialized(_this), "handleMediaLinkClick", function (event) {

package/dist/esm/react/nodes/media/styles.js

@@ -1,10 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
-export var linkStyle = function linkStyle(hasBorderMark) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: ", " !important;\n  height: ", " !important;\n"])), hasBorderMark ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%', hasBorderMark ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%');
-};
-export var borderStyle = function borderStyle(hasLinkMark, color, width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", " !important;\n  height: ", " !important;\n  border-color: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-radius: ", "px;\n"])), hasLinkMark ? '100%' : "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"), hasLinkMark ? '100%' : "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"), color, width, width * 2);
+export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
+export var borderStyle = function borderStyle(color, width) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };

package/dist/esm/ui/MediaCard.js

@@ -215,8 +215,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props3.alt,
         featureFlags = _this$props3.featureFlags,
         ssr = _this$props3.ssr,
-        rendererAppearance = _this$props3.rendererAppearance,
-        expandByPixel = _this$props3.expandByPixel;
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -230,7 +229,6 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
-        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -266,8 +264,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
         featureFlags = _this$props4.featureFlags,
         shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
-        ssr = _this$props4.ssr,
-        expandByPixel = _this$props4.expandByPixel;
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -303,7 +300,6 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/React.createElement(Card, {
-        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

package/dist/esm/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.16";
+var packageVersion = "108.11.17";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/nodes/media/index.d.ts

@@ -1,13 +1,12 @@
-/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { MediaCardProps } from '../../../ui/MediaCard';
-import { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { MediaCardProps } from '../../../ui/MediaCard';
+import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import { AnalyticsEventPayload } from '../../../analytics/events';
+import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
     providers?: ProviderFactory;
     allowAltTextOnImages?: boolean;

package/dist/types/react/nodes/media/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const linkStyle: (hasBorderMark: boolean) => import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (hasLinkMark: boolean, color: string, width: number) => import("@emotion/react").SerializedStyles;
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/MediaCard.d.ts

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
-import { MediaType } from '@atlaskit/adf-schema';
+import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
+import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { RendererAppearance } from './Renderer/types';
-import { RendererContext } from '../react/types';
-import { MediaSSR } from '../types/mediaOptions';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { RendererAppearance } from './Renderer/types';
+import type { RendererContext } from '../react/types';
+import type { MediaSSR } from '../types/mediaOptions';
 export type MediaProvider = {
     viewMediaClientConfig: MediaClientConfig;
 };
@@ -40,7 +40,6 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
-    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -1,13 +1,12 @@
-/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { MediaCardProps } from '../../../ui/MediaCard';
-import { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { MediaCardProps } from '../../../ui/MediaCard';
+import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import { AnalyticsEventPayload } from '../../../analytics/events';
+import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
     providers?: ProviderFactory;
     allowAltTextOnImages?: boolean;

package/dist/types-ts4.5/react/nodes/media/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const linkStyle: (hasBorderMark: boolean) => import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (hasLinkMark: boolean, color: string, width: number) => import("@emotion/react").SerializedStyles;
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

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

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
-import { MediaType } from '@atlaskit/adf-schema';
+import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
+import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { RendererAppearance } from './Renderer/types';
-import { RendererContext } from '../react/types';
-import { MediaSSR } from '../types/mediaOptions';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { RendererAppearance } from './Renderer/types';
+import type { RendererContext } from '../react/types';
+import type { MediaSSR } from '../types/mediaOptions';
 export type MediaProvider = {
     viewMediaClientConfig: MediaClientConfig;
 };
@@ -40,7 +40,6 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
-    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.16",
+  "version": "108.11.17",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.59.0",
+    "@atlaskit/editor-common": "^75.0.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -39,11 +39,11 @@
     "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-datasource": "^1.1.0",
-    "@atlaskit/media-card": "^76.2.0",
+    "@atlaskit/media-card": "^77.0.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^24.0.0",
+    "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.25.0",