@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -1,6 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Loadable from 'react-loadable';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -12,11 +13,11 @@ const iconWidth = 40;
 const buttonWidth = 40;
 const margin = 16;
 const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-const Item = styled.div`
+const item = css`
   display: flex;
   margin-bottom: 24px;
 `;
-const ItemIcon = styled.div`
+const itemIcon = css`
   width: ${iconWidth}px;
   height: ${iconWidth}px;
   overflow: hidden;
@@ -33,7 +34,7 @@ const ItemIcon = styled.div`
     height: ${iconWidth}px;
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -43,13 +44,12 @@ const ItemBody = styled.div`
   flex-grow: 3;
   max-width: calc(100% - ${gapSizeForEllipsis}px);
 `;
-const CenteredItemTitle = styled.div`
+const centeredItemTitle = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
 `;
-CenteredItemTitle.displayName = 'CenteredItemTitle';
-const ItemText = styled.div`
+const itemText = css`
   max-width: 100%;
   white-space: initial;
   .item-summary {
@@ -62,12 +62,10 @@ const ItemText = styled.div`
     text-overflow: ellipsis;
   }
 `;
-ItemText.displayName = 'ItemText';
-const Description = styled.p`
+const descriptionStyle = css`
   margin-bottom: 24px;
 `;
-Description.displayName = 'Description';
-const CloseButtonWrapper = styled.div`
+const closeButtonWrapper = css`
   width: ${buttonWidth}px;
   text-align: right;
 `;
@@ -85,22 +83,35 @@ const Header = ({
     loader: icon,
     loading: () => null
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemIcon, null, /*#__PURE__*/React.createElement(ResolvedIcon, {
+  return jsx(Fragment, null, jsx("div", {
+    css: item
+  }, jsx("div", {
+    css: itemIcon
+  }, jsx(ResolvedIcon, {
     label: title
-  })), /*#__PURE__*/React.createElement(ItemBody, null, summary ? /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
+    css: itemBody
+  }, summary ? jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title",
     id: "context-panel-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), jsx("div", {
     className: "item-summary"
-  }, summary)) : /*#__PURE__*/React.createElement(CenteredItemTitle, {
+  }, summary)) : jsx("div", {
+    css: centeredItemTitle,
     id: "context-panel-title"
-  }, title)), /*#__PURE__*/React.createElement(CloseButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, title)), jsx("div", {
+    css: closeButtonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
-    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+    iconBefore: jsx(CrossIcon, {
       label: intl.formatMessage(messages.close)
     }),
     onClick: onClose
-  }))), (description || documentationUrl) && /*#__PURE__*/React.createElement(Description, null, description && /*#__PURE__*/React.createElement(React.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && /*#__PURE__*/React.createElement("a", {
+  }))), (description || documentationUrl) && jsx("p", {
+    css: descriptionStyle
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl

package/dist/es2019/ui/ConfigPanel/LoadingState.js

@@ -1,13 +1,15 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-const SpinnerWrapper = styled.div`
+const spinnerWrapper = css`
   display: flex;
   justify-content: center;
   margin-top: 64px;
 `;
 
-const LoadingState = () => /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
+const LoadingState = () => jsx("div", {
+  css: spinnerWrapper
+}, jsx(Spinner, {
   size: "small"
 }));
 

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -1,16 +1,20 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import * as colors from '@atlaskit/theme/colors';
 import { messages } from '../messages';
-const RemovableFieldWrapper = styled.div`
+const removableFieldWrapper = css`
   position: relative;
-  margin-bottom: ${props => props.hasMarginBottom ? gridSize() * 2 : 0}px;
+  margin-bottom: 0;
 `;
-const RemoveButtonWrapper = styled.div`
+const wrapperWithMarginBottom = css`
+  margin-bottom: ${gridSize() * 2}px;
+`;
+const removeButtonWrapper = css`
   position: absolute;
   right: 0;
   top: 0;
@@ -35,16 +39,17 @@ const RemovableField = ({
 
   const onClickCallback = React.useCallback(() => onClickRemove && onClickRemove(name), [name, onClickRemove]);
   const hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
-  return /*#__PURE__*/React.createElement(RemovableFieldWrapper, {
-    hasMarginBottom: hasMarginBottom,
+  return jsx("div", {
+    css: [removableFieldWrapper, hasMarginBottom && wrapperWithMarginBottom],
     className: className
-  }, children, canRemoveField && /*#__PURE__*/React.createElement(RemoveButtonWrapper, {
-    testId: `remove-field-${name}`,
+  }, children, canRemoveField && jsx("div", {
+    css: removeButtonWrapper,
+    "data-testid": `remove-field-${name}`,
     onClick: onClickCallback
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: intl.formatMessage(messages.removeField),
     position: "left"
-  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+  }, jsx(CrossCircleIcon, {
     size: "small",
     label: intl.formatMessage(messages.removeField)
   }))));

package/dist/es2019/ui/ContentStyles/index.js

@@ -1,15 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
-import styled from 'styled-components';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
-import { tableStyles } from '../../plugins/table/ui/common-styles.css';
+import { tableStyles } from '../../plugins/table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
 import { codeBlockStyles, highlightingCodeBlockStyles } from '../../plugins/code-block/styles';
@@ -35,9 +32,10 @@ import { smartCardStyles } from '../../plugins/card/styles';
 import { dateStyles } from '../../plugins/date/styles';
 import { embedCardStyles } from '../../plugins/card/ui/styled';
 import { useFeatureFlags } from '../../plugins/feature-flags-context';
+import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 const contentStyles = props => {
-  var _props$featureFlags;
+  var _props$featureFlags, _props$featureFlags2;
 
   return css`
   .ProseMirror {
@@ -50,29 +48,9 @@ const contentStyles = props => {
     ${listsSharedStyles};
     ${indentationSharedStyles};
     ${shadowSharedStyle};
+    ${InlineNodeViewSharedStyles};
   }
 
-  ${tableStyles(props)}
-  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
-
-  ${blocktypeStyles(props)}
-  ${textFormattingStyles(props)}
-  ${textColorStyles}
-  ${mediaStyles}
-  ${layoutStyles}
-  ${tasksAndDecisionsStyles}
-  ${blockMarksSharedStyles}
-  ${dateSharedStyle}
-  ${annotationSharedStyles(props)}
-  ${embedCardStyles}
-
-  .mediaGroupView-content-wrap ul {
-    padding: 0;
-  }
-`;
-};
-
-const DeprecatedContentStyles = styled.div`
   .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
     pointer-events: none;
     opacity: 0.7;
@@ -96,32 +74,47 @@ const DeprecatedContentStyles = styled.div`
 
   ${placeholderTextStyles}
   ${placeholderStyles}
+  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
+
+  ${blocktypeStyles(props)}
+  ${textFormattingStyles(props)}
+  ${textColorStyles}
   ${listsStyles}
-  ${ruleStyles}
+  ${ruleStyles(props)}
+  ${mediaStyles}
+  ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
-  ${panelStyles}
+  ${tableStyles(props)}
+  ${panelStyles(props)}
   ${fakeCursorStyles}
   ${mentionsStyles}
-  ${({
-  featureFlags
-}) => featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${(_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${tasksAndDecisionsStyles}
   ${gridStyles}
   ${linkStyles}
+  ${blockMarksSharedStyles}
+  ${dateSharedStyle}
   ${extensionStyles}
-  ${expandStyles}
+  ${expandStyles(props)}
   ${findReplaceStyles}
   ${taskDecisionStyles}
   ${statusStyles}
+  ${annotationSharedStyles(props)}
   ${smartCardStyles}
   ${smartCardSharedStyles}
   ${dateStyles}
+  ${embedCardStyles}
   ${unsupportedStyles}
 
   .panelView-content-wrap {
     box-sizing: border-box;
   }
 
+  .mediaGroupView-content-wrap ul {
+    padding: 0;
+  }
+
   /** Needed to override any cleared floats, e.g. image wrapping */
 
   div.fabric-editor-block-mark[class^='fabric-editor-align'] {
@@ -164,20 +157,25 @@ const DeprecatedContentStyles = styled.div`
     }
   }
 `;
-export default /*#__PURE__*/React.forwardRef((props, ref) => {
-  const featureFlags = useFeatureFlags();
-  const {
-    allowAnnotation
-  } = props;
-  const theme = useTheme();
-  const memoizedStyle = useMemo(() => contentStyles({
-    theme,
-    allowAnnotation,
-    featureFlags
-  }), [theme, featureFlags, allowAnnotation]);
-  return jsx(DeprecatedContentStyles, _extends({}, props, {
-    innerRef: ref,
-    featureFlags: featureFlags,
-    css: memoizedStyle
-  }));
-});
+};
+
+export const createEditorContentStyle = styles => {
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    const featureFlags = useFeatureFlags();
+    const {
+      className,
+      children
+    } = props;
+    const theme = useTheme();
+    const memoizedStyle = useMemo(() => contentStyles({
+      theme,
+      featureFlags
+    }), [theme, featureFlags]);
+    return jsx("div", {
+      className: className,
+      ref: ref,
+      css: [memoizedStyle, styles]
+    }, children);
+  });
+};
+export default createEditorContentStyle();

package/dist/es2019/ui/ContextPanel/index.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import styled from 'styled-components';
-import { css } from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { ContextPanelConsumer } from './context';
@@ -33,35 +34,21 @@ export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth) => {
   const hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
   return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
 };
-/**
- * Only use absolute position for panel when screen size is wide enough
- * to accomodate breakout content and editor is not in wide mode.
- */
-
-const panelSlideStyles = ({
-  positionPanelOverEditor
-}) => {
-  if (positionPanelOverEditor) {
-    return absolutePanelStyles;
-  }
-
-  return;
-};
-
-export const Panel = styled.div`
-  width: ${p => p.visible ? p.panelWidth : 0}px;
+const panelHidden = css`
+  width: 0;
+`;
+export const panel = css`
+  width: ${akEditorContextPanelWidth}px;
   height: 100%;
   transition: width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier};
   overflow: hidden;
   box-shadow: inset 2px 0 0 0 ${N30};
-
-  ${props => panelSlideStyles(props)};
 `;
-export const Content = styled.div`
+export const content = css`
   transition: width 600ms ${akEditorSwoopCubicBezier};
   box-sizing: border-box;
   padding: 16px 16px 0px;
-  width: ${p => p.visible ? p.panelWidth : 0}px;
+  width: ${akEditorContextPanelWidth}px;
   height: 100%;
   overflow-y: auto;
 `;
@@ -86,7 +73,7 @@ export class SwappableContentArea extends React.PureComponent {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -104,7 +91,7 @@ export class SwappableContentArea extends React.PureComponent {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -143,7 +130,7 @@ export class SwappableContentArea extends React.PureComponent {
     const width = akEditorContextPanelWidth;
     const userVisible = !!this.props.visible;
     const visible = userVisible || !!this.state.currentPluginContent;
-    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+    return jsx(ContextPanelConsumer, null, ({
       broadcastWidth,
       broadcastPosition,
       positionedOverEditor
@@ -151,16 +138,19 @@ export class SwappableContentArea extends React.PureComponent {
       const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
       broadcastWidth(visible ? width : 0);
       (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
-      return /*#__PURE__*/React.createElement(Panel, {
-        panelWidth: width,
-        visible: visible,
-        positionPanelOverEditor: newPosition,
+      return jsx("div", {
+        css: [panel, !visible && panelHidden,
+        /**
+         * Only use absolute position for panel when screen size is wide enough
+         * to accommodate breakout content and editor is not in wide mode.
+         */
+        newPosition && absolutePanelStyles],
         "data-testid": "context-panel-panel",
         "aria-labelledby": "context-panel-title",
         role: "dialog"
-      }, /*#__PURE__*/React.createElement(Content, {
-        panelWidth: width,
-        visible: visible
+      }, jsx("div", {
+        "data-testid": "context-panel-content",
+        css: [content, !visible && panelHidden]
       }, this.showPluginContent() || this.showProvidedContent(userVisible)));
     });
   }
@@ -168,19 +158,19 @@ export class SwappableContentArea extends React.PureComponent {
 }
 export default class ContextPanel extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(WithEditorActions, {
+    return jsx(WithEditorActions, {
       render: actions => {
         const eventDispatcher = actions._privateGetEventDispatcher();
 
         const editorView = actions._privateGetEditorView();
 
         if (!eventDispatcher) {
-          return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({
+          return jsx(SwappableContentArea, _extends({
             editorView: editorView
           }, this.props));
         }
 
-        return /*#__PURE__*/React.createElement(WithPluginState, {
+        return jsx(WithPluginState, {
           eventDispatcher: eventDispatcher,
           plugins: {
             contextPanel: contextPanelPluginKey,
@@ -198,7 +188,7 @@ export default class ContextPanel extends React.Component {
             const editorWidth = { ...widthState,
               contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
             };
-            return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({}, this.props, {
+            return jsx(SwappableContentArea, _extends({}, this.props, {
               editorView: editorView,
               pluginContent: firstContent,
               editorWidth: editorWidth

package/dist/es2019/ui/DropdownMenu/index.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import styled from 'styled-components'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -9,7 +11,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import withOuterListeners from '../with-outer-listeners';
-const Wrapper = styled.div`
+const wrapper = css`
   /* tooltip in ToolbarButton is display:block */
   & > div > div {
     display: flex;
@@ -20,11 +22,15 @@ const DropListWithOutsideListeners = withOuterListeners(DropList);
  * Hack for item to imitate old dropdown-menu selected styles
  */
 
-const ItemWrapper = styled.div`
-  ${props => props.isSelected ? '&& > span, && > span:hover { background: #6c798f; color: #fff; }' : ''};
+const itemWrapper = css`
+  && > span,
+  && > span:hover {
+    background: #6c798f;
+    color: #fff;
+  }
 `;
-const ItemContentWrapper = styled.span`
-  ${props => props.hasElemBefore ? 'margin-left: 8px;' : ''};
+const itemContentWrapper = css`
+  margin-left: 8px;
 `;
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -78,15 +84,15 @@ export default class DropdownMenuWrapper extends PureComponent {
     // If neither are present, don't wrap in an Item.
 
     if (!item.onClick && !item.value && !item.value.name) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: String(item.content)
       }, item.content);
     }
 
-    const dropListItem = /*#__PURE__*/React.createElement(ItemWrapper, {
-      key: item.key || item.content,
-      isSelected: item.isActive
-    }, /*#__PURE__*/React.createElement(Item, {
+    const dropListItem = jsx("div", {
+      css: item.isActive ? itemWrapper : '',
+      key: item.key || item.content
+    }, jsx(Item, {
       role: shouldUseDefaultRole ? 'button' : 'menuitem',
       elemBefore: item.elemBefore,
       elemAfter: item.elemAfter,
@@ -103,12 +109,12 @@ export default class DropdownMenuWrapper extends PureComponent {
       className: item.className,
       "aria-label": item.label || String(item.content),
       "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-    }, /*#__PURE__*/React.createElement(ItemContentWrapper, {
-      hasElemBefore: !!item.elemBefore
+    }, jsx("span", {
+      css: !!item.elemBefore ? itemContentWrapper : ''
     }, item.content)));
 
     if (item.tooltipDescription) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         key: item.key || item.content,
         content: item.tooltipDescription,
         position: item.tooltipPosition
@@ -135,7 +141,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       zIndex,
       shouldUseDefaultRole
     } = this.props;
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: isOpen ? target : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
@@ -145,7 +151,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       fitWidth: fitWidth,
       zIndex: zIndex || akEditorFloatingPanelZIndex,
       offset: offset
-    }, /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
+    }, jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
       position: popupPlacement.join(' '),
@@ -154,12 +160,12 @@ export default class DropdownMenuWrapper extends PureComponent {
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: this.handleClose
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       style: {
         height: 0,
         minWidth: fitWidth || 0
       }
-    }), items.map((group, index) => /*#__PURE__*/React.createElement(ItemGroup, {
+    }), items.map((group, index) => jsx(ItemGroup, {
       key: index,
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => this.renderItem(item))))));
@@ -170,7 +176,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       children,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
+      css: wrapper
+    }, jsx("div", {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }