@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/plugins/find-replace/styles.js

@@ -9,7 +9,7 @@ exports.selectedSearchMatchClass = exports.selectedSearchMatchBgColour = exports
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -23,5 +23,5 @@ var searchMatchClass = 'search-match';
 exports.searchMatchClass = searchMatchClass;
 var selectedSearchMatchClass = 'selected-search-match';
 exports.selectedSearchMatchClass = selectedSearchMatchClass;
-var findReplaceStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, searchMatchBgColour, selectedSearchMatchClass, selectedSearchMatchBgColour);
+var findReplaceStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, searchMatchBgColour, selectedSearchMatchClass, selectedSearchMatchBgColour);
 exports.findReplaceStyles = findReplaceStyles;

package/dist/cjs/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -29,7 +29,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -47,7 +47,7 @@ var _types = require("../../analytics/types");
 
 var _keymaps = require("../../../keymaps");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -57,12 +57,9 @@ 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; } }
 
-var ToolbarButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: ", ";\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), function (props) {
-  return props.takeFullWidth ? 1 : 0;
-}, _editorSharedStyles.akEditorMobileMaxWidth);
-
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
+var toolbarButtonWrapperFullWith = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
+var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 var messages = (0, _reactIntlNext.defineMessages)({
   findReplaceToolbarButton: {
     id: 'fabric.editor.findReplaceToolbarButton',
@@ -137,9 +134,9 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           takeFullWidth = _this$props.takeFullWidth;
       var title = formatMessage(messages.findReplaceToolbarButton);
       var stackBelowOtherEditorFloatingPanels = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
-      return /*#__PURE__*/_react.default.createElement(ToolbarButtonWrapper, {
-        takeFullWidth: takeFullWidth
-      }, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      return (0, _react2.jsx)("div", {
+        css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
+      }, (0, _react2.jsx)(_Dropdown.default, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
@@ -153,22 +150,24 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
         },
         fitWidth: 352,
         zIndex: stackBelowOtherEditorFloatingPanels,
-        trigger: /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.FIND_REPLACE,
           spacing: isReducedSpacing ? 'none' : 'default',
           selected: isActive,
-          title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+          title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
             description: title,
             keymap: (0, _keymaps.findKeymapByDescription)('Find')
           }),
-          iconBefore: /*#__PURE__*/_react.default.createElement(_search.default, {
+          iconBefore: (0, _react2.jsx)(_search.default, {
             label: title
           }),
           onClick: this.toggleOpen,
           "aria-expanded": isActive,
           "aria-haspopup": true
         })
-      }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_FindReplace.default, (0, _extends2.default)({
+      }, (0, _react2.jsx)("div", {
+        css: wrapper
+      }, (0, _react2.jsx)(_FindReplace.default, (0, _extends2.default)({
         findText: findText,
         replaceText: replaceText,
         count: {

package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js

@@ -27,7 +27,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 
@@ -47,13 +47,16 @@ 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; } }
 
-var DropdownExpandContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px -4px;\n"])));
-
-var IconGroup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var dropdownExpandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px -4px;\n"])));
+var iconGroup = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 var CompositeIcon = function CompositeIcon(_ref) {
   var icon = _ref.icon;
-  return /*#__PURE__*/_react.default.createElement(IconGroup, null, icon, /*#__PURE__*/_react.default.createElement(DropdownExpandContainer, null, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+  return (0, _react2.jsx)("div", {
+    css: iconGroup
+  }, icon, (0, _react2.jsx)("span", {
+    css: dropdownExpandContainer
+  }, (0, _react2.jsx)(_chevronDown.default, {
     label: "Expand dropdown menu"
   })));
 };
@@ -77,7 +80,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       isOpen: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderArrayOptions", function (options) {
-      return /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
+      return (0, _react2.jsx)(_DropdownMenu.default, {
         hide: _this.hide,
         dispatchCommand: _this.props.dispatchCommand,
         items: options
@@ -115,10 +118,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var trigger;
 
       if (icon) {
-        var TriggerIcon = hideExpandIcon ? icon : /*#__PURE__*/_react.default.createElement(CompositeIcon, {
+        var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
           icon: icon
         });
-        trigger = /*#__PURE__*/_react.default.createElement(_Button.default, {
+        trigger = (0, _react2.jsx)(_Button.default, {
           testId: buttonTestId,
           title: title,
           icon: TriggerIcon,
@@ -128,9 +131,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           tooltipContent: tooltip
         });
       } else {
-        trigger = /*#__PURE__*/_react.default.createElement(_Button.default, {
+        trigger = (0, _react2.jsx)(_Button.default, {
           testId: buttonTestId,
-          iconAfter: /*#__PURE__*/_react.default.createElement(DropdownExpandContainer, null, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          iconAfter: (0, _react2.jsx)("span", {
+            css: dropdownExpandContainer
+          }, (0, _react2.jsx)(_chevronDown.default, {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
@@ -148,7 +153,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var fitTolerance = 10;
       var fitWidth = Array.isArray(options) ? _DropdownMenu.menuItemDimensions.width : options.width;
       var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
-      return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      return (0, _react2.jsx)(_Dropdown.default, {
         mountTo: mountPoint,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,

package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -23,9 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -56,11 +56,8 @@ var menuItemDimensions = {
   height: 32
 };
 exports.menuItemDimensions = menuItemDimensions;
-
-var Spacer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
-
-var MenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n"])), menuItemDimensions.width);
-
+var spacer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
+var menuContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 4px;\n  }\n"])), menuItemDimensions.width);
 var padding = (0, _constants.gridSize)();
 var itemSpacing = (0, _constants.gridSize)() / 2;
 exports.itemSpacing = itemSpacing;
@@ -102,12 +99,12 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
           intl = _this$props.intl;
-      return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-        theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, editorItemTheme)
-      }, /*#__PURE__*/_react.default.createElement(MenuContainer, null, items.filter(function (item) {
+      return (0, _react.jsx)("div", {
+        css: menuContainer
+      }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
-        var itemContent = /*#__PURE__*/_react.default.createElement(_item.default, {
+        var itemContent = (0, _react.jsx)(_item.default, {
           key: idx,
           isCompact: true,
           elemBefore: _this.renderSelected(item, intl),
@@ -122,18 +119,19 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             hide();
           },
           "data-testid": item.testId,
-          isDisabled: item.disabled
+          isDisabled: item.disabled,
+          theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, editorItemTheme)
         }, item.title);
 
         if (item.tooltip) {
-          return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          return (0, _react.jsx)(_tooltip.default, {
             key: idx,
             content: item.tooltip
           }, itemContent);
         }
 
         return itemContent;
-      })));
+      }));
     }
   }, {
     key: "renderSelected",
@@ -141,18 +139,20 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var selected = item.selected;
 
       if (selected !== undefined) {
-        return selected ? /*#__PURE__*/_react.default.createElement(_done.default, {
+        return selected ? (0, _react.jsx)(_done.default, {
           primaryColor: _colors.B400,
           size: "small",
           label: intl.formatMessage(_messages.default.confirmModalOK)
-        }) : /*#__PURE__*/_react.default.createElement(Spacer, null);
+        }) : (0, _react.jsx)("span", {
+          css: spacer
+        });
       }
 
       return;
     }
   }]);
   return Dropdown;
-}(_react.Component);
+}(_react2.Component);
 
 var _default = (0, _reactIntlNext.injectIntl)(Dropdown);
 

package/dist/cjs/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -11,9 +11,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 
@@ -30,17 +30,16 @@ var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon")
 var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
-var EmojiPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // helps to vertically align emoji picker
+var emojiPickerButtonWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // helps to vertically align emoji picker
 // both top and bottom margin should be 2px
 // https://product-fabric.atlassian.net/browse/CETI-148
 
-
-var EmojiPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
+var emojiPickerWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 
 var EmojiPickerButton = function EmojiPickerButton(props) {
-  var buttonRef = _react.default.useRef(null);
+  var buttonRef = _react2.default.useRef(null);
 
-  var _React$useState = _react.default.useState(false),
+  var _React$useState = _react2.default.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
@@ -76,7 +75,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       return null;
     }
 
-    return /*#__PURE__*/_react.default.createElement(EmojiPickerWithListener, {
+    return (0, _react.jsx)(EmojiPickerWithListener, {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: function onPickerRef() {},
@@ -89,13 +88,15 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    return (0, _react.jsx)(_ui.Popup, {
       target: buttonRef.current,
       mountTo: buttonRef.current.parentElement,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/_react.default.createElement(EmojiPickerWrapper, null, /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+    }, (0, _react.jsx)("div", {
+      css: emojiPickerWrapper
+    }, (0, _react.jsx)(_providerFactory.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
@@ -103,10 +104,12 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
   };
 
   var title = props.title || '';
-  return /*#__PURE__*/_react.default.createElement(EmojiPickerButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react.jsx)("div", {
+    css: emojiPickerButtonWrapper
+  }, (0, _react.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, (0, _react.jsx)(_button.default, {
     appearance: 'subtle',
     key: props.idx,
     style: {
@@ -119,7 +122,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
     onClick: togglePopup,
     ref: buttonRef,
     isSelected: props.isSelected,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_EditorEmojiAddIcon.default, null)
+    iconBefore: (0, _react.jsx)(_EditorEmojiAddIcon.default, null)
   })), renderPopup());
 };
 

package/dist/cjs/plugins/floating-toolbar/ui/Input.js

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("../../../ui/PanelTextInput/styles");
 
 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); }
@@ -83,9 +85,10 @@ var TextField = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var placeholder = this.props.placeholder;
-      return /*#__PURE__*/_react.default.createElement("form", {
+      return (0, _react2.jsx)("form", {
         onSubmit: this.handleSubmit
-      }, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+      }, (0, _react2.jsx)("input", {
+        css: _styles.panelTextInput,
         value: this.state.text,
         onChange: this.handleChange,
         placeholder: placeholder,

package/dist/cjs/plugins/floating-toolbar/ui/Separator.js

@@ -9,18 +9,17 @@ exports.default = 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 _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var Separator = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), _colors.N30);
+var separator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), _colors.N30);
 
 var _default = function _default() {
-  return /*#__PURE__*/_react.default.createElement(Separator, {
+  return (0, _react.jsx)("div", {
+    css: separator,
     className: "separator"
   });
 };

package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js

@@ -23,7 +23,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
@@ -61,7 +61,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 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); }
 
@@ -73,12 +73,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var akGridSize = (0, _constants.gridSize)();
 
-var ToolbarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n  ", ";\n  & > div {\n    align-items: center;\n  }\n"])), (0, _components.themed)({
-  light: 'white',
-  dark: _colors.DN70
-}), (0, _constants.borderRadius)(), akGridSize / 2, akGridSize, function (props) {
-  return props.hasCompactLeftPadding ? "padding-left: ".concat(akGridSize / 2, "px") : '';
-});
+var toolbarContainer = function toolbarContainer(theme) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div {\n    align-items: center;\n  }\n"])), (0, _components.themed)({
+    light: 'white',
+    dark: _colors.DN70
+  })(theme), (0, _constants.borderRadius)(), akGridSize / 2, akGridSize);
+};
+
+var toolbarContainerLeftPadding = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: ", "px;\n"])), akGridSize / 2);
 
 function makeSameType(_a, _b) {
   return true;
@@ -193,14 +195,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
 
       var firstElementIsSelect = items[0].type === 'select';
-      return /*#__PURE__*/_react.default.createElement(ToolbarContainer, {
+      return (0, _react2.jsx)("div", {
+        css: function css(theme) {
+          return [toolbarContainer({
+            theme: theme
+          }), firstElementIsSelect && toolbarContainerLeftPadding];
+        },
         "aria-label": intl.formatMessage(_messages.default.floatingToolbarAriaLabel),
-        hasCompactLeftPadding: firstElementIsSelect,
         className: className
-      }, /*#__PURE__*/_react.default.createElement(_announcer.default, {
+      }, (0, _react2.jsx)(_announcer.default, {
         text: intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
         delay: 250
-      }), /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, items.filter(function (item) {
+      }), (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         switch (item.type) {
@@ -215,12 +221,12 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               }
             };
 
-            return /*#__PURE__*/_react.default.createElement(_Button.default, {
+            return (0, _react2.jsx)(_Button.default, {
               className: item.className,
               key: idx,
               title: item.title,
               href: item.href,
-              icon: item.icon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
+              icon: item.icon ? (0, _react2.jsx)(ButtonIcon, {
                 label: item.title
               }) : undefined,
               appearance: item.appearance,
@@ -248,7 +254,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }, item.showTitle && item.title);
 
           case 'input':
-            return /*#__PURE__*/_react.default.createElement(_Input.default, {
+            return (0, _react2.jsx)(_Input.default, {
               key: idx,
               mountPoint: popupsMountPoint,
               boundariesElement: popupsBoundariesElement,
@@ -269,10 +275,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
           case 'dropdown':
             var DropdownIcon = item.icon;
-            return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+            return (0, _react2.jsx)(_Dropdown.default, {
               key: idx,
               title: item.title,
-              icon: DropdownIcon && /*#__PURE__*/_react.default.createElement(DropdownIcon, {
+              icon: DropdownIcon && (0, _react2.jsx)(DropdownIcon, {
                 label: item.title
               }),
               dispatchCommand: dispatchCommand,
@@ -287,7 +293,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
           case 'select':
             if (item.selectType === 'list') {
-              return /*#__PURE__*/_react.default.createElement(_Select.default, {
+              return (0, _react2.jsx)(_Select.default, {
                 key: idx,
                 dispatchCommand: dispatchCommand,
                 options: item.options,
@@ -305,7 +311,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }
 
             if (item.selectType === 'color') {
-              return /*#__PURE__*/_react.default.createElement(_ColorPickerButton.default, {
+              return (0, _react2.jsx)(_ColorPickerButton.default, {
                 key: idx,
                 title: item.title,
                 onChange: function onChange(selected) {
@@ -318,7 +324,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             }
 
             if (item.selectType === 'emoji') {
-              return /*#__PURE__*/_react.default.createElement(_EmojiPickerButton.EmojiPickerButton, {
+              return (0, _react2.jsx)(_EmojiPickerButton.EmojiPickerButton, {
                 key: idx,
                 editorView: editorView,
                 title: item.title,
@@ -344,7 +350,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               return null;
             }
 
-            return /*#__PURE__*/_react.default.createElement(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
+            return (0, _react2.jsx)(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
               key: idx,
               node: node,
               editorView: editorView,
@@ -353,7 +359,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             });
 
           case 'separator':
-            return /*#__PURE__*/_react.default.createElement(_Separator.default, {
+            return (0, _react2.jsx)(_Separator.default, {
               key: idx
             });
         }

package/dist/cjs/plugins/floating-toolbar/ui/styles.js

@@ -66,7 +66,13 @@ var getStyles = function getStyles(property, _ref) {
 var iconOnlySpacing = {
   '&&': {
     padding: '0px',
-    '&[href]': {
+
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
       padding: '0 2px'
     }
   },

package/dist/cjs/plugins/grid/index.js

@@ -33,7 +33,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styledComponents = require("styled-components");
+var _react2 = require("@emotion/react");
 
 var _prosemirrorState = require("prosemirror-state");
 
@@ -178,7 +178,7 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   return Grid;
 }(_react.default.Component);
 
-var ThemedGrid = (0, _styledComponents.withTheme)(Grid);
+var ThemedGrid = (0, _react2.withTheme)(Grid);
 
 var gridPlugin = function gridPlugin(options) {
   return {

package/dist/cjs/plugins/grid/styles.js

@@ -9,7 +9,7 @@ exports.gridStyles = exports.GRID_GUTTER = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,5 +19,5 @@ var _templateObject;
 
 var GRID_GUTTER = 12;
 exports.GRID_GUTTER = GRID_GUTTER;
-var gridStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, _colors.N30A, _colors.B200);
+var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, _colors.N30A, _colors.B200);
 exports.gridStyles = gridStyles;