@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib/DropdownStyles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './ThemeProvider';
+declare const getDirectionStyles: (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w') => string;
+export default getDirectionStyles;

package/lib/DropdownStyles.js

@@ -22,7 +22,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${(0, _constants.get)('colors.blackfade15')(theme)};
+        border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
 
       &::after {
@@ -30,7 +30,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${(0, _constants.get)('colors.white')(theme)};
+        border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
     `,
     e: `
@@ -44,14 +44,14 @@ const getDirectionStyles = (theme, direction) => {
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${(0, _constants.get)('colors.blackfade15')(theme)};
+        border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${(0, _constants.get)('colors.white')(theme)};
+        border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
     `,
     ne: `
@@ -69,7 +69,7 @@ const getDirectionStyles = (theme, direction) => {
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${(0, _constants.get)('colors.blackfade15')(theme)};
+        border-top: 8px solid ${(0, _constants.get)('colors.border.default')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
@@ -77,7 +77,7 @@ const getDirectionStyles = (theme, direction) => {
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${(0, _constants.get)('colors.white')(theme)};
+        border-top: 7px solid ${(0, _constants.get)('colors.border.default')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;

package/lib/FilterList.d.ts

@@ -0,0 +1,283 @@
+import React from 'react';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const FilterListBase: import("styled-components").StyledComponent<"ul", any, SxProp, never>;
+export declare type FilterListProps = ComponentProps<typeof FilterListBase>;
+declare const FilterListItemBase: import("styled-components").StyledComponent<"a", any, {
+    small?: boolean | undefined;
+    selected?: boolean | undefined;
+} & SxProp, never>;
+export declare type FilterListItemProps = {
+    count?: number;
+} & ComponentProps<typeof FilterListItemBase>;
+declare function FilterListItem({ children, count, ...rest }: React.PropsWithChildren<FilterListItemProps>): JSX.Element;
+declare namespace FilterListItem {
+    var displayName: string;
+}
+declare const _default: (({ children, ...rest }: React.PropsWithChildren<{
+    color?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    hidden?: boolean | undefined;
+    children?: React.ReactNode;
+    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+    role?: React.AriaRole | undefined;
+    sx?: import("./sx").BetterSystemStyleObject | undefined;
+    key?: React.Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLUListElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLUListElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLUListElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLUListElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLUListElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLUListElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLUListElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLUListElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+    css?: import("@emotion/core").InterpolationWithTheme<any>;
+} & {
+    theme?: any;
+}>) => JSX.Element) & {
+    Item: typeof FilterListItem;
+};
+export default _default;

package/lib/FilterList.js

@@ -7,14 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FilterListBase = _styledComponents.default.ul.withConfig({
   displayName: "FilterList__FilterListBase",
   componentId: "sc-1l4pxmz-0"
-})(["list-style-type:none;", ";", ";"], _constants.COMMON, _sx.default);
+})(["list-style-type:none;margin:0;padding:0;", ";"], _sx.default);
 
 const FilterList = ({
   children,
@@ -40,7 +36,7 @@ FilterList.displayName = "FilterList";
 const FilterListItemBase = _styledComponents.default.a.withConfig({
   displayName: "FilterList__FilterListItemBase",
   componentId: "sc-1l4pxmz-1"
-})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.white') : (0, _constants.get)('colors.gray.6'), props => props.selected ? (0, _constants.get)('colors.blue.5') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.filterList.hoverBg'), (0, _constants.get)('colors.white'), (0, _constants.get)('colors.blue.5'), (0, _constants.get)('fontWeights.bold'), _constants.COMMON, _sx.default);
+})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.fg.onEmphasis') : (0, _constants.get)('colors.fg.muted'), props => props.selected ? (0, _constants.get)('colors.accent.emphasis') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('fontWeights.bold'), _sx.default);
 
 function FilterListItem({
   children,
@@ -54,30 +50,6 @@ function FilterListItem({
 }
 
 FilterListItem.displayName = "FilterListItem";
-FilterList.defaultProps = {
-  theme: _theme.default,
-  m: 0,
-  p: 0
-};
-FilterList.propTypes = {
-  children: _propTypes.default.node,
-  small: _propTypes.default.bool,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-FilterListItem.defaultProps = {
-  theme: _theme.default
-};
-FilterListItem.propTypes = {
-  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  count: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 FilterListItem.displayName = 'FilterList.Item';
 
 var _default = Object.assign(FilterList, {

package/lib/FilteredActionList/FilteredActionList.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { GroupedListProps, ListPropsBase } from '../ActionList/List';
+import { TextInputProps } from '../TextInput';
+import { SxProp } from '../sx';
+export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase, SxProp {
+    loading?: boolean;
+    placeholderText: string;
+    filterValue?: string;
+    onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+    textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, onFilterChange, items, textInputProps, inputRef: providedInputRef, sx, ...listProps }: FilteredActionListProps): JSX.Element;
+export declare namespace FilteredActionList {
+    var displayName: string;
+}

package/lib/FilteredActionList/FilteredActionList.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilteredActionList = FilteredActionList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _ActionList = require("../ActionList");
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _useProvidedStateOrCreate = require("../hooks/useProvidedStateOrCreate");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
+
+var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
+
+var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const StyledHeader = _styledComponents.default.div.withConfig({
+  displayName: "FilteredActionList__StyledHeader",
+  componentId: "yg3jkv-0"
+})(["box-shadow:0 1px 0 ", ";z-index:1;"], (0, _constants.get)('colors.border.default'));
+
+function FilteredActionList({
+  loading = false,
+  placeholderText,
+  filterValue: externalFilterValue,
+  onFilterChange,
+  items,
+  textInputProps,
+  inputRef: providedInputRef,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(externalFilterValue, undefined, '');
+  const onInputChange = (0, _react.useCallback)(e => {
+    const value = e.target.value;
+    onFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [onFilterChange, setInternalFilterValue]);
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const listContainerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(providedInputRef);
+  const activeDescendantRef = (0, _react.useRef)();
+  const listId = (0, _ssr.useSSRSafeId)();
+  const onInputKeyPress = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter' && activeDescendantRef.current) {
+      event.preventDefault();
+      event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
+
+      const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
+      activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
+    }
+  }, [activeDescendantRef]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: listContainerRef,
+    focusOutBehavior: 'wrap',
+    focusableElementFilter: element => {
+      return !(element instanceof HTMLInputElement);
+    },
+    activeDescendantFocus: inputRef,
+    onActiveDescendantChanged: (current, previous, directlyActivated) => {
+      activeDescendantRef.current = current;
+
+      if (current && scrollContainerRef.current && directlyActivated) {
+        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
+      }
+    }
+  }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
+  loading]);
+  (0, _react.useEffect)(() => {
+    // if items changed, we want to instantly move active descendant into view
+    if (activeDescendantRef.current && scrollContainerRef.current) {
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+    }
+  }, [items]);
+  (0, _useScrollFlash.default)(scrollContainerRef);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    sx: sx
+  }, /*#__PURE__*/_react.default.createElement(StyledHeader, null, /*#__PURE__*/_react.default.createElement(_TextInput.default, _extends({
+    ref: inputRef,
+    block: true,
+    width: "auto",
+    color: "fg.default",
+    value: filterValue,
+    onChange: onInputChange,
+    onKeyPress: onInputKeyPress,
+    placeholder: placeholderText,
+    "aria-label": placeholderText,
+    "aria-controls": listId
+  }, textInputProps))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    ref: scrollContainerRef,
+    overflow: "auto"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    pt: 6,
+    pb: 7
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)) : /*#__PURE__*/_react.default.createElement(_ActionList.ActionList, _extends({
+    ref: listContainerRef,
+    items: items
+  }, listProps, {
+    role: "listbox",
+    id: listId
+  }))));
+}
+
+FilteredActionList.displayName = "FilteredActionList";
+FilteredActionList.displayName = 'FilteredActionList';

package/lib/FilteredActionList/index.d.ts

@@ -0,0 +1,2 @@
+export { FilteredActionList } from './FilteredActionList';
+export type { FilteredActionListProps } from './FilteredActionList';

package/lib/FilteredActionList/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilteredActionList", {
+  enumerable: true,
+  get: function () {
+    return _FilteredActionList.FilteredActionList;
+  }
+});
+
+var _FilteredActionList = require("./FilteredActionList");

package/lib/FilteredSearch.d.ts

@@ -0,0 +1,5 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const FilteredSearch: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+export declare type FilteredSearchProps = ComponentProps<typeof FilteredSearch>;
+export default FilteredSearch;

package/lib/FilteredSearch.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,14 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FilteredSearch = _styledComponents.default.div.withConfig({
   displayName: "FilteredSearch",
   componentId: "sc-15qfedq-0"
-})(["", ";display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}", ""], _constants.COMMON, (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
+})(["display:flex;align-items:stretch;summary{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";z-index:1;}", ""], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), _sx.default);
 
-FilteredSearch.defaultProps = {
-  theme: _theme.default
-};
-FilteredSearch.propTypes = { ..._constants.COMMON.propTypes,
-  theme: _propTypes.default.object,
-  ..._sx.default.propTypes
-};
 var _default = FilteredSearch;
 exports.default = _default;

package/lib/Flash.d.ts

@@ -0,0 +1,8 @@
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Flash: import("styled-components").StyledComponent<"div", any, {
+    variant?: "success" | "danger" | "default" | "warning" | undefined;
+    full?: boolean | undefined;
+} & SxProp, never>;
+export declare type FlashProps = ComponentProps<typeof Flash>;
+export default Flash;