@atlaskit/renderer 108.18.0 → 108.19.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 108.19.0
+
+### Minor Changes
+
+- [#58884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58884) [`a149612dc46d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a149612dc46d) - [ux] Added support for Media Inline Image Card in Editor and Renderer
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#58527](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58527) [`900c6892df7e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/900c6892df7e) - Small fix on Renderer example page
+
 ## 108.18.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -0,0 +1,109 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "declaration": true,
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../",
+        "baseUrl": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*"
+    ],
+    "references": [
+        {
+            "path": "../../adf-utils/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../analytics/analytics-listeners/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../analytics/analytics-namespaced-context/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/button/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/code/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-json-transformer/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-palette/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../editor-shared-styles/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../elements/emoji/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/icon/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../linking-platform/link-datasource/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-card/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-client/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-client-react/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-filmstrip/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-ui/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-viewer/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../linking-platform/smart-card/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../elements/status/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../linking-platform/link-provider/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../media/media-core/afm-cc/tsconfig.json"
+        }
+    ]
+}

package/dist/cjs/react/marks/alignment.js

@@ -11,14 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _templateObject;
+/** @jsx jsx */
 var MarkWrapper = function MarkWrapper(props) {
   var styles = props['data-align'] ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles
   }, props), props.children);
 };
 function Alignment(props) {
-  return /*#__PURE__*/_react.default.createElement(MarkWrapper, {
+  return (0, _react2.jsx)(MarkWrapper, {
     className: "fabric-editor-block-mark fabric-editor-alignment",
     "data-align": props.align
   }, props.children);

package/dist/cjs/react/marks/breakout.js

@@ -12,11 +12,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
+/** @jsx jsx */
 var wrapperStyles = exports.wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
 function Breakout(props) {
-  return /*#__PURE__*/React.createElement(_ui.WidthConsumer, null, function (_ref) {
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/React.createElement("div", {
+    return (0, _react.jsx)("div", {
       css: wrapperStyles,
       "data-mode": props.mode,
       style: {

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

@@ -17,6 +17,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _templateObject;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"), "var(--ds-link, ".concat(_colors.B300, ")"), "var(--ds-link-pressed, ".concat(_colors.B500, ")"));
@@ -37,7 +38,7 @@ function Link(props) {
   }
   var handler = (0, _utils.getEventHandler)(eventHandlers, 'link');
   if (isMediaLink) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, props.children);
+    return (0, _react2.jsx)(_react.Fragment, null, props.children);
   }
   var analyticsData = {
     attributes: {
@@ -46,9 +47,9 @@ function Link(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/_react.default.createElement(_linkUrl.default, (0, _extends2.default)({
+  }, (0, _react2.jsx)(_linkUrl.default, (0, _extends2.default)({
     css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {

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

@@ -18,6 +18,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _colors = require("@atlaskit/theme/colors");
 var _utils2 = require("@atlaskit/editor-common/utils");
+/** @jsx jsx */
+
 //  Temporary, until we add aspect ratio to the datasource table
 var datasourceContainerStyle = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-200, 8px)",
@@ -60,7 +62,7 @@ function BlockCard(props) {
   };
   if (props.datasource) {
     if (platform === 'mobile') {
-      return /*#__PURE__*/React.createElement(_inlineCard.default, props);
+      return (0, _react2.jsx)(_inlineCard.default, props);
     }
     var views = props.datasource.views;
     var tableView = views.find(function (view) {
@@ -83,18 +85,18 @@ function BlockCard(props) {
       var columnCustomSizes = columnCustomSizesEntries !== null && columnCustomSizesEntries !== void 0 && columnCustomSizesEntries.length ? Object.fromEntries(columnCustomSizesEntries) : undefined;
       var datasource = props.datasource,
         layout = props.layout;
-      return /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
+      return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: analyticsData
-      }, /*#__PURE__*/React.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+      }, (0, _react2.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
         unsupportedComponent: _ui.UnsupportedInline
-      }, cardProps), /*#__PURE__*/React.createElement(_ui.WidthConsumer, null, function (_ref5) {
+      }, cardProps), (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        return /*#__PURE__*/React.createElement("div", {
+        return (0, _react2.jsx)("div", {
           css: datasourceContainerStyle,
           style: {
             width: (0, _utils2.calcBreakoutWidth)(layout, width)
           }
-        }, /*#__PURE__*/React.createElement(_linkDatasource.DatasourceTableView, {
+        }, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
           datasourceId: datasource.id,
           parameters: datasource.parameters,
           visibleColumnKeys: visibleColumnKeys,
@@ -103,21 +105,21 @@ function BlockCard(props) {
         }));
       })));
     }
-    return /*#__PURE__*/React.createElement(_inlineCard.default, {
+    return (0, _react2.jsx)(_inlineCard.default, {
       data: data,
       url: url
     });
   }
-  return /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
+  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
-  }, /*#__PURE__*/React.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+  }, (0, _react2.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedBlock
-  }, cardProps), /*#__PURE__*/React.createElement(_smartCard.Card, (0, _extends2.default)({
+  }, cardProps), (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "block",
     showActions: rendererAppearance !== 'mobile',
     platform: platform,

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

@@ -7,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _styles = require("@atlaskit/editor-common/styles");
 var _code = require("@atlaskit/code");
 var _messages = require("@atlaskit/editor-common/messages");
 var _codeBlockContainer = _interopRequireDefault(require("./components/codeBlockContainer"));
+/** @jsx jsx */
+
 function CodeBlock(props) {
   var text = props.text,
     language = props.language,
@@ -26,14 +29,14 @@ function CodeBlock(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     wrapLongLines = _useState2[0],
     setWrapLongLines = _useState2[1];
-  return /*#__PURE__*/React.createElement(_codeBlockContainer.default, {
+  return (0, _react2.jsx)(_codeBlockContainer.default, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,
     wrapLongLines: wrapLongLines
-  }, /*#__PURE__*/React.createElement(_code.CodeBlock, {
+  }, (0, _react2.jsx)(_code.CodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,

package/dist/cjs/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -9,6 +9,8 @@ var _react = require("@emotion/react");
 var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton"));
 var _codeBlockWrapButton = _interopRequireDefault(require("./codeBlockWrapButton"));
 var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
 var codeBlockButtonsWrapper = (0, _react.css)({
   position: 'sticky',
   top: '0px',
@@ -51,14 +53,14 @@ var CodeBlockButtonContainer = function CodeBlockButtonContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: codeBlockButtonsWrapper
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: codeBlockButtonsStyle
-  }, allowWrapCodeBlock && /*#__PURE__*/React.createElement(_codeBlockWrapButton.default, {
+  }, allowWrapCodeBlock && (0, _react.jsx)(_codeBlockWrapButton.default, {
     setWrapLongLines: setWrapLongLines,
     wrapLongLines: wrapLongLines
-  }), allowCopyToClipboard && /*#__PURE__*/React.createElement(_codeBlockCopyButton.default, {
+  }), allowCopyToClipboard && (0, _react.jsx)(_codeBlockCopyButton.default, {
     content: text
   })));
 };

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

@@ -14,6 +14,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 var _templateObject;
+/** @jsx jsx */
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    background-color: ", ";\n\n    &:hover {\n      button {\n        opacity: 1;\n      }\n    }\n\n    button {\n      opacity: 0;\n      transition: opacity 0.2s ease 0s;\n    }\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), (0, _components.themed)({
     light: "var(--ds-surface-raised, ".concat(_colors.N20, ")"),
@@ -34,10 +35,10 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     className: className,
     css: codeBlockStyleOverrides
-  }, /*#__PURE__*/React.createElement(_codeBlockButtonContainer.default, {
+  }, (0, _react.jsx)(_codeBlockButtonContainer.default, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     setWrapLongLines: setWrapLongLines,

package/dist/cjs/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -18,14 +19,16 @@ var _enums = require("../../../../analytics/enums");
 var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
     intl = _ref.intl;
-  var _useState = (0, _react.useState)(intl.formatMessage(_messages.codeBlockButtonMessages.copyCodeToClipboard)),
+  var _useState = (0, _react2.useState)(intl.formatMessage(_messages.codeBlockButtonMessages.copyCodeToClipboard)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     tooltip = _useState2[0],
     setTooltip = _useState2[1];
-  var _useState3 = (0, _react.useState)('copy-to-clipboard'),
+  var _useState3 = (0, _react2.useState)('copy-to-clipboard'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     className = _useState4[0],
     setClassName = _useState4[1];
@@ -33,20 +36,20 @@ var CopyButton = function CopyButton(_ref) {
     setTooltip(intl.formatMessage(_messages.codeBlockButtonMessages.copyCodeToClipboard));
     setClassName('copy-to-clipboard');
   };
-  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
+  return (0, _react.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return (0, _react.jsx)("span", null, (0, _react.jsx)(_tooltip.default, {
       content: tooltip,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react.jsx)("div", {
       onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, (0, _react.jsx)(_customThemeButton.default, {
       appearance: "subtle",
       "aria-haspopup": true,
       "aria-label": tooltip,
       className: className,
-      iconBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
+      iconBefore: (0, _react.jsx)(_copy.default, {
         label: tooltip
       }),
       onClick: function onClick(event) {

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -13,16 +14,18 @@ var _icon = _interopRequireDefault(require("@atlaskit/icon"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _enums = require("../../../../analytics/enums");
 var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
+/** @jsx jsx */
+
 var WrapIcon = function WrapIcon() {
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  return (0, _react.jsx)("svg", {
     width: "24",
     height: "24",
     fill: "none",
     viewBox: "0 0 24 24"
-  }, /*#__PURE__*/_react.default.createElement("g", {
+  }, (0, _react.jsx)("g", {
     fill: "currentColor",
     clipPath: "url(#clip0_654_431)"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _react.jsx)("path", {
     d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
     clipRule: "evenodd",
     fillRule: "evenodd"
@@ -33,18 +36,18 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
     wrapLongLines = _ref.wrapLongLines,
     intl = _ref.intl;
   var wrapMessage = intl.formatMessage(wrapLongLines ? _messages.codeBlockButtonMessages.unwrapCode : _messages.codeBlockButtonMessages.wrapCode);
-  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
+  return (0, _react.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return (0, _react.jsx)("span", null, (0, _react.jsx)(_tooltip.default, {
       content: wrapMessage,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, (0, _react.jsx)(_customThemeButton.default, {
       appearance: "subtle",
       "aria-haspopup": true,
       "aria-label": wrapMessage,
       className: "wrap-code ".concat(wrapLongLines ? 'clicked' : ''),
-      iconBefore: /*#__PURE__*/_react.default.createElement(_icon.default, {
+      iconBefore: (0, _react.jsx)(_icon.default, {
         glyph: WrapIcon,
         label: ""
       }),

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -14,6 +14,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _useBidiWarnings2 = require("../../../hooks/use-bidi-warnings");
 var _consts = require("../../../../consts");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    cursor: text;\n  }\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
@@ -43,22 +44,22 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     }),
     renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
   var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     className: classNames,
     ref: ref,
     css: [(0, _styles.codeBlockSharedStyles)(theme), lightWeightCodeBlockStyles]
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map(function (_, index) {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return (0, _react2.jsx)("span", {
       key: index
     });
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
-  }, /*#__PURE__*/_react.default.createElement("code", null, renderBidiWarnings(text))))));
+  }, (0, _react2.jsx)("code", null, renderBidiWarnings(text))))));
 });
 var _default = exports.default = LightWeightCodeBlock;

package/dist/cjs/react/nodes/codeBlock/windowedCodeBlock.js

@@ -10,13 +10,14 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _useInViewport2 = require("../../hooks/use-in-viewport");
 var _useBidiWarnings2 = require("../../hooks/use-bidi-warnings");
 var _lightWeightCodeBlock = _interopRequireDefault(require("./components/lightWeightCodeBlock"));
 var _codeBlockContainer = _interopRequireDefault(require("./components/codeBlockContainer"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /** @jsx jsx */
 var LazyAkCodeBlock = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
   return _regenerator.default.wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
@@ -54,7 +55,7 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     isInViewport = _useInViewport.isInViewport,
     trackingRef = _useInViewport.trackingRef;
   var className = joinWithSpaces(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
-  var memoizedLightWeightCodeBlock = /*#__PURE__*/React.createElement(MemoizedLightWeightCodeBlock, {
+  var memoizedLightWeightCodeBlock = (0, _react2.jsx)(MemoizedLightWeightCodeBlock, {
     ref: trackingRef,
     text: text,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
@@ -64,16 +65,16 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     wrapLongLines = _useState2[0],
     setWrapLongLines = _useState2[1];
-  return isInViewport ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_react.Suspense, {
+  return isInViewport ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_react.Suspense, {
     fallback: memoizedLightWeightCodeBlock
-  }, /*#__PURE__*/React.createElement(_codeBlockContainer.default, {
+  }, (0, _react2.jsx)(_codeBlockContainer.default, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,
     wrapLongLines: wrapLongLines
-  }, /*#__PURE__*/React.createElement(LazyAkCodeBlock, {
+  }, (0, _react2.jsx)(LazyAkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: warningLabel,

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

@@ -20,6 +20,7 @@ var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 var embedCardWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 function EmbedCard(props) {
@@ -99,9 +100,9 @@ function EmbedCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
+  return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement(_ui.WidthConsumer, null, function (_ref2) {
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
     var documentWidth = _ref2.width;
     var isFullWidth = rendererAppearance === 'full-width';
     var containerWidth = documentWidth;
@@ -126,12 +127,12 @@ function EmbedCard(props) {
         throw err;
       }
     };
-    return /*#__PURE__*/React.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+    return (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
       unsupportedComponent: _ui.UnsupportedBlock
-    }, cardProps), /*#__PURE__*/React.createElement(_smartCard.EmbedResizeMessageListener, {
+    }, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight
-    }, /*#__PURE__*/React.createElement(_ui.MediaSingle, {
+    }, (0, _react.jsx)(_ui.MediaSingle, {
       css: uiMediaSingleStyles,
       layout: layout,
       width: originalWidth,
@@ -142,9 +143,9 @@ function EmbedCard(props) {
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       hasFallbackContainer: hasPreview
-    }, /*#__PURE__*/React.createElement("div", {
+    }, (0, _react.jsx)("div", {
       css: embedCardWrapperStyles
-    }, /*#__PURE__*/React.createElement("div", {
+    }, (0, _react.jsx)("div", {
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,
@@ -152,7 +153,7 @@ function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/React.createElement(_smartCard.Card, (0, _extends2.default)({
+    }, (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,