@atlaskit/editor-common 76.25.1 → 76.25.3

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
@@ -176,10 +177,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: wrapper,
     "data-testid": "element-browser"
-  }, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? /*#__PURE__*/React.createElement(MobileBrowser, _extends({}, props, {
+  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -190,7 +191,7 @@ function StatelessElementBrowser(props) {
     onKeyDown: onKeyDown,
     viewMoreItem: viewMoreItem,
     focusOnViewMore: focusOnViewMore
-  })) : /*#__PURE__*/React.createElement(DesktopBrowser, _extends({}, props, {
+  })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -225,29 +226,29 @@ function MobileBrowser({
   emptyStateHandler,
   viewMoreItem
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mobileElementBrowserContainer,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
-  }, showSearch && /*#__PURE__*/React.createElement(ElementSearch, {
+  }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
     onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  }), showCategories && /*#__PURE__*/React.createElement("nav", {
+  }), showCategories && jsx("nav", {
     css: mobileCategoryListWrapper,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), jsx("div", {
     css: mobileMainContent
-  }, /*#__PURE__*/React.createElement(ElementList, {
+  }, jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -259,7 +260,7 @@ function MobileBrowser({
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
-  })), viewMoreItem && /*#__PURE__*/React.createElement(ViewMore, {
+  })), viewMoreItem && jsx(ViewMore, {
     item: viewMoreItem,
     focus: focusOnViewMore
   }));
@@ -286,39 +287,39 @@ function DesktopBrowser({
   createAnalyticsEvent,
   emptyStateHandler
 }) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
-  }, showCategories && /*#__PURE__*/React.createElement("div", {
+  }, showCategories && jsx("div", {
     css: showCategories ? sideBarShowCategories : sideBar
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, jsx("h2", {
     css: sidebarHeading,
     "data-testid": "sidebar-heading"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
-  })), /*#__PURE__*/React.createElement("nav", {
+  })), jsx("nav", {
     css: categoryListWrapper
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
     createAnalyticsEvent: createAnalyticsEvent
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), jsx("div", {
     css: mainContent,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
-  }, showSearch && /*#__PURE__*/React.createElement("div", {
+  }, showSearch && jsx("div", {
     css: searchContainer
-  }, /*#__PURE__*/React.createElement(ElementSearch, {
+  }, jsx(ElementSearch, {
     onSearch: onSearch,
     onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  })), /*#__PURE__*/React.createElement(ElementList, {
+  })), jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,

package/dist/es2019/element-browser/hooks/use-container-width.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 
 /**
@@ -43,11 +44,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   const ContainerWidthMonitor = /*#__PURE__*/memo(() => {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: widthObserverWrapper,
       ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });

package/dist/es2019/keymaps/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { base, keyName } from 'w3c-keyname';
 import { N400 } from '@atlaskit/theme/colors';
 import { editorCommandToPMCommand } from '../preset/editor-commands';
@@ -118,7 +119,7 @@ export const ToolTipContent = /*#__PURE__*/React.memo(({
   keymap
 }) => {
   const shortcut = shortcutOverride || keymap && formatShortcut(keymap);
-  return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && '\u00A0', shortcut && /*#__PURE__*/React.createElement("span", {
+  return shortcut || description ? jsx(Fragment, null, description, shortcut && description && '\u00A0', shortcut && jsx("span", {
     css: tooltipShortcutStyle
   }, shortcut)) : null;
 });

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import React, { PureComponent } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { flushSync } from 'react-dom';
 import { defineMessages, injectIntl } from 'react-intl-next';
@@ -98,7 +100,7 @@ export const messages = defineMessages({
     description: 'Visible label for text input in hyperlink floating control'
   }
 });
-const defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
+const defaultIcon = jsx(Page16Icon, {
   label: 'page'
 });
 const mapActivityProviderResultToLinkSearchItemData = ({
@@ -687,27 +689,27 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     // as the Aria design pattern for combobox does not work in this case
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
     const screenReaderText = browser.safari && this.getScreenReaderText();
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "aria-label": "Hyperlink Edit",
       className: "recent-list"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: [container, !!activityProvider && containerWithProvider, containerPadding],
       ref: this.wrapperRef
-    }, /*#__PURE__*/React.createElement("label", {
+    }, jsx("label", {
       htmlFor: linkSearchInputId,
       css: inputLabel
-    }, formatMessage(messages.linkVisibleLabel)), /*#__PURE__*/React.createElement("div", {
+    }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
-    }, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+    }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
       ariaRelevant: "additions",
       delay: 250
-    }), /*#__PURE__*/React.createElement("div", {
+    }), jsx("div", {
       css: visuallyHiddenStyles,
       "aria-hidden": "true",
       id: screenReaderDescriptionId
-    }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+    }, formatMessage(messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
       role: "combobox",
       ariaExpanded: true,
       ariaActiveDescendant: ariaActiveDescendant,
@@ -725,23 +727,23 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       defaultValue: displayUrl,
       onKeyDown: this.handleKeyDown,
       inputId: linkSearchInputId
-    }), displayUrl && /*#__PURE__*/React.createElement("div", {
+    }), displayUrl && jsx("div", {
       css: clearTextWrapper
-    }, /*#__PURE__*/React.createElement(Tooltip, {
+    }, jsx(Tooltip, {
       content: formatClearLinkText
-    }, /*#__PURE__*/React.createElement("button", {
+    }, jsx("button", {
       type: "button",
       css: clearText,
       onClick: this.handleClearText,
       tabIndex: 0
-    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+    }, jsx(CrossCircleIcon, {
       label: formatClearLinkText
-    }))))), /*#__PURE__*/React.createElement("label", {
+    }))))), jsx("label", {
       htmlFor: displayTextInputId,
       css: [inputLabel, textLabelMargin]
-    }, formatMessage(messages.textVisibleLabel)), /*#__PURE__*/React.createElement("div", {
+    }, formatMessage(messages.textVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
-    }, /*#__PURE__*/React.createElement(PanelTextInput, {
+    }, jsx(PanelTextInput, {
       ref: ele => this.displayTextInputContainer = ele,
       testId: 'link-text',
       onChange: this.updateTextInput,
@@ -750,25 +752,25 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onSubmit: this.handleSubmit,
       onKeyDown: this.handleKeyDown,
       inputId: displayTextInputId
-    }), displayText && /*#__PURE__*/React.createElement("div", {
+    }), displayText && jsx("div", {
       css: clearTextWrapper
-    }, /*#__PURE__*/React.createElement(Tooltip, {
+    }, jsx(Tooltip, {
       content: formatMessage(messages.clearText)
-    }, /*#__PURE__*/React.createElement("button", {
+    }, jsx("button", {
       type: "button",
       css: clearText,
       onClick: this.handleClearDisplayText,
       onKeyDown: this.handleClearTextKeyDown
-    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+    }, jsx(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
-    }))))), /*#__PURE__*/React.createElement("div", {
+    }))))), jsx("div", {
       css: visuallyHiddenStyles,
       "aria-live": "polite",
       "aria-atomic": "true",
       id: "fabric.editor.hyperlink.suggested.results"
     }, displayUrl && formatMessage(messages.searchLinkResults, {
       count: items.length
-    })), /*#__PURE__*/React.createElement(LinkSearchList, {
+    })), jsx(LinkSearchList, {
       ariaControls: "fabric.editor.hyperlink.suggested.results",
       id: linkSearchListId,
       role: "listbox",

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
@@ -34,12 +35,12 @@ export default class LinkSearchList extends PureComponent {
     let itemsContent;
     let loadingContent;
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement("ul", {
+      itemsContent = jsx("ul", {
         css: linkSearchList,
         id: id,
         role: role,
         "aria-controls": ariaControls
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -52,14 +53,14 @@ export default class LinkSearchList extends PureComponent {
       })));
     }
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement("div", {
+      loadingContent = jsx("div", {
         "data-testid": `${id}-loading`,
         css: spinnerContainer
-      }, /*#__PURE__*/React.createElement(Spinner, {
+      }, jsx(Spinner, {
         size: "medium"
       }));
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: listContainer
     }, itemsContent, loadingContent);
   }

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { injectIntl } from 'react-intl-next';
@@ -85,14 +86,14 @@ class LinkSearchListItem extends React.PureComponent {
       intl
     } = this.props;
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         css: iconStyle
       }, icon);
     }
     if (iconUrl) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         css: iconStyle
