@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-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';
@@ -16,16 +17,13 @@ var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-var Item = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
-var ItemIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, borderRadius(), iconWidth, iconWidth);
-var ItemBody = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
-var CenteredItemTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-CenteredItemTitle.displayName = 'CenteredItemTitle';
-var ItemText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
-ItemText.displayName = 'ItemText';
-var Description = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
-Description.displayName = 'Description';
-var CloseButtonWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
+var item = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
+var itemIcon = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, borderRadius(), iconWidth, iconWidth);
+var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
+var centeredItemTitle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
+var descriptionStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
+var closeButtonWrapper = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 
 var Header = function Header(_ref) {
   var icon = _ref.icon,
@@ -41,22 +39,35 @@ var Header = function Header(_ref) {
       return 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/esm/ui/ContentStyles/index.js

@@ -1,16 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { jsx, css, useTheme } from '@emotion/react';
 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';
@@ -36,17 +36,30 @@ 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';
-var ContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, blocktypeStyles, textFormattingStyles, placeholderTextStyles, placeholderStyles, function (_ref) {
-  var featureFlags = _ref.featureFlags;
-  return featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles : codeBlockStyles;
-}, textColorStyles, listsStyles, ruleStyles, mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles, panelStyles, fakeCursorStyles, mentionsStyles, function (_ref2) {
-  var featureFlags = _ref2.featureFlags;
-  return featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles;
-}, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles, findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles, smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
+import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+
+var contentStyles = function contentStyles(props) {
+  var _props$featureFlags, _props$featureFlags2;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
+    theme: props.theme
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, 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(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
+};
+
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var featureFlags = useFeatureFlags();
-  return /*#__PURE__*/React.createElement(ContentStyles, _extends({}, props, {
-    innerRef: ref,
-    featureFlags: featureFlags
-  }));
+  var className = props.className,
+      children = props.children;
+  var theme = useTheme();
+  var memoizedStyle = useMemo(function () {
+    return contentStyles({
+      theme: theme,
+      featureFlags: featureFlags
+    });
+  }, [theme, featureFlags]);
+  return jsx("div", {
+    className: className,
+    ref: ref,
+    css: memoizedStyle
+  }, children);
 });

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

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2, _templateObject3;
 
 import React, { useState, useCallback } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled from 'styled-components';
 // 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
@@ -118,15 +118,14 @@ var ViewMore = function ViewMore(_ref3) {
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: viewMoreItemTheme
-  }, /*#__PURE__*/React.createElement(Item, {
+  return /*#__PURE__*/React.createElement(Item, {
     onClick: item.action,
     elemBefore: /*#__PURE__*/React.createElement(ItemBefore, null, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress
-  }, item.title));
+    onKeyPress: onKeyPress,
+    theme: viewMoreItemTheme
+  }, item.title);
 };
 
 var getSvgIconForItem = function getSvgIconForItem(_ref4) {

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

@@ -1,10 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+/** @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';
@@ -16,6 +17,13 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+var actions = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
+var actionItem = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
+var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), MODAL_WRAPPER_PADDING, MODAL_WRAPPER_PADDING, themed({
+  light: N0,
+  dark: DN50
+})(), borderRadius());
+var modalFooter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), MODAL_WRAPPER_PADDING);
 
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = useState(),
@@ -32,7 +40,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     props.onInsertItem(item);
   }, [props]);
   var RenderFooter = useCallback(function () {
-    return /*#__PURE__*/React.createElement(Footer, {
+    return jsx(Footer, {
       onInsert: function onInsert() {
         return onInsertItem(selectedItem);
       },
@@ -46,7 +54,9 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     }
   }, [props]);
   var RenderBody = useCallback(function () {
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ElementBrowser, {
+    return jsx("div", {
+      css: wrapper
+    }, jsx(ElementBrowser, {
       categories: getCategories(props.intl),
       getItems: props.getItems,
       showSearch: true,
@@ -57,11 +67,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       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",
@@ -72,7 +82,7 @@ var ModalElementBrowser = function 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.
@@ -88,11 +98,19 @@ var Footer = function Footer(_ref) {
   var _useModal = useModal(),
       onClose = _useModal.onClose;
 
-  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"
@@ -100,8 +118,8 @@ var Footer = function Footer(_ref) {
 };
 
 var HelpLink = function HelpLink(url, helpText) {
-  return /*#__PURE__*/React.createElement(Button, {
-    iconBefore: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+  return jsx(Button, {
+    iconBefore: jsx(QuestionCircleIcon, {
       label: "help",
       size: "medium"
     }),
@@ -112,11 +130,4 @@ var HelpLink = function HelpLink(url, helpText) {
   }, helpText);
 };
 
-var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
-var ActionItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
-var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), MODAL_WRAPPER_PADDING, MODAL_WRAPPER_PADDING, themed({
-  light: N0,
-  dark: DN50
-})(), borderRadius());
-var ModalFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), MODAL_WRAPPER_PADDING);
 export default injectIntl(ModalElementBrowser);

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

@@ -11,9 +11,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-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
@@ -69,11 +70,6 @@ function ElementList(_ref) {
       }
     });
   }, [createAnalyticsEvent]);
-  var theme = useMemo(function () {
-    return {
-      '@atlaskit-shared-theme/item': getStyles(mode)
-    };
-  }, [mode]);
   var cellRenderer = useMemo(function () {
     return function (_ref2) {
       var index = _ref2.index,
@@ -84,11 +80,12 @@ function ElementList(_ref) {
         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],
@@ -97,21 +94,20 @@ function ElementList(_ref) {
       }, 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: mode,
     selectedCategory: selectedCategory,
     searchTerm: 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
   }, function (_ref3) {
     var height = _ref3.height;
-    return /*#__PURE__*/React.createElement(Collection, {
+    return jsx(Collection, {
       cellCount: items.length,
       cellRenderer: cellRenderer,
       cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth),
@@ -128,7 +124,7 @@ function ElementList(_ref) {
       key: containerWidth + items.length,
       scrollToCell: selectedItemIndex
     });
-  })))));
+  }))));
 }
 
 var getStyles = memoizeOne(function (mode) {
@@ -172,6 +168,11 @@ function ElementItem(_ref4) {
       focus = _ref4.focus,
       setFocusedItemIndex = _ref4.setFocusedItemIndex;
   var ref = useFocus(focus);
+  var theme = useMemo(function () {
+    return {
+      '@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)
@@ -214,13 +215,13 @@ function ElementItem(_ref4) {
       title = item.title,
       description = item.description,
       keyshortcut = item.keyshortcut;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
-  }, /*#__PURE__*/React.createElement(Item, {
+  }, jsx(Item, {
     onClick: onClick,
     onDoubleClick: onDoubleClick,
-    elemBefore: /*#__PURE__*/React.createElement(ElementBefore, {
+    elemBefore: jsx(ElementBefore, {
       icon: icon,
       title: title
     }),
@@ -230,8 +231,9 @@ function ElementItem(_ref4) {
     onKeyPress: onKeyPress,
     "data-testid": "element-item-".concat(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
@@ -251,32 +253,45 @@ var itemStyleOverrides = {
 var ElementBefore = /*#__PURE__*/memo(function (_ref5) {
   var icon = _ref5.icon,
       title = _ref5.title;
-  return /*#__PURE__*/React.createElement(StyledItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(IconFallback, null));
+  return jsx(ItemIcon, {
+    css: itemIconStyle
+  }, icon ? icon() : jsx(IconFallback, null));
 });
 var ItemContent = /*#__PURE__*/memo(function (_ref6) {
   var title = _ref6.title,
       description = _ref6.description,
       keyshortcut = _ref6.keyshortcut;
-  return /*#__PURE__*/React.createElement(ItemBody, {
+  return 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(Shortcut, null, keyshortcut))), description && jsx("p", {
+    css: itemDescription
+  }, description)));
 });
 var scrollbarStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ::-webkit-scrollbar {\n    width: ", "px;\n  }\n  ::-webkit-scrollbar-track-piece {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  /** Firefox **/\n  scrollbar-color: ", " ", ";\n\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n"])), SCROLLBAR_WIDTH, SCROLLBAR_TRACK_COLOR, SCROLLBAR_THUMB_COLOR, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR);
-var ElementItemsWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), ELEMENT_LIST_PADDING, scrollbarStyle, ELEMENT_LIST_PADDING, B100);
-var ElementItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /**\n     * Since we are using \"Item\" component's content itself for description,\n     * the height of description overflows the parent container padding/margin.\n     * manually setting it to take 100% of parent.\n     */\n  span {\n    span:nth-child(2) {\n      max-height: 100%;\n    }\n  }\n"])));
-var ItemBody = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
+var elementItemsWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 12px;\n  }\n"])), ELEMENT_LIST_PADDING, scrollbarStyle, ELEMENT_LIST_PADDING, B100);
+var elementItemWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /**\n     * Since we are using \"Item\" component's content itself for description,\n     * the height of description overflows the parent container padding/margin.\n     * manually setting it to take 100% of parent.\n     */\n  span {\n    span:nth-child(2) {\n      max-height: 100%;\n    }\n  }\n"])));
+var itemBody = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
  * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
  */
 
 var multilineStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
-var ItemDescription = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, relativeFontSizeToBase16(11.67), N200);
-var ItemText = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: inherit;\n  white-space: initial;\n"])));
-var ItemTitleWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
-var ItemTitle = styled.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
-var ItemAfter = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
-var StyledItemIcon = styled(ItemIcon)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  img {\n    height: 40px;\n    width: 40px;\n    object-fit: cover;\n  }\n"])));
+var itemDescription = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, relativeFontSizeToBase16(11.67), N200);
+var itemText = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: inherit;\n  white-space: initial;\n"])));
+var itemTitleWrapper = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
+var itemTitle = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+var itemAfter = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var itemIconStyle = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  img {\n    height: 40px;\n    width: 40px;\n    object-fit: cover;\n  }\n"])));
 var MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'ElementList'
 })(ElementList));

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

@@ -2,33 +2,41 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-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(_ref) {
   var onExternalLinkClick = _ref.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"
   })))));
 }
-var EmptyStateHeading = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: rgb(23, 43, 77);\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])));
-var EmptyStateSubHeading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  max-width: 400px;\n  text-align: center;\n"])));
-var EmptyStateWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
-var ExternalLinkWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 14px;\n"])));
+var emptyStateHeading = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: rgb(23, 43, 77);\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])));
+var emptyStateSubHeading = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  max-width: 400px;\n  text-align: center;\n"])));
+var emptyStateWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
+var externalLinkWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: 14px;\n"])));