@atlaskit/editor-core 162.0.1 → 163.0.0

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

@@ -1,12 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 /** @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';
@@ -38,33 +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';
+import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 var contentStyles = function contentStyles(props) {
-  var _props$featureFlags;
+  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  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n"])), editorFontSize({
+  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, 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);
+  }), 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);
 };
 
-var DeprecatedContentStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  .panelView-content-wrap {\n    box-sizing: border-box;\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"])), placeholderTextStyles, placeholderStyles, listsStyles, ruleStyles, telepointerStyle, gapCursorStyles, panelStyles, fakeCursorStyles, mentionsStyles, function (_ref) {
-  var featureFlags = _ref.featureFlags;
-  return featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles;
-}, gridStyles, linkStyles, extensionStyles, expandStyles, findReplaceStyles, taskDecisionStyles, statusStyles, smartCardStyles, smartCardSharedStyles, dateStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var featureFlags = useFeatureFlags();
-  var allowAnnotation = props.allowAnnotation;
+  var className = props.className,
+      children = props.children;
   var theme = useTheme();
   var memoizedStyle = useMemo(function () {
     return contentStyles({
       theme: theme,
-      allowAnnotation: allowAnnotation,
       featureFlags: featureFlags
     });
-  }, [theme, featureFlags, allowAnnotation]);
-  return jsx(DeprecatedContentStyles, _extends({}, props, {
-    innerRef: ref,
-    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"])));

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

@@ -2,58 +2,60 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
-var ImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 111px;\n  margin-top: 48px;\n"])));
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 111px;\n  margin-top: 48px;\n"])));
 export default function NotFoundIllustration() {
-  return /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+  return jsx("div", {
+    css: imageContainer
+  }, jsx("svg", {
     width: "120",
     height: "111",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, jsx("g", {
     clipPath: "url(#clip0)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     fill: "#fff",
     fillOpacity: ".01",
     d: "M0 0h120v110.365H0z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     opacity: ".3",
     d: "M60.985 110.336c-.539.017-1.078.029-1.616.035a1.359 1.359 0 01-1.367-1.36 1.361 1.361 0 011.314-1.372h.041a50.876 50.876 0 0010.276-1.105 1.367 1.367 0 01.568 2.674 54.422 54.422 0 01-9.216 1.128zM52 109.877c-.075 0-.156 0-.237-.012a52.688 52.688 0 01-10.583-2.61 1.368 1.368 0 01.92-2.575c3.245 1.169 6.616 2 10.034 2.471.747.104 1.268.79 1.164 1.54A1.36 1.36 0 0152 109.877zM77.088 107.162a1.364 1.364 0 01-1.326-.895 1.366 1.366 0 01.805-1.755 50.423 50.423 0 009.274-4.575 1.358 1.358 0 011.877.43c.4.64.208 1.482-.429 1.884a53.25 53.25 0 01-9.772 4.824 1.26 1.26 0 01-.429.087zM34.9 104.32a1.359 1.359 0 01-.683-.157 53.29 53.29 0 01-9.042-6.092 1.369 1.369 0 01-.18-1.924 1.357 1.357 0 011.918-.18 50.483 50.483 0 008.578 5.778c.667.354.916 1.18.562 1.848a1.337 1.337 0 01-1.152.727zM20.732 93.23a1.372 1.372 0 01-1.06-.448 53.223 53.223 0 01-6.436-8.818 1.37 1.37 0 01.487-1.872 1.36 1.36 0 011.865.489 50.724 50.724 0 006.105 8.364 1.366 1.366 0 01-.098 1.93c-.25.226-.556.343-.863.354zM104.093 84.196a1.367 1.367 0 01-1.228-2.046 50.41 50.41 0 004.183-9.48 1.358 1.358 0 011.714-.878 1.365 1.365 0 01.875 1.72 53.17 53.17 0 01-4.414 9.993 1.34 1.34 0 01-1.13.691zM11.18 77.965a1.365 1.365 0 01-1.31-.854 52.827 52.827 0 01-3.029-10.498 1.362 1.362 0 112.682-.483 50.732 50.732 0 002.873 9.958 1.363 1.363 0 01-1.216 1.877zM110.17 67.218a1.362 1.362 0 01-1.39-1.593c.579-3.395.805-6.876.683-10.347l-.006-.116a1.36 1.36 0 011.315-1.412 1.359 1.359 0 011.408 1.32l.006.115a54.054 54.054 0 01-.724 10.905 1.36 1.36 0 01-1.292 1.128zM7.426 60.3c-.753.03-1.384-.534-1.407-1.29v-.058a53.82 53.82 0 01.712-10.846 1.368 1.368 0 011.57-1.122c.741.128 1.24.83 1.118 1.575a51.307 51.307 0 00-.678 10.288c.029.762-.562 1.425-1.315 1.453zM110.06 49.076a1.363 1.363 0 01-1.385-1.122 50.567 50.567 0 00-2.884-9.95c-.284-.698.052-1.5.747-1.785a1.365 1.365 0 011.778.75 53.085 53.085 0 013.041 10.497 1.37 1.37 0 01-1.094 1.593l-.203.017zM9.888 42.462a1.452 1.452 0 01-.47-.065 1.365 1.365 0 01-.874-1.72 53.157 53.157 0 014.402-9.998 1.362 1.362 0 011.86-.511c.655.372.88 1.209.51 1.866a50.68 50.68 0 00-4.177 9.486 1.37 1.37 0 01-1.251.941zM103.815 32.179a1.355 1.355 0 01-1.222-.674 50.958 50.958 0 00-6.117-8.359 1.366 1.366 0 01.099-1.93 1.355 1.355 0 011.923.099 53.449 53.449 0 016.447 8.806 1.37 1.37 0 01-.487 1.872 1.432 1.432 0 01-.643.186zM18.31 26.529a1.372 1.372 0 01-1.124-2.209 53.551 53.551 0 017.537-7.888 1.363 1.363 0 011.923.157 1.375 1.375 0 01-.156 1.93 51.072 51.072 0 00-7.154 7.487 1.343 1.343 0 01-1.025.523zM92.172 18.444a1.352 1.352 0 01-.915-.314 50.861 50.861 0 00-8.59-5.772 1.368 1.368 0 01-.568-1.849 1.364 1.364 0 011.842-.57 53.153 53.153 0 019.048 6.08c.58.483.66 1.343.18 1.925a1.366 1.366 0 01-.997.5zM31.64 14.433a1.368 1.368 0 01-.776-2.523 53.107 53.107 0 019.771-4.836 1.359 1.359 0 011.75.808c.26.71-.099 1.494-.805 1.755a50.203 50.203 0 00-9.269 4.587c-.208.133-.44.203-.672.209zM76.555 9.51a1.257 1.257 0 01-.504-.082A50.06 50.06 0 0066.013 6.97a1.364 1.364 0 01-1.165-1.54 1.364 1.364 0 011.535-1.168 52.623 52.623 0 0110.584 2.592 1.369 1.369 0 01-.412 2.657zM48.287 7.65a1.367 1.367 0 01-.33-2.703 54.261 54.261 0 0110.827-1.18 1.367 1.367 0 011.372 1.36 1.367 1.367 0 01-1.314 1.377H58.8A50.85 50.85 0 0048.525 7.62c-.081.018-.162.024-.238.03z",
     fill: "#B3BAC5"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     opacity: ".3",
     d: "M110.523 19.873a.304.304 0 01-.226-.325l.035-.262c.029-.168.064-.348.11-.534a4.423 4.423 0 01.95-1.796c.458-.53 1.118-.971 1.97-1.314l1.436-.587c.858-.343 1.385-.913 1.593-1.697a2.48 2.48 0 00.07-.878 1.998 1.998 0 00-.273-.849c-.156-.261-.37-.5-.654-.709a3.07 3.07 0 00-1.049-.477c-.451-.116-.851-.133-1.21-.052a2.56 2.56 0 00-.956.43c-.278.204-.51.465-.695.78-.191.313-.33.65-.423.999-.029.104-.052.21-.07.302a.459.459 0 01-.59.355l-2.219-.68a.464.464 0 01-.33-.483c.006-.07.017-.14.029-.21.035-.197.075-.383.121-.569.174-.668.47-1.29.887-1.866a5.14 5.14 0 011.546-1.412c.614-.366 1.31-.605 2.097-.72.788-.117 1.645-.047 2.578.197.967.256 1.778.622 2.433 1.098.66.477 1.176 1.012 1.552 1.599.377.593.614 1.22.707 1.889.093.668.058 1.32-.11 1.953-.261 1-.712 1.796-1.344 2.389a6.773 6.773 0 01-2.288 1.39l-1.211.458c-.341.11-.851.338-1.274.803-.041.046-.214.238-.388.534-.128.221-.22.436-.284.622a.303.303 0 01-.365.192l-2.155-.57zm-1.772 3.412c.145-.552.457-.97.944-1.26a1.942 1.942 0 011.552-.222c.551.146.968.465 1.257.96.29.493.359 1.017.215 1.569a1.966 1.966 0 01-.956 1.25 2.005 2.005 0 01-1.558.203 1.957 1.957 0 01-1.246-.942 1.98 1.98 0 01-.208-1.558zM10.722 12.393a.301.301 0 01-.203-.338l.053-.261c.04-.169.086-.343.15-.523a4.334 4.334 0 011.072-1.727c.492-.5 1.176-.889 2.056-1.18l1.472-.488c.874-.285 1.442-.814 1.703-1.587.092-.279.139-.57.127-.872a2.052 2.052 0 00-.214-.866 2.285 2.285 0 00-.609-.75c-.266-.226-.608-.406-1.013-.546-.44-.151-.846-.192-1.205-.134a2.518 2.518 0 00-1.726 1.099 3.583 3.583 0 00-.585 1.267.461.461 0 01-.615.314L9.02 4.976a.467.467 0 01-.295-.506c.011-.07.029-.14.046-.21a5.65 5.65 0 01.162-.557A5.505 5.505 0 019.946 1.9 5.246 5.246 0 0111.579.593a5.545 5.545 0 012.138-.576c.793-.058 1.645.064 2.554.372.945.32 1.732.739 2.358 1.262.626.523 1.106 1.087 1.442 1.703.336.616.533 1.255.58 1.93a4.97 4.97 0 01-.244 1.941c-.33.982-.828 1.744-1.506 2.29a6.844 6.844 0 01-2.375 1.233l-1.24.372a2.94 2.94 0 00-1.326.715c-.046.046-.232.226-.423.505-.145.215-.249.419-.324.599a.3.3 0 01-.377.168l-2.114-.714zm-1.998 3.284a2 2 0 011.025-1.198 1.957 1.957 0 011.564-.116c.539.18.933.529 1.188 1.04.254.512.29 1.041.11 1.582-.18.54-.528.935-1.037 1.18a2.019 2.019 0 01-1.57.098 1.96 1.96 0 01-1.182-1.029 1.99 1.99 0 01-.098-1.557zM7.177 104.849a.298.298 0 01-.37-.134c-.041-.076-.082-.157-.122-.238a8.207 8.207 0 01-.215-.5 4.405 4.405 0 01-.249-2.017c.076-.698.36-1.436.863-2.215l.84-1.308c.504-.773.614-1.546.33-2.307a2.6 2.6 0 00-.446-.762 2.019 2.019 0 00-.706-.54 2.421 2.421 0 00-.944-.204 3.05 3.05 0 00-1.13.215c-.434.163-.776.378-1.025.657-.25.273-.423.576-.533.901-.11.326-.15.674-.128 1.04.024.367.099.721.226 1.064.04.105.076.198.116.285a.466.466 0 01-.278.634l-2.201.72a.455.455 0 01-.545-.209c-.034-.064-.063-.128-.098-.192a5.595 5.595 0 01-.568-2.575 5.09 5.09 0 01.458-2.046c.29-.65.724-1.25 1.303-1.796.58-.546 1.32-.988 2.225-1.32.938-.348 1.807-.517 2.618-.505.81.012 1.54.151 2.19.413a4.62 4.62 0 011.656 1.139c.458.494.8 1.046 1.025 1.662.36.971.446 1.884.267 2.732-.18.85-.539 1.669-1.078 2.46l-.73 1.075c-.214.29-.503.767-.585 1.389-.005.064-.04.319-.011.657.023.255.07.482.127.668a.309.309 0 01-.19.372l-2.092.785zm.504 3.813a2.026 2.026 0 01.052-1.581 1.958 1.958 0 011.147-1.076 1.986 1.986 0 011.576.064c.521.239.88.628 1.077 1.163a1.947 1.947 0 01-.07 1.569 2.028 2.028 0 01-1.158 1.064 1.977 1.977 0 01-1.564-.052 1.96 1.96 0 01-1.06-1.151z",
     fill: "#C1C7D0"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M86.519 77.651l-4.142-4.028-5.578 5.784 4.141 4.028a7.812 7.812 0 012.15 3.772 7.858 7.858 0 002.148 3.773l16.816 16.333a6.405 6.405 0 009.077-.145 6.46 6.46 0 00-.144-9.108L94.171 81.726a7.786 7.786 0 00-3.83-2.034 7.9 7.9 0 01-3.822-2.04z",
     fill: "#CFD4DB"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M90.18 79.64a7.756 7.756 0 01-3.656-1.995l-1.262-1.226a4 4 0 00-5.671.093 4.032 4.032 0 00.092 5.69l1.263 1.227a7.853 7.853 0 012.103 3.598 33.606 33.606 0 003.858-3.435 33.629 33.629 0 003.273-3.953z",
     fill: "#B3BAC5"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M59.056 90.677c-8.961.146-17.442-3.22-23.877-9.474-13.295-12.91-13.636-34.266-.77-47.606C40.64 27.14 49.01 23.501 57.966 23.35c8.961-.145 17.441 3.22 23.877 9.475 6.441 6.255 10.062 14.654 10.212 23.64.145 8.992-3.209 17.502-9.442 23.96-6.227 6.47-14.597 10.108-23.558 10.253zM58.1 31.388c-6.824.11-13.19 2.883-17.94 7.801-9.795 10.155-9.534 26.413.585 36.242 4.9 4.76 11.36 7.324 18.183 7.213 6.824-.11 13.19-2.883 17.94-7.8 4.744-4.918 7.299-11.399 7.189-18.246-.11-6.847-2.873-13.236-7.774-18.002-4.906-4.755-11.36-7.318-18.183-7.208z",
     fill: "url(#paint0_linear)"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M68.886 49.535l-3.093-3.051a1.158 1.158 0 00-1.64.017l-5.67 5.796-5.776-5.691a1.158 1.158 0 00-1.64.017l-3.04 3.104c-.446.46-.44 1.192.017 1.645l5.775 5.69-5.67 5.796c-.447.46-.44 1.192.017 1.645l3.093 3.052a1.158 1.158 0 001.64-.018l5.67-5.795 5.775 5.69a1.158 1.158 0 001.64-.017l3.04-3.104c.447-.459.441-1.191-.017-1.645l-5.775-5.69 5.671-5.795c.446-.46.44-1.198-.017-1.645z",
     fill: "#C1C7D0"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  })), jsx("defs", null, jsx("linearGradient", {
     id: "paint0_linear",
     x1: "34.792",
     y1: "80.822",
     x2: "82.401",
     y2: "33.377",
     gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
+  }, jsx("stop", {
     offset: ".557",
     stopColor: "#C1C7D0"
-  }), /*#__PURE__*/React.createElement("stop", {
+  }), jsx("stop", {
     offset: ".966",
     stopColor: "#E9EBEF",
     stopOpacity: ".5"
-  })), /*#__PURE__*/React.createElement("clipPath", {
+  })), jsx("clipPath", {
     id: "clip0"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     fill: "#fff",
     d: "M0 0h120v110.365H0z"
   })))));