@atlaskit/editor-core 161.0.0 → 163.0.0

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

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

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

@@ -1,12 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -32,15 +32,23 @@ 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';
-const ContentStyles = styled.div`
+import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+
+const contentStyles = props => {
+  var _props$featureFlags, _props$featureFlags2;
+
+  return css`
   .ProseMirror {
     outline: none;
-    font-size: ${editorFontSize}px;
+    font-size: ${editorFontSize({
+    theme: props.theme
+  })}px;
     ${whitespaceSharedStyles};
     ${paragraphSharedStyles};
     ${listsSharedStyles};
     ${indentationSharedStyles};
     ${shadowSharedStyle};
+    ${InlineNodeViewSharedStyles};
   }
 
   .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
@@ -64,38 +72,35 @@ const ContentStyles = styled.div`
     outline: 2px solid #8cf;
   }
 
-  ${blocktypeStyles}
-  ${textFormattingStyles}
   ${placeholderTextStyles}
   ${placeholderStyles}
-  ${({
-  featureFlags
-}) => featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles : codeBlockStyles}
+  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
+
+  ${blocktypeStyles(props)}
+  ${textFormattingStyles(props)}
   ${textColorStyles}
   ${listsStyles}
-  ${ruleStyles}
+  ${ruleStyles(props)}
   ${mediaStyles}
   ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
-  ${tableStyles}
-  ${panelStyles}
+  ${tableStyles(props)}
+  ${panelStyles(props)}
   ${fakeCursorStyles}
   ${mentionsStyles}
-  ${({
-  featureFlags
-}) => featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${(_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
   ${tasksAndDecisionsStyles}
   ${gridStyles}
   ${linkStyles}
   ${blockMarksSharedStyles}
   ${dateSharedStyle}
   ${extensionStyles}
-  ${expandStyles}
+  ${expandStyles(props)}
   ${findReplaceStyles}
   ${taskDecisionStyles}
   ${statusStyles}
-  ${annotationSharedStyles}
+  ${annotationSharedStyles(props)}
   ${smartCardStyles}
   ${smartCardSharedStyles}
   ${dateStyles}
@@ -152,10 +157,22 @@ const ContentStyles = styled.div`
     }
   }
 `;
+};
+
 export default /*#__PURE__*/React.forwardRef((props, ref) => {
   const featureFlags = useFeatureFlags();
-  return /*#__PURE__*/React.createElement(ContentStyles, _extends({}, props, {
-    innerRef: ref,
-    featureFlags: featureFlags
-  }));
+  const {
+    className,
+    children
+  } = props;
+  const theme = useTheme();
+  const memoizedStyle = useMemo(() => contentStyles({
+    theme,
+    featureFlags
+  }), [theme, featureFlags]);
+  return jsx("div", {
+    className: className,
+    ref: ref,
+    css: memoizedStyle
+  }, children);
 });

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

@@ -1,5 +1,5 @@
 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
@@ -100,15 +100,14 @@ const ViewMore = ({
       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);
 };
 
 const getSvgIconForItem = ({

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/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
@@ -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,27 @@ const itemStyleOverrides = {
 const ElementBefore = /*#__PURE__*/memo(({
   icon,
   title
-}) => /*#__PURE__*/React.createElement(StyledItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(IconFallback, null)));
+}) => jsx(ItemIcon, {
+  css: 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(Shortcut, null, keyshortcut))), description && jsx("p", {
+  css: itemDescription
+}, description))));
 const scrollbarStyle = css`
   ::-webkit-scrollbar {
     width: ${SCROLLBAR_WIDTH}px;
@@ -261,7 +277,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 +299,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 +317,7 @@ const ElementItemWrapper = styled.div`
     }
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -316,7 +337,7 @@ const multilineStyle = css`
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 `;
-const ItemDescription = styled.p`
+const itemDescription = css`
   ${multilineStyle};
 
   overflow: hidden;
@@ -324,25 +345,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;