@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
@@ -9,12 +12,11 @@ import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../../messages';
 import PanelTextInput from '../../../../ui/PanelTextInput';
 import LinkSearchList from '../../../../ui/LinkSearch/LinkSearchList';
-import { Container, InputWrapper, UrlInputWrapper } from '../../../../ui/LinkSearch/ToolbarComponents';
+import { container, containerWithProvider, inputWrapper } from '../../../../ui/LinkSearch/ToolbarComponents';
 import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
 import { normalizeUrl } from '../../utils';
 import { filterUniqueItems } from '../../../../utils/array';
@@ -22,12 +24,12 @@ import debounce from 'lodash/debounce';
 import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
-import { ScreenReaderText } from '../../styles';
+import { visuallyHiddenStyles } from '../../styles';
 import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const ClearText = styled.button`
+const clearText = css`
   cursor: pointer;
   padding: 0;
   margin-right: 8px;
@@ -35,12 +37,12 @@ const ClearText = styled.button`
   background: transparent;
   border: none;
 `;
-const TextInputWrapper = styled.div`
-  ${InputWrapper};
+const textInputWrapper = css`
+  ${inputWrapper};
   border-top: 1px solid ${N30};
   border-bottom: 1px solid ${N30};
 `;
-const IconWrapper = styled.span`
+const iconWrapper = css`
   color: ${N80};
   padding: 4px 8px;
   width: 18px;
@@ -77,7 +79,7 @@ export const messages = defineMessages({
     description: 'aria label for a link'
   }
 });
-const defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
+const defaultIcon = jsx(Page16Icon, {
   label: 'page'
 });
 
@@ -725,24 +727,29 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
     const screenReaderText = browser.safari && this.getScreenReaderText();
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       className: "recent-list"
-    }, /*#__PURE__*/React.createElement(Container, {
-      provider: !!activityProvider,
-      innerRef: this.wrapperRef
-    }, /*#__PURE__*/React.createElement(UrlInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    }, jsx("div", {
+      css: [container, !!activityProvider && containerWithProvider],
+      ref: this.wrapperRef
+    }, jsx("div", {
+      css: inputWrapper
+    }, jsx("span", {
+      css: iconWrapper
+    }, jsx(Tooltip, {
       content: formatLinkAddressText
-    }, /*#__PURE__*/React.createElement(LinkIcon, {
+    }, jsx(LinkIcon, {
       label: formatLinkAddressText
-    }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+    }))), screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
       ariaRelevant: "additions",
       delay: 250
-    }), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    }), jsx("div", {
+      css: visuallyHiddenStyles,
       "aria-hidden": "true",
       id: screenReaderDescriptionId
-    }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+    }, formatMessage(messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
       role: "combobox",
       ariaExpanded: true,
       ariaActiveDescendant: ariaActiveDescendant,
@@ -760,17 +767,22 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onCancel: this.handleCancel,
       defaultValue: displayUrl,
       onKeyDown: this.handleKeyDown
-    }), displayUrl && /*#__PURE__*/React.createElement(Tooltip, {
+    }), displayUrl && jsx(Tooltip, {
       content: formatClearLinkText
-    }, /*#__PURE__*/React.createElement(ClearText, {
+    }, jsx("button", {
+      css: clearText,
       onClick: this.handleClearText
-    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+    }, jsx(CrossCircleIcon, {
       label: formatClearLinkText
-    })))), /*#__PURE__*/React.createElement(TextInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    })))), jsx("div", {
+      css: textInputWrapper
+    }, jsx("span", {
+      css: iconWrapper
+    }, jsx(Tooltip, {
       content: formatDisplayText
-    }, /*#__PURE__*/React.createElement(EditorAlignLeftIcon, {
+    }, jsx(EditorAlignLeftIcon, {
       label: formatDisplayText
-    }))), /*#__PURE__*/React.createElement(PanelTextInput, {
+    }))), jsx(PanelTextInput, {
       ref: ele => this.displayTextInputContainer = ele,
       placeholder: formatDisplayText,
       ariaLabel: formatMessage(messages.linkAriaLabel),
@@ -780,20 +792,22 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       defaultValue: displayText,
       onSubmit: this.handleSubmit,
       onKeyDown: this.handleKeyDown
-    }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
+    }), displayText && jsx(Tooltip, {
       content: formatMessage(messages.clearText)
-    }, /*#__PURE__*/React.createElement(ClearText, {
+    }, jsx("button", {
+      css: clearText,
       onClick: this.handleClearDisplayText,
       onKeyDown: this.handleClearTextKeyDown
-    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+    }, jsx(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
-    })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    })))), jsx("div", {
+      css: visuallyHiddenStyles,
       "aria-live": "polite",
       "aria-atomic": "true",
       id: "fabric.editor.hyperlink.suggested.results"
     }, displayUrl && formatMessage(messages.searchLinkResults, {
       count: items.length
-    })), /*#__PURE__*/React.createElement(LinkSearchList, {
+    })), jsx(LinkSearchList, {
       ariaControls: "fabric.editor.hyperlink.suggested.results",
       id: linkSearchListId,
       role: "listbox",

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -1,16 +1,22 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/editor/add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ToolTipContent } from '../../../../keymaps';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import { ExpandIconWrapper } from '../../../../ui/styles';
-import { TriggerWrapper } from './styles';
-const DropDownButtonIcon = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(AddIcon, {
+import { expandIconWrapperStyle } from '../../../../ui/styles';
+import { triggerWrapper } from './styles';
+const DropDownButtonIcon = /*#__PURE__*/React.memo(props => jsx("span", {
+  css: triggerWrapper
+}, jsx(AddIcon, {
   label: props.label
-}), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+}), jsx("span", {
+  css: expandIconWrapperStyle
+}, jsx(ExpandIcon, {
   label: ""
 }))));
-export const DropDownButton = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(ToolbarButton, {
+export const DropDownButton = /*#__PURE__*/React.memo(props => jsx(ToolbarButton, {
   ref: props.handleRef,
   selected: props.selected,
   disabled: props.disabled,
@@ -19,10 +25,10 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
   "aria-expanded": props['aria-expanded'],
   "aria-haspopup": props['aria-haspopup'],
   "aria-label": props.label,
-  iconBefore: /*#__PURE__*/React.createElement(DropDownButtonIcon, {
+  iconBefore: jsx(DropDownButtonIcon, {
     label: ""
   }),
-  title: /*#__PURE__*/React.createElement(ToolTipContent, {
+  title: jsx(ToolTipContent, {
     description: props.label,
     shortcutOverride: "/"
   })

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { Popup } from '@atlaskit/editor-common/ui';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
+import { separatorStyles, buttonGroupStyle, wrapperStyle } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
 import { insertDate } from '../../../date/actions';
 import { openElementBrowserModal } from '../../../quick-insert/commands';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
 import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
-import { insertTaskDecision } from '../../../tasks-and-decisions/commands';
+import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { showLinkToolbar } from '../../../hyperlink/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -248,16 +251,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
 
     _defineProperty(this, "insertTaskDecision", (name, inputMethod) => () => {
       const {
-        editorView
+        editorView: {
+          state,
+          dispatch
+        }
       } = this.props;
-
-      if (!editorView) {
-        return false;
-      }
-
       const listType = name === 'action' ? 'taskList' : 'decisionList';
-      insertTaskDecision(editorView, listType, inputMethod)(editorView.state, editorView.dispatch);
-      return true;
+      return insertTaskDecisionCommand(listType, inputMethod)(state, dispatch);
     });
 
     _defineProperty(this, "insertHorizontalRule", inputMethod => {
@@ -488,7 +488,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: ref,
       fitHeight: 350,
       fitWidth: 350,
@@ -496,7 +496,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement
-    }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+    }, jsx(EmojiPickerWithListeners, {
       emojiProvider: emojiProvider,
       onSelection: this.handleSelectedEmoji,
       handleClickOutside: this.handleEmojiClickOutside,
@@ -520,9 +520,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      width: isReducedSpacing ? 'small' : 'large'
-    }, buttons.map(btn => /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx("span", {
+      css: buttonGroupStyle
+    }, buttons.map(btn => jsx(ToolbarButton, {
       item: btn,
       ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
       key: btn.value.name,
@@ -534,7 +534,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       "aria-label": btn['aria-label'],
       "aria-haspopup": btn['aria-haspopup'],
       onItemClick: this.insertToolbarMenuItem
-    })), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {
+    })), jsx("span", {
+      css: wrapperStyle
+    }, this.renderPopup(), jsx(BlockInsertMenu, {
       popupsMountPoint: this.props.popupsMountPoint,
       popupsBoundariesElement: this.props.popupsBoundariesElement,
       popupsScrollableElement: this.props.popupsScrollableElement,
@@ -553,7 +555,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       onOpenChange: this.onOpenChange,
       togglePlusMenuVisibility: this.togglePlusMenuVisibility,
       replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false
-    })), this.props.showSeparator && /*#__PURE__*/React.createElement(Separator, null));
+    })), this.props.showSeparator && jsx("span", {
+      css: separatorStyles
+    }));
   }
 
 }

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
@@ -17,7 +19,7 @@ import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
-import { Shortcut } from '../../../../ui/styles';
+import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
 
@@ -27,10 +29,12 @@ const from = init => ({
   value: {
     name: init.name
   },
-  elemBefore: /*#__PURE__*/React.createElement(init.Icon, {
+  elemBefore: jsx(init.Icon, {
     label: init.content
   }),
-  elemAfter: init.shortcut ? /*#__PURE__*/React.createElement(Shortcut, null, init.shortcut) : undefined,
+  elemAfter: init.shortcut ? jsx("div", {
+    css: shortcutStyle
+  }, init.shortcut) : undefined,
   'aria-label': init.content,
   'aria-haspopup': init['aria-haspopup'],
   shortcut: init.shortcut,
@@ -165,7 +169,7 @@ export const placeholder = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'placeholder text',
-  Icon: () => /*#__PURE__*/React.createElement(PlaceholderTextIcon, {
+  Icon: () => jsx(PlaceholderTextIcon, {
     label: ""
   })
 }));
@@ -181,7 +185,7 @@ export const more = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'macro',
-  Icon: () => /*#__PURE__*/React.createElement(EditorMoreIcon, {
+  Icon: () => jsx(EditorMoreIcon, {
     label: ""
   })
 }));

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/styles.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-export const TriggerWrapper = styled.span`
+import { css } from '@emotion/react';
+export const triggerWrapper = css`
   width: 42px;
 
   display: flex;

package/dist/es2019/plugins/jira-issue/nodeviews/jira-issue.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-const WrapperNode = styled.span`
+const wrapperNode = css`
   align-items: center;
   background: ${N30};
   border: 1px solid ${N50};
@@ -25,7 +25,7 @@ const WrapperNode = styled.span`
     outline: none;
   }
 `;
-const JiraChildNode = styled.span`
+const jiraChildNode = css`
   display: inline-block;
   color: #707070;
   line-height: 24px;
@@ -36,7 +36,7 @@ const JiraChildNode = styled.span`
     content: 'JIRA | ';
   }
 `;
-const SvgChildNode = styled.span`
+const svgChildNode = css`
   display: inline-block;
   height: 24px;
   vertical-align: top;
@@ -55,7 +55,14 @@ export default function JIRAIssueNode(props) {
       }
     }
   } = props;
-  return /*#__PURE__*/React.createElement(WrapperNode, null, /*#__PURE__*/React.createElement(SvgChildNode, null, /*#__PURE__*/React.createElement(JiraIcon, {
+  return jsx("span", {
+    css: wrapperNode,
+    "data-testid": "jira-issue-node"
+  }, jsx("span", {
+    css: svgChildNode
+  }, jsx(JiraIcon, {
     size: "small"
-  })), /*#__PURE__*/React.createElement(JiraChildNode, null, issueKey));
+  })), jsx("span", {
+    css: jiraChildNode
+  }, issueKey));
 }

package/dist/es2019/plugins/list/actions/wrap-and-join-lists.js

@@ -1,5 +1,6 @@
 import { Fragment, Slice, NodeRange } from 'prosemirror-model';
-import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+import { ReplaceAroundStep, findWrapping, canSplit } from 'prosemirror-transform';
+import { autoJoinTr } from '../../../utils/prosemirror/autojoin';
 /**
  * Wraps the selection in a list with the given type. If this results in
  * two adjacent lists of the same type, those will be joined together.
@@ -7,7 +8,7 @@ import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-
 
 export function wrapInListAndJoin(nodeType, tr) {
   wrapInList(nodeType)(tr);
-  autoJoin(tr, (before, after) => before.type === after.type && before.type === nodeType);
+  autoJoinTr(tr, (before, after) => before.type === after.type && before.type === nodeType);
 }
 /**
  * Wraps the selection in a list with the given type and attributes.
@@ -93,71 +94,4 @@ function doWrapInList(tr, range, wrappers, joinBefore, listType) {
   }
 
   return tr;
-}
-/**
- * Checks whether two adjacent nodes can be joined. If so, the document
- * will be updated to join those nodes. If not, the original transaction
- * remains untouched.
- *
- * Nodes are considered joinable if the `isJoinable` predicate returns true.
- *
- * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
- */
-
-
-export function autoJoin(tr, isJoinable) {
-  if (!tr.isGeneric) {
-    return;
-  }
-
-  const ranges = [];
-
-  for (let i = 0; i < tr.mapping.maps.length; i++) {
-    const map = tr.mapping.maps[i];
-
-    for (let j = 0; j < ranges.length; j++) {
-      ranges[j] = map.map(ranges[j]);
-    }
-
-    map.forEach((_s, _e, from, to) => ranges.push(from, to));
-  } // Figure out which joinable points exist inside those ranges,
-  // by checking all node boundaries in their parent nodes.
-
-
-  const joinable = [];
-
-  for (let i = 0; i < ranges.length; i += 2) {
-    const from = ranges[i];
-    const to = ranges[i + 1];
-    const $from = tr.doc.resolve(from);
-    const depth = $from.sharedDepth(to);
-    const parent = $from.node(depth);
-
-    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
-      const after = parent.maybeChild(index);
-
-      if (!after) {
-        break;
-      }
-
-      if (index && joinable.indexOf(pos) === -1) {
-        const before = parent.child(index - 1);
-
-        if (before.type === after.type && isJoinable(before, after)) {
-          joinable.push(pos);
-        }
-      }
-
-      pos += after.nodeSize;
-    }
-  } // Join the joinable points
-
-
-  joinable.sort((a, b) => a - b);
-
-  for (let i = joinable.length - 1; i >= 0; i--) {
-    if (canJoin(tr.doc, joinable[i])) {
-      tr.join(joinable[i]);
-    }
-  }
 }

package/dist/es2019/plugins/list/commands/index.js

@@ -1,4 +1,5 @@
 import { Fragment, Slice } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
 import * as baseCommand from 'prosemirror-commands';
 import { hasParentNodeOfType, findPositionOfNodeBefore } from 'prosemirror-utils';
 import { hasVisibleContent, isNodeEmpty } from '../../../utils/document';
@@ -340,6 +341,12 @@ const joinToPreviousListItem = (state, dispatch) => {
       }
 
       if (dispatch) {
+        var _tr$doc$resolve$nodeB;
+
+        if (!((_tr$doc$resolve$nodeB = tr.doc.resolve($lastNode.pos).nodeBefore) !== null && _tr$doc$resolve$nodeB !== void 0 && _tr$doc$resolve$nodeB.isBlock) || tr.doc.resolve($lastNode.pos).nodeBefore === null) {
+          tr = tr.setSelection(TextSelection.near(tr.doc.resolve(tr.mapping.map($cut.pos)), -1));
+        }
+
         dispatch(tr.scrollIntoView());
       }
 

package/dist/es2019/plugins/list/pm-plugins/main.js

@@ -45,6 +45,12 @@ export const getDecorations = doc => {
       decorations.push(Decoration.node(from, to, {
         'data-indent-level': `${depth}`
       }));
+
+      if (node.childCount >= 100) {
+        decorations.push(Decoration.node(from, to, {
+          'data-child-count': '100+'
+        }));
+      }
     }
   });
   return DecorationSet.empty.add(doc, decorations);

package/dist/es2019/plugins/list/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const listsStyles = css`
   .ProseMirror li {
     position: relative;

package/dist/es2019/plugins/list/ui/ToolbarLists/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
@@ -8,7 +10,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, tooltip, ToolTipContent } from '../../../../keymaps';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import DropdownMenu from '../../../../ui/DropdownMenu';
-import { ButtonGroup, Separator, Wrapper, ExpandIconWrapper, Shortcut } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles, wrapperStyle, expandIconWrapperStyle, shortcutStyle } from '../../../../ui/styles';
 import { toggleBulletList, toggleOrderedList } from '../../commands';
 import { messages } from '../../messages';
 import { INPUT_METHOD } from '../../../analytics';