-      }, /*#__PURE__*/React.createElement("img", {
+      }, jsx("img", {
         src: iconUrl,
         alt: getCorrectAltByIconUrl(iconUrl, intl)
       }));
@@ -105,7 +106,7 @@ class LinkSearchListItem extends React.PureComponent {
       intl
     } = this.props;
     const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
-    return date && /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022", /*#__PURE__*/React.createElement("span", {
+    return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
       className: "link-search-timestamp",
       "data-test-id": "link-search-timestamp"
     }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -117,7 +118,7 @@ class LinkSearchListItem extends React.PureComponent {
       id,
       role
     } = this.props;
-    return /*#__PURE__*/React.createElement("li", {
+    return jsx("li", {
       css: [container, selected && containerSelected],
       role: role,
       id: id,
@@ -127,11 +128,11 @@ class LinkSearchListItem extends React.PureComponent {
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onClick: this.handleSelect
-    }, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
+    }, this.renderIcon(), jsx("span", {
       css: nameWrapper
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: nameStyle
-    }, item.name), /*#__PURE__*/React.createElement("div", {
+    }, item.name), jsx("div", {
       "data-testid": "link-search-list-item-container",
       css: containerName
     }, item.container, this.renderTimeStamp())));

package/dist/es2019/media-inline/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_IMAGE_WIDTH = 250;
+export const DEFAULT_IMAGE_HEIGHT = 200;

package/dist/es2019/media-inline/index.js

@@ -1,3 +1,4 @@
 export { MediaInlineImageCard } from './media-inline-image-card';
 export { shouldShowInlineImage } from './utils';
-export { InlineImageWrapper } from './inline-image-wrapper';
+export { InlineImageWrapper } from './inline-image-wrapper';
+export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';

package/dist/es2019/media-inline/inline-image-wrapper.js

@@ -1,4 +1,6 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 const wrapperStyle = css({
   display: 'inline-block',
@@ -15,7 +17,7 @@ export const InlineImageWrapper = ({
   children,
   isSelected
 }) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [wrapperStyle, isSelected && selectedStyle]
   }, children);
 };

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -1,5 +1,9 @@
+/** @jsx jsx */
+
 import { useEffect, useState } from 'react';
