@atlaskit/renderer 108.0.0 → 108.1.0

package/dist/es2019/react/nodes/embedCard.js

@@ -10,6 +10,7 @@ import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 const embedCardWrapperStyles = css`
   width: 100%;
   height: 100%;
@@ -88,7 +89,16 @@ export default function EmbedCard(props) {
     }
     setAspectRatio(resolvedAspectRatio);
   };
-  return jsx(WidthConsumer, null, ({
+  const analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return jsx(AnalyticsContext, {
+    data: analyticsData
+  }, jsx(WidthConsumer, null, ({
     width: containerWidth,
     breakpoint
   }) => {
@@ -137,5 +147,5 @@ export default function EmbedCard(props) {
       inheritDimensions: true,
       embedIframeRef: embedIframeRef
     })))))));
-  });
+  }));
 }

package/dist/es2019/react/nodes/inlineCard.js

@@ -7,6 +7,7 @@ import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { useFeatureFlags } from '../../use-feature-flags';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 const InlineCard = props => {
   const {
     url,
@@ -28,15 +29,26 @@ const InlineCard = props => {
     showServerActions,
     ssr
   } = smartLinks || {};
+  const analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
   if (ssr && url) {
-    return /*#__PURE__*/React.createElement(CardSSR, {
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: analyticsData
+    }, /*#__PURE__*/React.createElement(CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions
-    });
+    }));
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
@@ -54,6 +66,6 @@ const InlineCard = props => {
       }
       props.smartCardStorage.set(data.url, data.title);
     }
-  }))));
+  })))));
 };
 export default withSmartCardStorage(InlineCard);

package/dist/es2019/ui/Expand.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
@@ -22,11 +23,11 @@ const titleStyles = css`
   display: flex;
   flex: 1;
   margin: 0;