@@ -53,7 +55,9 @@ class ToolbarLists extends PureComponent {
         },
         isDisabled: bulletListDisabled,
         isActive: Boolean(bulletListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleBulletListKeymap))
       }, {
         key: 'orderedList',
         content: labelOrderedList,
@@ -62,7 +66,9 @@ class ToolbarLists extends PureComponent {
         },
         isDisabled: orderedListDisabled,
         isActive: Boolean(orderedListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleOrderedListKeymap))
       }];
       return [{
         items
@@ -129,9 +135,9 @@ class ToolbarLists extends PureComponent {
     if (!isSmall) {
       const labelUnorderedList = formatMessage(messages.unorderedList);
       const labelOrderedList = formatMessage(messages.orderedList);
-      return /*#__PURE__*/React.createElement(ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      return jsx("span", {
+        css: buttonGroupStyle
+      }, jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.BULLET_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleBulletListClick,
@@ -139,14 +145,14 @@ class ToolbarLists extends PureComponent {
         "aria-pressed": bulletListActive,
         "aria-label": labelUnorderedList,
         disabled: bulletListDisabled || disabled,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelUnorderedList,
           keymap: toggleBulletListKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(BulletListIcon, {
+        iconBefore: jsx(BulletListIcon, {
           label: ""
         })
-      }), /*#__PURE__*/React.createElement(ToolbarButton, {
+      }), jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleOrderedListClick,
@@ -154,14 +160,16 @@ class ToolbarLists extends PureComponent {
         "aria-pressed": orderedListActive,
         "aria-label": labelOrderedList,
         disabled: orderedListDisabled || disabled,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelOrderedList,
           keymap: toggleOrderedListKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
+        iconBefore: jsx(NumberListIcon, {
           label: ""
         })
-      }), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+      }), isSeparator && jsx("span", {
+        css: separatorStyles
+      }));
     } else {
       const items = this.createItems();
       const {
@@ -170,7 +178,9 @@ class ToolbarLists extends PureComponent {
         popupsScrollableElement
       } = this.props;
       const labelLists = formatMessage(messages.lists);
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+      return jsx("span", {
+        css: wrapperStyle
+      }, jsx(DropdownMenu, {
         items: items,
         onItemActivated: this.onItemActivated,
         mountTo: popupsMountPoint,
@@ -181,7 +191,7 @@ class ToolbarLists extends PureComponent {
         fitHeight: 188,
         fitWidth: 175,
         shouldUseDefaultRole: true
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      }, jsx(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         selected: bulletListActive || orderedListActive,
         "aria-expanded": isDropdownOpen,
@@ -190,12 +200,18 @@ class ToolbarLists extends PureComponent {
         disabled: disabled,
         onClick: this.handleTriggerClick,
         title: labelLists,
-        iconBefore: /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
+        iconBefore: jsx("span", {
+          css: wrapperStyle
+        }, jsx(BulletListIcon, {
           label: labelLists
-        }), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+        }), jsx("span", {
+          css: expandIconWrapperStyle
+        }, jsx(ExpandIcon, {
           label: ""
         })))
-      })), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+      })), isSeparator && jsx("span", {
+        css: separatorStyles
+      }));
     }
   }