+import { jsx } from '@emotion/react';
 import { createIntl, injectIntl } from 'react-intl-next';
+import { Card } from '@atlaskit/media-card';
 import { messages } from '../messages/media-inline-card';
 import { InlineImageWrapper } from './inline-image-wrapper';
 import { InlineImageCardErrorView } from './views/error-view';
@@ -8,7 +12,9 @@ export const MediaInlineImageCardInternal = ({
   mediaClient,
   identifier,
   isSelected,
-  intl
+  intl,
+  alt,
+  isLazy
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
@@ -37,37 +43,40 @@ export const MediaInlineImageCardInternal = ({
     if (subscribeError) {
       const isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
       const errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
-      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+      return jsx(InlineImageCardErrorView, {
         message: formatMessage(errorMessage)
       });
     }
     if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
-      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+      return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
     }
     if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+      return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
     }
     // Empty file handling
     if (fileState && !fileState.name) {
-      return /*#__PURE__*/React.createElement(InlineImageCardErrorView, {
+      return jsx(InlineImageCardErrorView, {
         message: formatMessage(messages.unableToLoadContent)
       });
     }
     if (!fileState) {
-      return /*#__PURE__*/React.createElement(InlineImageCardLoadingView, null);
+      return jsx(InlineImageCardLoadingView, null);
     }
-
-    // TODO
-    // use Card from `@atlaskit/media-card` with an inline block wrapper
-    // with:
-    // selection state and `mediaOptions.allowLazyLoading`
-    throw new Error(`not yet implemented: MediaInlineImageCard loading view`);
+    return jsx(Card, {
+      mediaClientConfig: mediaClient.mediaClientConfig,
+      isLazy: isLazy,
+      identifier: identifier,
+      selectable: true,
+      disableOverlay: true,
+      selected: isSelected,
+      alt: alt
+    });
   };
-  return /*#__PURE__*/React.createElement(InlineImageWrapper, {
+  return jsx(InlineImageWrapper, {
     isSelected: isSelected
   }, content());
 };

package/dist/es2019/media-inline/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/media-inline/views/error-view.js

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { R300 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -10,14 +13,14 @@ export const InlineImageCardErrorView = ({
   icon,
   height = ICON_SIZE_THRESOLD
 }) => {
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     testId: testId
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: message,
     position: "top",
     tag: "span",
     hideTooltipOnClick: true
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, icon || /*#__PURE__*/React.createElement(WarningIcon, {
+  }, jsx(IconWrapper, null, icon || jsx(WarningIcon, {
     label: "error",
     size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
     primaryColor: `var(--ds-icon-danger, ${R300})`

package/dist/es2019/media-inline/views/frame.js

@@ -1,8 +1,11 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { wrapperStyle } from './wrapper';
 export const Frame = ({
   children,
   testId
-}) => /*#__PURE__*/React.createElement("span", {
+}) => jsx("span", {
   css: wrapperStyle,
   "data-testid": testId
 }, children);

package/dist/es2019/media-inline/views/icon-wrapper.js

@@ -1,4 +1,6 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 const wrapperStyle = css({
   display: 'flex',
   'span > svg': {
@@ -8,7 +10,7 @@ const wrapperStyle = css({
 export const IconWrapper = ({
   children
 }) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: wrapperStyle,
     "data-testid": "media-inline-image-card-icon"
   }, children);

package/dist/es2019/media-inline/views/loading-view.js

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { ICON_SIZE_THRESOLD } from './constants';
 import { Frame } from './frame';
@@ -5,9 +8,9 @@ export const InlineImageCardLoadingView = ({
   testId = 'media-inline-image-card-loading-view',
   height = ICON_SIZE_THRESOLD
 }) => {
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     testId: testId
-  }, /*#__PURE__*/React.createElement(Spinner, {
+  }, jsx(Spinner, {
     size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small'
   }));
 };

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.25.1";
+const packageVersion = "76.25.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
@@ -158,21 +160,21 @@ function getPortalChildren({
     //  refactor. A test suite to catch any instances of this is ideal however
     //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
 
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.REACT_NODE_VIEW,
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
       className: `zeroWidthSpaceContainer`
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
-    }), ZERO_WIDTH_SPACE), /*#__PURE__*/React.createElement(Component, _extends({
+    }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
       view: nodeViewParams.view
       // TODO:  ED-13910 - Remove the boolean to fix the prosemirror view type
       ,
       getPos: nodeViewParams.getPos,
       node: currentNode
-    }, extraComponentProps)), /*#__PURE__*/React.createElement("span", {
+    }, extraComponentProps)), jsx("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
     }));
   };

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
@@ -28,12 +29,12 @@ export class CaptionComponent extends React.Component {
       }
     } = this.props;
     const showPlaceholder = !selected && !hasContent;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return jsx("div", _extends({
       "data-media-caption": true,
       "data-testid": "media-caption"
     }, dataAttributes, {
       css: captionWrapperStyle
-    }), showPlaceholder ? /*#__PURE__*/React.createElement("p", {
+    }), showPlaceholder ? jsx("p", {
       css: placeholderStyle
     }, formatMessage(messages.placeholder)) : null, children);
   }