@atlaskit/editor-common 63.0.1 → 66.0.0

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

@@ -1,9 +1,12 @@
 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 { calcPxFromPct } from './grid';
-import { MediaSingleWrapper, MediaWrapper } from './styled';
+import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
 export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -26,7 +29,8 @@ export default function MediaSingle(_ref) {
       fullWidthMode = _ref.fullWidthMode,
       lineLength = _ref.lineLength,
       _ref$hasFallbackConta = _ref.hasFallbackContainer,
-      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta;
+      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
+      handleMediaSingleRef = _ref.handleMediaSingleRef;
   var children = React.Children.toArray(propsChildren);
 
   if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
@@ -80,12 +84,15 @@ export default function MediaSingle(_ref) {
       media = _children[0],
       caption = _children[1];
 
-  return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return jsx("div", {
+    ref: handleMediaSingleRef,
+    css: MediaSingleDimensionHelper({
+      width: width,
+      layout: layout,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -93,7 +100,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/link.js

@@ -2,6 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
-export var MediaLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));
-MediaLink.displayName = 'MediaLink';
+import { css } from '@emotion/react';
+export var mediaLinkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));

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

@@ -1,8 +1,12 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 
@@ -140,12 +144,15 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
 };
 
-export var MediaWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer, function (_ref3) {
-  var hasFallbackContainer = _ref3.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-}, function (_ref4) {
-  var hasFallbackContainer = _ref4.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-});
-export var MediaSingleWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), MediaSingleDimensionHelper);
+export var mediaWrapperStyle = function mediaWrapperStyle(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+};
+export var MediaWrapper = function MediaWrapper(_ref3) {
+  var children = _ref3.children,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return jsx("div", {
+    css: mediaWrapperStyle(rest)
+  }, children);
+};
 MediaWrapper.displayName = 'WrapperMediaSingle';

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

@@ -31,7 +31,6 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
           accessLevel = _this$props.accessLevel,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           text = _this$props.text;
       var mentionProvider = providers.mentionProvider,
           profilecardProvider = providers.profilecardProvider;
