@atlaskit/link-picker 0.8.0 → 0.10.0

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

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
-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';
 
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
@@ -64,27 +67,30 @@ var PanelTextInput = function PanelTextInput(props) {
       onClear();
     }
   }, [onClear]);
-  var clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
+  var 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
   }, function (_ref) {
     var fieldProps = _ref.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/esm/ui/text-input/styled.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+export var clearTextButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), gridSize() / 2, token('color.icon.subtle', N500));
+export var fieldStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);

package/dist/esm/utils.js

@@ -1,15 +1,4 @@
 import { browser } from './browser';
-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 KeyZCode = 90;
 var KeyYCode = 89;
 export var isUndoEvent = function isUndoEvent(e) {

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -8,14 +8,14 @@ export interface LinkSearchListItemData {
     name: string;
     /** URL of the resource being linked to */
     url: string;
-    /** Context to display in link result */
-    container: string;
     /** Icon to display in link result */
     icon: string | React.ComponentType<{
         alt: string;
     }>;
     /** Alt text describing the icon */
     iconAlt: string | MessageDescriptor;
+    /** Context to display in link result */
+    container?: string;
     /** Optional last view date to display in link result */
     lastViewedDate?: Date;
     /** Optional last updated date to display in link result */

package/dist/types/ui/{LinkSearchList.d.ts → link-search-list/index.d.ts}

@@ -1,7 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { LinkSearchListItemData } from '../types';
-export declare const List: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>, any, React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+import { jsx } from '@emotion/react';
+import { LinkSearchListItemData } from '../../types';
 export interface Props {
     items?: LinkSearchListItemData[];
     isLoading: boolean;
@@ -16,5 +16,5 @@ export interface Props {
     id?: string;
 }
 export default class LinkSearchList extends PureComponent<Props, {}> {
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

package/dist/types/ui/link-search-list/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const listContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const spinnerContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const listStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/{LinkSearchListItem.d.ts → list-item/index.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
-import { LinkSearchListItemData } from '../types';
+import { LinkSearchListItemData } from '../../types';
 export interface Props {
     item: LinkSearchListItemData;
     selected: boolean;

package/dist/types/ui/list-item/styled.d.ts

@@ -0,0 +1,7 @@
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const composeListItemStyles: (active?: boolean, selected?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
+export declare const itemIconStyles: import("@emotion/react").SerializedStyles;
+export declare const imgStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const recentListStyles: import("@emotion/react").SerializedStyles;
+export declare const containerStyles: import("@emotion/react").SerializedStyles;
+export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
+export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/{PanelTextInput.d.ts → text-input/index.d.ts}

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { TextFieldProps } from '@atlaskit/textfield';
 export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'autoFocus' | 'onSubmit'> {
     name: string;
@@ -13,5 +13,5 @@ export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'auto
     clearLabel?: string;
     error?: string | null;
 }
-declare const PanelTextInput: (props: Props) => JSX.Element;
+declare const PanelTextInput: (props: Props) => jsx.JSX.Element;
 export default PanelTextInput;

package/dist/types/ui/text-input/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const clearTextButtonStyles: import("@emotion/react").SerializedStyles;
+export declare const fieldStyles: import("@emotion/react").SerializedStyles;

package/dist/types/utils.d.ts

@@ -1,4 +1,3 @@
 import { KeyboardEvent } from 'react';
-export declare const relativeFontSizeToBase16: (px: number | string) => string;
 export declare const isUndoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -36,14 +36,13 @@
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "linkify-it": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/activity-provider": "^2.3.2",
@@ -56,11 +55,13 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^6.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^8.0.0",
     "@atlassian/search-provider": "^2.3.0",
+    "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
+    "mockdate": "^3.0.2",
     "react-dom": "^16.8.0",
     "sinon": "^2.2.0",
     "typescript": "4.2.4"

package/dist/cjs/styles.js

@@ -1,90 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.recentListStyles = exports.SearchIconWrapper = exports.ListTitleStyles = exports.ListItemWrapper = exports.ListItemName = exports.ListItemContext = exports.ItemNameWrapper = exports.ItemIconWrapper = exports.ImgStyles = exports.FieldWrapper = exports.Container = exports.ClearText = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _tokens = require("@atlaskit/tokens");
-
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _utils = require("./utils");
-
-var _theme = require("@atlaskit/theme");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-var LINK_PICKER_WIDTH_IN_PX = 342;
-var recentListStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  background: ", ";\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _tokens.token)('elevation.surface.overlay', _colors.N0));
-exports.recentListStyles = recentListStyles;
-
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.Container = Container;
-
-var ClearText = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon.subtle', _colors.N500));
-
-exports.ClearText = ClearText;
-
-var FieldWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.FieldWrapper = FieldWrapper;
-
-var SearchIconWrapper = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
-
-exports.SearchIconWrapper = SearchIconWrapper;
-var ListTitleStyles = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.ListTitleStyles = ListTitleStyles;
-
-var ListItemWrapper = _styledComponents.default.li(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n  background-color: ", ";\n  box-shadow: inset 2px 0px 0px\n    ", ";\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, function (props) {
-  switch (true) {
-    case props.selected:
-      return (0, _tokens.token)('color.background.selected', _colors.B50);
-
-    case props.active:
-      return (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20);
-
-    default:
-      return 'transparent';
-  }
-}, function (props) {
-  switch (true) {
-    case props.active:
-    case props.selected:
-      return (0, _tokens.token)('color.border.selected', _colors.B400);
-
-    default:
-      return 'transparent';
-  }
-});
-
-exports.ListItemWrapper = ListItemWrapper;
-
-var ItemNameWrapper = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
-
-exports.ItemNameWrapper = ItemNameWrapper;
-
-var ListItemName = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), (0, _tokens.token)('color.text', _colors.N800));
-
-exports.ListItemName = ListItemName;
-
-var ListItemContext = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), (0, _tokens.token)('color.text', _colors.N300), (0, _utils.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
-
-exports.ListItemContext = ListItemContext;
-
-var ItemIconWrapper = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.ItemIconWrapper = ItemIconWrapper;
-var ImgStyles = (0, _core.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
-exports.ImgStyles = ImgStyles;

package/dist/es2019/styles.js

@@ -1,94 +0,0 @@
-import styled from 'styled-components';
-import { token } from '@atlaskit/tokens';
-import { css } from '@emotion/core';
-import { N500, N0, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { relativeFontSizeToBase16 } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import { fontSizeSmall, fontSize, typography } from '@atlaskit/theme';
-const LINK_PICKER_WIDTH_IN_PX = 342;
-export const recentListStyles = css`
-  width: ${LINK_PICKER_WIDTH_IN_PX}px;
-  background: ${token('elevation.surface.overlay', N0)};
-`;
-export const Container = styled.div`
-  padding: ${gridSize() * 2}px;
-  width: 100%;
-  overflow: hidden;
-  line-height: initial;
-  box-sizing: border-box;
-`;
-export const ClearText = styled.button`
-  padding: 0;
-  margin-right: ${gridSize() / 2}px;
-  color: ${token('color.icon.subtle', N500)};
-  background: transparent;
-  border: none;
-  cursor: pointer;
-`;
-export const FieldWrapper = styled.div`
-  margin-bottom: ${gridSize() * 2}px;
-`;
-export const SearchIconWrapper = styled.span`
-  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;
-`;
-export const ListItemWrapper = styled.li`
-  display: flex;
-  padding: ${gridSize()}px ${gridSize() * 2}px;
-  margin: 0 -${gridSize() * 2}px;
-  cursor: pointer;
-  background-color: ${props => {
-  switch (true) {
-    case props.selected:
-      return token('color.background.selected', B50);
-
-    case props.active:
-      return token('color.background.neutral.subtle.hovered', N20);
-
-    default:
-      return 'transparent';
-  }
-}};
-  box-shadow: inset 2px 0px 0px
-    ${props => {
-  switch (true) {
-    case props.active:
-    case props.selected:
-      return token('color.border.selected', B400);
-
-    default:
-      return 'transparent';
-  }
-}};
-`;
-export const ItemNameWrapper = styled.span`
-  overflow: hidden;
-`;
-export const ListItemName = styled.div`
-  color: ${token('color.text', N800)};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 20px;
-`;
-export const ListItemContext = styled.div`
-  color: ${token('color.text', N300)};
-  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
-  line-height: ${fontSize()}px;
-`;
-export const ItemIconWrapper = styled.span`
-  min-width: ${gridSize() * 2}px;
-  margin-top: 3px;
-  margin-right: 12px;
-`;
-export const ImgStyles = css`
-  max-width: ${gridSize() * 2}px;
-`;

package/dist/es2019/ui/LinkSearchListItem.js

@@ -1,88 +0,0 @@
-/** @jsx jsx */
-import { Fragment } from 'react';
-import { jsx } from '@emotion/core';
-import { injectIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../transformTimeStamp';
-import { ItemNameWrapper, ItemIconWrapper, ListItemContext, ListItemName, ListItemWrapper, ImgStyles } from '../styles';
-
-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);
-
-  return jsx(ListItemWrapper, {
-    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)
-  }))));
-};
-
-export default injectIntl(LinkSearchListItem);
-
-const ItemTimeStamp = props => {
-  const {
-    date
-  } = props;
-
-  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 || ''));
-};
-
-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(ItemIconWrapper, null, jsx(Glyph, {
-      alt: alt
-    }));
-  }
-
-  return jsx(ItemIconWrapper, null, jsx("img", {
-    src: icon,
-    alt: alt,
-    css: ImgStyles
-  }));
-};

