@atlaskit/editor-core 163.0.0 → 164.0.2

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 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,12 +13,12 @@ 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
@@ -54,8 +54,10 @@ class Dropdown extends Component {
       items,
       intl
     } = this.props;
-    return /*#__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),
@@ -77,7 +79,7 @@ class Dropdown extends Component {
       }, item.title);
 
       if (item.tooltip) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
+        return jsx(Tooltip, {
           key: idx,
           content: item.tooltip
         }, itemContent);
@@ -93,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"
 }));

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

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import styled from 'styled-components';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -20,11 +21,12 @@ import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 const akGridSize = gridSize();
-const ToolbarContainer = styled.div`
+
+const toolbarContainer = theme => css`
   background-color: ${themed({
   light: 'white',
   dark: DN70
-})};
+})(theme)};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25);
@@ -32,12 +34,16 @@ const ToolbarContainer = styled.div`
   display: flex;
   line-height: 1;
   box-sizing: border-box;
-  ${props => props.hasCompactLeftPadding ? `padding-left: ${akGridSize / 2}px` : ''};
+
   & > div {
     align-items: center;
   }
 `;
 
+const toolbarContainerLeftPadding = css`
+  padding-left: ${akGridSize / 2}px;
+`;
+
 function makeSameType(_a, _b) {
   return true;
 }
@@ -123,14 +129,18 @@ class Toolbar extends Component {
 
 
     const firstElementIsSelect = items[0].type === 'select';
-    return /*#__PURE__*/React.createElement(ToolbarContainer, {
+    return jsx("div", {
+      css: theme => {
+        return [toolbarContainer({
+          theme
+        }), firstElementIsSelect && toolbarContainerLeftPadding];
+      },
       "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
-      hasCompactLeftPadding: firstElementIsSelect,
       className: className
-    }, /*#__PURE__*/React.createElement(Announcer, {
+    }, jsx(Announcer, {
       text: intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
-    }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+    }), jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
       switch (item.type) {
         case 'button':
           const ButtonIcon = item.icon;
@@ -143,12 +153,12 @@ class Toolbar extends Component {
             }
           };
 
-          return /*#__PURE__*/React.createElement(Button, {
+          return jsx(Button, {
             className: item.className,
             key: idx,
             title: item.title,
             href: item.href,
-            icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+            icon: item.icon ? jsx(ButtonIcon, {
               label: item.title
             }) : undefined,
             appearance: item.appearance,
@@ -168,7 +178,7 @@ class Toolbar extends Component {
           }, item.showTitle && item.title);
 
         case 'input':
-          return /*#__PURE__*/React.createElement(Input, {
+          return jsx(Input, {
             key: idx,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -185,10 +195,10 @@ class Toolbar extends Component {
 
         case 'dropdown':
           const DropdownIcon = item.icon;
-          return /*#__PURE__*/React.createElement(Dropdown, {
+          return jsx(Dropdown, {
             key: idx,
             title: item.title,
-            icon: DropdownIcon && /*#__PURE__*/React.createElement(DropdownIcon, {
+            icon: DropdownIcon && jsx(DropdownIcon, {
               label: item.title
             }),
             dispatchCommand: dispatchCommand,
@@ -203,7 +213,7 @@ class Toolbar extends Component {
 
         case 'select':
           if (item.selectType === 'list') {
-            return /*#__PURE__*/React.createElement(Select, {
+            return jsx(Select, {
               key: idx,
               dispatchCommand: dispatchCommand,
               options: item.options,
@@ -219,7 +229,7 @@ class Toolbar extends Component {
           }
 
           if (item.selectType === 'color') {
-            return /*#__PURE__*/React.createElement(ColorPickerButton, {
+            return jsx(ColorPickerButton, {
               key: idx,
               title: item.title,
               onChange: selected => {
@@ -232,7 +242,7 @@ class Toolbar extends Component {
           }
 
           if (item.selectType === 'emoji') {
-            return /*#__PURE__*/React.createElement(EmojiPickerButton, {
+            return jsx(EmojiPickerButton, {
               key: idx,
               editorView: editorView,
               title: item.title,
@@ -257,7 +267,7 @@ class Toolbar extends Component {
             return null;
           }
 
-          return /*#__PURE__*/React.createElement(ExtensionsPlaceholder, {
+          return jsx(ExtensionsPlaceholder, {
             key: idx,
             node: node,
             editorView: editorView,
@@ -266,7 +276,7 @@ class Toolbar extends Component {
           });
 
         case 'separator':
-          return /*#__PURE__*/React.createElement(Separator, {
+          return jsx(Separator, {
             key: idx
           });
       }

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import classnames from 'classnames';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { PluginKey } from 'prosemirror-state';
 import { breakoutWideScaleRatio, akEditorFullPageMaxWidth, akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { pluginKey as widthPlugin } from '../width/index';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/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';
@@ -12,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';
@@ -30,7 +29,7 @@ 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;
@@ -38,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;
@@ -730,10 +729,14 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     const screenReaderText = browser.safari && this.getScreenReaderText();
     return jsx("div", {
       className: "recent-list"
-    }, jsx(Container, {
-      provider: !!activityProvider,
-      innerRef: this.wrapperRef
-    }, jsx(UrlInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
+    }, jsx("div", {
+      css: [container, !!activityProvider && containerWithProvider],
+      ref: this.wrapperRef
+    }, jsx("div", {
+      css: inputWrapper
+    }, jsx("span", {
+      css: iconWrapper
+    }, jsx(Tooltip, {
       content: formatLinkAddressText
     }, jsx(LinkIcon, {
       label: formatLinkAddressText
@@ -766,11 +769,16 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onKeyDown: this.handleKeyDown
     }), displayUrl && jsx(Tooltip, {
       content: formatClearLinkText
-    }, jsx(ClearText, {
+    }, jsx("button", {
+      css: clearText,
       onClick: this.handleClearText
     }, jsx(CrossCircleIcon, {
       label: formatClearLinkText
-    })))), jsx(TextInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
+    })))), jsx("div", {
+      css: textInputWrapper
+    }, jsx("span", {
+      css: iconWrapper
+    }, jsx(Tooltip, {
       content: formatDisplayText
     }, jsx(EditorAlignLeftIcon, {
       label: formatDisplayText
@@ -786,7 +794,8 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onKeyDown: this.handleKeyDown
     }), displayText && jsx(Tooltip, {
       content: formatMessage(messages.clearText)
-    }, jsx(ClearText, {
+    }, jsx("button", {
+      css: clearText,
       onClick: this.handleClearDisplayText,
       onKeyDown: this.handleClearTextKeyDown
     }, jsx(CrossCircleIcon, {

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: "/"
   })