@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { useState, useCallback } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -62,10 +65,10 @@ const InsertMenu = ({
   }, [quickInsertDropdownItems]);
   const render = useCallback(({
     quickInsertState
-  }) => /*#__PURE__*/React.createElement(ElementBrowserWrapper, {
+  }) => jsx(ElementBrowserWrapper, {
     handleClickOutside: toggleVisiblity,
     handleEscapeKeydown: toggleVisiblity
-  }, /*#__PURE__*/React.createElement(ElementBrowser, {
+  }, jsx(ElementBrowser, {
     mode: "inline",
     getItems: getItems(quickInsertState),
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
@@ -75,14 +78,14 @@ const InsertMenu = ({
     ,
     key: quickInsertDropdownItems.length
   })), [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
-  return /*#__PURE__*/React.createElement(InsertMenuWrapper, {
-    itemCount: itemCount
-  }, /*#__PURE__*/React.createElement(WithPluginState, {
+  return jsx("div", {
+    css: theme => insertMenuWrapper(theme, itemCount)
+  }, jsx(WithPluginState, {
     plugins: {
       quickInsertState: pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && /*#__PURE__*/React.createElement(ViewMore, {
+  }), itemCount > 0 && viewMoreItem && jsx(ViewMore, {
     item: viewMoreItem
   }));
 };
@@ -100,15 +103,16 @@ const ViewMore = ({
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: viewMoreItemTheme
-  }, /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: item.action,
-    elemBefore: /*#__PURE__*/React.createElement(ItemBefore, null, item.icon()),
+    elemBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress
-  }, item.title));
+    onKeyPress: onKeyPress,
+    theme: viewMoreItemTheme
+  }, item.title);
 };
 
 const getSvgIconForItem = ({
@@ -124,7 +128,7 @@ const getSvgIconForItem = ({
     date: IconDate,
     status: IconStatus
   }[name];
-  return Icon ? /*#__PURE__*/React.createElement(Icon, {
+  return Icon ? jsx(Icon, {
     label: ""
   }) : undefined;
 };
@@ -142,19 +146,22 @@ const getInsertMenuHeight = ({
   return 560; // For showing 6 Elements.
 };
 
-const InsertMenuWrapper = styled.div`
+const insertMenuWrapper = (theme, itemCount) => css`
   display: flex;
   flex-direction: column;
   width: 320px;
-  height: ${getInsertMenuHeight}px;
+  height: ${getInsertMenuHeight({
+  itemCount
+})}px;
   background-color: ${themed({
   light: N0,
   dark: DN50
-})()};
+})(theme)};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A};
 `;
-const ItemBefore = styled.div`
+
+const itemBefore = css`
   width: 40px;
   height: 40px;
   box-sizing: border-box;
@@ -175,11 +182,22 @@ const viewMoreItemTheme = {
     height: HEIGHT
   }
 };
-const FlexWrapper = styled.div`
+const flexWrapperStyles = css`
   display: flex;
   flex: 1;
   box-sizing: border-box;
   overflow: hidden;
 `;
+
+const FlexWrapper = props => {
+  const {
+    children,
+    ...divProps
+  } = props;
+  return jsx("div", _extends({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+
 const ElementBrowserWrapper = withOuterListeners(FlexWrapper);
 export default InsertMenu;

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useState, useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { DN50, N0 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -11,6 +12,34 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+const actions = css`
+  display: inline-flex;
+  margin: 0 -4px;
+`;
+const actionItem = css`
+  flex: 1 0 auto;
+  margin: 0 4px;
+`;
+const wrapper = css`
+  display: flex;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
+  overflow: hidden;
+  background-color: ${themed({
+  light: N0,
+  dark: DN50
+})()};
+  border-radius: ${borderRadius()}px;
+`;
+const modalFooter = css`
+  display: flex;
+  padding: ${MODAL_WRAPPER_PADDING}px;
+
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+`;
 
 const ModalElementBrowser = props => {
   const [selectedItem, setSelectedItem] = useState();
@@ -24,7 +53,7 @@ const ModalElementBrowser = props => {
   const onInsertItem = useCallback(item => {
     props.onInsertItem(item);
   }, [props]);
-  const RenderFooter = useCallback(() => /*#__PURE__*/React.createElement(Footer, {
+  const RenderFooter = useCallback(() => jsx(Footer, {
     onInsert: () => onInsertItem(selectedItem),
     beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
   }), [onInsertItem, selectedItem, helpUrl, intl]); // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
@@ -34,7 +63,9 @@ const ModalElementBrowser = props => {
       props.onClose();
     }
   }, [props]);
-  const RenderBody = useCallback(() => /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ElementBrowser, {
+  const RenderBody = useCallback(() => jsx("div", {
+    css: wrapper
+  }, jsx(ElementBrowser, {
     categories: getCategories(props.intl),
     getItems: props.getItems,
     showSearch: true,
@@ -44,11 +75,11 @@ const ModalElementBrowser = props => {
     onInsertItem: onInsertItem,
     emptyStateHandler: props.emptyStateHandler
   })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-editor-popup": true,
     onClick: onModalClick,
     onKeyDown: onKeyDown
-  }, /*#__PURE__*/React.createElement(ModalTransition, null, props.isOpen && /*#__PURE__*/React.createElement(Modal, {
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
     testId: "element-browser-modal-dialog",
     stackIndex: 0,
     key: "element-browser-modal",
@@ -59,7 +90,7 @@ const ModalElementBrowser = props => {
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
     shouldCloseOnEscapePress: false
-  }, /*#__PURE__*/React.createElement(RenderBody, null), /*#__PURE__*/React.createElement(RenderFooter, null))));
+  }, jsx(RenderBody, null), jsx(RenderFooter, null))));
 };
 
 ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
@@ -73,19 +104,27 @@ const Footer = ({
   const {
     onClose
   } = useModal();
-  return /*#__PURE__*/React.createElement(ModalFooter, null, beforeElement ? beforeElement : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(ActionItem, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: modalFooter
+  }, beforeElement ? beforeElement : jsx("span", null), jsx("div", {
+    css: actions
+  }, jsx("div", {
+    css: actionItem
+  }, jsx(Button, {
     appearance: "primary",
     onClick: onInsert,
     testId: "ModalElementBrowser__insert-button"
-  }, "Insert")), /*#__PURE__*/React.createElement(ActionItem, null, /*#__PURE__*/React.createElement(Button, {
+  }, "Insert")), jsx("div", {
+    css: actionItem
+  }, jsx(Button, {
     appearance: "subtle",
     onClick: onClose,
     testId: "ModalElementBrowser__close-button"
   }, "Close"))));
 };
 
-const HelpLink = (url, helpText) => /*#__PURE__*/React.createElement(Button, {
-  iconBefore: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+const HelpLink = (url, helpText) => jsx(Button, {
+  iconBefore: jsx(QuestionCircleIcon, {
     label: "help",
     size: "medium"
   }),
@@ -95,32 +134,4 @@ const HelpLink = (url, helpText) => /*#__PURE__*/React.createElement(Button, {
   testId: "ModalElementBrowser__help-button"
 }, helpText);
 
-const Actions = styled.div`
-  display: inline-flex;
-  margin: 0 -4px;
-`;
-const ActionItem = styled.div`
-  flex: 1 0 auto;
-  margin: 0 4px;
-`;
-const Wrapper = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
-  overflow: hidden;
-  background-color: ${themed({
-  light: N0,
-  dark: DN50
-})()};
-  border-radius: ${borderRadius()}px;
-`;
-const ModalFooter = styled.div`
-  display: flex;
-  padding: ${MODAL_WRAPPER_PADDING}px;
-
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-`;
 export default injectIntl(ModalElementBrowser);

package/dist/es2019/ui/ElementBrowser/components/CategoryList.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { memo, useCallback } from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { memo, useCallback, Fragment } from 'react';
 import { N800, B400, B50 } from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -13,7 +15,7 @@ function CategoryList({
   ...props
 }) {
   const [focusedCategoryIndex, setFocusedCategoryIndex] = React.useState(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, categories.map((category, index) => /*#__PURE__*/React.createElement(CategoryListItem, _extends({
+  return jsx(Fragment, null, categories.map((category, index) => jsx(CategoryListItem, _extends({
     key: category.title,
     index: index,
     category: category,
@@ -77,7 +79,9 @@ function CategoryListItem({
       ...rest
     };
   }, [category.name, selectedCategory]);
-  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: buttonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
@@ -88,7 +92,7 @@ function CategoryListItem({
   }, category.title));
 }
 
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   height: ${GRID_SIZE * 4}px;
   margin: 4px 4px 4px 0;
 

package/dist/es2019/ui/ElementBrowser/components/ElementBrowserLoader.js

@@ -1,8 +1,9 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import Loadable from 'react-loadable';
-import styled from 'styled-components';
 import Spinner from '@atlaskit/spinner';
-const SpinnerContainer = styled.div`
+const spinnerContainer = css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,7 +14,9 @@ const ElementBrowserLoader = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */
   '../ElementBrowser').then(module => module.default),
-  loading: () => /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+  loading: () => jsx("div", {
+    css: spinnerContainer
+  }, jsx(Spinner, {
     size: "medium"
   }))
 });

package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
+
+/** @jsx jsx */
+import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
-import styled, { ThemeProvider, css } from 'styled-components';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -12,8 +14,8 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../../plugins/analytics';
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
-import { ItemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
-import { Shortcut } from '../../../styles';
+import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
+import { shortcutStyle } from '../../../styles';
 import { ELEMENT_ITEM_HEIGHT, ELEMENT_LIST_PADDING, GRID_SIZE, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
@@ -57,9 +59,6 @@ function ElementList({
       }
     });
   }, [createAnalyticsEvent]);
-  const theme = useMemo(() => ({
-    '@atlaskit-shared-theme/item': getStyles(mode)
-  }), [mode]);
   const cellRenderer = useMemo(() => ({
     index,
     key,
@@ -69,11 +68,12 @@ function ElementList({
       return;
     }
 
-    return /*#__PURE__*/React.createElement(ElementItemWrapper, {
+    return jsx("div", {
       style: style,
       key: key,
-      className: "element-item-wrapper"
-    }, /*#__PURE__*/React.createElement(MemoizedElementItem, _extends({
+      className: "element-item-wrapper",
+      css: elementItemWrapper
+    }, jsx(MemoizedElementItem, _extends({
       inlineMode: !fullMode,
       index: index,
       item: items[index],
@@ -81,21 +81,20 @@ function ElementList({
       focus: focusedItemIndex === index
     }, props)));
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
     mode,
     selectedCategory,
     searchTerm
-  }) : /*#__PURE__*/React.createElement(EmptyState, {
+  }) : jsx(EmptyState, {
     onExternalLinkClick: onExternalLinkClick
-  }) : /*#__PURE__*/React.createElement(ElementItemsWrapper, {
+  }) : jsx("div", {
+    css: elementItemsWrapper,
     "data-testid": "element-items"
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, containerWidth > 0 && /*#__PURE__*/React.createElement(AutoSizer, {
+  }, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, ({
     height
-  }) => /*#__PURE__*/React.createElement(Collection, {
+  }) => jsx(Collection, {
     cellCount: items.length,
     cellRenderer: cellRenderer,
     cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth),
@@ -111,7 +110,7 @@ function ElementList({
     ,
     key: containerWidth + items.length,
     scrollToCell: selectedItemIndex
-  }))))));
+  })))));
 }
 
 const getStyles = memoizeOne(mode => {
@@ -156,6 +155,9 @@ function ElementItem({
   setFocusedItemIndex
 }) {
   const ref = useFocus(focus);
+  const theme = useMemo(() => ({
+    '@atlaskit-shared-theme/item': getStyles(inlineMode ? 'inline' : 'full')
+  }), [inlineMode]);
   /**
    * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
    * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
@@ -200,13 +202,13 @@ function ElementItem({
     description,
     keyshortcut
   } = item;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: description,
     testId: `element-item-tooltip-${index}`
-  }, /*#__PURE__*/React.createElement(Item, {
+  }, jsx(Item, {
     onClick: onClick,
     onDoubleClick: onDoubleClick,
-    elemBefore: /*#__PURE__*/React.createElement(ElementBefore, {
+    elemBefore: jsx(ElementBefore, {
       icon: icon,
       title: title
     }),
@@ -216,8 +218,9 @@ function ElementItem({
     onKeyPress: onKeyPress,
     "data-testid": `element-item-${index}`,
     tabIndex: 0,
-    style: inlineMode ? null : itemStyleOverrides
-  }, /*#__PURE__*/React.createElement(ItemContent, {
+    style: inlineMode ? null : itemStyleOverrides,
+    theme: theme
+  }, jsx(ItemContent, {
     title: title,
     description: description,
     keyshortcut: keyshortcut
@@ -237,14 +240,29 @@ const itemStyleOverrides = {
 const ElementBefore = /*#__PURE__*/memo(({
   icon,
   title
-}) => /*#__PURE__*/React.createElement(StyledItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(IconFallback, null)));
+}) => jsx("div", {
+  css: [itemIcon, itemIconStyle]
+}, icon ? icon() : jsx(IconFallback, null)));
 const ItemContent = /*#__PURE__*/memo(({
   title,
   description,
   keyshortcut
-}) => /*#__PURE__*/React.createElement(ItemBody, {
+}) => jsx("div", {
+  css: itemBody,
   className: "item-body"
-}, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement(ItemTitleWrapper, null, /*#__PURE__*/React.createElement(ItemTitle, null, title), /*#__PURE__*/React.createElement(ItemAfter, null, keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, keyshortcut))), description && /*#__PURE__*/React.createElement(ItemDescription, null, description))));
+}, jsx("div", {
+  css: itemText
+}, jsx("div", {
+  css: itemTitleWrapper
+}, jsx("p", {
+  css: itemTitle
+}, title), jsx("div", {
+  css: itemAfter
+}, keyshortcut && jsx("div", {
+  css: shortcutStyle
+}, keyshortcut))), description && jsx("p", {
+  css: itemDescription
+}, description))));
 const scrollbarStyle = css`
   ::-webkit-scrollbar {
     width: ${SCROLLBAR_WIDTH}px;
@@ -261,7 +279,7 @@ const scrollbarStyle = css`
 
   -ms-overflow-style: -ms-autohiding-scrollbar;
 `;
-const ElementItemsWrapper = styled.div`
+const elementItemsWrapper = css`
   flex: 1;
   flex-flow: row wrap;
   align-items: flex-start;
@@ -283,8 +301,13 @@ const ElementItemsWrapper = styled.div`
       padding-bottom: 4px;
     }
   }
+
+  // temporary solution before we migrated off dst/item
+  & span[class^='ItemParts__Before'] {
+    margin-right: 12px;
+  }
 `;
-const ElementItemWrapper = styled.div`
+const elementItemWrapper = css`
   /**
      * Since we are using "Item" component's content itself for description,
      * the height of description overflows the parent container padding/margin.
@@ -296,7 +319,7 @@ const ElementItemWrapper = styled.div`
     }
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -316,7 +339,7 @@ const multilineStyle = css`
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 `;
-const ItemDescription = styled.p`
+const itemDescription = css`
   ${multilineStyle};
 
   overflow: hidden;
@@ -324,25 +347,25 @@ const ItemDescription = styled.p`
   color: ${N200};
   margin-top: 2px;
 `;
-const ItemText = styled.div`
+const itemText = css`
   width: inherit;
   white-space: initial;
 `;
-const ItemTitleWrapper = styled.div`
+const itemTitleWrapper = css`
   display: flex;
   justify-content: space-between; // Title and keyboardshortcut are rendered in the same block
 `;
-const ItemTitle = styled.p`
+const itemTitle = css`
   width: 100%;
   overflow: hidden;
 
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
-const ItemAfter = styled.div`
+const itemAfter = css`
   flex: 0 0 auto;
 `;
-const StyledItemIcon = styled(ItemIcon)`
+const itemIconStyle = css`
   img {
     height: 40px;
     width: 40px;

package/dist/es2019/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -1,31 +1,39 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
   onExternalLinkClick
 }) {
-  return /*#__PURE__*/React.createElement(EmptyStateWrapper, null, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement(EmptyStateHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  return jsx("div", {
+    css: emptyStateWrapper
+  }, jsx(NotFoundIllustration, null), jsx("div", {
+    css: emptyStateHeading
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
     description: "Empty state heading"
-  })), /*#__PURE__*/React.createElement(EmptyStateSubHeading, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  })), jsx("div", {
+    css: emptyStateSubHeading
+  }, jsx("p", null, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), /*#__PURE__*/React.createElement(ExternalLinkWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  })), jsx("div", {
+    css: externalLinkWrapper
+  }, jsx(Button, {
     appearance: "primary",
     target: "_blank",
     href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
     onClick: onExternalLinkClick
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
     defaultMessage: "Explore Atlassian Marketplace",
     description: "Empty state sub-heading external link"
   })))));
 }
-const EmptyStateHeading = styled.div`
+const emptyStateHeading = css`
   font-size: 1.42857em;
   line-height: 1.2;
   color: rgb(23, 43, 77);
@@ -33,18 +41,18 @@ const EmptyStateHeading = styled.div`
   letter-spacing: -0.008em;
   margin-top: 28px;
 `;
-const EmptyStateSubHeading = styled.div`
+const emptyStateSubHeading = css`
   margin-top: 16px;
   max-width: 400px;
   text-align: center;
 `;
-const EmptyStateWrapper = styled.div`
+const emptyStateWrapper = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
 `;
-const ExternalLinkWrapper = styled.div`
+const externalLinkWrapper = css`
   margin-top: 14px;
 `;