@atlaskit/editor-common 63.0.1 → 66.0.0

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

@@ -1,211 +1,50 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = MentionWithProfileCard;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactDom = require("react-dom");
-
 var _mention = require("@atlaskit/mention");
 
-var _profilecard = _interopRequireDefault(require("@atlaskit/profilecard"));
-
-var _Popup = _interopRequireDefault(require("../Popup"));
-
-var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
+var _profilecard = require("@atlaskit/profilecard");
 
 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 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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var ProfilecardResourcedWithListeners = (0, _withOuterListeners.default)(_profilecard.default);
-
-var MentionWithProfileCard = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(MentionWithProfileCard, _PureComponent);
-
-  var _super = _createSuper(MentionWithProfileCard);
-
-  function MentionWithProfileCard() {
-    var _this;
-
-    (0, _classCallCheck2.default)(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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMentionNodeRef", function (component) {
-      if (!component) {
-        _this.domNode = null;
-      } else {
-        _this.domNode = (0, _reactDom.findDOMNode)(component);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showProfilecard", function (event) {
-      if (!_this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      var _this$calculateLayerP = _this.calculateLayerPosition(),
-          _this$calculateLayerP2 = (0, _slicedToArray2.default)(_this$calculateLayerP, 2),
-          popupAlignX = _this$calculateLayerP2[0],
-          popupAlignY = _this$calculateLayerP2[1];
-
-      _this.setState({
-        popupAlignX: popupAlignX,
-        popupAlignY: popupAlignY,
-        visible: true
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideProfilecard", function () {
-      _this.setState({
-        visible: false
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(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.default.createElement("span", {
-        ref: this.handleRef,
-        onClick: this.showProfilecard
-      }, /*#__PURE__*/_react.default.createElement(_mention.ResourcedMention, {
-        ref: this.handleMentionNodeRef,
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }), target && portal && visible && /*#__PURE__*/_react.default.createElement(_Popup.default, {
-        offset: [0, 8],
-        target: target,
-        mountTo: portal,
-        alignX: popupAlignX,
-        alignY: popupAlignY
-      }, /*#__PURE__*/_react.default.createElement(ProfilecardResourcedWithListeners, {
-        handleClickOutside: this.hideProfilecard,
-        handleEscapeKeydown: this.hideProfilecard,
-        cloudId: cloudId,
-        userId: id,
-        resourceClient: resourceClient,
-        actions: this.getActions(id, text, accessLevel)
-      })));
-    }
-  }]);
-  return MentionWithProfileCard;
-}(_react.PureComponent);
-
-exports.default = MentionWithProfileCard;
+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 = (0, _react.useMemo)(function () {
+    return profilecardProvider.getActions(id, text, accessLevel);
+  }, [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/_react.default.createElement(_profilecard.ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/_react.default.createElement(_mention.ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
+}

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

@@ -106,11 +106,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 = {};
@@ -122,10 +120,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/cjs/ui/Messages/index.js

@@ -9,9 +9,7 @@ exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 
@@ -23,34 +21,35 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _templateObject, _templateObject2;
-
-var Message = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), _typography.h200, function (props) {
-  if (props.error) {
-    return _colors.R400;
-  }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  if (props.valid) {
-    return _colors.G400;
-  }
+var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R400);
+var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.G400);
 
-  return _colors.N200;
-}, (0, _constants.gridSize)() / 2);
+var messageStyle = function messageStyle(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), _colors.N200, (0, _constants.gridSize)() / 2);
+};
 
-var IconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
 
 var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(Message, null, children);
+  return (0, _react.jsx)("div", {
+    css: messageStyle
+  }, children);
 };
 
 exports.HelperMessage = HelperMessage;
 
 var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    error: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), errorColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_error.default, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -61,9 +60,13 @@ exports.ErrorMessage = ErrorMessage;
 
 var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    valid: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_success.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), validColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_success.default, {
     size: "small",
     label: "success"
   })), children);

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

@@ -51,6 +51,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Popup);
 
   function Popup() {
+    var _window;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, Popup);
@@ -77,6 +79,9 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function () {
       return _this.scheduledUpdatePosition(_this.props);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function () {
+      _this.scheduledUpdatePosition(_this.props);
+    }) : undefined);
     return _this;
   }
 
@@ -202,9 +207,14 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       window.addEventListener('resize', this.onResize);
       var stick = this.props.stick;
+      this.scrollParentElement = (0, _utils.findOverflowScrollParent)(this.props.target);
+
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.observe(this.scrollParentElement);
+      }
 
       if (stick) {
-        this.scrollElement = (0, _utils.findOverflowScrollParent)(this.props.target);
+        this.scrollElement = this.scrollParentElement;
       } else {
         this.scrollElement = this.props.scrollableElement;
       }
@@ -222,6 +232,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/cjs/ui/UnsupportedBlock/index.js

@@ -13,9 +13,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 BlockNode = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
@@ -59,15 +59,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var tooltipOnShowHandler = (0, _react.useCallback)(function () {
     return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/_react.default.createElement(BlockNode, null, message, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("div", {
+    css: blockNodeStyle,
+    className: "unsupported"
+  }, message, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+  }, (0, _react2.jsx)(_questionCircle.default, {
     label: "?",
     size: "small"
   }))));

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

@@ -13,9 +13,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 InlineNode = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,
@@ -59,15 +59,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var tooltipOnShowHandler = (0, _react.useCallback)(function () {
     return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/_react.default.createElement(InlineNode, null, message, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("span", {
+    css: inlineNodeStyle
+  }, message, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+  }, (0, _react2.jsx)(_questionCircle.default, {
     label: "?",
     size: "small"
   }))));

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

@@ -9,6 +9,8 @@ exports.WidthProvider = exports.WidthContext = exports.WidthConsumer = void 0;
 exports.createWidthContext = createWidthContext;
 exports.getBreakpoint = getBreakpoint;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,13 +25,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
 var _widthDetector = require("@atlaskit/width-detector");
 
@@ -70,8 +70,6 @@ var Provider = WidthContext.Provider,
     Consumer = WidthContext.Consumer;
 exports.WidthConsumer = Consumer;
 
-var RelativeContainer = /*#__PURE__*/_react.default.memo(_styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n"]))));
-
 var WidthProvider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(WidthProvider, _React$Component);
 
@@ -102,12 +100,13 @@ var WidthProvider = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(WidthProvider, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(RelativeContainer, {
+      return (0, _react2.jsx)("div", {
+        css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          position: relative;\n          width: 100%;\n        "]))),
         className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
+      }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
         setWidth: this.setWidth,
         offscreen: true
-      }), /*#__PURE__*/_react.default.createElement(Provider, {
+      }), (0, _react2.jsx)(Provider, {
         value: createWidthContext(this.state.width)
       }, this.props.children));
     }

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

@@ -5,15 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ClearNextSiblingMarginTop = void 0;
+exports.clearNextSiblingMarginTopStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject;
 
 // We use !important to ensure next sibling gets the margin reset no matter what
-var ClearNextSiblingMarginTop = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
-
-exports.ClearNextSiblingMarginTop = ClearNextSiblingMarginTop;
+var clearNextSiblingMarginTopStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
+exports.clearNextSiblingMarginTopStyle = clearNextSiblingMarginTopStyle;