@atlaskit/editor-common 76.25.0 → 76.25.2

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

@@ -1,8 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+
 import { useEffect, useState } from 'react';
-export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
+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';
+import { InlineImageCardLoadingView } from './views/loading-view';
+export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
-    identifier = _ref.identifier;
+    identifier = _ref.identifier,
+    isSelected = _ref.isSelected,
+    intl = _ref.intl,
+    alt = _ref.alt,
+    isLazy = _ref.isLazy;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
@@ -11,6 +24,10 @@ export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     subscribeError = _useState4[0],
     setSubscribeError = _useState4[1];
+  var _ref2 = intl || createIntl({
+      locale: 'en'
+    }),
+    formatMessage = _ref2.formatMessage;
   useEffect(function () {
     var subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
@@ -27,41 +44,47 @@ export var MediaInlineImageCard = function MediaInlineImageCard(_ref) {
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (subscribeError) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard subscribe error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard failed-processing view");
-  }
-  // Empty file handling
-  if (fileState && !fileState.name) {
-    // TODO:
-    // referring to packages/media/media-card/src/inline/mediaInlineCard.tsx
-    // for error message and analytics
-    throw new Error("not yet implemented: MediaInlineImageCard empty file name error view");
-  }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
-    throw new Error("not yet implemented: MediaInlineImageCard uploading view");
-  }
-  if (!fileState) {
-    throw new Error("not yet implemented: MediaInlineImageCard loading view");
-  }
-
-  // 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");
-};
+  var content = function content() {
+    if (subscribeError) {
+      var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
+      var errorMessage = isUploading ? messages.failedToUpload : messages.unableToLoadContent;
+      return jsx(InlineImageCardErrorView, {
+        message: formatMessage(errorMessage)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+      return jsx(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+      return jsx(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    // Empty file handling
+    if (fileState && !fileState.name) {
+      return jsx(InlineImageCardErrorView, {
+        message: formatMessage(messages.unableToLoadContent)
+      });
+    }
+    if (!fileState) {
+      return jsx(InlineImageCardLoadingView, null);
+    }
+    return jsx(Card, {
+      mediaClientConfig: mediaClient.mediaClientConfig,
+      isLazy: isLazy,
+      identifier: identifier,
+      selectable: true,
+      disableOverlay: true,
+      selected: isSelected,
+      alt: alt
+    });
+  };
+  return jsx(InlineImageWrapper, {
+    isSelected: isSelected
+  }, content());
+};
+export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
+  enforceContext: false
+});

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

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

package/dist/esm/media-inline/views/constants.js

@@ -0,0 +1,2 @@
+/** Height threshold that determines icon size to be small or medium */
+export var ICON_SIZE_THRESOLD = 24;

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

@@ -0,0 +1,29 @@
+/** @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';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+import { IconWrapper } from './icon-wrapper';
+export var InlineImageCardErrorView = function InlineImageCardErrorView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-error-view' : _ref$testId,
+    message = _ref.message,
+    icon = _ref.icon,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? ICON_SIZE_THRESOLD : _ref$height;
+  return jsx(Frame, {
+    testId: testId
+  }, jsx(Tooltip, {
+    content: message,
+    position: "top",
+    tag: "span",
+    hideTooltipOnClick: true
+  }, jsx(IconWrapper, null, icon || jsx(WarningIcon, {
+    label: "error",
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
+    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
+  }))));
+};

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

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { wrapperStyle } from './wrapper';
+export var Frame = function Frame(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return jsx("span", {
+    css: wrapperStyle,
+    "data-testid": testId
+  }, children);
+};

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+var wrapperStyle = css({
+  display: 'flex',
+  'span > svg': {
+    verticalAlign: 'baseline'
+  }
+});
+export var IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: wrapperStyle,
+    "data-testid": "media-inline-image-card-icon"
+  }, children);
+};

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { ICON_SIZE_THRESOLD } from './constants';
+import { Frame } from './frame';
+export var InlineImageCardLoadingView = function InlineImageCardLoadingView(_ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'media-inline-image-card-loading-view' : _ref$testId,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? ICON_SIZE_THRESOLD : _ref$height;
+  return jsx(Frame, {
+    testId: testId
+  }, jsx(Spinner, {
+    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small'
+  }));
+};

package/dist/esm/media-inline/views/wrapper.js

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
+export var wrapperStyle = css({
+  display: 'inline-flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxDecorationBreak: 'clone',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: "".concat("var(--ds-text, ".concat(N900, ")")),
+  backgroundColor: "".concat("var(--ds-background-neutral, ".concat(N30A, ")")),
+  transition: '0.1s all ease-in-out',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(N40A, ")"))
+  }
+});

package/dist/esm/messages/media-inline-card.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  unableToLoadContent: {
+    id: 'fabric.editor.unableToLoadContent',
+    defaultMessage: "We couldn't load this content",
+    description: 'Display this message when there is an error loading file content'
+  },
+  failedToUpload: {
+    id: 'fabric.editor.failed_to_upload',
+    defaultMessage: 'Failed to upload',
+    description: 'Display this message when there is an error uploading a file'
+  }
+});

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.25.0";
+var packageVersion = "76.25.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/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';
@@ -155,21 +157,21 @@ function getPortalChildren(_ref2) {
     //  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 || (_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: "".concat(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: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }));
   };

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

@@ -8,8 +8,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
 import React from 'react';
-import { 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';
@@ -32,12 +33,12 @@ export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
         dataAttributes = _this$props.dataAttributes,
         formatMessage = _this$props.intl.formatMessage;
       var 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);
     }

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

@@ -9,15 +9,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+
 import { Component } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.25.0";
+var packageVersion = "76.25.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -125,7 +127,7 @@ var DropList = /*#__PURE__*/function (_Component) {
         onPositioned = _this$props.onPositioned,
         testId = _this$props.testId,
         id = _this$props.id;
-      var layerContent = isOpen ? /*#__PURE__*/React.createElement("div", {
+      var layerContent = isOpen ? jsx("div", {
         css: function css(theme) {
           return _this2.menuWrapper({
             theme: theme
@@ -137,14 +139,14 @@ var DropList = /*#__PURE__*/function (_Component) {
         id: id,
         role: "presentation"
       }, children) : null;
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         css: this.wrapperStyles
-      }, /*#__PURE__*/React.createElement(Layer, {
+      }, jsx(Layer, {
         content: layerContent,
         offset: dropOffset,
         position: position,
         onPositioned: onPositioned
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: this.triggerStyles,
         ref: this.handleTriggerRef
       }, trigger)));

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

@@ -3,8 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+/** @jsx jsx */
+
 import React, { forwardRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B300, DN50, DN600, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
@@ -48,7 +50,7 @@ var EXPAND_EXPANDED_BORDER_COLOR = themed({
 export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
     expanded = _ref.expanded;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: function css(props) {
       return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
     }
@@ -65,7 +67,7 @@ export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3
 export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: expandLayoutWrapperStyle
   }, rest, {
     ref: ref

package/dist/esm/ui/FloatingToolbar/Separator.js

@@ -1,10 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 ", ";\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-space-050, 4px)");
 export default (function () {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: separator,
     className: "separator"
   });

package/dist/esm/ui/FloatingToolbar/SmallerEditIcon.js

@@ -1,14 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
 var editIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n"])));
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export var SmallerEditIcon = function SmallerEditIcon() {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: editIconStyles
-  }, /*#__PURE__*/React.createElement(EditIcon, {
+  }, jsx(EditIcon, {
     label: "edit"
   }));
 };

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

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
@@ -75,7 +77,7 @@ export default function MediaSingle(_ref) {
   var _children = _slicedToArray(children, 2),
     media = _children[0],
     caption = _children[1];
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     ref: handleMediaSingleRef,
     css: MediaSingleDimensionHelper({
       width: width,
@@ -93,7 +95,7 @@ export default function MediaSingle(_ref) {
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/esm/ui/MediaSingle/styled.js

@@ -2,8 +2,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
@@ -130,7 +132,7 @@ export var mediaWrapperStyle = function mediaWrapperStyle(props) {
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,
     rest = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mediaWrapperStyle(rest)
   }, children);
 };
@@ -145,7 +147,7 @@ MediaWrapper.displayName = 'WrapperMediaSingle';
 
 export var MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
   var borderColor = _ref4.borderColor;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     style: {
       position: 'absolute',
       inset: '0px',

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

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
@@ -13,19 +15,19 @@ var messageStyle = function messageStyle(props) {
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: messageStyle
   }, children);
 };
 export var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: function css(theme) {
       return [messageStyle(theme), errorColor];
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: iconWrapperStyle
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+  }, jsx(ErrorIcon, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -33,13 +35,13 @@ export var ErrorMessage = function ErrorMessage(_ref2) {
 };
 export var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: function css(theme) {
       return [messageStyle(theme), validColor];
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: iconWrapperStyle
-  }, /*#__PURE__*/React.createElement(SuccessIcon, {
+  }, jsx(SuccessIcon, {
     size: "small",
     label: "success"
   })), children);

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

@@ -8,7 +8,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
 import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 var KeyZCode = 90;
@@ -115,7 +118,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         role = _this$props2.role,
         inputId = _this$props2.inputId;
       var value = this.state.value;
-      return /*#__PURE__*/React.createElement("input", {
+      return jsx("input", {
         css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -27,18 +28,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: blockNodeStyle,
     className: "unsupported"
-  }, message, /*#__PURE__*/React.createElement(Tooltip, {
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -27,17 +28,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: inlineNodeStyle
-  }, message, /*#__PURE__*/React.createElement(Tooltip, {
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));