@@ -41,8 +40,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });
 

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -1,190 +1,34 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import ProfileCard from '@atlaskit/profilecard';
-import Popup from '../Popup';
-import withOuterListeners from '../with-outer-listeners';
-var ProfilecardResourcedWithListeners = withOuterListeners(ProfileCard);
-
-var MentionWithProfileCard = /*#__PURE__*/function (_PureComponent) {
-  _inherits(MentionWithProfileCard, _PureComponent);
-
-  var _super = _createSuper(MentionWithProfileCard);
-
-  function MentionWithProfileCard() {
-    var _this;
-
-    _classCallCheck(this, MentionWithProfileCard);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMentionNodeRef", function (component) {
-      if (!component) {
-        _this.domNode = null;
-      } else {
-        _this.domNode = findDOMNode(component);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "showProfilecard", function (event) {
-      if (!_this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      var _this$calculateLayerP = _this.calculateLayerPosition(),
-          _this$calculateLayerP2 = _slicedToArray(_this$calculateLayerP, 2),
-          popupAlignX = _this$calculateLayerP2[0],
-          popupAlignY = _this$calculateLayerP2[1];
-
-      _this.setState({
-        popupAlignX: popupAlignX,
-        popupAlignY: popupAlignY,
-        visible: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hideProfilecard", function () {
-      _this.setState({
-        visible: false
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(MentionWithProfileCard, [{
-    key: "calculateLayerPosition",
-    value: function calculateLayerPosition() {
-      var domNodeCentreCoords = this.getDomNodeCenterCoords();
-      var visibleAreaCentreCoords = this.getVisibleAreaCentreCoords();
-      var popupAlignY = domNodeCentreCoords.y > visibleAreaCentreCoords.y ? 'top' : 'bottom';
-      var popupAlignX = domNodeCentreCoords.x > visibleAreaCentreCoords.x ? 'right' : 'left';
-      return [popupAlignX, popupAlignY];
-    }
-  }, {
-    key: "getDomNodeCenterCoords",
-    value: function getDomNodeCenterCoords() {
-      var rect = this.domNode.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      };
-    }
-  }, {
-    key: "getVisibleAreaCentreCoords",
-    value: function getVisibleAreaCentreCoords() {
-      return {
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      };
-    }
-  }, {
-    key: "getActions",
-    value: function getActions(id, text, accessLevel) {
-      var _this2 = this;
-
-      var profilecardProvider = this.props.profilecardProvider;
-      var actions = profilecardProvider.getActions(id, text, accessLevel);
-      return actions.map(function (action) {
-        return _objectSpread(_objectSpread({}, action), {}, {
-          callback: function callback() {
-            _this2.setState({
-              visible: false
-            });
-
-            if (action && action.callback) {
-              action.callback();
-            }
-          }
-        });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          accessLevel = _this$props.accessLevel,
-          id = _this$props.id,
-          mentionProvider = _this$props.mentionProvider,
-          profilecardProvider = _this$props.profilecardProvider,
-          text = _this$props.text,
-          onClick = _this$props.onClick,
-          onMouseEnter = _this$props.onMouseEnter,
-          onMouseLeave = _this$props.onMouseLeave,
-          portal = _this$props.portal;
-      var _this$state = this.state,
-          popupAlignX = _this$state.popupAlignX,
-          popupAlignY = _this$state.popupAlignY,
-          target = _this$state.target,
-          visible = _this$state.visible;
-      var cloudId = profilecardProvider.cloudId,
-          resourceClient = profilecardProvider.resourceClient;
-      return /*#__PURE__*/React.createElement("span", {
-        ref: this.handleRef,
-        onClick: this.showProfilecard
-      }, /*#__PURE__*/React.createElement(ResourcedMention, {
-        ref: this.handleMentionNodeRef,
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }), target && portal && visible && /*#__PURE__*/React.createElement(Popup, {
-        offset: [0, 8],
-        target: target,
-        mountTo: portal,
-        alignX: popupAlignX,
-        alignY: popupAlignY
-      }, /*#__PURE__*/React.createElement(ProfilecardResourcedWithListeners, {
-        handleClickOutside: this.hideProfilecard,
-        handleEscapeKeydown: this.hideProfilecard,
-        cloudId: cloudId,
-        userId: id,
-        resourceClient: resourceClient,
-        actions: this.getActions(id, text, accessLevel)
-      })));
-    }
-  }]);
-
-  return MentionWithProfileCard;
-}(PureComponent);
-
-export { MentionWithProfileCard as default };
+import { ProfileCardTrigger } from '@atlaskit/profilecard';
+export default function MentionWithProfileCard(_ref) {
+  var id = _ref.id,
+      text = _ref.text,
+      accessLevel = _ref.accessLevel,
+      mentionProvider = _ref.mentionProvider,
+      profilecardProvider = _ref.profilecardProvider,
+      onClick = _ref.onClick,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave;
+  var cloudId = profilecardProvider.cloudId,
+      resourceClient = profilecardProvider.resourceClient;
+  var actions = useMemo(function () {
+    return profilecardProvider.getActions(id, text, accessLevel);
+  }, [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/React.createElement(ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/React.createElement(ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
+}

package/dist/esm/ui/Mention/mention-with-providers.js

@@ -83,11 +83,9 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           accessLevel = _this$props.accessLevel,
-          userType = _this$props.userType,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
           mentionProvider = _this$props.mentionProvider,
-          portal = _this$props.portal,
           text = _this$props.text;
       var profilecardProvider = this.state.profilecardProvider;
       var actionHandlers = {};
@@ -99,10 +97,8 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
         id: id,
         text: text,
         accessLevel: accessLevel,
-        userType: userType,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       }, actionHandlers));
     }
   }]);

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

@@ -1,35 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @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';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-var Message = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200, function (props) {
-  if (props.error) {
-    return R400;
-  }
+var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), R400);
+var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), G400);
 
-  if (props.valid) {
-    return G400;
-  }
+var messageStyle = function messageStyle(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), N200, gridSize() / 2);
+};
 
