@mackin.com/styleguide 7.4.0 → 7.7.1

package/index.d.ts

@@ -3,168 +3,60 @@ import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
-declare type Alignment = 'left' | 'right' | 'center';
-
-/** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
-declare const mergeClassNames: (...classes: (string | boolean | undefined)[]) => string | undefined;
-declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
-
-declare const Table: (props: {
-    caption?: string | JSX.Element;
-    children?: any;
-    noCellBorder?: boolean;
-    className?: string;
-    /** Colors alternate rows. */
-    altRows?: boolean;
-}) => JSX.Element;
-declare const Tr: (props: {
-    className?: string;
-    children?: any;
-}) => JSX.Element;
-declare const Th: (props: {
-    children?: any;
-    align?: Alignment;
-    width?: string;
-    style?: React.CSSProperties;
-    className?: string;
-}) => JSX.Element;
-declare const Td: (props: {
-    children?: any;
-    align?: Alignment;
-    style?: React.CSSProperties;
-    colSpan?: number;
-}) => JSX.Element;
-
-declare const TdCurrency: (props: {
-    value: number;
-    cents?: boolean;
-}) => JSX.Element;
-
-declare const TdNumber: (props: {
-    value: number;
-}) => JSX.Element;
-
-declare const ThSort: (props: {
-    text: string | JSX.Element;
-    onClick: () => void;
-    align?: Alignment;
-    direction?: 'asc' | 'desc';
-    style?: React.CSSProperties;
-    width?: string;
-    rightContent?: JSX.Element;
-}) => JSX.Element;
-
-declare type SortDirection = 'asc' | 'desc';
-interface PagerSortOption<TItem> {
-    id: string;
-    name?: string;
-    sort: (items: TItem[]) => TItem[];
-}
-interface PagerOptions<TItem> {
-    /** Defaults to 10. */
-    limit?: number;
-    /** Defaults to [10] */
-    limitOptions?: number[];
-    sort?: string;
-    sortOptions?: PagerSortOption<TItem>[];
-    previous?: ItemPager<TItem>;
+interface AutoCompleteItem {
+    id: string | number;
+    name: string;
 }
-/** For in-memory paging. */
-declare class ItemPager<TItem> {
-    constructor(allItems: TItem[], options?: PagerOptions<TItem>);
-    get allItems(): TItem[];
-    /** The ID of the current sort within the sortOptions. */
-    get sort(): string | undefined;
-    set sort(sortId: string | undefined);
-    /** The direction of the current sort when using an option created from addToggleSortOption */
-    get sortDirection(): SortDirection | undefined;
-    get sortOptions(): PagerSortOption<TItem>[];
-    get limit(): number;
-    set limit(value: number);
-    get limitOptions(): number[];
-    get totalPages(): number;
-    /** The zero-based page index. */
-    get page(): number;
-    /** The zero-based page index. */
-    set page(value: number);
-    get pageItems(): TItem[];
-    get totalItems(): number;
-    get minItemIndex(): number;
-    get maxItemIndex(): number;
-    get hasNext(): boolean;
-    get hasPrevious(): boolean;
-    /**
-     * Adds both asc and des sort options
-     *
-     * @param propPath Prop name or path ('resource.title').
-     * @param name Name to display or asc Name and desc Name.
-     */
-    addToggleSortOption(propPath: string, name?: string | [string, string]): void;
-    /**
-     * Toggles between asc and desc.
-     * @param sortId The ID or partial ID (no '-asc' or '-desc') of a sort option created through addToggleSortOption
-     */
-    toggleSort(sortId: string): void;
-    applyFilter(filter?: (item: TItem) => boolean, keepPage?: boolean): void;
-    next(): void;
-    previous(): void;
-    pageByOffset(direction: 1 | -1): void;
-    /** Adds the item optionally keeping the current page. */
-    add(item: TItem, position?: 'start' | 'end', keepPage?: boolean): void;
-    /** Removes the matched item(s). */
-    remove(comparer: (item: TItem) => boolean, keepPage?: boolean): void;
-    replace(newItem: TItem, comparer: (item: TItem) => boolean): void;
-    private _allItems;
-    private _page;
-    private _limit;
-    private _limitOptions;
-    private _pageResult;
-    private _filteredItems;
-    private _sort;
-    private _sortOptions;
-    private _currentFilter;
-    private createPageResult;
-}
-
-interface PagerStyleProps {
-    /** Used for localizations.  Defaults to 'of' */
-    itemDividerText?: string;
-    /** Used for localizations.  Defaults to 'No Results' */
-    noResultsText?: string;
-    /** Used for localizations.  Defaults to 'Page' */
-    pageText?: string;
+declare type AutocompleteValue = string | AutoCompleteItem;
+interface AutocompleteProps {
+    value: AutocompleteValue | undefined;
+    round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
+    rightControl?: JSX.Element;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
     className?: string;
-    leftControls?: JSX.Element;
-    rightControls?: JSX.Element;
-}
-interface PagerProps extends PagerStyleProps {
-    canGoNext: boolean;
-    canGoPrevious: boolean;
-    minItem: number;
-    maxItem: number;
-    totalItems: number;
-    page: (direction: 1 | -1) => void;
-    /** For display purposes. Will show under items text if this if present. */
-    pageIndex?: number;
-    /** For display purposes. Will show under items text if this if present. */
-    totalPages?: number;
+    inputClassName?: string;
+    /** If not set, defaults to 100 */
+    maxLength?: number;
+    required?: boolean;
+    /** Limits what will be show in the autocomplete options. Default is 7. */
+    maxShownValues?: number;
+    /** The minimum characters before 'getOptions' is called.  No default. */
+    minChars?: number;
+    inputAriaAttributes?: React.AriaAttributes;
+    onChange: (value: string) => void;
+    getOptions: (value: string) => Promise<AutocompleteValue[]>;
+    onPick: (value: AutocompleteValue) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-declare const Pager: (props: PagerProps) => JSX.Element;
+declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
 
-interface Props$1<T> extends PagerStyleProps {
-    pager: ItemPager<T>;
-    onPage: (direction: 1 | -1) => void;
-    /** Defaults to 'Limit' */
-    limitText?: string;
-    /** Defaults to 'Sort' */
-    sortText?: string;
-    onLimit?: (limit: number) => void;
-    onSort?: (sort: string) => void;
-    /** Shows 'Page X of Y'. */
-    showPageText?: boolean;
-}
-declare const BoundMemoryPager: <T>(p: Props$1<T>) => JSX.Element;
+/** @deprecated Use Backdrop2 going forward. */
+declare const Backdrop$1: (props: {
+    show: boolean;
+    onClick?: () => void;
+    transparent?: boolean;
+    /** If true, the backdrop will hide on larger screens. */
+    responsive?: boolean;
+    /** If true, the backdrop will hide on smaller screens. */
+    reverseResponsive?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    /** If true, will not prevent scroll when shown. */
+    allowScroll?: boolean;
+    /** Fade in time.  Defaults to 250ms. */
+    showTimeMs?: number;
+}) => JSX.Element;
+
+declare const Backdrop: (p: {
+    children: React__default.ReactNode;
+    /** Fade in time.  Defaults to 250ms. */
+    showTimeMs?: number;
+    debug?: boolean;
+}) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface ButtonProps {
@@ -182,7 +74,7 @@ interface ButtonProps {
     block?: boolean;
     /** As round as can be. */
     round?: boolean;
-    /** Just taking the edge off. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     rightIcon?: JSX.Element;
@@ -202,16 +94,42 @@ interface ButtonProps {
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 
-interface CheckboxProps {
+interface CalendarProps {
+    month: number;
+    year: number;
+    /** Defaults to 3rem. */
+    cellSize?: string;
+    smallHeader?: boolean;
+    id?: string;
+    /** Defaults to true. */
+    title?: boolean;
+    yearInTitle?: boolean;
+    /** Ignored if title is set to false. */
+    customTitle?: JSX.Element;
+    /** If true, will always show 6 rows / 42 cells. */
+    fixedRows?: boolean;
+    /** Bolds the current date. */
+    showCurrent?: boolean;
+    selectedValue?: number;
+    /** Renders custom content for each cell.  The content will be wrapped in a button if onClick is provided. */
+    renderCell?: (date: Date) => JSX.Element;
+    /** Used with renderCell with onClick is provided.  Will not wrap the cell contents in a button. */
+    isCellDisabled?: (date: Date) => boolean;
+    onClick?: (date: Date) => void;
+    /** This is the ms from Date.valueOf(). */
+    min?: number;
+    /** This is the ms from Date.valueOf(). */
+    max?: number;
+}
+declare const Calendar: (p: CalendarProps) => JSX.Element;
+
+interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'checked' | 'onChange' | 'type'> {
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly?: boolean;
     label?: string;
-    children?: React.ReactNode;
-    className?: string;
     checkedIcon?: string;
     uncheckedIcon?: string;
-    disabled?: boolean;
-    readonly?: boolean;
     /** Background color when checked based on the current theme.  Mutually exclusive with 'checkedColor'. */
     checkedThemeColor?: 'primary' | 'primary2' | 'secondary';
     /** Background color when checked.  Mutually exclusive with 'checkedThemeColor'. */
@@ -234,16 +152,72 @@ interface ConfirmModalProps {
 }
 declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
 
-declare const Divider: () => JSX.Element;
+interface CopyButtonProps {
+    /** HTML selector of the target input to copy from. */
+    selector: string;
+    title?: string;
+}
+declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
 
-declare const ErrorModal: (props: {
-    message: string;
-    show: boolean;
+interface DatePickerProps {
+    value: number | undefined;
+    /** Called with debounce when the input changes. */
+    onChange: (value: number | undefined) => void;
+    style?: React.CSSProperties;
+    /** Defaults to MM/DD/YYYY. */
+    placeholder?: string;
     id?: string;
-    debug?: boolean;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Defaults to 250ms */
+    debounceMs?: number;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
+    rounded?: boolean;
+    round?: boolean;
+    /** This is the ms from Date.valueOf(). */
+    min?: number;
+    /** This is the ms from Date.valueOf(). */
+    max?: number;
+    /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
+    reposition?: boolean;
+}
+declare const DatePicker: (p: DatePickerProps) => JSX.Element;
+
+declare const Divider: () => JSX.Element;
+
+declare const ErrorModal: (props: {
+    message: string;
+    show: boolean;
+    id?: string;
+    debug?: boolean;
     close: () => void;
 }) => JSX.Element;
 
+interface FileUploaderProps {
+    onUpload: (files: FileList) => Promise<void>;
+    /** Defaults to 'Upload'. */
+    buttonText?: string;
+    /** Defauts to 'Upload successful'. */
+    successMessage?: string | JSX.Element;
+    /** Defaults to 'Upload failed.' */
+    failureMessage?: string | JSX.Element;
+    /** Defaults to 10rem. */
+    buttonWidth?: string;
+    /** Defaults to 'primary'. */
+    buttonVariant?: ButtonVariant;
+    maxBytes?: number;
+    multiple?: boolean;
+    accept?: string;
+    /** Defaults to 'Click or drag and drop files.'*/
+    instructionMessage?: string;
+    /** For additional info below the instructionMessage. */
+    infoMessage?: string | JSX.Element;
+}
+declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
+
 declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
 interface IProps extends FormProps {
     inline?: boolean;
@@ -309,6 +283,8 @@ declare const InfoPanel: (props: {
     variant?: 'info' | 'warning' | 'error' | 'negative' | 'positive';
     className?: string;
     style?: React.CSSProperties;
+    /** Defaults to 'p'. */
+    tag?: 'p' | 'div';
 }) => JSX.Element;
 
 interface InfoTipProps {
@@ -330,6 +306,24 @@ interface InfoTipProps {
 }
 declare const InfoTip: (props: InfoTipProps) => JSX.Element;
 
+interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    rightControl?: JSX.Element;
+    round?: boolean;
+    /** The class applied to the wrapping element without this component.  Use 'className' to style the input directly. */
+    wrapperClassName?: string;
+}
+
+interface DateInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onChange' | 'min' | 'max' | 'step' | 'pattern' | 'maxLength'> {
+    /** The epoch timestamp.  Equivalent to Date.valueOf().  */
+    value: number | undefined;
+    /** The min epoch timestamp. */
+    min?: number;
+    /** The max epoch timestamp. */
+    max?: number;
+    onChange: (value: number | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const DateInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "value" | "onChange" | "min" | "max" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
+
 declare type InputValue = string | number | undefined;
 declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password' | 'url' | 'email';
 interface InputProps {
@@ -350,8 +344,9 @@ interface InputProps {
     /** Defaults to 'off'. */
     autoComplete?: string;
     autoFocus?: boolean;
+    inputAriaAttributes?: React.AriaAttributes;
     /** Called with debounce when the input changes. */
-    onChange?: (value: InputValue, name?: string) => void;
+    onChange?: (value: InputValue, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
@@ -371,8 +366,32 @@ interface InputProps {
     rows?: number;
     pattern?: string;
 }
+/** @deprecated Use DateInput, NumberInput, or TextInput instead. */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
 
+interface NumberInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onChange' | 'min' | 'max' | 'step'> {
+    value: number | undefined;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange: (value: number | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "onChange" | "min" | "max" | "step" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
+
+interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value' | 'onChange'> {
+    value: string | undefined;
+    onChange: (value: string | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "onChange" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
+
+interface TextInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onChange' | 'min' | 'max' | 'step'> {
+    value: string | undefined;
+    /** Defaults to 'text'. */
+    type?: 'text' | 'email' | 'url' | 'password';
+    onChange: (value: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "onChange" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
+
 interface LabelProps {
     text: string | JSX.Element;
     children: React.ReactNode;
@@ -442,6 +461,7 @@ interface OmniLinkProps {
     children: React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     className?: string;
+    style?: React.CSSProperties;
     noRouter?: boolean;
     /** Ignored if 'noRouter' is false */
     target?: string;
@@ -455,7 +475,7 @@ interface OmniLinkProps {
     title?: string;
     /** Only for button variants. */
     round?: boolean;
-    /** Only for button variants. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually.  Only for button variants. */
     rounded?: boolean;
     /** Only for button variants. */
     small?: boolean;
@@ -464,192 +484,250 @@ interface OmniLinkProps {
 }
 declare const OmniLink: (props: OmniLinkProps) => JSX.Element;
 
-declare type PickerValue = string | number;
-interface PickerProps<T extends PickerValue> {
-    type: 'select';
-    value: T;
-    options: (T | {
-        id: T;
-        name?: string;
-    })[];
-    onChange: (value: T) => void;
-    id?: string;
-    rounded?: boolean;
-    disabled?: boolean;
-    className?: string;
-    readonly?: boolean;
+declare type SortDirection = 'asc' | 'desc';
+interface PagerSortOption<TItem> {
+    id: string;
+    name?: string;
+    sort: (items: TItem[]) => TItem[];
 }
-declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element | null;
-
-interface ProgressBarProps {
-    pct: number;
-    round?: boolean;
-    showPct?: boolean;
-    className?: string;
+interface PagerOptions<TItem> {
+    /** Defaults to 10. */
+    limit?: number;
+    /** Defaults to [10] */
+    limitOptions?: number[];
+    sort?: string;
+    sortOptions?: PagerSortOption<TItem>[];
+    previous?: ItemPager<TItem>;
 }
-declare const ProgressBar: (props: {
-    pct: number;
-    round?: boolean;
-    showPct?: boolean;
-    className?: string;
-}) => JSX.Element;
+/** For in-memory paging. */
+declare class ItemPager<TItem> {
+    constructor(allItems: TItem[], options?: PagerOptions<TItem>);
+    get allItems(): TItem[];
+    /** The ID of the current sort within the sortOptions. */
+    get sort(): string | undefined;
+    set sort(sortId: string | undefined);
+    /** The direction of the current sort when using an option created from addToggleSortOption */
+    get sortDirection(): SortDirection | undefined;
+    get sortOptions(): PagerSortOption<TItem>[];
+    get limit(): number;
+    set limit(value: number);
+    get limitOptions(): number[];
+    get totalPages(): number;
+    /** The zero-based page index. */
+    get page(): number;
+    /** The zero-based page index. */
+    set page(value: number);
+    get pageItems(): TItem[];
+    get totalItems(): number;
+    get minItemIndex(): number;
+    get maxItemIndex(): number;
+    get hasNext(): boolean;
+    get hasPrevious(): boolean;
+    /**
+     * Adds both asc and des sort options
+     *
+     * @param propPath Prop name or path ('resource.title').
+     * @param name Name to display or asc Name and desc Name.
+     */
+    addToggleSortOption(propPath: string, name?: string | [string, string]): void;
+    /**
+     * Toggles between asc and desc.
+     * @param sortId The ID or partial ID (no '-asc' or '-desc') of a sort option created through addToggleSortOption
+     */
+    toggleSort(sortId: string): void;
+    applyFilter(filter?: (item: TItem) => boolean, keepPage?: boolean): void;
+    next(): void;
+    previous(): void;
+    pageByOffset(direction: 1 | -1): void;
+    /** Adds the item optionally keeping the current page. */
+    add(item: TItem, position?: 'start' | 'end', keepPage?: boolean): void;
+    /** Removes the matched item(s). */
+    remove(comparer: (item: TItem) => boolean, keepPage?: boolean): void;
+    replace(newItem: TItem, comparer: (item: TItem) => boolean): void;
+    private _allItems;
+    private _page;
+    private _limit;
+    private _limitOptions;
+    private _pageResult;
+    private _filteredItems;
+    private _sort;
+    private _sortOptions;
+    private _currentFilter;
+    private createPageResult;
+}
 
-interface SearchBoxProps {
-    value: string | undefined;
-    onChange: (value: string | undefined | number) => void;
-    id?: string;
-    placeholder?: string;
-    round?: boolean;
+interface PagerStyleProps {
+    /** Used for localizations.  Defaults to 'of' */
+    itemDividerText?: string;
+    /** Used for localizations.  Defaults to 'No Results' */
+    noResultsText?: string;
+    /** Used for localizations.  Defaults to 'Page' */
+    pageText?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
-    onSubmit?: () => Promise<void>;
-    /** Defaults to 250ms */
-    debounceMs?: number;
+    leftControls?: JSX.Element;
+    rightControls?: JSX.Element;
 }
-declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
-
-interface TextProps {
-    children: any;
-    /** Defaults to 'p'. */
-    tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
-    align?: Alignment;
-    bold?: boolean;
-    italics?: boolean;
-    className?: string;
-    /** You will need to set a width or max-width on the element for this to work. */
-    ellipsis?: boolean;
-    style?: React.CSSProperties;
-    smaller?: boolean;
-    larger?: boolean;
-    spacedOut?: boolean;
-    lineClamp?: number;
-    /** Will remove all margin/padding from specified tag */
-    noPad?: boolean;
-    leftPad?: string;
+interface PagerProps extends PagerStyleProps {
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    minItem: number;
+    maxItem: number;
+    totalItems: number;
+    page: (direction: 1 | -1) => void;
+    /** For display purposes. Will show under items text if this if present. */
+    pageIndex?: number;
+    /** For display purposes. Will show under items text if this if present. */
+    totalPages?: number;
 }
-declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
-    style: React.CSSProperties;
-    className: string;
-}, HTMLElement>;
+declare const Pager: (props: PagerProps) => JSX.Element;
 
-declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface ToggleButtonProps {
-    checked: boolean;
-    checkedText: string;
-    uncheckedText: string;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    className?: string;
-    checkedClassName?: string;
-    disabled?: boolean;
-    /** The minimum button size will be set to the themes' formButtonMinWidth. */
-    enforceMinWidth?: boolean;
-    checkedIcon?: JSX.Element;
-    uncheckedIcon?: JSX.Element;
-    variant?: ToggleButtonVariant;
-    checkedVariant?: ToggleButtonVariant;
-    style?: React.CSSProperties;
-    checkedStyle?: React.CSSProperties;
+interface Props$1<T> extends PagerStyleProps {
+    pager: ItemPager<T>;
+    onPage: (direction: 1 | -1) => void;
+    /** Defaults to 'Limit' */
+    limitText?: string;
+    /** Defaults to 'Sort' */
+    sortText?: string;
+    onLimit?: (limit: number) => void;
+    onSort?: (sort: string) => void;
+    /** Shows 'Page X of Y'. */
+    showPageText?: boolean;
 }
-declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
+declare const BoundMemoryPager: <T>(p: Props$1<T>) => JSX.Element;
 
-interface ToggleButtonGroupProps {
-    value: string | number;
-    options: {
-        id: string | number;
-        name: string | JSX.Element;
-        rightIcon?: JSX.Element;
-        activeClass?: string;
-    }[];
-    onChange: (value: string | number) => void;
-    className?: string;
-    disabled?: boolean;
-    /** The minimum button size will be set to the themes' formButtonMinWidth. */
-    enforceMinWidth?: boolean;
-    round?: boolean;
-    small?: boolean;
-    width?: string;
+interface Props<T> extends PagerStyleProps {
+    result: PagedResult<T>;
+    onPage: (direction: 1 | -1) => void;
+    limitOptions?: number[];
+    sort?: string | number;
+    sortOptions?: {
+        id: string | number;
+        name?: string;
+    }[];
+    /** Defaults to 'Limit' */
+    limitText?: string;
+    /** Defaults to 'Sort' */
+    sortText?: string;
+    onLimit?: (limit: number) => void;
+    onSort?: (sort: string | number) => void;
+    /** Shows 'Page X of Y'. */
+    showPageText?: boolean;
 }
-declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
+declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
 
-declare const WaitingIndicator: (p: {
-    show: boolean;
-    minShowTimeMs?: number;
-    id?: string;
-    debug?: boolean;
-}) => JSX.Element;
+declare class PagedResult<T> {
+    constructor(items?: T[], total?: number, page?: number, limit?: number);
+    static fromDto<T>(dto: {
+        [key: string]: any;
+    }): PagedResult<T>;
+    total: number;
+    /** The zero-based page index. */
+    page: number;
+    limit: number;
+    items: T[];
+    /** Helper for items.length */
+    get length(): number;
+    get hasItems(): boolean;
+    get previousPage(): number;
+    get hasPrevious(): boolean;
+    get nextPage(): number;
+    get hasNext(): boolean;
+    get lastPage(): number;
+    get totalPages(): number;
+    get minPageItemIndex(): number;
+    get maxPageItemIndex(): number;
+    /** Returns the first item on the current page. */
+    get firstPageItem(): T;
+    /** Returns the last item on the current page */
+    get lastPageItem(): T;
+    getPageRelativeItemIndex(item: T): number;
+    getResultRelativeItemIndex(item: T): number | undefined;
+    getPreviousItem(fromItem: T): T | undefined;
+    getNextItem(fromItem: T): T | undefined;
+    getPagingRange(radius: number): number[];
+    toJSON(): {
+        [key: string]: any;
+    };
+    clone(newItems?: T[]): PagedResult<T>;
+}
 
-interface CalendarProps {
-    month: number;
-    year: number;
-    /** Defaults to 3rem. */
-    cellSize?: string;
-    smallHeader?: boolean;
-    id?: string;
-    /** Defaults to true. */
-    title?: boolean;
-    yearInTitle?: boolean;
-    /** Ignored if title is set to false. */
-    customTitle?: JSX.Element;
-    /** If true, will always show 6 rows / 42 cells. */
-    fixedRows?: boolean;
-    /** Bolds the current date. */
-    showCurrent?: boolean;
-    selectedValue?: number;
-    /** Renders custom content for each cell.  The content will be wrapped in a button if onClick is provided. */
-    renderCell?: (date: Date) => JSX.Element;
-    /** Used with renderCell with onClick is provided.  Will not wrap the cell contents in a button. */
-    isCellDisabled?: (date: Date) => boolean;
-    onClick?: (date: Date) => void;
-    /** This is the ms from Date.valueOf(). */
-    min?: number;
-    /** This is the ms from Date.valueOf(). */
-    max?: number;
+declare type PickerValue = string | number;
+interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'onChange'> {
 }
-declare const Calendar: (p: CalendarProps) => JSX.Element;
+interface PickerProps<T extends PickerValue> extends SelectProps {
+    value: T;
+    options: (T | {
+        id: T;
+        name?: string;
+    })[];
+    onChange: (value: T, event: React.ChangeEvent<HTMLSelectElement>) => void;
+    readonly?: boolean;
+    /** @deprecated Unused.  Picker will always render a 'select' element. */
+    type?: 'select';
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
+    rounded?: boolean;
+}
+declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
-interface DatePickerProps {
-    value: number | undefined;
-    /** Called with debounce when the input changes. */
-    onChange: (value: number | undefined) => void;
-    style?: React.CSSProperties;
-    /** Defaults to MM/DD/YYYY. */
-    placeholder?: string;
+interface PopoverProps {
+    isOpen: boolean;
+    /** The content inside the popover. */
+    content: JSX.Element;
+    /** The element controlling the state of the popover. */
+    parent: JSX.Element;
     id?: string;
-    disabled?: boolean;
-    className?: string;
-    inputClassName?: string;
-    readOnly?: boolean;
-    required?: boolean;
-    /** Defaults to 250ms */
-    debounceMs?: number;
-    rounded?: boolean;
-    round?: boolean;
-    /** This is the ms from Date.valueOf(). */
-    min?: number;
-    /** This is the ms from Date.valueOf(). */
-    max?: number;
     /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
     reposition?: boolean;
+    onClickOutside?: (e: MouseEvent) => void;
+    /** Popover arrow color.  Defaults to theme.colors.border. */
+    arrorColor?: string;
+    /** Popover border.  Defaults to theme.controls.border. */
+    border?: string;
+    /** Popover background.  Defaults to  theme.colors.bg. */
+    backgroundColor?: string;
+    /** Order of positions as the Popover colides with the window edge. */
+    positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
 }
-declare const DatePicker: (p: DatePickerProps) => JSX.Element;
+declare const Popover: (p: PopoverProps) => JSX.Element;
 
-interface TabHeaderTabProps {
-    name: string;
+interface ProgressBarProps {
+    pct: number;
+    round?: boolean;
+    showPct?: boolean;
+    className?: string;
 }
-interface TabHeaderProps {
-    tabs: TabHeaderTabProps[];
+declare const ProgressBar: (props: {
+    pct: number;
+    round?: boolean;
+    showPct?: boolean;
+    className?: string;
+}) => JSX.Element;
+
+interface SearchBoxProps {
+    value: string | undefined;
+    onChange: (value: string | undefined | number) => void;
     id?: string;
+    placeholder?: string;
+    round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
-    /** Defaults to 10rem. */
-    maxTabWidth?: string;
-    onTabChanged?: (tabIndex: number) => void;
-    /** Defaults to 'tab'. */
-    variant?: 'tab' | 'button';
+    className?: string;
+    onSubmit?: () => Promise<void>;
+    /** Defaults to 250ms */
+    debounceMs?: number;
 }
-declare const TabHeader: (p: TabHeaderProps) => JSX.Element;
+declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
+
+declare type Alignment = 'left' | 'right' | 'center';
 
 declare const GlobalStyles: () => null;
 
+/** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
+declare const mergeClassNames: (...classes: (string | boolean | undefined)[]) => string | undefined;
+declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+
 interface MackinTheme {
     colors: {
         primary: string;
@@ -702,6 +780,7 @@ interface MackinTheme {
         fontSize: string;
         borderWidth: string;
         border: string;
+        borderRadius: string;
         height: string;
         heightSmall: string;
         boxShadow: string;
@@ -712,6 +791,7 @@ interface MackinTheme {
         focusOutlineShadow: string;
         focusOutlineRequiredShadow: string;
         roundRadius: string;
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
         roundedRadius: string;
         disabledOpacity: string;
         formButtonMinWidth: string;
@@ -742,129 +822,15 @@ interface MackinTheme {
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
 declare const defaultTheme: MackinTheme;
 
-/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
-declare const useThemeSafely: () => MackinTheme;
-
 declare const ThemeProvider: <T extends MackinTheme>(p: {
     children?: ReactNode;
     theme: T;
 }) => JSX.Element;
 
-declare const TabLocker: (props: {
-    disabled?: boolean;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-}) => JSX.Element;
-
-interface FileUploaderProps {
-    onUpload: (files: FileList) => Promise<void>;
-    /** Defaults to 'Upload'. */
-    buttonText?: string;
-    /** Defauts to 'Upload successful'. */
-    successMessage?: string | JSX.Element;
-    /** Defaults to 'Upload failed.' */
-    failureMessage?: string | JSX.Element;
-    /** Defaults to 10rem. */
-    buttonWidth?: string;
-    /** Defaults to 'primary'. */
-    buttonVariant?: ButtonVariant;
-    maxBytes?: number;
-    multiple?: boolean;
-    accept?: string;
-    /** Defaults to 'Click or drag and drop files.'*/
-    instructionMessage?: string;
-    /** For additional info below the instructionMessage. */
-    infoMessage?: string | JSX.Element;
-}
-declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
-
-interface CopyButtonProps {
-    /** HTML selector of the target input to copy from. */
-    selector: string;
-    title?: string;
-}
-declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
-
-interface PopoverProps {
-    isOpen: boolean;
-    /** The content inside the popover. */
-    content: JSX.Element;
-    /** The element controlling the state of the popover. */
-    parent: JSX.Element;
-    id?: string;
-    /** Whether to move the popover on collision with the parent's bounds.  Default is true. */
-    reposition?: boolean;
-    onClickOutside?: (e: MouseEvent) => void;
-    /** Popover arrow color.  Defaults to theme.colors.border. */
-    arrorColor?: string;
-    /** Popover border.  Defaults to theme.controls.border. */
-    border?: string;
-    /** Popover background.  Defaults to  theme.colors.bg. */
-    backgroundColor?: string;
-    /** Order of positions as the Popover colides with the window edge. */
-    positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
-}
-declare const Popover: (p: PopoverProps) => JSX.Element;
-
-interface TogglePasswordInputProps extends Omit<InputProps, 'type' | 'rightControl'> {
-}
-declare const TogglePasswordInput: (p: TogglePasswordInputProps) => JSX.Element;
-
-declare class PagedResult<T> {
-    constructor(items?: T[], total?: number, page?: number, limit?: number);
-    static fromDto<T>(dto: {
-        [key: string]: any;
-    }): PagedResult<T>;
-    total: number;
-    /** The zero-based page index. */
-    page: number;
-    limit: number;
-    items: T[];
-    /** Helper for items.length */
-    get length(): number;
-    get hasItems(): boolean;
-    get previousPage(): number;
-    get hasPrevious(): boolean;
-    get nextPage(): number;
-    get hasNext(): boolean;
-    get lastPage(): number;
-    get totalPages(): number;
-    get minPageItemIndex(): number;
-    get maxPageItemIndex(): number;
-    /** Returns the first item on the current page. */
-    get firstPageItem(): T;
-    /** Returns the last item on the current page */
-    get lastPageItem(): T;
-    getPageRelativeItemIndex(item: T): number;
-    getResultRelativeItemIndex(item: T): number | undefined;
-    getPreviousItem(fromItem: T): T | undefined;
-    getNextItem(fromItem: T): T | undefined;
-    getPagingRange(radius: number): number[];
-    toJSON(): {
-        [key: string]: any;
-    };
-    clone(newItems?: T[]): PagedResult<T>;
-}
+declare const useMediaQuery: (query: string) => boolean;
 
-interface Props<T> extends PagerStyleProps {
-    result: PagedResult<T>;
-    onPage: (direction: 1 | -1) => void;
-    limitOptions?: number[];
-    sort?: string | number;
-    sortOptions?: {
-        id: string | number;
-        name?: string;
-    }[];
-    /** Defaults to 'Limit' */
-    limitText?: string;
-    /** Defaults to 'Sort' */
-    sortText?: string;
-    onLimit?: (limit: number) => void;
-    onSort?: (sort: string | number) => void;
-    /** Shows 'Page X of Y'. */
-    showPageText?: boolean;
-}
-declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
+/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
+declare const useThemeSafely: () => MackinTheme;
 
 declare type SliderValue = number | [number, number];
 interface SliderProps<T extends SliderValue> {
@@ -885,59 +851,145 @@ interface SliderProps<T extends SliderValue> {
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 
-/** @deprecated Use Backdrop2 going forward. */
-declare const Backdrop$1: (props: {
-    show: boolean;
-    onClick?: () => void;
-    transparent?: boolean;
-    /** If true, the backdrop will hide on larger screens. */
-    responsive?: boolean;
-    /** If true, the backdrop will hide on smaller screens. */
-    reverseResponsive?: boolean;
-    children?: React.ReactNode;
+interface TabHeaderTabProps {
+    name: string;
+}
+interface TabHeaderProps {
+    tabs: TabHeaderTabProps[];
+    id?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
+    rounded?: boolean;
+    /** Defaults to 10rem. */
+    maxTabWidth?: string;
+    onTabChanged?: (tabIndex: number) => void;
+    /** Defaults to 'tab'. */
+    variant?: 'tab' | 'button';
+}
+declare const TabHeader: (p: TabHeaderProps) => JSX.Element;
+
+declare const Table: (props: {
+    caption?: string | JSX.Element;
+    children?: any;
+    noCellBorder?: boolean;
     className?: string;
-    /** If true, will not prevent scroll when shown. */
-    allowScroll?: boolean;
-    /** Fade in time.  Defaults to 250ms. */
-    showTimeMs?: number;
+    /** Colors alternate rows. */
+    altRows?: boolean;
+}) => JSX.Element;
+declare const Tr: (props: {
+    className?: string;
+    children?: any;
+}) => JSX.Element;
+declare const Th: (props: {
+    children?: any;
+    align?: Alignment;
+    width?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}) => JSX.Element;
+declare const Td: (props: {
+    children?: any;
+    align?: Alignment;
+    style?: React.CSSProperties;
+    colSpan?: number;
 }) => JSX.Element;
 
-declare const Backdrop: (p: {
-    children: React__default.ReactNode;
-    /** Fade in time.  Defaults to 250ms. */
-    showTimeMs?: number;
-    debug?: boolean;
+declare const TdCurrency: (props: {
+    value: number;
+    cents?: boolean;
 }) => JSX.Element;
 
-declare const useMediaQuery: (query: string) => boolean;
+declare const TdNumber: (props: {
+    value: number;
+}) => JSX.Element;
 
-interface AutoCompleteItem {
-    id: string | number;
-    name: string;
+declare const ThSort: (props: {
+    text: string | JSX.Element;
+    onClick: () => void;
+    align?: Alignment;
+    direction?: 'asc' | 'desc';
+    style?: React.CSSProperties;
+    width?: string;
+    rightContent?: JSX.Element;
+}) => JSX.Element;
+
+declare const TabLocker: (props: {
+    disabled?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}) => JSX.Element;
+
+interface TextProps {
+    children: any;
+    /** Defaults to 'p'. */
+    tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
+    align?: Alignment;
+    bold?: boolean;
+    italics?: boolean;
+    className?: string;
+    /** You will need to set a width or max-width on the element for this to work. */
+    ellipsis?: boolean;
+    style?: React.CSSProperties;
+    smaller?: boolean;
+    larger?: boolean;
+    spacedOut?: boolean;
+    lineClamp?: number;
+    /** Will remove all margin/padding from specified tag */
+    noPad?: boolean;
+    leftPad?: string;
 }
-declare type AutocompleteValue = string | AutoCompleteItem;
-interface AutocompleteProps {
-    value: AutocompleteValue | undefined;
-    round?: boolean;
-    rounded?: boolean;
-    rightControl?: JSX.Element;
-    placeholder?: string;
-    id?: string;
+declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
+    style: React.CSSProperties;
+    className: string;
+}, HTMLElement>;
+
+declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+interface ToggleButtonProps {
+    checked: boolean;
+    checkedText: string;
+    uncheckedText: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    className?: string;
+    checkedClassName?: string;
     disabled?: boolean;
+    /** The minimum button size will be set to the themes' formButtonMinWidth. */
+    enforceMinWidth?: boolean;
+    checkedIcon?: JSX.Element;
+    uncheckedIcon?: JSX.Element;
+    variant?: ToggleButtonVariant;
+    checkedVariant?: ToggleButtonVariant;
+    style?: React.CSSProperties;
+    checkedStyle?: React.CSSProperties;
+}
+declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
+
+interface ToggleButtonGroupProps {
+    value: string | number;
+    options: {
+        id: string | number;
+        name: string | JSX.Element;
+        rightIcon?: JSX.Element;
+        activeClass?: string;
+    }[];
+    onChange: (value: string | number) => void;
     className?: string;
-    inputClassName?: string;
-    /** If not set, defaults to 100 */
-    maxLength?: number;
-    required?: boolean;
-    /** Limits what will be show in the autocomplete options. Default is 7. */
-    maxShownValues?: number;
-    /** The minimum characters before 'getOptions' is called.  No default. */
-    minChars?: number;
-    onChange: (value: string) => void;
-    getOptions: (value: string) => Promise<AutocompleteValue[]>;
-    onPick: (value: AutocompleteValue) => void;
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    /** The minimum button size will be set to the themes' formButtonMinWidth. */
+    enforceMinWidth?: boolean;
+    round?: boolean;
+    small?: boolean;
+    width?: string;
 }
-declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
+declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
+
+interface TogglePasswordInputProps extends Omit<InputProps, 'type' | 'rightControl'> {
+}
+declare const TogglePasswordInput: (p: TogglePasswordInputProps) => JSX.Element;
+
+declare const WaitingIndicator: (p: {
+    show: boolean;
+    minShowTimeMs?: number;
+    id?: string;
+    debug?: boolean;
+}) => JSX.Element;
 
-export { Alignment, Autocomplete, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };