@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
 import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
-import { ExpandIconWrapper, MenuWrapper, Separator, TriggerWrapper } from '../../../../ui/styles';
+import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
-import { disabledRainbow, rainbow, TextColorIconBar, TextColorIconWrapper } from './styles';
+import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
 const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 const EXPERIMENT_GROUP_CONTROL = 'control';
 export const messages = defineMessages({
@@ -125,7 +128,10 @@ export class ToolbarTextColor extends React.Component {
       fitWidth = 242;
     }
 
-    return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
+    const selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+    return jsx("span", {
+      css: wrapperStyle
+    }, jsx(Dropdown, {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
@@ -134,7 +140,7 @@ export class ToolbarTextColor extends React.Component {
       handleEscapeKeydown: this.hide,
       zIndex: akEditorMenuZIndex,
       fitWidth: fitWidth,
-      trigger: /*#__PURE__*/React.createElement(ToolbarButton, {
+      trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
         spacing: isReducedSpacing ? 'none' : 'default',
         disabled: disabled || pluginState.disabled,
@@ -144,20 +150,27 @@ export class ToolbarTextColor extends React.Component {
         "aria-haspopup": true,
         title: labelTextColor,
         onClick: this.toggleOpen,
-        iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(TextColorIconWrapper, null, /*#__PURE__*/React.createElement(EditorTextColorIcon, null), /*#__PURE__*/React.createElement(TextColorIconBar, {
-          selectedColor: pluginState.color !== pluginState.defaultColor && pluginState.color,
-          gradientColors: pluginState.disabled ? disabledRainbow : rainbow
-        })), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+        iconBefore: jsx("div", {
+          css: triggerWrapperStyles
+        }, jsx("div", {
+          css: textColorIconWrapper
+        }, jsx(EditorTextColorIcon, null), jsx("div", {
+          css: [textColorIconBar, selectedColor ? `background: ${selectedColor};` : pluginState.disabled && backgroundDisabled]
+        })), jsx("span", {
+          css: expandIconWrapperStyle
+        }, jsx(ExpandIcon, {
           label: ""
         })))
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       "data-testid": "text-color-palette"
-    }, /*#__PURE__*/React.createElement(ColorPalette, {
+    }, jsx(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color
-    }))), /*#__PURE__*/React.createElement(Separator, null));
+    }))), jsx("span", {
+      css: separatorStyles
+    }));
   }
 
   getCommonAnalyticsAttributes() {

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/styles.js

@@ -1,30 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export const TextColorIconWrapper = styled.div`
-  position: relative;
-`;
-export const TextColorIconBar = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 16px;
-  margin: auto;
-  width: 12px;
-  height: 3px;
-  border-radius: ${borderRadius() + 'px'};
-
-  ${({
-  gradientColors,
-  selectedColor
-}) => {
-  if (selectedColor) {
-    return `background: ${selectedColor}`;
-  }
-
-  return `background: ${gradientColors}`;
-}};
-`;
 
 const createSteppedRainbow = colors => {
   return `
@@ -51,5 +27,22 @@ const createSteppedRainbow = colors => {
     `;
 };
 
-export const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-export const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
+const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+export const textColorIconWrapper = css`
+  position: relative;
+`;
+export const textColorIconBar = css`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 16px;
+  margin: auto;
+  width: 12px;
+  height: 3px;
+  border-radius: ${borderRadius() + 'px'};
+  background: ${rainbow};
+`;
+export const backgroundDisabled = css`
+  background: ${disabledRainbow};
+`;

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -1,5 +1,7 @@
-import React, { useMemo } from 'react';
-import { Shortcut } from '../../../../../ui/styles';
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
 import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
@@ -28,7 +30,9 @@ export const useClearIcon = ({
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
-      elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(clearFormattingKeymap)),
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(clearFormattingKeymap)),
       value: {
         name: 'clearFormatting'
       },

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -1,7 +1,9 @@
+/** @jsx jsx */
 import React, { useMemo } from 'react';
+import { jsx } from '@emotion/react';
 import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
 import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
-import { Shortcut } from '../../../../../ui/styles';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../../../../plugins/analytics/types/toolbar-button';
@@ -20,7 +22,7 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
-    component: () => /*#__PURE__*/React.createElement(BoldIcon, {
+    component: () => jsx(BoldIcon, {
       label: ""
     })
   },
@@ -29,7 +31,7 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
-    component: () => /*#__PURE__*/React.createElement(ItalicIcon, {
+    component: () => jsx(ItalicIcon, {
       label: ""
     })
   },
@@ -78,11 +80,13 @@ const getIcon = ({
     key: iconType,
     command: icon.command,
     iconElement: icon.component ? icon.component() : undefined,
-    tooltipElement: tooltipKeymap ? /*#__PURE__*/React.createElement(ToolTipContent, {
+    tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
-    elemAfter: tooltipKeymap ? /*#__PURE__*/React.createElement(Shortcut, null, tooltip(tooltipKeymap)) : undefined,
+    elemAfter: tooltipKeymap ? jsx("div", {
+      css: shortcutStyle
+    }, tooltip(tooltipKeymap)) : undefined,
     value: {
       name: iconType
     },

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React, { useMemo, useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
+import { separatorStyles, wrapperStyle, buttonGroupStyle } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
 import { useClearIcon } from './hooks/clear-formatting-icon';
 import { useResponsiveToolbarButtons, useResponsiveIconTypeMenu } from './hooks/responsive-toolbar-buttons';
@@ -108,25 +110,27 @@ const ToolbarFormatting = ({
       setMessage(screenReaderMessage);
     }
   }, [screenReaderMessage]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, message && /*#__PURE__*/React.createElement(Announcer, {
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, message && jsx(Announcer, {
     ariaLive: "assertive",
     text: message,
     ariaRelevant: "additions",
     delay: 250
-  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }), jsx(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing
-  }), /*#__PURE__*/React.createElement(Wrapper, null, isToolbarDisabled ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MoreButton, {
+  }), jsx("span", {
+    css: wrapperStyle
+  }, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
     isSelected: false,
     "aria-expanded": undefined,
     "aria-pressed": undefined
-  })) : /*#__PURE__*/React.createElement(FormattingTextDropdownMenu, {
+  })) : jsx(FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
@@ -135,7 +139,9 @@ const ToolbarFormatting = ({
     moreButtonLabel: moreFormattingButtonLabel,
     hasFormattingActive: hasFormattingActive,
     items: items
-  }), /*#__PURE__*/React.createElement(Separator, null)));
+  }), jsx("span", {
+    css: separatorStyles
+  })));
 };
 
 class Toolbar extends React.PureComponent {
@@ -150,7 +156,7 @@ class Toolbar extends React.PureComponent {
       shouldUseResponsiveToolbar,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(ToolbarFormatting, {
+    return jsx(ToolbarFormatting, {
       popupsMountPoint: popupsMountPoint,
       popupsScrollableElement: popupsScrollableElement,
       toolbarSize: toolbarSize,

package/dist/es2019/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import MoreIcon from '@atlaskit/icon/glyph/editor/more';
-import { TriggerWrapper } from '../../../../ui/styles';
+import { triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export const MoreButton = /*#__PURE__*/React.memo(({
   label,
@@ -10,13 +12,15 @@ export const MoreButton = /*#__PURE__*/React.memo(({
   isDisabled,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
+    iconBefore: jsx("div", {
+      css: triggerWrapperStyles
+    }, jsx(MoreIcon, {
       label: ""
     })),
     "aria-expanded": ariaExpanded,

package/dist/es2019/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import { ButtonGroup } from '../../../../ui/styles';
+import { jsx } from '@emotion/react';
+import { buttonGroupStyle } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   items,
@@ -12,9 +14,9 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
       return false;
     };
   }, [editorView.state, editorView.dispatch]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, items.map(item => /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, items.map(item => jsx(ToolbarButton, {
     key: item.key,
     buttonId: item.buttonId,
     spacing: isReducedSpacing ? 'none' : 'default',

package/dist/es2019/plugins/type-ahead/constants.js

@@ -1,5 +1,6 @@
 export const TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export const TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
+export const TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 export let NavigationDirection;
 
 (function (NavigationDirection) {

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -1,10 +1,11 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useRef, useEffect, useCallback, Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
-import { CloseSelectionOptions } from '../constants';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-const QuerySpan = styled.span`
+const querySpan = css`
   outline: none;
 `;
 
@@ -181,15 +182,13 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     };
 
     const onFocusOut = event => {
-      var _window$getSelection;
-
-      // See ED-14909: Chrome may emit focusout events where an input
-      // device was not directly responsible. (This rears in react v17+ consumers
-      // where react-managed node removal now appears to propagate focusout events to
-      // our event listener). As this path is strictly for click or other typeahead
-      // dismissals that don't involve typeahead item selection, we carve out an
-      // exception for Chrome-specific events where an input device was not the initiator.
-      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !(event !== null && event !== void 0 && event.sourceCapabilities)) {
+      const {
+        relatedTarget
+      } = event; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`)) {
         return;
       }
 
@@ -314,9 +313,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       });
     }
   }, [forceFocus, reopenQuery]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement(QuerySpan, {
+  /**
+    When we migrated to emotion from styled component, we started getting this error.
+    jsx-a11y/interactive-supports-focus
+    Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+   */
+
+  return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
+    css: querySpan,
     contentEditable: true,
-    innerRef: ref,
+    ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
     role: "textbox",

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,55 +1,18 @@
+/** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
-import { themed } from '@atlaskit/theme/components';
-import { ThemeProvider } from 'styled-components';
-import { ICON_HEIGHT } from './TypeAheadListItem';
+import { ItemGroup } from '@atlaskit/item';
+import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-const ITEM_PADDING = 12;
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_MAX_HEIGHT = 380;
 const LIST_WIDTH = 320;
-const itemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        bottom: ITEM_PADDING,
-        left: ITEM_PADDING,
-        right: ITEM_PADDING,
-        top: ITEM_PADDING
-      }
-    },
-    beforeItemSpacing: {
-      default: () => ITEM_PADDING
-    },
-    borderRadius: () => 0,
-    hover: {
-      // background: colors.transparent, transparent is not a thing
-      text: colorsText,
-      secondaryText: N200
-    },
-    selected: {
-      background: themed({
-        light: N20,
-        dark: DN70
-      }),
-      text: themed({
-        light: N800,
-        dark: DN600
-      }),
-      secondaryText: themed({
-        light: N200,
-        dark: DN300
-      })
-    }
-  }
-};
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
@@ -137,20 +100,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemGroup, {
+  return jsx(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals"
-  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    "aria-relevant": "additions removals",
+    theme: itemTheme
+  }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
-  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+  }, jsx(ListItemActionsContext.Provider, {
     value: actions
-  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+  }, jsx(SelectedIndexContext.Provider, {
     value: selectedIndex
-  }, /*#__PURE__*/React.createElement(List, {
+  }, jsx(List, {
     useIsScrolling: true,
     ref: listRef,
     itemData: items,
@@ -161,8 +123,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css`
+                    // temporary solution before we migrated off dst/item
+                    & span[class^='ItemParts__Before'] {
+                      margin-right: 12px;
+                    }
+                  `
+  }, DynamicHeightListItem))))));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,16 +1,54 @@
+/** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { N200 } from '@atlaskit/theme/colors';
+import { css, jsx } from '@emotion/react';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import Item from '@atlaskit/item';
+import Item, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
-import { Shortcut } from '../../../ui/styles';
+import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
-export const ItemIcon = styled.div`
+export const ITEM_PADDING = 12;
+export const itemTheme = {
+  [itemThemeNamespace]: {
+    padding: {
+      default: {
+        bottom: ITEM_PADDING,
+        left: ITEM_PADDING,
+        right: ITEM_PADDING,
+        top: ITEM_PADDING
+      }
+    },
+    beforeItemSpacing: {
+      default: () => ITEM_PADDING
+    },
+    borderRadius: () => 0,
+    hover: {
+      // background: colors.transparent, transparent is not a thing
+      text: colorsText,
+      secondaryText: N200
+    },
+    selected: {
+      background: themed({
+        light: N20,
+        dark: DN70
+      }),
+      text: themed({
+        light: N800,
+        dark: DN600
+      }),
+      secondaryText: themed({
+        light: N200,
+        dark: DN300
+      })
+    }
+  }
+};
+export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
   overflow: hidden;
@@ -27,14 +65,14 @@ export const ItemIcon = styled.div`
     height: ${ICON_HEIGHT}px;
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   line-height: 1.4;
 `;
-const ItemText = styled.div`
+const itemText = css`
   white-space: initial;
   .item-description {
     font-size: ${relativeFontSizeToBase16(11.67)};
@@ -42,7 +80,7 @@ const ItemText = styled.div`
     margin-top: 4px;
   }
 `;
-const ItemAfter = styled.div`
+const itemAfter = css`
   flex: 0 0 auto;
 `;
 const hidden = {
@@ -51,7 +89,7 @@ const hidden = {
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label
 }) => {
-  return /*#__PURE__*/React.createElement(IconFallback, null);
+  return jsx(IconFallback, null);
 });
 
 const noop = () => {};
@@ -90,7 +128,9 @@ export const TypeAheadListItem = ({
     render: customRenderItem
   } = item;
   const elementIcon = useMemo(() => {
-    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+    return jsx("div", {
+      css: itemIcon
+    }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -103,14 +143,14 @@ export const TypeAheadListItem = ({
     }
 
     const Comp = customRenderItem;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/React.createElement(Comp, {
+    }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -121,17 +161,26 @@ export const TypeAheadListItem = ({
     return customItem;
   }
 
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
-  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+    role: "option",
+    theme: itemTheme
+  }, jsx("div", {
+    css: itemBody
+  }, jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+  }, item.title), item.description && jsx("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+  }, item.description)), jsx("div", {
+    css: itemAfter
+  }, item.keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, item.keyshortcut))));
 };