-  padding: 0 0 0 ${gridSize() / 2}px;
+  padding: 0 0 0 ${"var(--ds-space-050, 4px)"};
   text-align: left;
 `;
 const Container = props => {
-  const paddingBottom = `${props.expanded ? gridSize() : 0}px`;
+  const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
   const styles = themeProps => css`
     ${sharedContainerStyles({
@@ -40,12 +41,12 @@ const Container = props => {
   }, props), props.children);
 };
 const TitleContainer = props => {
-  const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
+  const paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const styles = themeProps => css`
     ${sharedExpandStyles.titleContainerStyles({
     theme: themeProps
   })}
-    padding: ${gridSize()}px;
+    padding: ${"var(--ds-space-100, 8px)"};
     padding-bottom: ${paddingBottom};
   `;
   return jsx("button", _extends({
@@ -60,7 +61,9 @@ const ContentContainer = props => {
     ${sharedContentStyles({
     theme: themeProps
   })};
-    padding-right: ${gridSize() * 2}px;
+    padding-right: ${"var(--ds-space-200, 16px)"};
+    // TODO: Migrate away from gridSize
+    // Recommendation: Replace gridSize with 8, or directly replace with 36px
     padding-left: ${gridSize() * 5 - gridSize() / 2}px;
     visibility: ${visibility};
   `;

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

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { PLATFORM } from '../../analytics/events';
 import { ACTION, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { PLATFORM } from '../../analytics/events';
 export class ErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
@@ -41,6 +43,11 @@ export class ErrorBoundary extends React.Component {
         errorStack: error === null || error === void 0 ? void 0 : error.stack
       }
     });
+    if (getBooleanFF('platform.editor.sentry-error-monitoring_6bksu')) {
+      logException(error, {
+        location: 'renderer'
+      });
+    }
     if (this.hasFallback()) {
       this.setState({
         errorCaptured: true

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.0.0";
+const packageVersion = "108.1.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -174,28 +174,35 @@ export class Renderer extends PureComponent {
     });
     this.rafID = requestAnimationFrame(() => {
       stopMeasure(`Renderer Render Time: ${this.id}`, duration => {
-        var _analyticsEventSeveri, _analyticsEventSeveri2;
+        var _analyticsEventSeveri, _analyticsEventSeveri2, _this$props, _this$props$analytics;
         const {
           analyticsEventSeverityTracking
         } = this.props;
         const forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
         const severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
-        this.fireAnalyticsEvent({
-          action: ACTION.RENDERED,
-          actionSubject: ACTION_SUBJECT.RENDERER,
-          attributes: {
-            platform: PLATFORM.WEB,
-            duration,
-            distortedDuration: this.renderedMeasurementDistortedDurationMonitor.distortedDuration,
-            ttfb: getResponseEndTime(),
-            nodes: reduce(this.props.document, (acc, node) => {
-              acc[node.type] = (acc[node.type] || 0) + 1;
-              return acc;
-            }, {}),
-            severity
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
+
+        // ED-16320: Check for explicit disable so that by default
+        // it will still be enabled as it currently is. Then we can
+        // progressively opt out synthetic tenants.
+        const isTTRTrackingExplicitlyDisabled = ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$analytics = _this$props.analyticsEventSeverityTracking) === null || _this$props$analytics === void 0 ? void 0 : _this$props$analytics.enabled) === false;
+        if (!isTTRTrackingExplicitlyDisabled) {
+          this.fireAnalyticsEvent({
+            action: ACTION.RENDERED,
+            actionSubject: ACTION_SUBJECT.RENDERER,
+            attributes: {
+              platform: PLATFORM.WEB,
+              duration,
+              distortedDuration: this.renderedMeasurementDistortedDurationMonitor.distortedDuration,
+              ttfb: getResponseEndTime(),
+              nodes: reduce(this.props.document, (acc, node) => {
+                acc[node.type] = (acc[node.type] || 0) + 1;
+                return acc;
+              }, {}),
+              severity
+            },
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        }
         this.renderedMeasurementDistortedDurationMonitor.cleanup();
         delete this.renderedMeasurementDistortedDurationMonitor;
       });
@@ -320,7 +327,7 @@ export class Renderer extends PureComponent {
       }
     };
     try {
-      var _featureFlags$feature, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+      var _featureFlags$feature, _featureFlags$feature2, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
@@ -347,6 +354,7 @@ export class Renderer extends PureComponent {
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+        useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
@@ -369,7 +377,7 @@ export class Renderer extends PureComponent {
       });
       return jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
-      var _featureFlags$feature2;
+      var _featureFlags$feature3, _featureFlags$feature4;
       if (onError) {
         onError(e);
       }
@@ -380,7 +388,8 @@ export class Renderer extends PureComponent {
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
-        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature2 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature3 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
+        useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
         onClick: handleWrapperOnClick
       }, jsx(UnsupportedBlock, null));
     }
@@ -430,7 +439,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     children,
     onClick,
     onMouseDown,
-    useFragmentMarkBreakoutWidthStylingFix
+    useFragmentMarkBreakoutWidthStylingFix,
+    useBlockRenderForCodeBlock
   } = props;
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
@@ -444,7 +454,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       appearance,
       allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useFragmentMarkBreakoutWidthStylingFix
+      useFragmentMarkBreakoutWidthStylingFix,
+      useBlockRenderForCodeBlock
     })
   }, children)));
 });

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
-import { gridSize, fontFamily, fontSize } from '@atlaskit/theme/constants';
+import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
@@ -302,6 +302,9 @@ export const rendererStyles = wrapperProps => theme => {
   const themeProps = {
     theme
   };
+  const {
+    useBlockRenderForCodeBlock
+  } = wrapperProps;
   return css`
       font-size: ${editorFontSize(themeProps)}px;
       line-height: 1.5rem;
@@ -419,7 +422,7 @@ export const rendererStyles = wrapperProps => theme => {
       & .renderer-image {
         max-width: 100%;
         display: block;
-        margin: ${gridSize() * 3}px 0;
+        margin: ${"var(--ds-space-300, 24px)"} 0;
       }
 
       .${richMediaClassName}.rich-media-wrapped
@@ -633,12 +636,9 @@ export const rendererStyles = wrapperProps => theme => {
         max-width: 100%;
         /* -ms- properties are necessary until MS supports the latest version of the grid spec */
         /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-columns: auto 1fr;
+        display: block;
         /* stylelint-enable */
 
-        grid-template-columns: minmax(0, 1fr);
         position: relative;
         border-radius: ${"var(--ds-radius-100, 3px)"};
 
@@ -647,14 +647,6 @@ export const rendererStyles = wrapperProps => theme => {
      * code block line numbers in Safari / iOS.
      */
         word-wrap: normal;
-
-        & > span {
-          /* stylelint-disable value-no-vendor-prefix */
-          -ms-grid-row: 1;
-          -ms-grid-column: 2;
-          /* stylelint-enable */
-          grid-column: 1;
-        }
       }
 
       & .MediaGroup,
@@ -666,13 +658,15 @@ export const rendererStyles = wrapperProps => theme => {
         }
       }
 
+      ${useGridRenderForCodeBlock(useBlockRenderForCodeBlock)}
+
       ${getLightWeightCodeBlockStylesForRootRendererStyleSheet()}
 
       ${columnLayoutSharedStyle};
       & [data-layout-section] {
-        margin-top: ${gridSize() * 2.5}px;
+        margin-top: ${"var(--ds-space-250, 20px)"};
         & > div + div {
-          margin-left: ${gridSize() * 4}px;
+          margin-left: ${"var(--ds-space-400, 32px)"};
         }
 
         @media screen and (max-width: ${gridMediumMaxWidth}px) {
@@ -708,4 +702,27 @@ export const rendererStyles = wrapperProps => theme => {
         ${browser.safari ? codeBlockInListSafariFix : ''}
       }
     `;
+};
+const useGridRenderForCodeBlock = codeBlockRenderAsBlock => {
+  if (codeBlockRenderAsBlock) {
+    return '';
+  }
+  return `& .code-block {
+       /* -ms- properties are necessary until MS supports the latest version of the grid spec */
+       /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */
+       display: -ms-grid;
+       display: grid;
+       -ms-grid-columns: auto 1fr;
+       /* stylelint-enable */
+
+       grid-template-columns: minmax(0, 1fr);
+
+       & > span {
+         /* stylelint-disable value-no-vendor-prefix */
+         -ms-grid-row: 1;
+         -ms-grid-column: 2;
+         /* stylelint-enable */
+         grid-column: 1;
+       }
+     }`;
 };

package/dist/es2019/ui/SortingIcon.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
@@ -23,7 +22,7 @@ const buttonStyles = css`
   right: 0;
   top: 0;
   border: 2px solid ${"var(--ds-border, #fff)"};
-  border-radius: ${gridSize() / 2}px;
+  border-radius: ${"var(--ds-radius-100, 4px)"};
   background-color: ${`var(--ds-surface-overlay, ${N20})`};
   justify-content: center;
   align-items: center;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.0.0",
+	"version": "108.1.0",
 	"sideEffects": false
 }

package/dist/esm/react/marks/link.js

@@ -9,6 +9,7 @@ import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import LinkUrl from '@atlaskit/smart-card/link-url';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(B400, ")"), "var(--ds-link, ".concat(B300, ")"), "var(--ds-link-pressed, ".concat(B500, ")"));
 export default function Link(props) {
   var href = props.href,
@@ -29,7 +30,16 @@ export default function Link(props) {
   if (isMediaLink) {
     return jsx(Fragment, null, props.children);
   }
-  return jsx(LinkUrl, _extends({
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return jsx(AnalyticsContext, {
+    data: analyticsData
+  }, jsx(LinkUrl, _extends({
     css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
@@ -47,5 +57,5 @@ export default function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children);
+  }, anchorProps, dataAttributes), props.children));
 }

package/dist/esm/react/nodes/blockCard.js

@@ -5,6 +5,7 @@ import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 export default function BlockCard(props) {
   var url = props.url,
     data = props.data,
@@ -24,7 +25,16 @@ export default function BlockCard(props) {
     onClick: onClick,
     container: portal
   };
-  return /*#__PURE__*/React.createElement("div", {
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement("div", {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
@@ -36,5 +46,5 @@ export default function BlockCard(props) {
     showActions: rendererAppearance !== 'mobile',
     platform: platform,
     showServerActions: showServerActions
-  }, cardProps))));
+  }, cardProps)))));
 }

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -5,7 +5,7 @@ import { jsx, css } from '@emotion/react';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
@@ -17,7 +17,7 @@ var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
       light: "var(--ds-background-neutral, ".concat(N20, ")"),
       dark: "var(--ds-background-neutral, ".concat(DN50, ")")
     })(props),
-    leftCoverWidth: "".concat(gridSize() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }));
 };
 var CodeBlockContainer = function CodeBlockContainer(_ref) {

package/dist/esm/react/nodes/embedCard.js

@@ -13,6 +13,7 @@ import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 var embedCardWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
 var uIMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 export default function EmbedCard(props) {
@@ -83,7 +84,16 @@ export default function EmbedCard(props) {
     }
     setAspectRatio(resolvedAspectRatio);
   };
-  return jsx(WidthConsumer, null, function (_ref2) {
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return jsx(AnalyticsContext, {
+    data: analyticsData
+  }, jsx(WidthConsumer, null, function (_ref2) {
     var containerWidth = _ref2.width,
       breakpoint = _ref2.breakpoint;
     var nonFullWidthSize = containerWidth;
@@ -131,5 +141,5 @@ export default function EmbedCard(props) {
       inheritDimensions: true,
       embedIframeRef: embedIframeRef
     })))))));