package/dist/esm/styles.js

@@ -1,46 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-import styled from 'styled-components';
-import { token } from '@atlaskit/tokens';
-import { css } from '@emotion/core';
-import { N500, N0, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { relativeFontSizeToBase16 } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import { fontSizeSmall, fontSize, typography } from '@atlaskit/theme';
-var LINK_PICKER_WIDTH_IN_PX = 342;
-export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  background: ", ";\n"])), LINK_PICKER_WIDTH_IN_PX, token('elevation.surface.overlay', N0));
-export var Container = styled.div(_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 ClearText = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), gridSize() / 2, token('color.icon.subtle', N500));
-export var FieldWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);
-export var SearchIconWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var ListTitleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
-export var ListItemWrapper = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n  background-color: ", ";\n  box-shadow: inset 2px 0px 0px\n    ", ";\n"])), gridSize(), gridSize() * 2, gridSize() * 2, function (props) {
-  switch (true) {
-    case props.selected:
-      return token('color.background.selected', B50);
-
-    case props.active:
-      return token('color.background.neutral.subtle.hovered', N20);
-
-    default:
-      return 'transparent';
-  }
-}, function (props) {
-  switch (true) {
-    case props.active:
-    case props.selected:
-      return token('color.border.selected', B400);
-
-    default:
-      return 'transparent';
-  }
-});
-export var ItemNameWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var ListItemName = styled.div(_templateObject9 || (_templateObject9 = _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 ListItemContext = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
-export var ItemIconWrapper = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
-export var ImgStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);

package/dist/types/styles.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-export declare const recentListStyles: import("@emotion/utils").SerializedStyles;
-export declare const Container: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const ClearText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare const FieldWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const SearchIconWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
-export declare const ListTitleStyles: import("@emotion/utils").SerializedStyles;
-interface ListItemProps {
-    active: boolean;
-    selected: boolean;
-}
-export declare const ListItemWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & ListItemProps, any, import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & ListItemProps>;
-export declare const ItemNameWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
-export declare const ListItemName: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const ListItemContext: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const ItemIconWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
-export declare const ImgStyles: import("@emotion/utils").SerializedStyles;
-export {};