@mackin.com/styleguide 7.6.0 → 8.0.0-beta.1

package/index.d.ts

@@ -3,169 +3,58 @@ 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 AutoCompleteItem {
+    id: string | number;
+    name: string;
 }
-interface PagerOptions<TItem> {
-    /** Defaults to 10. */
-    limit?: number;
-    /** Defaults to [10] */
-    limitOptions?: number[];
-    sort?: string;
-    sortOptions?: PagerSortOption<TItem>[];
-    previous?: ItemPager<TItem>;
+declare type AutocompleteValue = string | AutoCompleteItem;
+interface AutocompleteProps {
+    value: AutocompleteValue | undefined;
+    round?: boolean;
+    rightControl?: JSX.Element;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    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;
+    inputAriaAttributes?: React.AriaAttributes;
+    onChange: (value: string) => void;
+    getOptions: (value: string) => Promise<AutocompleteValue[]>;
+    onPick: (value: AutocompleteValue) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-/** 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;
-}
+declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
 
-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;
+/** @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;
-    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;
-}
-declare const Pager: (props: PagerProps) => JSX.Element;
+    /** If true, will not prevent scroll when shown. */
+    allowScroll?: boolean;
+    /** Fade in time.  Defaults to 250ms. */
+    showTimeMs?: number;
+}) => 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;
+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 {
@@ -183,8 +72,6 @@ interface ButtonProps {
     block?: boolean;
     /** As round as can be. */
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: boolean;
     className?: string;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
@@ -203,16 +90,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'. */
@@ -235,17 +148,71 @@ 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;
-    close: () => void;
-}) => JSX.Element;
-
-declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Defaults to 250ms */
+    debounceMs?: number;
+    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;
     /** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called.  Defaults to true. */
@@ -333,6 +300,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 {
@@ -340,7 +325,6 @@ interface InputProps {
     name?: string;
     style?: React.CSSProperties;
     value?: InputValue;
-    rounded?: boolean;
     placeholder?: string;
     id?: string;
     disabled?: boolean;
@@ -353,8 +337,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;
@@ -374,8 +359,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;
@@ -445,6 +454,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;
@@ -458,8 +468,6 @@ interface OmniLinkProps {
     title?: string;
     /** Only for button variants. */
     round?: boolean;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually.  Only for button variants. */
-    rounded?: boolean;
     /** Only for button variants. */
     small?: boolean;
     /** Overrides the default color (theme.colors.link) for non-button variants. To be used under exceptional circumstances. To change all link colors, override theme.colors.link directly. */
@@ -467,196 +475,240 @@ 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;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    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;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    rounded?: 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;
     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;
+}
+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;
-    /** @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;
+    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;
-    /** @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';
+    placeholder?: string;
+    round?: boolean;
+    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;
 
+declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+
 interface MackinTheme {
     colors: {
         primary: string;
@@ -720,8 +772,6 @@ 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;
         gap: string;
@@ -751,129 +801,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> {
@@ -894,60 +830,143 @@ 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;
+    /** 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;
-    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-    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, AutocompleteValue, 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, useMediaQuery, useThemeSafely };