@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/index.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Overlay } from '../styles';
+import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
-import { Wrapper } from './styles';
+import { wrapperStyle } from './styles';
 export default class InlineExtension extends Component {
   render() {
     const {
@@ -11,11 +13,13 @@ export default class InlineExtension extends Component {
     } = this.props;
     const hasChildren = !!children;
     const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return jsx("div", {
+      css: wrapperStyle,
       className: `extension-container inline ${className}`
-    }, /*#__PURE__*/React.createElement(Overlay, {
+    }, jsx("div", {
+      css: overlay,
       className: "extension-overlay"
-    }), children ? children : /*#__PURE__*/React.createElement(ExtensionLozenge, {
+    }), children ? children : jsx(ExtensionLozenge, {
       node: node
     }));
   }

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,7 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { Wrapper as WrapperDefault } from '../styles';
-export const Wrapper = styled(WrapperDefault)`
+import { wrapperDefault } from '../styles';
+export const wrapperStyle = theme => css`
+  ${wrapperDefault(theme)}
+
   cursor: pointer;
   display: inline-flex;
   margin: 1px;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '@atlaskit/editor-common/utils';
-import { PlaceholderFallback, PlaceholderFallbackParams, StyledImage } from './styles';
+import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
 export const capitalizeFirstLetter = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
@@ -37,7 +39,8 @@ export default class ExtensionLozenge extends Component {
       url,
       ...rest
     } = lozengeData;
-    return /*#__PURE__*/React.createElement(StyledImage, _extends({
+    return jsx("img", _extends({
+      css: styledImage,
       src: url
     }, rest, {
       alt: extensionKey
@@ -55,15 +58,19 @@ export default class ExtensionLozenge extends Component {
     const params = parameters && parameters.macroParams;
     const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
     const isBlockExtension = name === 'extension';
-    return /*#__PURE__*/React.createElement(PlaceholderFallback, null, lozengeData && !isBlockExtension ? this.renderImage({
+    return jsx("div", {
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? this.renderImage({
       height: ICON_SIZE,
       width: ICON_SIZE,
       ...lozengeData
-    }) : /*#__PURE__*/React.createElement(EditorFileIcon, {
+    }) : jsx(EditorFileIcon, {
       label: title
-    }), /*#__PURE__*/React.createElement("span", {
+    }), jsx("span", {
       className: "extension-title"
-    }, capitalizeFirstLetter(title)), params && !isBlockExtension && /*#__PURE__*/React.createElement(PlaceholderFallbackParams, null, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
+    }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
 
 }

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -6,15 +6,15 @@ import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const padding = gridSize();
 export const BODIED_EXT_PADDING = padding * 2;
-export const Wrapper = styled.div`
+export const wrapperDefault = theme => css`
   background: ${themed({
   light: N20,
   dark: DN50
-})};
+})(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
   dark: DN700
-})};
+})(theme)};
   position: relative;
   vertical-align: middle;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -35,7 +35,7 @@ export const Wrapper = styled.div`
     }
   }
 `;
-export const Overlay = styled.div`
+export const overlay = css`
   border-radius: ${borderRadius()}px;
   position: absolute;
   width: 100%;
@@ -44,15 +44,18 @@ export const Overlay = styled.div`
   pointer-events: none;
   transition: opacity 0.3s;
 `;
-export const PlaceholderFallback = styled.div`
+export const placeholderFallback = css`
   display: inline-flex;
   align-items: center;
 
   & > img {
     margin: 0 4px;
   }
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: placeholder-fallback;
 `;
-export const PlaceholderFallbackParams = styled.span`
+export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
@@ -61,7 +64,10 @@ export const PlaceholderFallbackParams = styled.span`
   white-space: nowrap;
   overflow: hidden;
 `;
-export const StyledImage = styled.img`
+export const styledImage = css`
   max-height: 16px;
   max-width: 16px;
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: lozenge-image;
 `;

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
@@ -7,11 +8,11 @@ import { messages } from './messages';
 
 const noop = () => {};
 
-const SaveIndicatorWrapper = styled.div`
+const saveIndicatorWrapper = css`
   display: flex;
   justify-content: center;
 `;
-const SaveIndicatorContent = styled.div`
+const saveIndicatorContent = css`
   position: fixed;
   width: 256px;
   bottom: 20px;
@@ -27,7 +28,7 @@ const SaveIndicatorContent = styled.div`
     0px 0px 1px rgba(9, 30, 66, 0.31);
   border-radius: 16px;
 `;
-const SaveIndicatorText = styled.span`
+const saveIndicatorText = css`
   padding-left: 6px;
 `;
 export const SaveIndicator = ({
@@ -51,14 +52,19 @@ export const SaveIndicator = ({
       return () => clearTimeout(handleId);
     }
   }, [saving, duration]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children({
+  return jsx(Fragment, null, jsx("div", null, children({
     onSaveStarted,
     onSaveEnded: noop
-  })), visible && saving && /*#__PURE__*/React.createElement(SaveIndicatorWrapper, null, /*#__PURE__*/React.createElement(SaveIndicatorContent, {
+  })), visible && saving && jsx("div", {
+    css: saveIndicatorWrapper
+  }, jsx("div", {
+    css: saveIndicatorContent,
     "data-testid": "save-indicator-content"
-  }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+  }, jsx(CheckCircleIcon, {
     label: "Saving",
     primaryColor: G300,
     size: "small"
-  }), /*#__PURE__*/React.createElement(SaveIndicatorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.saveIndicator)))));
+  }), jsx("span", {
+    css: saveIndicatorText
+  }, jsx(FormattedMessage, messages.saveIndicator)))));
 };

package/dist/es2019/plugins/extension/ui/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const extensionStyles = css`
   .extensionView-content-wrap,
@@ -37,5 +37,6 @@ export const extensionStyles = css`
     .extensionView-content-wrap
     .extension-container {
     width: 100%;
+    max-width: 100%; // ensure width can't go over 100%;
   }
 `;

package/dist/es2019/plugins/fake-text-cursor/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
 export const fakeCursorStyles = css`
   .ProseMirror {

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -51,6 +51,6 @@ export function createFeatureFlagsFromProps(props) {
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.maxUnsafeChromeSpellcheckingVersion),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.viewChangingExperimentToolbarStyle) === 'string' ? props.featureFlags.viewChangingExperimentToolbarStyle || undefined : undefined
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined
   };
 }

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75, B200 } from '@atlaskit/theme/colors';
 export const searchMatchBgColour = B75;
 export const selectedSearchMatchBgColour = B200;

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
@@ -10,10 +12,10 @@ import Dropdown from '../../../ui/Dropdown';
 import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { ToolTipContent, findKeymapByDescription } from '../../../keymaps';
-const ToolbarButtonWrapper = styled.div`
+const toolbarButtonWrapper = css`
   display: flex;
   flex: 1 1 auto;
-  flex-grow: ${props => props.takeFullWidth ? 1 : 0};
+  flex-grow: 0;
   justify-content: flex-end;
   align-items: center;
   padding: 0 8px;
@@ -22,7 +24,10 @@ const ToolbarButtonWrapper = styled.div`
     padding: 0;
   }
 `;
-const Wrapper = styled.div`
+const toolbarButtonWrapperFullWith = css`
+  flex-grow: 1;
+`;
+const wrapper = css`
   display: flex;
   flex-direction: column;
 `;
@@ -86,9 +91,9 @@ class FindReplaceToolbarButton extends React.PureComponent {
     } = this.props;
     const title = formatMessage(messages.findReplaceToolbarButton);
     const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
-    return /*#__PURE__*/React.createElement(ToolbarButtonWrapper, {
-      takeFullWidth: takeFullWidth
-    }, /*#__PURE__*/React.createElement(Dropdown, {
+    return jsx("div", {
+      css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
+    }, jsx(Dropdown, {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
@@ -102,22 +107,24 @@ class FindReplaceToolbarButton extends React.PureComponent {
       },
       fitWidth: 352,
       zIndex: stackBelowOtherEditorFloatingPanels,
-      trigger: /*#__PURE__*/React.createElement(ToolbarButton, {
+      trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
         spacing: isReducedSpacing ? 'none' : 'default',
         selected: isActive,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: title,
           keymap: findKeymapByDescription('Find')
         }),
-        iconBefore: /*#__PURE__*/React.createElement(EditorSearchIcon, {
+        iconBefore: jsx(EditorSearchIcon, {
           label: title
         }),
         onClick: this.toggleOpen,
         "aria-expanded": isActive,
         "aria-haspopup": true
       })
-    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FindReplace, _extends({
+    }, jsx("div", {
+      css: wrapper
+    }, jsx(FindReplace, _extends({
       findText: findText,
       replaceText: replaceText,
       count: {

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

@@ -1,20 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React, { Component } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import UiDropdown from '../../../ui/Dropdown';
 import Button from './Button';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
-const DropdownExpandContainer = styled.span`
+const dropdownExpandContainer = css`
   margin: 0px -4px;
 `;
-const IconGroup = styled.div`
+const iconGroup = css`
   display: flex;
 `;
 
 const CompositeIcon = ({
   icon
-}) => /*#__PURE__*/React.createElement(IconGroup, null, icon, /*#__PURE__*/React.createElement(DropdownExpandContainer, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+}) => jsx("div", {
+  css: iconGroup
+}, icon, jsx("span", {
+  css: dropdownExpandContainer
+}, jsx(ExpandIcon, {
   label: "Expand dropdown menu"
 })));
 
@@ -26,7 +32,7 @@ export default class Dropdown extends Component {
       isOpen: false
     });
 
-    _defineProperty(this, "renderArrayOptions", options => /*#__PURE__*/React.createElement(DropdownMenu, {
+    _defineProperty(this, "renderArrayOptions", options => jsx(DropdownMenu, {
       hide: this.hide,
       dispatchCommand: this.props.dispatchCommand,
       items: options
@@ -65,10 +71,10 @@ export default class Dropdown extends Component {
     let trigger;
 
     if (icon) {
-      const TriggerIcon = hideExpandIcon ? icon : /*#__PURE__*/React.createElement(CompositeIcon, {
+      const TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
         icon: icon
       });
-      trigger = /*#__PURE__*/React.createElement(Button, {
+      trigger = jsx(Button, {
         testId: buttonTestId,
         title: title,
         icon: TriggerIcon,
@@ -78,9 +84,11 @@ export default class Dropdown extends Component {
         tooltipContent: tooltip
       });
     } else {
-      trigger = /*#__PURE__*/React.createElement(Button, {
+      trigger = jsx(Button, {
         testId: buttonTestId,
-        iconAfter: /*#__PURE__*/React.createElement(DropdownExpandContainer, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+        iconAfter: jsx("span", {
+          css: dropdownExpandContainer
+        }, jsx(ExpandIcon, {
           label: "Expand dropdown menu"
         })),
         onClick: this.toggleOpen,
@@ -98,7 +106,7 @@ export default class Dropdown extends Component {
     const fitTolerance = 10;
     const fitWidth = Array.isArray(options) ? menuItemDimensions.width : options.width;
     const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
-    return /*#__PURE__*/React.createElement(UiDropdown, {
+    return jsx(UiDropdown, {
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -13,13 +13,18 @@ export const menuItemDimensions = {
   width: 175,
   height: 32
 };
-const Spacer = styled.span`
+const spacer = css`
   display: flex;
   flex: 1;
   padding: 8px;
 `;
-const MenuContainer = styled.div`
+const menuContainer = css`
   min-width: ${menuItemDimensions.width}px;
+
+  // temporary solution before we migrated off dst/item
+  & span[class^='ItemParts__Before'] {
+    margin-right: 4px;
+  }
 `;
 const padding = gridSize();
 export const itemSpacing = gridSize() / 2;
@@ -49,12 +54,10 @@ class Dropdown extends Component {
       items,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: {
-        [itemThemeNamespace]: editorItemTheme
-      }
-    }, /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(item => !item.hidden).map((item, idx) => {
-      const itemContent = /*#__PURE__*/React.createElement(Item, {
+    return jsx("div", {
+      css: menuContainer
+    }, items.filter(item => !item.hidden).map((item, idx) => {
+      const itemContent = jsx(Item, {
         key: idx,
         isCompact: true,
         elemBefore: this.renderSelected(item, intl),
@@ -69,18 +72,21 @@ class Dropdown extends Component {
           hide();
         },
         "data-testid": item.testId,
-        isDisabled: item.disabled
+        isDisabled: item.disabled,
+        theme: {
+          [itemThemeNamespace]: editorItemTheme
+        }
       }, item.title);
 
       if (item.tooltip) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
+        return jsx(Tooltip, {
           key: idx,
           content: item.tooltip
         }, itemContent);
       }
 
       return itemContent;
-    })));
+    }));
   }
 
   renderSelected(item, intl) {
@@ -89,11 +95,13 @@ class Dropdown extends Component {
     } = item;
 
     if (selected !== undefined) {
-      return selected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      return selected ? jsx(EditorDoneIcon, {
         primaryColor: B400,
         size: "small",
         label: intl.formatMessage(messages.confirmModalOK)
-      }) : /*#__PURE__*/React.createElement(Spacer, null);
+      }) : jsx("span", {
+        css: spacer
+      });
     }
 
     return;

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React from 'react';
-import styled from 'styled-components';
 import Button from '@atlaskit/button';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
@@ -7,13 +8,13 @@ import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
 
-const EmojiPickerButtonWrapper = styled.div`
+const emojiPickerButtonWrapper = css`
   position: relative;
 `; // helps to vertically align emoji picker
 // both top and bottom margin should be 2px
 // https://product-fabric.atlassian.net/browse/CETI-148
 
-const EmojiPickerWrapper = styled.div`
+const emojiPickerWrapper = css`
   margin-bottom: -12px;
   margin-top: -4px;
 `;
@@ -49,7 +50,7 @@ export const EmojiPickerButton = props => {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(EmojiPickerWithListener, {
+    return jsx(EmojiPickerWithListener, {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: () => {},
@@ -62,13 +63,15 @@ export const EmojiPickerButton = props => {
       return;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: buttonRef.current,
       mountTo: buttonRef.current.parentElement,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/React.createElement(EmojiPickerWrapper, null, /*#__PURE__*/React.createElement(WithProviders, {
+    }, jsx("div", {
+      css: emojiPickerWrapper
+    }, jsx(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
@@ -76,10 +79,12 @@ export const EmojiPickerButton = props => {
   };
 
   const title = props.title || '';
-  return /*#__PURE__*/React.createElement(EmojiPickerButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: emojiPickerButtonWrapper
+  }, jsx(Tooltip, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     appearance: 'subtle',
     key: props.idx,
     style: {
@@ -92,6 +97,6 @@ export const EmojiPickerButton = props => {
     onClick: togglePopup,
     ref: buttonRef,
     isSelected: props.isSelected,
-    iconBefore: /*#__PURE__*/React.createElement(EditorEmojiAddIcon, null)
+    iconBefore: jsx(EditorEmojiAddIcon, null)
   })), renderPopup());
 };

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

@@ -1,7 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Input } from '../../../ui/PanelTextInput/styles';
+import { panelTextInput } from '../../../ui/PanelTextInput/styles';
 export default class TextField extends Component {
   constructor(props) {
     super(props);
@@ -45,9 +48,10 @@ export default class TextField extends Component {
     const {
       placeholder
     } = this.props;
-    return /*#__PURE__*/React.createElement("form", {
+    return jsx("form", {
       onSubmit: this.handleSubmit
-    }, /*#__PURE__*/React.createElement(Input, {
+    }, jsx("input", {
+      css: panelTextInput,
       value: this.state.text,
       onChange: this.handleChange,
       placeholder: placeholder,

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

@@ -1,13 +1,14 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-const Separator = styled.div`
+const separator = css`
   background: ${N30};
   width: 1px;
   height: 20px;
   margin: 0 4px;
   align-self: center;
 `;
-export default (() => /*#__PURE__*/React.createElement(Separator, {
+export default (() => jsx("div", {
+  css: separator,
   className: "separator"
 }));