@atlaskit/link-picker 0.8.0 → 0.10.0

package/dist/es2019/ui/{LinkSearchList.js → link-search-list/index.js}

@@ -1,20 +1,9 @@
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-import LinkSearchListItem from './LinkSearchListItem';
-const ListContainer = styled.div`
-  padding-top: 0;
-`;
-const SpinnerContainer = styled.div`
-  text-align: center;
-  min-height: 80px;
-  margin-top: 30px;
-`;
-export const List = styled.ul`
-  padding: 0;
-  list-style: none;
-`;
+import LinkSearchListItem from '../list-item';
+import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
 export default class LinkSearchList extends PureComponent {
   render() {
     const {
@@ -34,12 +23,14 @@ export default class LinkSearchList extends PureComponent {
     let loadingContent;
 
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement(List, {
+      itemsContent = jsx("ul", {
+        "data-testid": "link-search-list",
+        css: listStyles,
         id: id,
         role: role,
         "aria-controls": ariaControls,
         "aria-labelledby": ariaLabelledBy
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -53,13 +44,17 @@ export default class LinkSearchList extends PureComponent {
     }
 
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+      loadingContent = jsx("div", {
+        css: spinnerContainerStyles
+      }, jsx(Spinner, {
         testId: "link-picker.results-loading-indicator",
         size: "medium"
       }));
     }
 
-    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+    return jsx("div", {
+      css: listContainerStyles
+    }, itemsContent, loadingContent);
   }
 
 }

package/dist/es2019/ui/link-search-list/styled.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+export const listContainerStyles = css`
+  padding-top: 0;
+`;
+export const spinnerContainerStyles = css`
+  text-align: center;
+  min-height: 80px;
+  margin-top: 30px;
+`;
+export const listStyles = css`
+  padding: 0;
+  list-style: none;
+`;

package/dist/es2019/ui/list-item/index.js

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { transformTimeStamp } from '../../transformTimeStamp';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+
+const LinkSearchListItem = ({
+  item,
+  selected,
+  active,
+  id,
+  role,
+  intl,
+  onSelect,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const handleSelect = () => onSelect(item.objectId);
+
+  const handleMouseEnter = () => onMouseEnter(item.objectId);
+
+  const handleMouseLeave = () => onMouseLeave(item.objectId);
+
+  const container = item.container || null;
+  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return jsx("div", {
+    css: composeListItemStyles(active, selected),
+    role: role,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": "link-search-list-item",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleSelect
+  }, jsx(ListItemIcon, {
+    item: item,
+    intl: intl
+  }), jsx("div", {
+    css: itemNameStyles
+  }, jsx("div", {
+    "data-testid": "link-search-list-item-title",
+    css: listItemNameStyles
+  }, item.name), jsx("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: listItemContextStyles
+  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
+};
+
+export default injectIntl(LinkSearchListItem);
+
+const formatDate = date => {
+  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
+};
+
+const ListItemIcon = props => {
+  const {
+    item,
+    intl
+  } = props;
+  const {
+    icon,
+    iconAlt
+  } = item;
+
+  if (!icon) {
+    return null;
+  }
+
+  const alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+
+  if (typeof icon !== 'string') {
+    const Glyph = icon;
+    return jsx("span", {
+      css: itemIconStyles
+    }, jsx(Glyph, {
+      alt: alt
+    }));
+  }
+
+  return jsx("span", {
+    css: itemIconStyles
+  }, jsx("img", {
+    src: icon,
+    alt: alt,
+    css: imgStyles
+  }));
+};

package/dist/es2019/ui/list-item/styled.js

@@ -0,0 +1,65 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize } from '@atlaskit/theme';
+export const relativeFontSizeToBase16 = px => {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error(`Invalid font size: '${px}'`);
+  }
+
+  return `${px / 16}rem`;
+};
+const listItemBaseStyles = css`
+  display: flex;
+  padding: ${gridSize()}px ${gridSize() * 2}px;
+  margin: 0 -${gridSize() * 2}px;
+  cursor: pointer;
+`;
+const listItemBoxShadow = css`
+  box-shadow: inset 2px 0px 0px ${token('color.border.selected', B400)};
+`;
+const listItemActive = css`
+  background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+`;
+const listItemSelected = css`
+  background-color: ${token('color.background.selected', B50)};
+`;
+export const composeListItemStyles = (active = false, selected = false) => {
+  const hasShadow = active || selected;
+  return css`
+    ${listItemBaseStyles};
+    ${active && listItemActive};
+    ${selected && listItemSelected};
+    ${hasShadow && listItemBoxShadow};
+  `;
+};
+export const itemNameStyles = css`
+  overflow: hidden;
+`;
+export const listItemNameStyles = css`
+  color: ${token('color.text', N800)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+`;
+export const listItemContextStyles = css`
+  color: ${token('color.text', N300)};
+  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
+  line-height: ${fontSize()}px;
+`;
+export const itemIconStyles = css`
+  min-width: ${gridSize() * 2}px;
+  margin-top: 3px;
+  margin-right: 12px;
+`;
+export const imgStyles = css`
+  max-width: ${gridSize() * 2}px;
+`;

package/dist/es2019/ui/styled.js

@@ -0,0 +1,28 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize } from '@atlaskit/theme/constants';
+const LINK_PICKER_WIDTH_IN_PX = 342;
+export const recentListStyles = css`
+  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+`;
+export const containerStyles = css`
+  padding: ${gridSize() * 2}px;
+  width: 100%;
+  overflow: hidden;
+  line-height: initial;
+  box-sizing: border-box;
+`;
+export const searchIconStyles = css`
+  margin-left: ${gridSize() / 2}px;
+  color: ${token('color.icon', N500)};
+  cursor: default;
+`;
+export const listTitleStyles = css`
+  ${typography.h100()}
+  text-transform: uppercase;
+  margin-bottom: ${gridSize() / 2}px;
+`;

package/dist/es2019/ui/{PanelTextInput.js → text-input/index.js}

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useRef } from 'react';
+
+/** @jsx jsx */
+import { useCallback, useRef, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
-import { ClearText, FieldWrapper } from '../styles';
-import { isRedoEvent, isUndoEvent } from '../utils';
+import { isRedoEvent, isUndoEvent } from '../../utils';
+import { clearTextButtonStyles, fieldStyles } from './styled';
 
 const PanelTextInput = props => {
   const {
@@ -63,28 +66,31 @@ const PanelTextInput = props => {
       onClear();
     }
   }, [onClear]);
-  const clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
+  const clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
-  }, /*#__PURE__*/React.createElement(ClearText, {
+  }, jsx("button", {
+    css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": "clear-text"
-  }, /*#__PURE__*/React.createElement(Selectclear, {
+  }, jsx(Selectclear, {
     size: "medium",
     label: clearLabel || ''
   })));
-  return /*#__PURE__*/React.createElement(FieldWrapper, null, /*#__PURE__*/React.createElement(Field, {
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
     label: label,
     name: name
   }, ({
     fieldProps
   }) => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
+    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       onChange: handleChange,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    })), error && jsx(ErrorMessage, {
       testId: "link-error"
     }, error));
   }));

package/dist/es2019/ui/text-input/styled.js

@@ -0,0 +1,15 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+export const clearTextButtonStyles = css`
+  padding: 0;
+  margin-right: ${gridSize() / 2}px;
+  color: ${token('color.icon.subtle', N500)};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const fieldStyles = css`
+  margin-bottom: ${gridSize() * 2}px;
+`;

package/dist/es2019/utils.js

@@ -1,15 +1,4 @@
 import { browser } from './browser';
-export const relativeFontSizeToBase16 = px => {
-  if (typeof px === 'string') {
-    px = parseInt(px);
-  }
-
-  if (isNaN(px)) {
-    throw new Error(`Invalid font size: '${px}'`);
-  }
-
-  return `${px / 16}rem`;
-};
 const KeyZCode = 90;
 const KeyYCode = 89;
 export const isUndoEvent = e => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker.js

@@ -18,13 +18,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../messages';
-import PanelTextInput from './PanelTextInput';
-import LinkSearchList from './LinkSearchList';
+import PanelTextInput from './text-input';
+import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
+import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
 import { browser } from '../browser';
 import { transformTimeStamp } from '../transformTimeStamp';
 import Announcer from './announcer';
@@ -123,7 +123,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
             lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
             lastViewedDate = _items$selectedIndex.lastViewedDate;
         var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-        return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
+        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
 
@@ -446,7 +447,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = browser.safari && this.getScreenReaderText();
-      var searchIcon = activePlugin && jsx(SearchIconWrapper, {
+      var searchIcon = activePlugin && jsx("span", {
+        css: searchIconStyles,
         "data-testid": "link-picker-search-icon"
       }, jsx(EditorSearchIcon, {
         size: "medium",
@@ -456,8 +458,9 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         "data-testid": "link-picker",
         className: "recent-list",
         css: recentListStyles
-      }, jsx(Container, {
-        innerRef: this.wrapperRef
+      }, jsx("div", {
+        css: containerStyles,
+        ref: this.wrapperRef
       }, screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
@@ -501,7 +504,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onClear: this.handleClearDisplayText,
         clearLabel: formatMessage(messages.clearText)
       }), !!items.length && jsx("div", {
-        css: ListTitleStyles,
+        css: listTitleStyles,
         id: "link-picker-list-title",
         "data-testid": "link-picker-list-title"
       }, formatMessage(this.state.url ? messages.titleResults : messages.titleRecentlyViewed)), jsx(VisuallyHidden, null, jsx("span", {

package/dist/esm/ui/{LinkSearchList.js → link-search-list/index.js}

@@ -3,22 +3,17 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-import LinkSearchListItem from './LinkSearchListItem';
-var ListContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
-var SpinnerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-export var List = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+import LinkSearchListItem from '../list-item';
+import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
 
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   _inherits(LinkSearchList, _PureComponent);
@@ -50,13 +45,15 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var loadingContent;
 
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/React.createElement(List, {
+        itemsContent = jsx("ul", {
+          "data-testid": "link-search-list",
+          css: listStyles,
           id: id,
           role: role,
           "aria-controls": ariaControls,
           "aria-labelledby": ariaLabelledBy
         }, items.map(function (item, index) {
-          return /*#__PURE__*/React.createElement(LinkSearchListItem, {
+          return jsx(LinkSearchListItem, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -71,13 +68,17 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (isLoading) {
-        loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+        loadingContent = jsx("div", {
+          css: spinnerContainerStyles
+        }, jsx(Spinner, {
           testId: "link-picker.results-loading-indicator",
           size: "medium"
         }));
       }
 
-      return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+      return jsx("div", {
+        css: listContainerStyles
+      }, itemsContent, loadingContent);
     }
   }]);
 

package/dist/esm/ui/link-search-list/styled.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));

package/dist/esm/ui/{LinkSearchListItem.js → list-item/index.js}

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../transformTimeStamp';
-import { ItemNameWrapper, ItemIconWrapper, ListItemContext, ListItemName, ListItemWrapper, ImgStyles } from '../styles';
+import { transformTimeStamp } from '../../transformTimeStamp';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,
@@ -28,37 +28,35 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
     return onMouseLeave(item.objectId);
   };
 
-  return jsx(ListItemWrapper, {
+  var container = item.container || null;
+  var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return jsx("div", {
+    css: composeListItemStyles(active, selected),
     role: role,
     id: id,
     "aria-selected": selected,
     "data-testid": "link-search-list-item",
-    selected: selected,
-    active: active,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleSelect
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
-  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container, jsx(ItemTimeStamp, {
-    date: transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate)
-  }))));
+  }), jsx("div", {
+    css: itemNameStyles
+  }, jsx("div", {
+    "data-testid": "link-search-list-item-title",
+    css: listItemNameStyles
+  }, item.name), jsx("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: listItemContextStyles
+  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
 };
 
 export default injectIntl(LinkSearchListItem);
 
-var ItemTimeStamp = function ItemTimeStamp(props) {
-  var date = props.date;
-
-  if (!date) {
-    return null;
-  }
-
-  return jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
-    className: "link-search-timestamp",
-    "data-test-id": "link-search-timestamp"
-  }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
+var formatDate = function formatDate(date) {
+  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
 };
 
 var ListItemIcon = function ListItemIcon(props) {
@@ -75,14 +73,18 @@ var ListItemIcon = function ListItemIcon(props) {
 
   if (typeof icon !== 'string') {
     var Glyph = icon;
-    return jsx(ItemIconWrapper, null, jsx(Glyph, {
+    return jsx("span", {
+      css: itemIconStyles
+    }, jsx(Glyph, {
       alt: alt
     }));
   }
 
-  return jsx(ItemIconWrapper, null, jsx("img", {
+  return jsx("span", {
+    css: itemIconStyles
+  }, jsx("img", {
     src: icon,
     alt: alt,
-    css: ImgStyles
+    css: imgStyles
   }));
 };

package/dist/esm/ui/list-item/styled.js

@@ -0,0 +1,37 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize } from '@atlaskit/theme';
+export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error("Invalid font size: '".concat(px, "'"));
+  }
+
+  return "".concat(px / 16, "rem");
+};
+var listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n"])), gridSize(), gridSize() * 2, gridSize() * 2);
+var listItemBoxShadow = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), token('color.border.selected', B400));
+var listItemActive = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N20));
+var listItemSelected = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.selected', B50));
+export var composeListItemStyles = function composeListItemStyles() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var hasShadow = active || selected;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, active && listItemActive, selected && listItemSelected, hasShadow && listItemBoxShadow);
+};
+export var itemNameStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var listItemNameStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), token('color.text', N800));
+export var listItemContextStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
+export var itemIconStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
+export var imgStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);

package/dist/esm/ui/styled.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize } from '@atlaskit/theme/constants';
+var LINK_PICKER_WIDTH_IN_PX = 342;
+export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
+export var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), gridSize() * 2);
+export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);