@atlaskit/renderer 112.12.2 → 112.12.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 112.12.4
+
+### Patch Changes
+
+- [#101282](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101282)
+  [`83bbb87a1ef40`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/83bbb87a1ef40) -
+  Moved deprecated ADS headingSizes object directly into this package as it is the only remaining
+  consumer. This is planned to be removed soon.
+- Updated dependencies
+
+## 112.12.3
+
+### Patch Changes
+
+- [#110251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110251)
+  [`b6adb9244b072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6adb9244b072) -
+  [ux] Visual refresh of the EmbedCard component
+- [#110634](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110634)
+  [`62224d53da886`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62224d53da886) -
+  [ux] [ED-26283] CSS Selector fix for table with shadows when there are nested tables. It will only
+  select direct children now and not descendants which prevents unnecessary shadow on parent table
+  when there is a nested table.
+- Updated dependencies
+
 ## 112.12.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/table.js

@@ -592,7 +592,12 @@ var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Comp
   }]);
 }(_react.default.Component);
 var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
-  overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  /**
+   * The :scope is in reference to table container and we are selecting only
+   * direct children that match the table node wrapper selector, not their
+   * descendants.
+   */
+  overflowSelector: ":scope > .".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {

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

@@ -64,7 +64,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.12.2";
+var packageVersion = "112.12.4";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -11,7 +11,6 @@ var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
-var _typography = require("@atlaskit/theme/typography");
 var _tokens = require("@atlaskit/tokens");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -40,8 +39,54 @@ var telepointerStyles = function telepointerStyles(colorMode) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t#", " {\n\t\t\tdisplay: inline-block;\n\t\t\tposition: relative;\n\t\t\twidth: 1.5px;\n\t\t\theight: 25px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t45deg,\n\t\t\t\t", " -12.02%,\n\t\t\t\t", " 19.18%,\n\t\t\t\t", " 71.87%\n\t\t\t);\n\t\t\tmargin-left: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: 'AI';\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\twidth: 12.5px;\n\t\t\t\theight: 13px;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\tpadding-left: 1.5px;\n\t\t\t\tline-height: initial;\n\t\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t45deg,\n\t\t\t\t\t", " -57%,\n\t\t\t\t\t", " 71.87%\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t"])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-font-weight-bold, 700)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
+
+/**
+ * **DEPRECATED**
+ *
+ * Originally defined in `@atlaskit/theme/typography`, but moved here as it has since been deleted in favor of typography tokens.
+ * This should be removed as part of editor token work. More info:
+ * https://atlassian.slack.com/archives/C075G5D7ZP1/p1733449725865539?thread_ts=1732159801.409789&cid=C075G5D7ZP1
+ * */
+var headingSizesImport = {
+  h900: {
+    size: 35,
+    lineHeight: 40
+  },
+  h800: {
+    size: 29,
+    lineHeight: 32
+  },
+  h700: {
+    size: 24,
+    lineHeight: 28
+  },
+  h600: {
+    size: 20,
+    lineHeight: 24
+  },
+  h500: {
+    size: 16,
+    lineHeight: 20
+  },
+  h400: {
+    size: 14,
+    lineHeight: 16
+  },
+  h300: {
+    size: 12,
+    lineHeight: 16
+  },
+  h200: {
+    size: 12,
+    lineHeight: 16
+  },
+  h100: {
+    size: 11,
+    lineHeight: 16
+  }
+};
 var getLineHeight = function getLineHeight(fontCode) {
-  return _typography.headingSizes[fontCode].lineHeight / _typography.headingSizes[fontCode].size;
+  return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 };
 var headingSizes = {
   h1: {

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

@@ -531,7 +531,12 @@ export class TableProcessor extends React.Component {
   }
 }
 const TableWithShadows = overflowShadow(TableProcessor, {
-  overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
+  /**
+   * The :scope is in reference to table container and we are selecting only
+   * direct children that match the table node wrapper selector, not their
+   * descendants.
+   */
+  overflowSelector: `:scope > .${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
   useShadowObserver: true
 });
 const TableWithWidth = props => {

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

@@ -45,7 +45,7 @@ import { TruncatedWrapper } from './truncated-wrapper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.12.2";
+const packageVersion = "112.12.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -8,7 +8,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line import/no-namespace
 import * as colors from '@atlaskit/theme/colors';
 import { N60A, Y300, Y75, N40A } from '@atlaskit/theme/colors';
-import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, columnLayoutResponsiveRendererStyles, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName, getStatusSharedStyles } from '@atlaskit/editor-common/styles';
@@ -64,6 +63,52 @@ const telepointerStyles = colorMode => {
 		}
 	`;
 };
+
+/**
+ * **DEPRECATED**
+ *
+ * Originally defined in `@atlaskit/theme/typography`, but moved here as it has since been deleted in favor of typography tokens.
+ * This should be removed as part of editor token work. More info:
+ * https://atlassian.slack.com/archives/C075G5D7ZP1/p1733449725865539?thread_ts=1732159801.409789&cid=C075G5D7ZP1
+ * */
+const headingSizesImport = {
+  h900: {
+    size: 35,
+    lineHeight: 40
+  },
+  h800: {
+    size: 29,
+    lineHeight: 32
+  },
+  h700: {
+    size: 24,
+    lineHeight: 28
+  },
+  h600: {
+    size: 20,
+    lineHeight: 24
+  },
+  h500: {
+    size: 16,
+    lineHeight: 20
+  },
+  h400: {
+    size: 14,
+    lineHeight: 16
+  },
+  h300: {
+    size: 12,
+    lineHeight: 16
+  },
+  h200: {
+    size: 12,
+    lineHeight: 16
+  },
+  h100: {
+    size: 11,
+    lineHeight: 16
+  }
+};
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 const headingSizes = {
   h1: {

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

@@ -585,7 +585,12 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   }]);
 }(React.Component);
 var TableWithShadows = overflowShadow(TableProcessor, {
-  overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  /**
+   * The :scope is in reference to table container and we are selecting only
+   * direct children that match the table node wrapper selector, not their
+   * descendants.
+   */
+  overflowSelector: ":scope > .".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {

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

@@ -54,7 +54,7 @@ import { TruncatedWrapper } from './truncated-wrapper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.12.2";
+var packageVersion = "112.12.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -10,7 +10,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line import/no-namespace
 import * as colors from '@atlaskit/theme/colors';
 import { N60A, Y300, Y75, N40A } from '@atlaskit/theme/colors';
-import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { tableSharedStyle, columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, columnLayoutResponsiveRendererStyles, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, backgroundColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName, getStatusSharedStyles } from '@atlaskit/editor-common/styles';
@@ -30,6 +29,52 @@ var telepointerStyles = function telepointerStyles(colorMode) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t#", " {\n\t\t\tdisplay: inline-block;\n\t\t\tposition: relative;\n\t\t\twidth: 1.5px;\n\t\t\theight: 25px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t45deg,\n\t\t\t\t", " -12.02%,\n\t\t\t\t", " 19.18%,\n\t\t\t\t", " 71.87%\n\t\t\t);\n\t\t\tmargin-left: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: 'AI';\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\twidth: 12.5px;\n\t\t\t\theight: 13px;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\tpadding-left: 1.5px;\n\t\t\t\tline-height: initial;\n\t\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t45deg,\n\t\t\t\t\t", " -57%,\n\t\t\t\t\t", " 71.87%\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t"])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-font-weight-bold, 700)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
+
+/**
+ * **DEPRECATED**
+ *
+ * Originally defined in `@atlaskit/theme/typography`, but moved here as it has since been deleted in favor of typography tokens.
+ * This should be removed as part of editor token work. More info:
+ * https://atlassian.slack.com/archives/C075G5D7ZP1/p1733449725865539?thread_ts=1732159801.409789&cid=C075G5D7ZP1
+ * */
+var headingSizesImport = {
+  h900: {
+    size: 35,
+    lineHeight: 40
+  },
+  h800: {
+    size: 29,
+    lineHeight: 32
+  },
+  h700: {
+    size: 24,
+    lineHeight: 28
+  },
+  h600: {
+    size: 20,
+    lineHeight: 24
+  },
+  h500: {
+    size: 16,
+    lineHeight: 20
+  },
+  h400: {
+    size: 14,
+    lineHeight: 16
+  },
+  h300: {
+    size: 12,
+    lineHeight: 16
+  },
+  h200: {
+    size: 12,
+    lineHeight: 16
+  },
+  h100: {
+    size: 11,
+    lineHeight: 16
+  }
+};
 var getLineHeight = function getLineHeight(fontCode) {
   return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 };

package/dist/types/react/marks/annotation.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import type { MarkProps, AnnotationMarkMeta } from '../types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => React.JSX.Element;
 export default AnnotationComponent;

package/dist/types/react/marks/backgroundColor.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TextColorAttributes } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
-export default function BackgroundColor(props: MarkProps<TextColorAttributes>): JSX.Element;
+export default function BackgroundColor(props: MarkProps<TextColorAttributes>): React.JSX.Element;

package/dist/types/react/marks/code.d.ts

@@ -5,7 +5,7 @@ import type { MarkProps } from '../types';
 export declare const isCodeMark: (mark: Mark) => boolean;
 export declare function CodeWithIntl(props: MarkProps<{
     codeBidiWarningTooltipEnabled: boolean;
-}> & WrappedComponentProps): JSX.Element;
+}> & WrappedComponentProps): React.JSX.Element;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     codeBidiWarningTooltipEnabled: boolean;
 } & import("../types").MarkMeta & {

package/dist/types/react/marks/confluence-inline-comment.d.ts

@@ -1,9 +1,9 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { type MarkProps } from '../types';
 interface Props {
     reference: string;
 }
 export default class ConfluenceInlineComment extends Component<MarkProps<Props>, Object> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types/react/marks/data-consumer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type DataConsumerAttributes } from '@atlaskit/adf-schema';
 import { type MarkProps } from '../types';
-export default function DataConsumer(props: MarkProps<DataConsumerAttributes>): JSX.Element;
+export default function DataConsumer(props: MarkProps<DataConsumerAttributes>): React.JSX.Element;

package/dist/types/react/marks/em.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function Em(props: MarkProps): JSX.Element;
+export default function Em(props: MarkProps): React.JSX.Element;

package/dist/types/react/marks/fragment.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type FragmentAttributes } from '@atlaskit/adf-schema';
 import { type MarkProps } from '../types';
-export default function FragmentMark(props: MarkProps<FragmentAttributes>): JSX.Element;
+export default function FragmentMark(props: MarkProps<FragmentAttributes>): React.JSX.Element;

package/dist/types/react/marks/indentation.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type IndentationMarkAttributes } from '@atlaskit/adf-schema';
 import { type MarkProps } from '../types';
-export default function Indentation(props: MarkProps<IndentationMarkAttributes>): JSX.Element;
+export default function Indentation(props: MarkProps<IndentationMarkAttributes>): React.JSX.Element;

package/dist/types/react/marks/strike.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function Strike(props: MarkProps): JSX.Element;
+export default function Strike(props: MarkProps): React.JSX.Element;

package/dist/types/react/marks/strong.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function Strong(props: MarkProps): JSX.Element;
+export default function Strong(props: MarkProps): React.JSX.Element;

package/dist/types/react/marks/subsup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type SubSupAttributes } from '@atlaskit/adf-schema';
 import { type MarkProps } from '../types';
-export default function SubSup(props: MarkProps<SubSupAttributes>): JSX.Element;
+export default function SubSup(props: MarkProps<SubSupAttributes>): React.JSX.Element;

package/dist/types/react/marks/textColor.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TextColorAttributes } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
-export default function TextColor(props: MarkProps<TextColorAttributes>): JSX.Element;
+export default function TextColor(props: MarkProps<TextColorAttributes>): React.JSX.Element;

package/dist/types/react/marks/underline.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function Underline(props: MarkProps): JSX.Element;
+export default function Underline(props: MarkProps): React.JSX.Element;

package/dist/types/react/marks/unsupportedMark.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function UnsupportedMark(props: MarkProps): JSX.Element;
+export default function UnsupportedMark(props: MarkProps): React.JSX.Element;

package/dist/types/react/marks/unsupportedNodeAttribute.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type MarkProps } from '../types';
-export default function UnsupportedNodeAttribute(props: MarkProps): JSX.Element;
+export default function UnsupportedNodeAttribute(props: MarkProps): React.JSX.Element;

package/dist/types/react/nodes/blockquote.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function Blockquote(props: React.PropsWithChildren<unknown>): JSX.Element;
+export default function Blockquote(props: React.PropsWithChildren<unknown>): React.JSX.Element;

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -21,5 +21,5 @@ interface Props {
     marks?: PMMark[];
     startPos: number;
 }
-declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => JSX.Element;
+declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => React.JSX.Element;
 export default BodiedExtension;

package/dist/types/react/nodes/bulletList.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 export default function BulletList(props: React.PropsWithChildren<{
     path?: Node[];
-}>): JSX.Element;
+}>): React.JSX.Element;

package/dist/types/react/nodes/caption.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type NodeProps } from '../types';
-declare const RenderCaption: ({ children, dataAttributes }: NodeProps) => JSX.Element;
+declare const RenderCaption: ({ children, dataAttributes }: NodeProps) => React.JSX.Element;
 export default RenderCaption;

package/dist/types/react/nodes/date.d.ts

@@ -8,5 +8,5 @@ export interface Props extends MarkDataAttributes {
 export declare const DateComponent: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
-declare function DateWithFormatContext(props: Props): JSX.Element;
+declare function DateWithFormatContext(props: Props): React.JSX.Element;
 export default DateWithFormatContext;

package/dist/types/react/nodes/decisionItem.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type NodeProps } from '../types';
-export default function DecisionItem({ children, dataAttributes }: NodeProps): JSX.Element;
+export default function DecisionItem({ children, dataAttributes }: NodeProps): React.JSX.Element;

package/dist/types/react/nodes/decisionList.d.ts

@@ -1,7 +1,7 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 export interface Props {
     children?: JSX.Element | JSX.Element[];
 }
 export default class DecisionList extends PureComponent<Props, Object> {
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }

package/dist/types/react/nodes/doc.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export default function Doc(props: any): JSX.Element;
-export declare function DocWithSelectAllTrap(props: any): JSX.Element;
+import React from 'react';
+export default function Doc(props: any): React.JSX.Element;
+export declare function DocWithSelectAllTrap(props: any): React.JSX.Element;

package/dist/types/react/nodes/extension.d.ts

@@ -24,7 +24,7 @@ type AllOrNone<T> = T | {
 type RenderExtensionOptions = {
     isTopLevel?: boolean;
 } & AllOrNone<OverflowShadowProps>;
-export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean) => JSX.Element;
+export declare const renderExtension: (content: any, layout: string, options?: RenderExtensionOptions, removeOverflow?: boolean) => React.JSX.Element;
 declare const _default: {
     new (props: Props | Readonly<Props>): {
         overflowContainer?: HTMLElement | null | undefined;
@@ -46,7 +46,7 @@ declare const _default: {
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
         initShadowObserver(): void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends keyof import("@atlaskit/editor-common/ui").OverflowShadowState>(state: import("@atlaskit/editor-common/ui").OverflowShadowState | ((prevState: Readonly<import("@atlaskit/editor-common/ui").OverflowShadowState>, props: Readonly<Props>) => import("@atlaskit/editor-common/ui").OverflowShadowState | Pick<import("@atlaskit/editor-common/ui").OverflowShadowState, K> | null) | Pick<import("@atlaskit/editor-common/ui").OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -73,10 +73,9 @@ declare const _default: {
         scrollable?: NodeList | undefined;
         diff?: number | undefined;
         state: {
-            showLeftShadow: boolean; /** We don't want this error to block renderer */
-            /** We keep rendering the default content */
+            showLeftShadow: boolean;
             showRightShadow: boolean;
-        };
+        }; /** We keep rendering the default content */
         componentWillUnmount(): void;
         componentDidUpdate(): void;
         handleScroll: (event: Event) => void;
@@ -86,7 +85,7 @@ declare const _default: {
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
         initShadowObserver(): void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K_1 extends keyof import("@atlaskit/editor-common/ui").OverflowShadowState>(state: import("@atlaskit/editor-common/ui").OverflowShadowState | ((prevState: Readonly<import("@atlaskit/editor-common/ui").OverflowShadowState>, props: Readonly<Props>) => import("@atlaskit/editor-common/ui").OverflowShadowState | Pick<import("@atlaskit/editor-common/ui").OverflowShadowState, K_1> | null) | Pick<import("@atlaskit/editor-common/ui").OverflowShadowState, K_1> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/dist/types/react/nodes/fallback.d.ts

@@ -18,7 +18,7 @@ export declare class CardErrorBoundary extends React.PureComponent<{
         isError: boolean;
         error: Error;
     };
-    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
     componentDidCatch(_error: Error): void;
 }
 export {};

package/dist/types/react/nodes/hardBreak.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     forceNewLine?: boolean;
 }
-declare const HardBreak: ({ forceNewLine }: Props) => JSX.Element;
+declare const HardBreak: ({ forceNewLine }: Props) => React.JSX.Element;
 export default HardBreak;

package/dist/types/react/nodes/heading.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type NodeProps } from '../types';
 import { type HeadingAnchorLinksProps } from '../../ui/Renderer/types';
@@ -10,5 +10,5 @@ declare function Heading(props: NodeProps<{
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     marks?: PMNode['marks'];
     invisible?: boolean;
-}>): JSX.Element;
+}>): React.JSX.Element;
 export default Heading;

package/dist/types/react/nodes/inlineCard.d.ts

@@ -14,7 +14,7 @@ export interface InlineCardProps extends MarkDataAttributes {
 }
 declare const _default: {
     new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>): {
-        render(): JSX.Element;
+        render(): import("react").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -37,7 +37,7 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>, context: any): {
-        render(): JSX.Element;
+        render(): import("react").JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/dist/types/react/nodes/inlineExtension.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { RendererContext } from '../types';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -14,5 +14,5 @@ interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const InlineExtension: (props: Props) => JSX.Element;
+declare const InlineExtension: (props: Props) => React.JSX.Element;
 export default InlineExtension;

package/dist/types/react/nodes/layoutSection.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export default function LayoutSection(props: React.PropsWithChildren<{
     content?: PMNode[];
-}>): JSX.Element;
+}>): React.JSX.Element;

package/dist/types/react/nodes/listItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function ListItem(props: React.PropsWithChildren<unknown>): JSX.Element;
+export default function ListItem(props: React.PropsWithChildren<unknown>): React.JSX.Element;

package/dist/types/react/nodes/mediaGroup.d.ts

@@ -19,12 +19,12 @@ export default class MediaGroup extends PureComponent<MediaGroupProps, MediaGrou
     state: MediaGroupState;
     private handleSize;
     private handleScroll;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     renderSingleFile(child: ReactElement<MediaProps>): ReactElement<MediaProps, string | React.JSXElementConstructor<any>>;
     renderSingleLink(child: ReactElement<MediaProps>): ReactElement<MediaProps, string | React.JSXElementConstructor<any>>;
     onMediaClick: (cardClickHandler: CardEventClickHandler, child: ReactElement<MediaProps>, surroundingItems: Identifier[]) => (event: CardEvent, analyticsEvent?: any) => void;
     cloneFileCard(child: ReactElement<MediaProps>, surroundingItems: Identifier[]): ReactElement<MediaProps, string | React.JSXElementConstructor<any>>;
-    renderStrip(): JSX.Element;
+    renderStrip(): React.JSX.Element;
     private mapMediaPropsToIdentifier;
 }
 export {};