@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib-esm/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-esm/FilterList.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import { get } from './constants';
 import sx from './sx';
 const FilterListBase = styled.ul.withConfig({
   displayName: "FilterList__FilterListBase",
   componentId: "sc-1l4pxmz-0"
-})(["list-style-type:none;", ";", ";"], COMMON, sx);
+})(["list-style-type:none;margin:0;padding:0;", ";"], sx);
 
 const FilterList = ({
   children,
@@ -23,7 +21,7 @@ FilterList.displayName = "FilterList";
 const FilterListItemBase = styled.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 ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.white') : get('colors.gray.6'), props => props.selected ? get('colors.blue.5') : '', get('radii.1'), get('colors.filterList.hoverBg'), get('colors.white'), get('colors.blue.5'), get('fontWeights.bold'), COMMON, sx);
+})(["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 ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'), props => props.selected ? get('colors.accent.emphasis') : '', get('radii.1'), get('colors.canvas.subtle'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('fontWeights.bold'), sx);
 
 function FilterListItem({
   children,
@@ -37,30 +35,6 @@ function FilterListItem({
 }
 
 FilterListItem.displayName = "FilterListItem";
-FilterList.defaultProps = {
-  theme,
-  m: 0,
-  p: 0
-};
-FilterList.propTypes = {
-  children: PropTypes.node,
-  small: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-FilterListItem.defaultProps = {
-  theme
-};
-FilterListItem.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  count: PropTypes.string,
-  selected: PropTypes.bool,
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 FilterListItem.displayName = 'FilterList.Item';
 export default Object.assign(FilterList, {
   Item: FilterListItem

package/lib-esm/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-esm/FilteredActionList/FilteredActionList.js

@@ -0,0 +1,109 @@
+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); }
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useSSRSafeId } from '@react-aria/ssr';
+import TextInput from '../TextInput';
+import Box from '../Box';
+import { ActionList } from '../ActionList';
+import Spinner from '../Spinner';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate';
+import styled from 'styled-components';
+import { get } from '../constants';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
+import useScrollFlash from '../hooks/useScrollFlash';
+import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
+const StyledHeader = styled.div.withConfig({
+  displayName: "FilteredActionList__StyledHeader",
+  componentId: "yg3jkv-0"
+})(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.default'));
+export function FilteredActionList({
+  loading = false,
+  placeholderText,
+  filterValue: externalFilterValue,
+  onFilterChange,
+  items,
+  textInputProps,
+  inputRef: providedInputRef,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
+  const onInputChange = useCallback(e => {
+    const value = e.target.value;
+    onFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [onFilterChange, setInternalFilterValue]);
+  const scrollContainerRef = useRef(null);
+  const listContainerRef = useRef(null);
+  const inputRef = useProvidedRefOrCreate(providedInputRef);
+  const activeDescendantRef = useRef();
+  const listId = useSSRSafeId();
+  const onInputKeyPress = 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]);
+  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) {
+        scrollIntoViewingArea(current, scrollContainerRef.current);
+      }
+    }
+  }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
+  loading]);
+  useEffect(() => {
+    // if items changed, we want to instantly move active descendant into view
+    if (activeDescendantRef.current && scrollContainerRef.current) {
+      scrollIntoViewingArea(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
+    }
+  }, [items]);
+  useScrollFlash(scrollContainerRef);
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    sx: sx
+  }, /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(TextInput, _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.createElement(Box, {
+    ref: scrollContainerRef,
+    overflow: "auto"
+  }, loading ? /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    pt: 6,
+    pb: 7
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(ActionList, _extends({
+    ref: listContainerRef,
+    items: items
+  }, listProps, {
+    role: "listbox",
+    id: listId
+  }))));
+}
+FilteredActionList.displayName = "FilteredActionList";
+FilteredActionList.displayName = 'FilteredActionList';

package/lib-esm/FilteredActionList/index.d.ts

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

package/lib-esm/FilteredActionList/index.js

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

package/lib-esm/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-esm/FilteredSearch.js

@@ -1,17 +1,8 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import { get } from './constants';
 import sx from './sx';
 const FilteredSearch = styled.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;}", ""], COMMON, get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
-FilteredSearch.defaultProps = {
-  theme
-};
-FilteredSearch.propTypes = { ...COMMON.propTypes,
-  theme: PropTypes.object,
-  ...sx.propTypes
-};
+})(["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;}", ""], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
 export default FilteredSearch;

package/lib-esm/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;

package/lib-esm/Flash.js

@@ -1,25 +1,48 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { variant } from 'styled-system';
-import { COMMON, get } from './constants';
-import theme from './theme';
+import { get } from './constants';
 import sx from './sx';
 const variants = variant({
-  scale: 'flash'
+  variants: {
+    default: {
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
+      svg: {
+        color: 'accent.fg'
+      }
+    },
+    success: {
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
+      svg: {
+        color: 'success.fg'
+      }
+    },
+    danger: {
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
+      svg: {
+        color: 'danger.fg'
+      }
+    },
+    warning: {
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
+      svg: {
+        color: 'attention.fg'
+      }
+    }
+  }
 });
 const Flash = styled.div.withConfig({
   displayName: "Flash",
   componentId: "sc-4y90bn-0"
-})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{color:", ";margin-right:", ";}", ";", ";", ";"], get('colors.text.grayDark'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', props => get(`flashIcon.${props.variant}`)(props.theme), get('space.2'), COMMON, variants, sx);
+})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";"], get('colors.fg.default'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), variants, sx);
 Flash.defaultProps = {
-  theme,
   variant: 'default'
 };
-Flash.propTypes = {
-  children: PropTypes.node,
-  full: PropTypes.bool,
-  variant: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 export default Flash;

package/lib-esm/Flex.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from './Box';
+export declare type FlexProps = BoxProps;
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
+declare const Flex: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("./sx").SxProp, never>;
+export default Flex;

package/lib-esm/Flex.js

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 import Box from './Box';
-import theme from './theme';
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Flex> → <Box display="flex">)
+ */
 const Flex = styled(Box).withConfig({
   displayName: "Flex",
   componentId: "arghxi-0"
 })([""]);
 Flex.defaultProps = {
-  theme,
   display: 'flex'
 };
-Flex.propTypes = { ...Box.propTypes
-};
 export default Flex;

package/lib-esm/FormGroup.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="hoist-non-react-statics" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const FormGroup: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+declare const FormGroupLabel: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+export declare type FormGroupProps = ComponentProps<typeof FormGroup>;
+export declare type FormGroupLabelProps = ComponentProps<typeof FormGroupLabel>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Label: import("styled-components").StyledComponent<"label", any, SxProp, never>;
+};
+export default _default;