-  return N200;
-}, gridSize() / 2);
-var IconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(Message, null, children);
+  return jsx("div", {
+    css: messageStyle
+  }, children);
 };
 export var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Message, {
-    error: true
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+  return jsx("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), errorColor];
+    }
+  }, jsx("span", {
+    css: iconWrapperStyle
+  }, jsx(ErrorIcon, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -37,9 +39,13 @@ export var ErrorMessage = function ErrorMessage(_ref2) {
 };
 export var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Message, {
-    valid: true
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(SuccessIcon, {
+  return jsx("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), validColor];
+    }
+  }, jsx("span", {
+    css: iconWrapperStyle
+  }, jsx(SuccessIcon, {
     size: "small",
     label: "success"
   })), children);

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

@@ -26,6 +26,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Popup);
 
   function Popup() {
+    var _window;
+
     var _this;
 
     _classCallCheck(this, Popup);
@@ -58,6 +60,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       return _this.scheduledUpdatePosition(_this.props);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function () {
+      _this.scheduledUpdatePosition(_this.props);
+    }) : undefined);
+
     return _this;
   }
 
@@ -184,9 +190,14 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       window.addEventListener('resize', this.onResize);
       var stick = this.props.stick;
+      this.scrollParentElement = findOverflowScrollParent(this.props.target);
+
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.observe(this.scrollParentElement);
+      }
 
       if (stick) {
-        this.scrollElement = findOverflowScrollParent(this.props.target);
+        this.scrollElement = this.scrollParentElement;
       } else {
         this.scrollElement = this.props.scrollableElement;
       }
@@ -204,6 +215,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         this.scrollElement.removeEventListener('scroll', this.onResize);
       }
 
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.unobserve(this.scrollParentElement);
+      }
+
       this.scheduledUpdatePosition.cancel();
     }
   }, {

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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -14,7 +15,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var BlockNode = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
@@ -32,15 +33,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(BlockNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: blockNodeStyle,
+    className: "unsupported"
+  }, 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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -14,7 +15,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var InlineNode = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,
@@ -32,15 +33,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(InlineNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("span", {
+    css: inlineNodeStyle
+  }, 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/WidthProvider/index.js

@@ -1,3 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,7 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
@@ -13,9 +13,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
-import styled from 'styled-components';
 import { WidthObserver } from '@atlaskit/width-detector';
 var SCROLLBAR_WIDTH = 30;
 export function getBreakpoint() {
@@ -41,7 +42,6 @@ export function createWidthContext() {
 export var WidthContext = /*#__PURE__*/React.createContext(createWidthContext());
 var Provider = WidthContext.Provider,
     Consumer = WidthContext.Consumer;
-var RelativeContainer = /*#__PURE__*/React.memo(styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n"]))));
 export var WidthProvider = /*#__PURE__*/function (_React$Component) {
   _inherits(WidthProvider, _React$Component);
 
@@ -76,12 +76,13 @@ export var WidthProvider = /*#__PURE__*/function (_React$Component) {
   _createClass(WidthProvider, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RelativeContainer, {
+      return jsx("div", {
+        css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n        "]))),
         className: this.props.className
-      }, /*#__PURE__*/React.createElement(WidthObserver, {
+      }, jsx(WidthObserver, {
         setWidth: this.setWidth,
         offscreen: true
-      }), /*#__PURE__*/React.createElement(Provider, {
+      }), jsx(Provider, {
         value: createWidthContext(this.state.width)
       }, this.props.children));
     }

package/dist/esm/ui/clear-next-sibling-margin-top.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components'; // We use !important to ensure next sibling gets the margin reset no matter what
+import { css } from '@emotion/react'; // We use !important to ensure next sibling gets the margin reset no matter what
 
-export var ClearNextSiblingMarginTop = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
+export var clearNextSiblingMarginTopStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));