-  });
+  }));
 }

package/dist/esm/react/nodes/inlineCard.js

@@ -7,6 +7,7 @@ import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { useFeatureFlags } from '../../use-feature-flags';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -25,15 +26,26 @@ var InlineCard = function InlineCard(props) {
     showAuthTooltip = _ref.showAuthTooltip,
     showServerActions = _ref.showServerActions,
     ssr = _ref.ssr;
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
   if (ssr && url) {
-    return /*#__PURE__*/React.createElement(CardSSR, {
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: analyticsData
+    }, /*#__PURE__*/React.createElement(CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions
-    });
+    }));
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
@@ -51,6 +63,6 @@ var InlineCard = function InlineCard(props) {
       }
       props.smartCardStorage.set(data.url, data.title);
     }
-  }))));
+  })))));
 };
 export default withSmartCardStorage(InlineCard);

package/dist/esm/ui/Expand.js

@@ -5,6 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
@@ -16,9 +17,9 @@ import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
 import { getPlatform } from '../utils';
-var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
+var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", ";\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-space-050, 4px)");
 var Container = function Container(props) {
-  var paddingBottom = "".concat(props.expanded ? gridSize() : 0, "px");
+  var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
   var styles = function styles(themeProps) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
@@ -30,11 +31,11 @@ var Container = function Container(props) {
   }, props), props.children);
 };
 var TitleContainer = function TitleContainer(props) {
-  var paddingBottom = "".concat(!props.expanded ? gridSize() : 0, "px");
+  var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var styles = function styles(themeProps) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles({
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles({
       theme: themeProps
-    }), gridSize(), paddingBottom);
+    }), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return jsx("button", _extends({
     css: styles
@@ -45,9 +46,9 @@ var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
   var styles = function styles(themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
       theme: themeProps
-    }), gridSize() * 2, gridSize() * 5 - gridSize() / 2, visibility);
+    }), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
   };
   return jsx("div", _extends({
     css: styles

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

@@ -8,9 +8,11 @@ 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; } }
 import React from 'react';
-import { PLATFORM } from '../../analytics/events';
 import { ACTION, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { PLATFORM } from '../../analytics/events';
 export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ErrorBoundary, _React$Component);
   var _super = _createSuper(ErrorBoundary);
@@ -64,6 +66,11 @@ export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
           errorStack: error === null || error === void 0 ? void 0 : error.stack
         }
       });
+      if (getBooleanFF('platform.editor.sentry-error-monitoring_6bksu')) {
+        logException(error, {
+          location: 'renderer'
+        });
+      }
       if (this.hasFallback()) {
         this.setState({
           errorCaptured: true