@wavv/ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2660 @@
+/// <reference types="react" />
+import * as react from 'react';
+import { ElementType, FocusEvent, ChangeEvent, HTMLProps, ReactElement, MouseEvent as MouseEvent$1, ReactNode, KeyboardEvent, CSSProperties, MutableRefObject, RefObject, FormEvent } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import { StyledComponent } from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+import { Language } from 'prism-react-renderer';
+
+declare const colors: {
+    logo1: string;
+    logo2: string;
+    logo3: string;
+    brand: string;
+    brandShade1: string;
+    brandShade2: string;
+    brandDark: string;
+    brandDarkShade1: string;
+    brandTint0: string;
+    brandTint1: string;
+    brandTint2: string;
+    brandTint3: string;
+    brandTint4: string;
+    brandBackground0: string;
+    brandBackground1: string;
+    brandBackground2: string;
+    brandBackground3: string;
+    brandBackground4: string;
+    brandBackground5: string;
+    error: string;
+    errorShade1: string;
+    errorShade2: string;
+    errorTint0: string;
+    errorTint1: string;
+    errorTint2: string;
+    warning: string;
+    warningShade1: string;
+    warningShade2: string;
+    warningTint0: string;
+    warningTint1: string;
+    warningTint2: string;
+    alert: string;
+    alertShade1: string;
+    alertShade2: string;
+    alertTint0: string;
+    alertTint1: string;
+    alertTint2: string;
+    success: string;
+    successShade1: string;
+    successShade2: string;
+    successTint0: string;
+    successTint1: string;
+    successTint2: string;
+    grayscale0: string;
+    grayscale1: string;
+    grayscale2: string;
+    grayscale3: string;
+    grayscale4: string;
+    grayscale5: string;
+    grayscale6: string;
+    grayscale7: string;
+    grayscale8: string;
+    grayscale9: string;
+    grayscale10: string;
+    contrast0: string;
+    contrast1: string;
+    contrast2: string;
+    contrast3: string;
+    contrast4: string;
+    contrast5: string;
+    contrast6: string;
+    contrast7: string;
+    contrast8: string;
+    contrast9: string;
+    contrast10: string;
+};
+
+interface IColors {
+    /** #0074F4 */
+    logo1: string;
+    /** #00A9E2 */
+    logo2: string;
+    /** #67C728 */
+    logo3: string;
+    /** #0074F4 */
+    brand: string;
+    /** #0068DC */
+    brandShade1: string;
+    /** #005DC3 */
+    brandShade2: string;
+    /** #4C9EF7 */
+    brandDark: string;
+    /** #5EA8F8 */
+    brandDarkShade1: string;
+    /** 5% of #0074F4 */
+    brandTint0: string;
+    /** 10% of #0074F4 */
+    brandTint1: string;
+    /** 20% of #0074F4 */
+    brandTint2: string;
+    /** 30% of #0074F4 */
+    brandTint3: string;
+    /** 40% of #0074F4 */
+    brandTint4: string;
+    /** #001828 */
+    brandBackground0: string;
+    /** #0D2433 */
+    brandBackground1: string;
+    /** #192F3D */
+    brandBackground2: string;
+    /** #334653 */
+    brandBackground3: string;
+    /** #475964 */
+    brandBackground4: string;
+    /** #596A74 */
+    brandBackground5: string;
+    /** #FF6068 */
+    error: string;
+    /** #E6565E */
+    errorShade1: string;
+    /** #CC4D53 */
+    errorShade2: string;
+    /** 5% of #FF6068 */
+    errorTint0: string;
+    /** 10% of #FF6068 */
+    errorTint1: string;
+    /** 20% of #FF6068 */
+    errorTint2: string;
+    /** #FF9900 */
+    warning: string;
+    /** #E68A00 */
+    warningShade1: string;
+    /** #CC7A00 */
+    warningShade2: string;
+    /** 5% of #FF9900 */
+    warningTint0: string;
+    /** 10% of #FF9900 */
+    warningTint1: string;
+    /** 20% of #FF9900 */
+    warningTint2: string;
+    /** #F0BB00 */
+    alert: string;
+    /** #E4B200 */
+    alertShade1: string;
+    /** #C09600 */
+    alertShade2: string;
+    /** 5% of #F0BB00 */
+    alertTint0: string;
+    /** 10% of #F0BB00 */
+    alertTint1: string;
+    /** 20% of #F0BB00 */
+    alertTint2: string;
+    /** #00C242 */
+    success: string;
+    /** #00AF3B */
+    successShade1: string;
+    /** #009B35 */
+    successShade2: string;
+    /** 5% of #00C242 */
+    successTint0: string;
+    /** 10% of #00C242 */
+    successTint1: string;
+    /** 20% of #00C242 */
+    successTint2: string;
+    /** 5% of #001D32 */
+    grayscale0: string;
+    /** 10% of #001D32 */
+    grayscale1: string;
+    /** 20% of #001D32 */
+    grayscale2: string;
+    /** 30% of #001D32 */
+    grayscale3: string;
+    /** 40% of #001D32 */
+    grayscale4: string;
+    /** 50% of #001D32 */
+    grayscale5: string;
+    /** 60% of #001D32 */
+    grayscale6: string;
+    /** 70% of #001D32 */
+    grayscale7: string;
+    /** 80% of #001D32 */
+    grayscale8: string;
+    /** 90% of #001D32 */
+    grayscale9: string;
+    /** #001D32 */
+    grayscale10: string;
+    /** 5% of #FFFFFF */
+    contrast0: string;
+    /** 10% of #FFFFFF */
+    contrast1: string;
+    /** 20% of #FFFFFF */
+    contrast2: string;
+    /** 30% of #FFFFFF */
+    contrast3: string;
+    /** 40% of #FFFFFF */
+    contrast4: string;
+    /** 50% of #FFFFFF */
+    contrast5: string;
+    /** 60% of #FFFFFF */
+    contrast6: string;
+    /** 70% of #FFFFFF */
+    contrast7: string;
+    /** 80% of #FFFFFF */
+    contrast8: string;
+    /** 90% of #FFFFFF */
+    contrast9: string;
+    /** #FFFFFF */
+    contrast10: string;
+}
+declare type ColorNames = keyof typeof colors;
+
+declare type ButtonSize = {
+    height: number;
+    iconSize: number;
+    font: number;
+    padding: number;
+    iconOnlyPadding: number;
+};
+declare type LinkColors = {
+    secondaryColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    positiveColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    negativeColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    cautionColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+};
+declare type ButtonState = {
+    color: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineBackground: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    divider: string;
+};
+interface ITheme {
+    name: 'light' | 'dark';
+    accent: string;
+    accentShade: string;
+    background0: string;
+    background1: string;
+    background2: string;
+    background3: string;
+    background4: string;
+    background5: string;
+    /** 5% opacity */
+    scale0: string;
+    /** 10% opacity */
+    scale1: string;
+    /** 20% opacity */
+    scale2: string;
+    /** 30% opacity */
+    scale3: string;
+    /** 40% opacity */
+    scale4: string;
+    /** 50% opacity */
+    scale5: string;
+    /** 60% opacity */
+    scale6: string;
+    /** 70% opacity */
+    scale7: string;
+    /** 80% opacity */
+    scale8: string;
+    /** 90% opacity */
+    scale9: string;
+    /** 100% opacity */
+    scale10: string;
+    button: {
+        small: ButtonSize;
+        medium: ButtonSize;
+        large: ButtonSize;
+        primary: ButtonState;
+        secondary: ButtonState;
+        negative: ButtonState;
+        positive: ButtonState;
+        caution: ButtonState;
+        subtle: ButtonState & LinkColors;
+        link: ButtonState & LinkColors;
+        disabled: ButtonState;
+        color: {
+            default: string;
+        };
+    };
+    calendar: {
+        background: {
+            container: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+        };
+        color: {
+            disabled: string;
+            default: string;
+            active: string;
+            current: string;
+            outside: string;
+            weekday: string;
+            monthYear: string;
+            iconDefault: string;
+            iconHover: string;
+        };
+    };
+    color: IColors;
+    defaultBorder: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.05)' */
+    elevation0: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.1)' */
+    elevation1: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.15)' */
+    elevation2: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.2)' */
+    elevation3: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.25)' */
+    elevation4: string;
+    size: {
+        /** 4px */
+        xs: number;
+        /** 8px */
+        sm: number;
+        /** 16px */
+        md: number;
+        /** 24px */
+        lg: number;
+    };
+    font: {
+        weight: {
+            /** 400 */
+            default: number;
+            /** 500 */
+            medium: number;
+            /** 600 */
+            semiBold: number;
+            /** 700 */
+            bold: number;
+        };
+        size: {
+            /** 10px */
+            xs: number;
+            /** 12px */
+            sm: number;
+            /** 14px */
+            md: number;
+            /** 16px */
+            lg: number;
+            /** 18px */
+            xl: number;
+        };
+        family: {
+            /** "'Roboto', sans-serif" */
+            default: string;
+            /** "'Roboto', sans-serif" */
+            medium: string;
+            /** "'Roboto', sans-serif" */
+            light: string;
+        };
+    };
+    formControl: {
+        color: {
+            default: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+            disabled: string;
+        };
+    };
+    input: {
+        borderRadius: number;
+        background: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+        };
+        color: {
+            default: string;
+            disabled: string;
+            placeholder: string;
+            description: string;
+            descriptionError: string;
+        };
+        borderColor: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+            error: string;
+        };
+        labelColor: {
+            default: string;
+            hover: string;
+            filled: string;
+            focused: string;
+            disabled: string;
+        };
+    };
+    menu: {
+        background: string;
+    };
+    menuItem: {
+        borderColor: string;
+        background: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+    };
+    modal: {
+        background: string;
+        color: {
+            header: string;
+            body: string;
+        };
+    };
+    options: {
+        background: string;
+    };
+    optionItem: {
+        background: {
+            active: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            inactive: string;
+            accent: string;
+        };
+    };
+    table: {
+        color: {
+            header: string;
+            body: string;
+        };
+        borderColor: string;
+    };
+    toggle: {
+        slider: string;
+    };
+    tooltip: {
+        background: string;
+        color: {
+            default: string;
+            subtext: string;
+        };
+    };
+}
+declare type ThemeProp = {
+    theme?: ITheme;
+};
+
+declare type Theme = {
+    light: ITheme;
+    dark: ITheme;
+};
+declare const theme: Theme;
+
+declare type Margin = {
+    margin?: number | string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginRight?: number | string;
+    marginLeft?: number | string;
+};
+declare type Padding = {
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
+    paddingRight?: number | string;
+    paddingLeft?: number | string;
+};
+declare type Width = {
+    width?: number | string;
+};
+declare type Height = {
+    height?: number | string;
+};
+declare type WidthHeight = Width & Height;
+declare type MarginPadding = Margin & Padding;
+declare type FlexPosition = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+declare type As = {
+    as?: ElementType<unknown>;
+};
+declare type InputFocusEvent = FocusEvent<HTMLInputElement>;
+declare type MergeField$1 = {
+    id: string;
+    label: string;
+    value?: string;
+};
+declare type InputRef = {
+    focus: () => void;
+    blur: () => void;
+    hasFocus: boolean;
+};
+declare type AudioRef = {
+    play?: () => void;
+    pause?: () => void;
+    stop?: () => void;
+};
+declare type DraftEditorRef = {
+    insertField: (field: MergeField$1) => void;
+    focusAtEnd: () => void;
+};
+
+declare type AudioProps = {
+    /** The filepath of the audio source */
+    src: string;
+    /** The title of the audio source to be displayed */
+    title?: string;
+    /** Sets the position of the display info in relation to the duration slider */
+    infoPosition?: 'top' | 'bottom';
+    /** Center aligns the slider and info elements with the button */
+    centerAlignContent?: boolean;
+    /** Hides the slider control while not playing */
+    hideSliderOnStop?: boolean;
+    /** Hides the time display while not playing */
+    hideTimeOnStop?: boolean;
+    /** Reduces the size of the Audio play button */
+    small?: boolean;
+    /** Hides the duration slider */
+    collapsed?: boolean;
+    /** Font size of the audio title */
+    fontSizeTitle?: number | string;
+    /** Font size of the audio time */
+    fontSizeTime?: number | string;
+    onPlay?: (event: ChangeEvent<HTMLAudioElement>) => void;
+    onPause?: (event: ChangeEvent<HTMLAudioElement>) => void;
+    onStop?: (event: ChangeEvent<HTMLAudioElement>) => void;
+} & Margin & Width & As & HTMLProps<HTMLDivElement>;
+declare const Audio: react.ForwardRefExoticComponent<Pick<AudioProps, "small" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "onChange" | "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" | "key" | keyof Margin | "infoPosition" | "centerAlignContent" | "collapsed" | "hideSliderOnStop" | "hideTimeOnStop" | "fontSizeTitle" | "fontSizeTime" | "onStop"> & react.RefAttributes<AudioRef>>;
+
+declare type OptionItem = {
+    id: number | string;
+    label: string;
+    header?: string;
+    body?: string;
+    leftElement?: ReactElement;
+    rightElement?: ReactElement;
+    onClick?: (event?: MouseEvent$1) => void;
+    value?: unknown;
+    [key: string]: unknown;
+};
+declare type DropdownItemProps = {
+    setValue?: (v: OptionItem) => void;
+    close?: () => void;
+    children: ReactNode;
+    /** Sets the value of the option that will be returned in the object */
+    value?: number | string;
+    /** Sets the lable property of the object to be returned. Only required if the content of the Item is anything other than a string (icons, other elements) */
+    displayText?: string;
+    /** The flex positioning of the Item contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+    /** Callback function to override the default onChange function of Dropdown. */
+    onClick?: (event: MouseEvent$1) => void;
+    /** The id of the Item element */
+    id: number | string;
+};
+
+declare function ActivityHistory(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Add(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function AddCircle(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function AddCircleOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function AddPerson(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ArrowDown(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ArrowLeft(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ArrowRight(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ArrowUp(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Attachment(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Calendar$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Camera(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Card(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CaretDown(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CaretUp(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CheckCircle(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CheckCircleOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Checkbox$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CheckboxOff(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CheckboxPartial(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ChevronDown(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ChevronLeft(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ChevronRight(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ChevronUp(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Clapperboard(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ClapperboardOpen(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Close(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CloseCircle(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function CloseCircleOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Copy(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Devices(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Dialpad(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function DoubleArrowLeft(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function DoubleArrowRight(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Download(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Edit(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Emoji(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function EyeOff(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function EyeOn(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Facebook(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function DonerMenu(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Flask(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Group(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Heart(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function HeartOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Help(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Hourglass(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Info(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Instagram(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function KebabMenu(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Link(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Linkedin(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Loading(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Maximize(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Menu$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function MergeField(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Message$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Mic(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function MicOff(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Minimize(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Mobile(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function NotAllowed(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Open(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PauseOutline$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PauseOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Person(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Phone$1(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PhoneBlocked(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PhoneEnd(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PhoneHistory(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PhoneTalk(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Play(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function PlayOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ProfileUser(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function RadioButton(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function RadioButtonOff(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Record(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Refresh(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Rocket(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Schedule(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ScheduleOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Search(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Settings(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Sort(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Spotify(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Star(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function StarOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Stop(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function StopOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Template(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ToggleOff(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function ToggleOn(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Trash(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Twitter(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Upload(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Video(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Voicemail(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function VolOn(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Warning(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function WarningCircleOutline(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare function Youtube(props: react.SVGProps<SVGSVGElement>): JSX.Element;
+
+declare const icons: {
+    'activity-history': typeof ActivityHistory;
+    add: typeof Add;
+    'add-circle': typeof AddCircle;
+    'add-circle-outline': typeof AddCircleOutline;
+    'add-person': typeof AddPerson;
+    'arrow-down': typeof ArrowDown;
+    'arrow-left': typeof ArrowLeft;
+    'arrow-right': typeof ArrowRight;
+    'arrow-up': typeof ArrowUp;
+    attachment: typeof Attachment;
+    calendar: typeof Calendar$1;
+    camera: typeof Camera;
+    card: typeof Card;
+    'caret-down': typeof CaretDown;
+    'caret-up': typeof CaretUp;
+    'check-circle': typeof CheckCircle;
+    'check-circle-outline': typeof CheckCircleOutline;
+    checkbox: typeof Checkbox$1;
+    'checkbox-off': typeof CheckboxOff;
+    'checkbox-partial': typeof CheckboxPartial;
+    'chevron-down': typeof ChevronDown;
+    'chevron-left': typeof ChevronLeft;
+    'chevron-right': typeof ChevronRight;
+    'chevron-up': typeof ChevronUp;
+    clapperboard: typeof Clapperboard;
+    'clapperboard-open': typeof ClapperboardOpen;
+    close: typeof Close;
+    'close-circle': typeof CloseCircle;
+    'close-circle-outline': typeof CloseCircleOutline;
+    copy: typeof Copy;
+    devices: typeof Devices;
+    dialpad: typeof Dialpad;
+    'double-arrow-left': typeof DoubleArrowLeft;
+    'double-arrow-right': typeof DoubleArrowRight;
+    download: typeof Download;
+    edit: typeof Edit;
+    emoji: typeof Emoji;
+    'eye-off': typeof EyeOff;
+    'eye-on': typeof EyeOn;
+    facebook: typeof Facebook;
+    filter: typeof DonerMenu;
+    flask: typeof Flask;
+    group: typeof Group;
+    heart: typeof Heart;
+    'heart-outline': typeof HeartOutline;
+    help: typeof Help;
+    hourglass: typeof Hourglass;
+    info: typeof Info;
+    instagram: typeof Instagram;
+    'kebab-menu': typeof KebabMenu;
+    link: typeof Link;
+    linkedin: typeof Linkedin;
+    loading: typeof Loading;
+    maximize: typeof Maximize;
+    menu: typeof Menu$1;
+    'merge-field': typeof MergeField;
+    message: typeof Message$1;
+    mic: typeof Mic;
+    'mic-off': typeof MicOff;
+    minimize: typeof Minimize;
+    mobile: typeof Mobile;
+    'not-allowed': typeof NotAllowed;
+    open: typeof Open;
+    pause: typeof PauseOutline$1;
+    'pause-outline': typeof PauseOutline;
+    person: typeof Person;
+    phone: typeof Phone$1;
+    'phone-blocked': typeof PhoneBlocked;
+    'phone-end': typeof PhoneEnd;
+    'phone-history': typeof PhoneHistory;
+    'phone-talk': typeof PhoneTalk;
+    play: typeof Play;
+    'play-outline': typeof PlayOutline;
+    'profile-user': typeof ProfileUser;
+    'radio-button': typeof RadioButton;
+    'radio-button-off': typeof RadioButtonOff;
+    record: typeof Record;
+    refresh: typeof Refresh;
+    rocket: typeof Rocket;
+    schedule: typeof Schedule;
+    'schedule-outline': typeof ScheduleOutline;
+    search: typeof Search;
+    settings: typeof Settings;
+    share: (props: react.SVGProps<SVGSVGElement>) => JSX.Element;
+    sort: typeof Sort;
+    spotify: typeof Spotify;
+    star: typeof Star;
+    'star-outline': typeof StarOutline;
+    stop: typeof Stop;
+    'stop-outline': typeof StopOutline;
+    template: typeof Template;
+    'toggle-off': typeof ToggleOff;
+    'toggle-on': typeof ToggleOn;
+    trash: typeof Trash;
+    twitter: typeof Twitter;
+    upload: typeof Upload;
+    video: typeof Video;
+    voicemail: typeof Voicemail;
+    'vol-on': typeof VolOn;
+    warning: typeof Warning;
+    'warning-circle-outline': typeof WarningCircleOutline;
+    youtube: typeof Youtube;
+};
+declare type IconNames = keyof typeof icons;
+
+declare type ButtonAttributes = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'size'> & {
+    type?: 'button' | 'reset' | 'submit';
+} & As;
+declare type ButtonBaseProps = {
+    children?: ReactNode;
+    joined?: 'left' | 'right' | 'middle';
+    preventPointerEvents?: boolean;
+    /** Gives the button a semi-transparent background with a solid border */
+    outline?: boolean;
+    /** Prevents the button from being clicked */
+    disabled?: boolean;
+    /** Adds an icon for the specific icon name to the button */
+    icon?: IconNames;
+    /** Positions the icon to the left or right of the button text */
+    iconPosition?: 'left' | 'right';
+    /** Defines the size of the button */
+    size?: 'small' | 'medium' | 'large';
+    /** Reduces the size of the button */
+    small?: boolean;
+    /** Increases the size of the button */
+    large?: boolean;
+    /** Adds a loading icon over the top of the button contents */
+    isLoading?: boolean;
+    /** Removes the text on a button if the button has an icon */
+    collapse?: boolean;
+    /** The function to be called when the button is clicked */
+    onClick?: (event: MouseEvent$1) => void;
+    /** Sets the text backgroundColor of the button */
+    backgroundColor?: string;
+    /** Sets the text color of the button */
+    color?: string;
+} & ButtonAttributes;
+declare type ButtonStyleProps = {
+    /** Displays a button with secondary colors */
+    secondary?: boolean;
+    /** Displays a red button */
+    negative?: boolean;
+    /** Displays a green button */
+    positive?: boolean;
+    /** Displays a yellow button */
+    caution?: boolean;
+    /** Displays a button with a background on hover or active */
+    subtle?: boolean;
+    /** Displays a button with no background or padding */
+    link?: boolean;
+    /** Displays a fully rounded button with a fixed width and height */
+    circle?: boolean;
+};
+declare type Primary = {
+    /** Displays a button with secondary colors */
+    secondary?: never;
+    /** Displays a red button */
+    negative?: never;
+    /** Displays a green button */
+    positive?: never;
+    /** Displays a yellow button */
+    caution?: never;
+};
+declare type Secondary = {
+    secondary?: boolean;
+    negative?: never;
+    positive?: never;
+    caution?: never;
+};
+declare type Negative = {
+    negative?: boolean;
+    secondary?: never;
+    positive?: never;
+    caution?: never;
+};
+declare type Positive = {
+    positive?: boolean;
+    negative?: never;
+    caution?: never;
+    secondary?: never;
+};
+declare type Caution = {
+    caution?: boolean;
+    positive?: never;
+    negative?: never;
+    secondary?: never;
+};
+declare type ButtonStyles = Primary | Secondary | Negative | Positive | Caution;
+declare type BasicButtonProps = ButtonBaseProps & ButtonStyleProps;
+declare type DropdownProps$1 = {
+    dropdown?: false;
+    options?: never;
+    direction?: never;
+    afterShow?: never;
+    afterHide?: never;
+} | {
+    /** Adds a dropdown button to the main button, allowing for multiple button options */
+    dropdown: true;
+    /** The dropdown options array of { id: string; label: string; action: () => void; } */
+    options: OptionItem[];
+    /** The direction the options should open in relation to the button  */
+    direction?: 'top' | 'bottom';
+    /** The function to be called when the options are opened */
+    afterShow?: () => void;
+    /** The function to be called when the options are closed */
+    afterHide?: () => void;
+};
+declare type ButtonComponentProps = {
+    /** Sets the text of the button */
+    content?: string;
+    joined?: never;
+} & BasicButtonProps & DropdownProps$1 & Margin;
+
+declare type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
+declare type TooltipProps = {
+    children?: ReactNode;
+    /** The element that will trigger the opening of the Tooltip */
+    trigger: ReactNode;
+    /** Sets the instigator of the Tooltip opening */
+    on?: 'hover' | 'click';
+    /** The text content of the Tooltip */
+    content?: string;
+    /** The style prop of the Tooltip container */
+    style?: {
+        [key: string]: string | number;
+    };
+    /** The position of the Tooltip body and arrow in relation to the trigger */
+    position?: Position;
+    /** Offsets the vertical position of the Tooltip */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Tooltip arrow */
+    offsetArrowX?: number;
+    /** Offsets the horizontal position of the Tooltip */
+    offsetX?: number;
+    /** The width of the Tooltip container */
+    containerWidth?: number | string;
+    /** The width of the Tooltip element */
+    width?: number | string;
+    /** The maxWidth of the Tooltip element */
+    maxWidth?: number | string;
+    /** The textAlignment of the Tooltip text */
+    textAlign?: 'left' | 'right' | 'center';
+    /** Prevents the Tooltip from opening */
+    disabled?: boolean;
+    /** The id of the Tooltip element */
+    id?: string;
+    /** The function called after the Tooltip opens */
+    afterShow?: () => void;
+    /** The function called after the Tooltip closes */
+    afterHide?: () => void;
+    /** The backgroundColor of the Tooltip element */
+    bgColor?: string;
+    /** The text color of the Tooltip element */
+    color?: string;
+};
+declare const Tooltip: {
+    ({ trigger, on, children, content, style, position, offsetY, offsetArrowX, offsetX, containerWidth, width, maxWidth, textAlign, disabled, id, afterShow, afterHide, bgColor, color, }: TooltipProps): JSX.Element;
+    Header: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
+/** Button Component */
+declare const Button: {
+    (props: ButtonComponentProps): JSX.Element;
+    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: {
+        children: (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<TooltipProps, string | react.JSXElementConstructor<any>>) | (react.ReactElement<BasicButtonProps | ButtonComponentProps, string | react.JSXElementConstructor<any>> | react.ReactElement<TooltipProps, string | react.JSXElementConstructor<any>>)[];
+        disabled?: boolean | undefined;
+        size?: "small" | "medium" | "large" | undefined;
+        small?: boolean | undefined;
+        large?: boolean | undefined;
+        outline?: boolean | undefined;
+        collapse?: boolean | undefined;
+    } & ButtonStyles & Margin & Width) => JSX.Element | null;
+};
+
+declare type CalendarProps = {
+    /** Optional date the initial selected calendar day should be set to. */
+    date?: Date;
+    /** The function to be called when a date is selected */
+    onChange: (date: Date) => void;
+    /** Prevents selection of dates in the past (relative to the set date or current date). */
+    preventPast?: boolean | Date;
+    /** Prevents selection of dates in the futurepast (relative to the set date or current date). */
+    preventFuture?: boolean | Date;
+    /** Removes the Calendar's boxShadow */
+    noShadow?: boolean;
+};
+declare const Calendar: ({ date, onChange, preventPast, preventFuture, noShadow }: CalendarProps) => JSX.Element;
+
+declare type CheckboxAttributes = Omit<HTMLProps<HTMLInputElement>, 'onChange'>;
+
+declare type CheckboxProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the checkbox. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the checkbox */
+    labelPosition?: 'left' | 'right';
+    /** Disables the checkbox */
+    disabled?: boolean;
+    /** Controls the checked property of the checkbox */
+    checked?: boolean;
+    /** Sets the checkbox to an indeterminate state */
+    partial?: boolean;
+    /** The function called with the checkbox value after the checkbox is changed */
+    onChange: (val: boolean) => void;
+} & Margin & As & CheckboxAttributes;
+declare const Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: CheckboxProps) => JSX.Element;
+
+declare type RestLanguage = 'rest-get' | 'rest-post' | 'rest-put' | 'rest-delete' | 'rest-options';
+declare type WithChildren = {
+    /** The string to be rendered in the code snippet */
+    children: string;
+    /** The alternative to passing the code snippet in as a child */
+    code?: never;
+};
+declare type WithCode = {
+    code: string;
+    children?: never;
+};
+declare type Children = WithChildren | WithCode;
+declare type CodeProps = {
+    /** The metadata string passed in by MDX */
+    className?: string;
+    /** The syntax language to be used for the code snippet */
+    lang?: Language | RestLanguage;
+    /** The line numbers in the code snippet that should be highlighted */
+    lineHighlights?: string;
+    /** Hides the line numbers in the code snippet */
+    noNumbers?: boolean;
+} & Children & Margin;
+declare const Code: ({ children, code, className: metaData, lang: langProp, lineHighlights: lineHighlightsProp, noNumbers: noNumbersProp, margin, marginTop, marginBottom, marginRight, marginLeft, }: CodeProps) => JSX.Element;
+
+declare const Table$1: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & ThemeProp, react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+
+declare const DraftEditor: react.ForwardRefExoticComponent<{
+    /** Controlled text value of the editor */
+    value: string;
+    /** Function called after editor change with the text value and boolean indicating missing merge fields */
+    onChange?: ((text: string, hasMissing: boolean) => void) | undefined;
+    /** Function called after the enter key is pressed */
+    onEnterKey?: ((e: KeyboardEvent) => void) | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Array of MergeFields ({ id: string, label: string, value?: string }) for the editor to use/parse */
+    mergeFields?: MergeField$1[] | undefined;
+    /** Placeholder text of editor when value is empty */
+    placeholder?: string | undefined;
+    /** Width of the editor */
+    width?: string | number | undefined;
+    /** Height of the editor */
+    height?: number | undefined;
+    /** Max Height of the editor. Editor contents will scroll after this height is reached */
+    maxHeight?: number | undefined;
+    /** Removes the border from the editor */
+    borderless?: boolean | undefined;
+    /** Removes the padding from the editor */
+    noPadding?: boolean | undefined;
+    /** Disables any editing capability of the editor */
+    readOnly?: boolean | undefined;
+    /** Displays the value of the merge field rather than the label */
+    displayMergedValues?: boolean | undefined;
+    /** Sets the text color of the editor */
+    color?: string | undefined;
+    /** Sets the overflow css value of the editor */
+    overflow?: CSSProperties['overflow'];
+    /** Truncates the editor text to the number of lines specified and adds an ellipsis textOverflow */
+    clampLines?: number | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the editor fontSize */
+    fontSize?: string | number | undefined;
+    /** Removes the border, padding, and backgroundColor from the DraftEditor */
+    textOnly?: boolean | undefined;
+} & Margin & react.RefAttributes<DraftEditorRef>>;
+
+declare type Sizes = number | 'small' | 'medium' | 'large';
+declare type DivAttributes = Omit<HTMLProps<HTMLDivElement>, 'size'>;
+declare type ConditionalProps = {
+    /** Name of the specific icon to use */
+    name: IconNames;
+    svg?: never;
+} | {
+    /** The SVG element to wrap with the Icon component */
+    svg: ReactNode | (() => JSX.Element);
+    name?: never;
+};
+declare type IconProps = {
+    /** Sets the width and height of the icon */
+    size?: Sizes;
+    /** Sets the width of the icon */
+    width?: number | string;
+    /** Sets the height of the icon */
+    height?: number | string;
+    /** Sets the color of the icon */
+    color?: string;
+    /** Sets the color of the icon when hovered */
+    hoverColor?: string;
+    /** Sets the cursor as a pointer when hovered */
+    pointer?: boolean;
+    /** Sets the color of the icon to the parent element's color */
+    inheritColor?: boolean;
+    /** Sets the style prop of the Icon wrapper element */
+    style?: {
+        [key: string]: string | number;
+    };
+} & ConditionalProps & MarginPadding & As & DivAttributes;
+declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, style, onClick, ...props }: IconProps) => JSX.Element | null;
+
+declare type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
+
+declare type OnClear = () => void;
+declare type OnChangeDefault = (event: ChangeEvent<HTMLInputElement>) => void;
+declare type OnChangePhone = (event: ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+declare type Default = {
+    /** Auto-formats the input to a US phone number */
+    phone?: never;
+    /** A callback function that is run upon changing the contents of the input */
+    onChange: OnChangeDefault;
+};
+declare type Phone = {
+    phone: true;
+    onChange: OnChangePhone;
+};
+declare type InputTypes = Default | Phone;
+declare type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & As;
+declare type InputProps = {
+    /** The id of the input element */
+    id?: string;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** Places a description message below the input */
+    description?: string;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean;
+    /** Removes the input border */
+    borderless?: boolean;
+    /** Sets the input borderRadius */
+    borderRadius?: number | string;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Sets the input fontSize */
+    fontSize?: number | string;
+    /** Width of the input */
+    width?: number | string;
+    /** Height of the input */
+    height?: number | string;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement>;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean;
+    /** Removes the padding from the input */
+    textOnly?: boolean;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean;
+    /** Callback run after onFocus event */
+    onFocus?: (event?: InputFocusEvent) => void;
+    /** Callback run after onBlur event */
+    onBlur?: (event?: InputFocusEvent) => void;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: (event?: MouseEvent$1) => void;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear;
+} & DefaultInputProps & InputTypes & Margin;
+declare const Input: react.ForwardRefExoticComponent<(Pick<{
+    /** The id of the input element */
+    id?: string | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Sets the input placeholder text */
+    placeholder?: string | undefined;
+    /** Sets the input placeholder color */
+    placeholderColor?: string | undefined;
+    /** Places a description message below the input */
+    description?: string | undefined;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean | undefined;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType | undefined;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType | undefined;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean | undefined;
+    /** Removes the input border */
+    borderless?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input borderColor */
+    borderColor?: string | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the input fontSize */
+    fontSize?: string | number | undefined;
+    /** Width of the input */
+    width?: string | number | undefined;
+    /** Height of the input */
+    height?: string | number | undefined;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement> | undefined;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean | undefined;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean | undefined;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean | undefined;
+    /** Removes the padding from the input */
+    textOnly?: boolean | undefined;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: ((event?: MouseEvent$1) => void) | undefined;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear | undefined;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof Default> | Pick<{
+    /** The id of the input element */
+    id?: string | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Sets the input placeholder text */
+    placeholder?: string | undefined;
+    /** Sets the input placeholder color */
+    placeholderColor?: string | undefined;
+    /** Places a description message below the input */
+    description?: string | undefined;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean | undefined;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType | undefined;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType | undefined;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean | undefined;
+    /** Removes the input border */
+    borderless?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input borderColor */
+    borderColor?: string | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the input fontSize */
+    fontSize?: string | number | undefined;
+    /** Width of the input */
+    width?: string | number | undefined;
+    /** Height of the input */
+    height?: string | number | undefined;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement> | undefined;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean | undefined;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean | undefined;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean | undefined;
+    /** Removes the padding from the input */
+    textOnly?: boolean | undefined;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: ((event?: MouseEvent$1) => void) | undefined;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear | undefined;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof Phone>) & react.RefAttributes<InputRef>>;
+
+declare type RestInputProps = Omit<InputProps, 'value' | 'onChange' | 'onError'>;
+declare type DropdownProps = {
+    children?: ReactNode;
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionItem | null) => void;
+    /** The function to be called when the search input is updated */
+    onTextChange?: (text: string) => void;
+    /** The value of the Dropdown */
+    value?: string | number;
+    /** The function to be called when the Dropdown is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Dropdown is closed */
+    afterHide?: () => void;
+    /** The function to be called when the Dropdown input is focused */
+    onFocus?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input is blurred */
+    onBlur?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input goes to or from an invalid state */
+    onError?: (invalid: boolean) => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionItem[];
+    /** Removes the border from the Dropdown input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the caret icon from the right side of the Dropdown */
+    hideIcon?: boolean;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean;
+    /** Resets the selected text in the dropdown after an option is selected */
+    clearOnSelect?: boolean;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Removes the border and background-color from the Dropdown input */
+    textOnly?: boolean;
+    /** Adds a label to the Dropdown input */
+    label?: string;
+    /** Sets the id of the Dropdown input or trigger */
+    id?: string;
+    /** Sets the name of the Dropdown input */
+    name?: string;
+    /** An HTML element/React component to trigger the opening and closing of the dropdown instead of an input */
+    trigger?: ReactNode;
+    /** Center the Dropdown options vertically with the trigger */
+    centerY?: boolean;
+    /** Center the Dropdown options horizontally with the trigger */
+    centerX?: boolean;
+    /** Pixel amount the Dropdown options are offset vertically from the trigger */
+    offsetY?: number;
+    /** Pixel amount the Dropdown options are offset horizontally from the trigger */
+    offsetX?: number;
+    /** The direction the options should open in relation to the trigger  */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Sets the Dropdown fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Dropdown */
+    description?: string;
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Sets the Dropdown's bottom border and description text to red */
+    invalid?: boolean;
+    /** Allows the Dropdown input to be edited */
+    search?: boolean;
+    /** Prevents the search Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** The ref of the Dropdown's input */
+    inputRef?: RefObject<InputRef>;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    optionsParent?: string;
+} & WidthHeight & Margin & RestInputProps;
+declare const Dropdown: {
+    ({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: DropdownProps): JSX.Element;
+    Item({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps): JSX.Element;
+};
+
+declare type GridProps = {
+    /** If a number, rows creates n number rows of an equal size. If a string, rows sets the gridTemplateRows property   */
+    rows?: string | number;
+    /** The amount of pixels between each row */
+    rowGap?: number;
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: string | number;
+    /** The amount of pixels between each column */
+    columnGap?: number;
+    /** Sets the gridGap property */
+    gap?: number;
+    /** Sets the gridTemplate property */
+    template?: string;
+    /** Sets the alignContent property */
+    alignContent?: string;
+    /** Sets the alignItems property */
+    alignItems?: string;
+    /** Sets the justifyContent property */
+    justifyContent?: string;
+    /** Sets the justifyItems property */
+    justifyItems?: string;
+    children?: ReactNode;
+} & WidthHeight & MarginPadding;
+declare type ItemProps = {
+    /** Sets the gridRow property */
+    row?: number;
+    /** Sets the gridRowStart property */
+    rowStart?: number;
+    /** Sets the gridRowEnd property */
+    rowEnd?: number;
+    /** Sets the gridColumn property */
+    column?: number;
+    /** Sets the gridColumnStart property */
+    columnStart?: number;
+    /** Sets the gridColumnEnd property */
+    columnEnd?: number;
+    /** Sets the gridArea property */
+    area?: number;
+    /** Sets the alignSelf property */
+    alignSelf?: string;
+    /** Sets the justifySelf property */
+    justifySelf?: string;
+    /** Sets the placeSelf property */
+    placeSelf?: string;
+    /** Sets the border property */
+    border?: string;
+} & MarginPadding;
+interface GridType extends StyledComponent<GridProps> {
+    Item?: StyledComponent<ItemProps>;
+}
+declare const Grid: GridType;
+
+declare type FormProps = {
+    children?: ReactNode;
+    /** The function to be run after the form is submitted */
+    onSubmit?: (event: FormEvent) => void;
+} & GridProps & HTMLProps<HTMLFormElement>;
+declare const Form: {
+    ({ children, rows, columns, rowGap, columnGap, onSubmit, ...rest }: FormProps): JSX.Element;
+    Group({ children, rows, columns, rowGap, columnGap, disabled, ...rest }: FormGroupProps): JSX.Element;
+    Field({ children, inline, align, disabled }: FieldProps & {
+        children?: ReactNode;
+    }): JSX.Element;
+    Input: react.ForwardRefExoticComponent<(Pick<{
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        placeholderColor?: string | undefined;
+        description?: string | undefined;
+        isLoading?: boolean | undefined;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
+        invalid?: boolean | undefined;
+        borderless?: boolean | undefined;
+        borderRadius?: string | number | undefined;
+        borderColor?: string | undefined;
+        backgroundColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        containerRef?: react.MutableRefObject<HTMLDivElement> | undefined;
+        value: string | number;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        preventFocus?: boolean | undefined;
+        pointer?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        search?: boolean | undefined;
+        onFocus?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+        onBlur?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+        onClick?: ((event?: react.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
+        onClear?: (() => void) | undefined;
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
+        phone?: undefined;
+        onChange: (event: react.ChangeEvent<HTMLInputElement>) => void;
+    } & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof {
+        phone?: undefined;
+        onChange: (event: react.ChangeEvent<HTMLInputElement>) => void;
+    }> | Pick<{
+        id?: string | undefined;
+        label?: string | undefined;
+        placeholder?: string | undefined;
+        placeholderColor?: string | undefined;
+        description?: string | undefined;
+        isLoading?: boolean | undefined;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
+        invalid?: boolean | undefined;
+        borderless?: boolean | undefined;
+        borderRadius?: string | number | undefined;
+        borderColor?: string | undefined;
+        backgroundColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        containerRef?: react.MutableRefObject<HTMLDivElement> | undefined;
+        value: string | number;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        preventFocus?: boolean | undefined;
+        pointer?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        search?: boolean | undefined;
+        onFocus?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+        onBlur?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+        onClick?: ((event?: react.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
+        onClear?: (() => void) | undefined;
+    } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
+        phone: true;
+        onChange: (event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+    } & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof {
+        phone: true;
+        onChange: (event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+    }>) & react.RefAttributes<InputRef>>;
+    Dropdown: {
+        ({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
+            children?: ReactNode;
+            onChange?: ((item: OptionItem | null) => void) | undefined;
+            onTextChange?: ((text: string) => void) | undefined;
+            value?: string | number | undefined;
+            afterShow?: (() => void) | undefined;
+            afterHide?: (() => void) | undefined;
+            onFocus?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+            onBlur?: ((event?: InputFocusEvent | undefined) => void) | undefined;
+            onError?: ((invalid: boolean) => void) | undefined;
+            placeholder?: string | undefined;
+            placeholderColor?: string | undefined;
+            options?: OptionItem[] | undefined;
+            borderless?: boolean | undefined;
+            borderColor?: string | undefined;
+            backgroundColor?: string | undefined;
+            hideIcon?: boolean | undefined;
+            isLoading?: boolean | undefined;
+            clearOnSelect?: boolean | undefined;
+            filter?: boolean | undefined;
+            textOnly?: boolean | undefined;
+            label?: string | undefined;
+            id?: string | undefined;
+            name?: string | undefined;
+            trigger?: ReactNode;
+            centerY?: boolean | undefined;
+            centerX?: boolean | undefined;
+            offsetY?: number | undefined;
+            offsetX?: number | undefined;
+            direction?: "bottom" | "left" | "right" | "top" | undefined;
+            fontSize?: string | number | undefined;
+            description?: string | undefined;
+            disabled?: boolean | undefined;
+            invalid?: boolean | undefined;
+            search?: boolean | undefined;
+            restrictInput?: boolean | ((text: string) => boolean) | undefined;
+            inputRef?: react.RefObject<InputRef> | undefined;
+            optionsParent?: string | undefined;
+        } & Width & Height & Margin & {
+            ref?: react.LegacyRef<HTMLInputElement> | undefined;
+            search?: boolean | undefined;
+            cite?: string | undefined;
+            data?: string | undefined;
+            form?: string | undefined;
+            label?: string | undefined;
+            slot?: string | undefined;
+            span?: number | undefined;
+            style?: react.CSSProperties | undefined;
+            summary?: string | undefined;
+            title?: string | undefined;
+            pattern?: string | undefined;
+            start?: number | undefined;
+            size?: number | undefined;
+            accept?: string | undefined;
+            acceptCharset?: string | undefined;
+            action?: string | undefined;
+            allowFullScreen?: boolean | undefined;
+            allowTransparency?: boolean | undefined;
+            alt?: string | undefined;
+            as?: react.ElementType<unknown> | undefined;
+            async?: boolean | undefined;
+            autoComplete?: string | undefined;
+            autoFocus?: boolean | undefined;
+            autoPlay?: boolean | undefined;
+            capture?: boolean | "user" | "environment" | undefined;
+            cellPadding?: string | number | undefined;
+            cellSpacing?: string | number | undefined;
+            charSet?: string | undefined;
+            challenge?: string | undefined;
+            checked?: boolean | undefined;
+            classID?: string | undefined;
+            cols?: number | undefined;
+            colSpan?: number | undefined;
+            content?: string | undefined;
+            controls?: boolean | undefined;
+            coords?: string | undefined;
+            crossOrigin?: string | undefined;
+            dateTime?: string | undefined;
+            default?: boolean | undefined;
+            defer?: boolean | undefined;
+            disabled?: boolean | undefined;
+            download?: any;
+            encType?: string | undefined;
+            formAction?: string | undefined;
+            formEncType?: string | undefined;
+            formMethod?: string | undefined;
+            formNoValidate?: boolean | undefined;
+            formTarget?: string | undefined;
+            frameBorder?: string | number | undefined;
+            headers?: string | undefined;
+            height?: string | number | undefined;
+            high?: number | undefined;
+            href?: string | undefined;
+            hrefLang?: string | undefined;
+            htmlFor?: string | undefined;
+            httpEquiv?: string | undefined;
+            integrity?: string | undefined;
+            keyParams?: string | undefined;
+            keyType?: string | undefined;
+            kind?: string | undefined;
+            list?: string | undefined;
+            loop?: boolean | undefined;
+            low?: number | undefined;
+            manifest?: string | undefined;
+            marginHeight?: number | undefined;
+            marginWidth?: number | undefined;
+            max?: string | number | undefined;
+            maxLength?: number | undefined;
+            media?: string | undefined;
+            mediaGroup?: string | undefined;
+            method?: string | undefined;
+            min?: string | number | undefined;
+            minLength?: number | undefined;
+            multiple?: boolean | undefined;
+            muted?: boolean | undefined;
+            name?: string | undefined;
+            nonce?: string | undefined;
+            noValidate?: boolean | undefined;
+            open?: boolean | undefined;
+            optimum?: number | undefined;
+            placeholder?: string | undefined;
+            playsInline?: boolean | undefined;
+            poster?: string | undefined;
+            preload?: string | undefined;
+            readOnly?: boolean | undefined;
+            rel?: string | undefined;
+            required?: boolean | undefined;
+            reversed?: boolean | undefined;
+            rows?: number | undefined;
+            rowSpan?: number | undefined;
+            sandbox?: string | undefined;
+            scope?: string | undefined;
+            scoped?: boolean | undefined;
+            scrolling?: string | undefined;
+            seamless?: boolean | undefined;
+            selected?: boolean | undefined;
+            shape?: string | undefined;
+            sizes?: string | undefined;
+            src?: string | undefined;
+            srcDoc?: string | undefined;
+            srcLang?: string | undefined;
+            srcSet?: string | undefined;
+            step?: string | number | undefined;
+            target?: string | undefined;
+            type?: string | undefined;
+            useMap?: string | undefined;
+            width?: string | number | undefined;
+            wmode?: string | undefined;
+            wrap?: string | undefined;
+            defaultChecked?: boolean | undefined;
+            defaultValue?: string | number | readonly string[] | undefined;
+            suppressContentEditableWarning?: boolean | undefined;
+            suppressHydrationWarning?: boolean | undefined;
+            accessKey?: string | undefined;
+            className?: string | undefined;
+            contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+            contextMenu?: string | undefined;
+            dir?: string | undefined;
+            draggable?: (boolean | "true" | "false") | undefined;
+            hidden?: boolean | undefined;
+            id?: string | undefined;
+            lang?: string | undefined;
+            spellCheck?: (boolean | "true" | "false") | undefined;
+            tabIndex?: number | undefined;
+            translate?: "yes" | "no" | undefined;
+            radioGroup?: string | undefined;
+            role?: react.AriaRole | undefined;
+            about?: string | undefined;
+            datatype?: string | undefined;
+            inlist?: any;
+            prefix?: string | undefined;
+            property?: string | undefined;
+            resource?: string | undefined;
+            typeof?: string | undefined;
+            vocab?: string | undefined;
+            autoCapitalize?: string | undefined;
+            autoCorrect?: string | undefined;
+            autoSave?: string | undefined;
+            color?: string | undefined;
+            itemProp?: string | undefined;
+            itemScope?: boolean | undefined;
+            itemType?: string | undefined;
+            itemID?: string | undefined;
+            itemRef?: string | undefined;
+            results?: number | undefined;
+            security?: string | undefined;
+            unselectable?: "on" | "off" | undefined;
+            inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+            is?: string | undefined;
+            'aria-activedescendant'?: string | undefined;
+            'aria-atomic'?: (boolean | "true" | "false") | undefined;
+            'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+            'aria-busy'?: (boolean | "true" | "false") | undefined;
+            'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+            'aria-colcount'?: number | undefined;
+            'aria-colindex'?: number | undefined;
+            'aria-colspan'?: number | undefined;
+            'aria-controls'?: string | undefined;
+            'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+            'aria-describedby'?: string | undefined;
+            'aria-details'?: string | undefined;
+            'aria-disabled'?: (boolean | "true" | "false") | undefined;
+            'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+            'aria-errormessage'?: string | undefined;
+            'aria-expanded'?: (boolean | "true" | "false") | undefined;
+            'aria-flowto'?: string | undefined;
+            'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+            'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
+            'aria-hidden'?: (boolean | "true" | "false") | undefined;
+            'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+            'aria-keyshortcuts'?: string | undefined;
+            'aria-label'?: string | undefined;
+            'aria-labelledby'?: string | undefined;
+            'aria-level'?: number | undefined;
+            'aria-live'?: "off" | "assertive" | "polite" | undefined;
+            'aria-modal'?: (boolean | "true" | "false") | undefined;
+            'aria-multiline'?: (boolean | "true" | "false") | undefined;
+            'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+            'aria-orientation'?: "horizontal" | "vertical" | undefined;
+            'aria-owns'?: string | undefined;
+            'aria-placeholder'?: string | undefined;
+            'aria-posinset'?: number | undefined;
+            'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+            'aria-readonly'?: (boolean | "true" | "false") | undefined;
+            'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+            'aria-required'?: (boolean | "true" | "false") | undefined;
+            'aria-roledescription'?: string | undefined;
+            'aria-rowcount'?: number | undefined;
+            'aria-rowindex'?: number | undefined;
+            'aria-rowspan'?: number | undefined;
+            'aria-selected'?: (boolean | "true" | "false") | undefined;
+            'aria-setsize'?: number | undefined;
+            'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+            'aria-valuemax'?: number | undefined;
+            'aria-valuemin'?: number | undefined;
+            'aria-valuenow'?: number | undefined;
+            'aria-valuetext'?: string | undefined;
+            children?: ReactNode;
+            dangerouslySetInnerHTML?: {
+                __html: string;
+            } | undefined;
+            onCopy?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onCopyCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onCut?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onCutCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onPaste?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onPasteCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+            onCompositionEnd?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onCompositionEndCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onCompositionStart?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onCompositionStartCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onCompositionUpdate?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+            onFocus?: (((event?: InputFocusEvent | undefined) => void) & react.FocusEventHandler<HTMLInputElement>) | undefined;
+            onFocusCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
+            onBlur?: (((event?: InputFocusEvent | undefined) => void) & react.FocusEventHandler<HTMLInputElement>) | undefined;
+            onBlurCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
+            onChangeCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onBeforeInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onReset?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onResetCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onSubmit?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onSubmitCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onInvalid?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onInvalidCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+            onLoad?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onErrorCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onKeyDownCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onKeyPress?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onKeyPressCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onKeyUp?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onKeyUpCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+            onAbort?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onAbortCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onCanPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onCanPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onCanPlayThrough?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onCanPlayThroughCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onDurationChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onDurationChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEmptied?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEmptiedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEncrypted?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEncryptedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEnded?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onEndedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadedData?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadedDataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadedMetadata?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadedMetadataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadStart?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onLoadStartCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPause?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPauseCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPlaying?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onPlayingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onProgress?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onProgressCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onRateChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onRateChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSeeked?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSeekedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSeeking?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSeekingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onStalled?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onStalledCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSuspend?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSuspendCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onTimeUpdate?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onTimeUpdateCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onVolumeChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onVolumeChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onWaiting?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onWaitingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onAuxClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onAuxClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onClick?: (((event?: react.MouseEvent<Element, MouseEvent> | undefined) => void) & react.MouseEventHandler<HTMLInputElement>) | undefined;
+            onClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onContextMenu?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onContextMenuCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onDoubleClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onDoubleClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onDrag?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragEnd?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragEndCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragEnter?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragEnterCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragExit?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragExitCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragLeave?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragLeaveCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragOver?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragOverCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragStart?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDragStartCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDrop?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onDropCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+            onMouseDown?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseDownCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseEnter?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseLeave?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseMove?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseMoveCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseOut?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseOutCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseOver?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseOverCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseUp?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onMouseUpCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+            onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onSelectCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+            onTouchCancel?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchCancelCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchEnd?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchEndCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchMove?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchMoveCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchStart?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onTouchStartCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+            onPointerDown?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerDownCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerMove?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerMoveCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerUp?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerUpCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerCancel?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerCancelCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerEnter?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerEnterCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerLeave?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerLeaveCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerOver?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerOverCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerOut?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onPointerOutCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onGotPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onLostPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+            onScroll?: react.UIEventHandler<HTMLInputElement> | undefined;
+            onScrollCapture?: react.UIEventHandler<HTMLInputElement> | undefined;
+            onWheel?: react.WheelEventHandler<HTMLInputElement> | undefined;
+            onWheelCapture?: react.WheelEventHandler<HTMLInputElement> | undefined;
+            onAnimationStart?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onAnimationStartCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onAnimationEnd?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onAnimationEndCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onAnimationIteration?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onAnimationIterationCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+            onTransitionEnd?: react.TransitionEventHandler<HTMLInputElement> | undefined;
+            onTransitionEndCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
+            key?: react.Key | null | undefined;
+            phone?: true | undefined;
+            pointer?: boolean | undefined;
+            margin?: string | number | undefined;
+            marginTop?: string | number | undefined;
+            marginBottom?: string | number | undefined;
+            marginRight?: string | number | undefined;
+            marginLeft?: string | number | undefined;
+            backgroundColor?: string | undefined;
+            fontSize?: string | number | undefined;
+            borderColor?: string | undefined;
+            borderRadius?: string | number | undefined;
+            borderless?: boolean | undefined;
+            textOnly?: boolean | undefined;
+            invalid?: boolean | undefined;
+            placeholderColor?: string | undefined;
+            description?: string | undefined;
+            isLoading?: boolean | undefined;
+            iconLeft?: IconType | undefined;
+            iconRight?: IconType | undefined;
+            containerRef?: react.MutableRefObject<HTMLDivElement> | undefined;
+            preventFocus?: boolean | undefined;
+            onClear?: (() => void) | undefined;
+        }): JSX.Element;
+        Item({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps): JSX.Element;
+    };
+    Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
+        id?: string | undefined;
+        label?: string | undefined;
+        labelPosition?: "left" | "right" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+    } & Margin & As & HTMLProps<HTMLInputElement>) => JSX.Element;
+    Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
+        id?: string | undefined;
+        label?: string | undefined;
+        labelPosition?: "left" | "right" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+        onChange: (val: boolean) => void;
+    } & Margin & As & CheckboxAttributes) => JSX.Element;
+    Checkbox: ({ id, label, labelPosition, checked, partial, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
+        id?: string | undefined;
+        label?: string | undefined;
+        labelPosition?: "left" | "right" | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+        partial?: boolean | undefined;
+        onChange: (val: boolean) => void;
+    } & Margin & As & CheckboxAttributes) => JSX.Element;
+    Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: {
+        children?: ReactNode;
+        iconLeft?: IconType | undefined;
+        iconRight?: IconType | undefined;
+        pill?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & Margin) => JSX.Element;
+};
+declare type FormGroupProps = {
+    /** Disables pointer events and reduces the opacity of the Group's contents  */
+    disabled?: boolean;
+    children?: ReactNode;
+} & GridProps;
+declare type FieldProps = {
+    /** Sets the flexDirection of the Field to 'row' instead of 'column' */
+    inline?: boolean;
+    /** Sets the vertical alignment of the Field's contents */
+    align?: 'top' | 'bottom' | 'center';
+    /** Disables pointer events and reduces the opacity of the Field's contents  */
+    disabled?: boolean;
+};
+
+declare type ImageViewerProps = {
+    /** Controls whether or not the ImageViewer is open */
+    visible: boolean;
+    /** The function called when the ImageViewer is closed */
+    close: () => void;
+    /** The array of image urls to display */
+    images: string[];
+    /** The index of the images array to initially display */
+    startIndex: number;
+    /** The alt property of the current image */
+    alt?: string;
+    /** The maxWidth of the image inside the ImageViewer */
+    maxWidth?: number | string;
+    /** The maxHeight of the image inside the ImageViewer */
+    maxHeight?: number | string;
+    /** The opacity of the ImageViewer background */
+    opacity?: number;
+};
+declare const ImageViewer: ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity }: ImageViewerProps) => JSX.Element | null;
+
+declare const InlineCode: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+
+declare type FocusCallBack = (event?: InputFocusEvent) => void;
+declare const _default: {
+    Container: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & {
+        backgroundColor?: string | undefined;
+        borderRadius?: string | number | undefined;
+        borderless?: boolean | undefined;
+        borderColor?: string | undefined;
+        pointer?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        focused?: boolean | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        hasLabel?: boolean | undefined;
+    } & Width & Height & Margin & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Wrapper: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & {
+        readOnly?: boolean | undefined;
+    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Label: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & {
+        filled?: boolean | undefined;
+        focused?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+    useInputFocus: (onFocus?: FocusCallBack | undefined, onBlur?: FocusCallBack | undefined, focusCondition?: boolean) => {
+        focused: boolean;
+        handleFocus: (event?: InputFocusEvent | undefined) => void;
+        handleBlur: (event?: InputFocusEvent | undefined) => void;
+    };
+    isInputFilled: (value: string | number) => boolean;
+};
+
+declare type LabelProps = {
+    children?: ReactNode;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType;
+    /** Styles the Label as a pill */
+    pill?: boolean;
+    /** Reduces the emphasis of the Pill colors */
+    disabled?: boolean;
+} & Margin;
+declare const Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: LabelProps) => JSX.Element;
+
+declare type MenuProps = {
+    /** Displays the menu as a vertical, stacked menu */
+    vertical?: boolean;
+    /** If true, a border will be displayed around the menu */
+    border?: boolean;
+    /** If true, a border will be displayed on top of the menu */
+    borderTop?: boolean;
+    /** If true, a border will be displayed on bottom of the menu */
+    borderBottom?: boolean;
+    /** If true, a border will be displayed to the left of the menu */
+    borderLeft?: boolean;
+    /** If true, a border will be displayed to the right of the menu */
+    borderRight?: boolean;
+    /** Sets the borderTopLeftRadius of the menu */
+    borderTopLeftRadius?: number | string;
+    /** Sets the borderTopRightRadius of the menu */
+    borderTopRightRadius?: number | string;
+    /** Sets the borderBottomLeftRadius of the menu */
+    borderBottomLeftRadius?: number | string;
+    /** Sets the borderBottomRightRadius of the menu */
+    borderBottomRightRadius?: number | string;
+    children?: ReactNode;
+    /** Sets the backgroundColor of the menu */
+    backgroundColor?: string;
+} & WidthHeight & Padding;
+declare const Menu: {
+    ({ vertical, width, height, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, border, borderTop, borderBottom, borderLeft, borderRight, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, backgroundColor, children, }: MenuProps): JSX.Element;
+    Item: ({ vertical, selected, disabled, contentPosition, onClick, id, children, indent }: MenuItemProps) => JSX.Element;
+    Group: ({ label, defaultOpen, vertical, selected, disabled, contentPosition, onClick, id, children, indent, backgroundColor, }: MenuGroupProps) => JSX.Element;
+};
+declare type MenuItemProps = {
+    children: ReactNode;
+    vertical?: boolean;
+    /** The id of the Menu Item */
+    id?: string;
+    /** Controls whether the Menu Item appears to be active */
+    selected: boolean;
+    /** Prevents the Menu Item from being clicked */
+    disabled?: boolean;
+    /** The flex positioning of the Item contents */
+    contentPosition?: 'start' | 'end';
+    /** The function to be called when the Menu Item is clicked */
+    onClick: (event: MouseEvent$1) => void;
+    indent?: number;
+};
+declare type MenuGroupProps = {
+    label: string | ReactNode;
+    defaultOpen?: boolean;
+    backgroundColor?: string;
+} & Partial<MenuItemProps>;
+
+declare type MessageProps = {
+    children?: ReactNode;
+    /** Sets the colors and icon of the Message */
+    type?: 'info' | 'error' | 'success' | 'warning';
+    /** Sets the text of the button */
+    content?: string;
+    /** Displays a close icon in the top right of the Message */
+    closeIcon?: boolean;
+    /** The function called when the Message is closed */
+    onClose?: () => void;
+} & Width & Margin;
+declare const Message: {
+    ({ type, content, closeIcon, onClose, width, margin, marginTop, marginBottom, marginRight, marginLeft, children, }: MessageProps): JSX.Element;
+    Header: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
+declare const MessageHr: ({ text, color, style, }: {
+    /** The text to be displayed */
+    text: string | number;
+    /** The color of the text displayed */
+    color?: string | undefined;
+    /** Sets the style prop of the text */
+    style?: {
+        [key: string]: string | number;
+    } | undefined;
+}) => JSX.Element;
+
+declare type ModalProps = {
+    children: ReactNode;
+    /** The selector (id or className) of the app's root element */
+    rootSelector?: string;
+    /** Controls whether or not the Modal is open */
+    visible: boolean;
+    /** The function called when the Modal is closed */
+    onClose: () => void;
+    /** Displays a close icon in the top right of the Modal */
+    closeIcon?: boolean;
+    /** Prevents the Modal from closing if the overlay outside the modal is clicked */
+    preventOverlayClose?: boolean;
+    /** Sets the color of the modal overlay */
+    overlayColor?: string;
+    /** Overrides the backgroundColor of the modal container */
+    backgroundColor?: string;
+    /** Styles the Modal as an actionable toast */
+    small?: boolean;
+    /** Removes the overlay background, and allows the modal to be positioned anywhere on the page */
+    noOverlay?: boolean;
+    /** Centers the horizontal position of the Modal. Used in conjunction with `noOverlay` */
+    centerX?: boolean;
+    /** Centers the vertical position of the Modal. Used in conjunction with `noOverlay` */
+    centerY?: boolean;
+    /** Sets the `top` position of the modal. Used in conjunction with `noOverlay` */
+    top?: number | string;
+    /** Sets the `bottom` position of the modal. Used in conjunction with `noOverlay` */
+    bottom?: number | string;
+    /** Sets the `right` position of the modal. Used in conjunction with `noOverlay` */
+    right?: number | string;
+    /** Sets the `left` position of the modal. Used in conjunction with `noOverlay` */
+    left?: number | string;
+} & WidthHeight & Padding;
+declare const Modal: {
+    ({ children, rootSelector, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayColor, backgroundColor, small, noOverlay, centerX, centerY, top, bottom, right, left, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: ModalProps): react.ReactPortal | null;
+    Header: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: react.ElementType<any> | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Text: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: react.ElementType<any> | undefined;
+    } & {
+        primary?: boolean | undefined;
+        fontSize?: string | number | undefined;
+    } & ThemeProp, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: react.ElementType<any> | undefined;
+    } & Height & Margin, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Footer: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: react.ElementType<any> | undefined;
+    } & {
+        justify?: FlexPosition | undefined;
+        inline?: boolean | undefined;
+    } & Margin, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
+declare type MultiSelectProps = {
+    /** The list of dropdown options to display */
+    options: OptionItem[];
+    /** The list of selected options */
+    items: OptionItem[];
+    /** A function that gives control of the list items to the user */
+    children?: (listOpen: boolean) => ReactNode;
+    /** Text to display in front of the list of selected items */
+    listText?: string;
+    /** The name of the items list to display (1/5 items) */
+    itemsTitle?: string;
+    /** The maximum number of items allowed to be selected */
+    maxItems?: number;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Prevents the Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Function called after an item is selected */
+    addItem: (item: OptionItem | null) => void;
+    /** Function called after an item is removed */
+    removeItem: (item: OptionItem | null) => void;
+    /** The function to be called when the input is updated */
+    onTextChange?: (text: string) => void;
+} & Width & Margin;
+declare const MultiSelect: ({ children, options, items, listText, itemsTitle, maxItems, placeholder, width, filter, restrictInput, disabled, addItem, removeItem, onTextChange, ...props }: MultiSelectProps) => JSX.Element;
+
+declare const Notification: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & {
+    color?: string | undefined;
+    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
+    number?: boolean | undefined;
+    top?: string | number | undefined;
+    bottom?: string | number | undefined;
+    right?: string | number | undefined;
+    left?: string | number | undefined;
+} & ThemeProp & Margin, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare type OptionsProps = {
+    children: ReactNode;
+    /** The id of the Options container */
+    id?: string;
+    /** A ref to the Options container element */
+    containerRef?: RefObject<HTMLDivElement>;
+    /** Offsets the vertical position of the Options */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Options */
+    offsetX?: number;
+    /** Centers the vertical position of the Options relative to the Options trigger */
+    centerY?: boolean;
+    /** Centers the horizontal position of the Options relative to the Options trigger */
+    centerX?: boolean;
+    /** The direction, in relation to the trigger, the options should open */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Overrides the default maxHeight of 200px */
+    maxHeight?: number;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    parentSelector?: string;
+} & Width;
+declare const Options: {
+    ({ id, children, containerRef, parentSelector, width, maxHeight, offsetY, offsetX, centerY, centerX, direction, }: OptionsProps): JSX.Element;
+    Item({ children, id, onClick, selected, noSelect, contentPosition, color, accented, ...props }: OptionsItemProps): JSX.Element;
+};
+declare type OptionsItemProps = {
+    children?: ReactNode;
+    /** The id of the Option item */
+    id?: number | string;
+    /** The function to be called when the Option item is clicked */
+    onClick: (event: MouseEvent$1) => void;
+    /** Controls whether the Option appears to be hovered */
+    selected?: boolean;
+    /** Prevents the Option from appearing to be hovered */
+    noSelect?: boolean;
+    /** The flex positioning of the Option contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+};
+
+declare type PaginationProps = {
+    /** The callback function that responds with the active page */
+    onPageNav: (page: number) => void;
+    /** The number of page items */
+    totalPages: number;
+    /** The current page the component should display */
+    page?: number;
+    /** The max number of page items to display */
+    maxVisibleNumbers?: number;
+} & Margin & Width;
+declare const Pagination: ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props }: PaginationProps) => JSX.Element;
+
+declare type CircleProps = ({
+    circle?: false;
+    size?: never;
+} & WidthHeight) | {
+    /** Styles the Progress component as a circle */
+    circle: true;
+    /** The width and height of the circle */
+    size?: number;
+    width?: never;
+    height?: never;
+};
+declare type ProgressProps = {
+    /** The percent completed (0-100) */
+    percent: number;
+    /** The color of the progress bar */
+    color?: CSSProperties['backgroundColor'];
+    /** The thickness of the bar or circle */
+    thickness?: number;
+} & CircleProps & Margin;
+declare const Progress: ({ percent, color, circle, width, height, size, thickness, margin, marginTop, marginBottom, marginRight, marginLeft, }: ProgressProps) => JSX.Element;
+
+declare type RadioProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the radio. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the radio */
+    labelPosition?: 'left' | 'right';
+    /** Disables the radio */
+    disabled?: boolean;
+    /** Controls the checked property of the radio */
+    checked?: boolean;
+} & Margin & As & HTMLProps<HTMLInputElement>;
+declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: RadioProps) => JSX.Element;
+
+declare type ResetStylesProps = {
+    /** An array of font families to pass to the font loader */
+    families?: string[];
+    /** The default font family to set */
+    fontFamily?: string;
+};
+declare const ResetStyles: ({ families, fontFamily }: ResetStylesProps) => JSX.Element;
+
+declare const ScrollbarStyles: () => JSX.Element;
+
+declare type SliderProps = {
+    /** The current position of the slider knob */
+    value: number;
+    /** The max value of the slider */
+    max?: number;
+    /** The number by which the slider should increment/decrement */
+    step?: number;
+    /** Disables the slider */
+    disabled?: boolean;
+    /** The function that is called when the slider knob is changed */
+    onChange?: (progressValue: number) => void;
+} & WidthHeight & Margin;
+declare const Slider: ({ value, max, step, width, height, disabled, onChange, ...props }: SliderProps) => JSX.Element;
+
+declare const Spacer: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & Width & Height, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare type SpinnerProps = {
+    /** The size of the loading icon */
+    size?: Sizes;
+    /** The color of the loading icon */
+    color?: string;
+} & Margin;
+declare const Spinner: ({ size, color, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: SpinnerProps) => JSX.Element;
+
+declare type Color = ColorNames | CSSProperties['color'];
+declare type Item = {
+    /** Unique ID of the item */
+    id: number | string;
+    /** The text displayed for the transfer item */
+    label: string;
+    /** Used as the data of the item */
+    value?: unknown;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
+    header?: string;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
+    body?: string;
+    /** Any element to be displayed to the left of the item's label/header/body */
+    leftElement?: ReactElement;
+    /** Any element to be displayed to the right of the item's label/header/body */
+    rightElement?: ReactElement;
+    /** The left border color of the transfer item */
+    color?: Color;
+    /** Used to preselect an item */
+    selected?: boolean;
+    [key: string]: unknown;
+};
+declare type Action = 'select' | 'remove';
+declare type Next = (item?: Item) => void;
+declare type TransferListProps = {
+    /** Array of objects that will be rendered as individual items in the list */
+    items: Item[];
+    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
+    onChange: (list: Item[]) => void;
+    /** The function called before an item is selected or removed */
+    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
+    /** The header title of the transfer list */
+    listTitle?: string;
+    /** The text to display in a readOnly state where there are no selected items */
+    noItemsMessage?: string;
+    /** Disables moving items and only displays the list of selected items */
+    readOnly?: boolean;
+    /** Hides the select all button */
+    hideSelectAll?: boolean;
+    /** Hides the remove all button */
+    hideRemoveAll?: boolean;
+} & Width & Margin;
+declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, margin, marginTop, marginBottom, marginRight, marginLeft, }: TransferListProps) => JSX.Element;
+
+/** Table component */
+declare type TableBase = {
+    children?: ReactNode;
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: number | string;
+} & Width & MarginPadding;
+declare type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as'> & As;
+declare const Table: {
+    ({ children, columns, ...rest }: TableBase & DefaultTableProps): JSX.Element;
+    /** Table.Header component */
+    Header({ children, columns, parentColumns, ...rest }: TableHeaderRow): JSX.Element;
+    HeaderCell: ({ children, onClick, contentPosition, sorted }: HeaderCellProps) => JSX.Element;
+    Body({ children, parentColumns, height }: BodyProps): JSX.Element;
+    /** Table.Row component */
+    Row({ children, columns, parentColumns, ...rest }: TableHeaderRow): JSX.Element;
+    Column({ children, contentPosition, defaultValue }: TableColumn): JSX.Element;
+};
+declare type TableHeaderRow = {
+    parentColumns?: number | string;
+} & TableBase & HTMLProps<HTMLTableRowElement>;
+/** Table.HeaderCell component */
+declare type HeaderCellProps = {
+    children?: ReactNode;
+    /** The flex positioning of the HeaderCell contents */
+    contentPosition?: FlexPosition;
+    /** The function to be called when the HeaderCell is clicked */
+    onClick?: (event: MouseEvent$1) => void;
+    /** Controls the direction of the sort icon indicating the direction of the data */
+    sorted?: 'asc' | 'desc' | 'inactive';
+};
+/** Table.Body component */
+declare type BodyProps = Omit<TableHeaderRow, 'columns'> & Height & HTMLProps<HTMLTableSectionElement>;
+/** Table.Column component */
+declare type TableColumn = {
+    children?: ReactNode;
+    /** The flex positioning of the Column contents */
+    contentPosition?: FlexPosition;
+    /** The string value to display if the child text is undefined (i.e. "N/A", "—") */
+    defaultValue?: string;
+};
+declare const TableColumn: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & {
+    contentPosition?: FlexPosition | undefined;
+} & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & {
+    theme?: _emotion_react.Theme | undefined;
+} & {
+    showDefault?: boolean | undefined;
+} & ThemeProp, {}, {}>;
+
+declare type ToggleProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the toggle. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the toggle */
+    labelPosition?: 'left' | 'right';
+    /** Disables the toggle */
+    disabled?: boolean;
+    /** Controls the checked property of the toggle */
+    checked?: boolean;
+    /** The function called with the toggle value after the toggle is changed */
+    onChange: (val: boolean) => void;
+} & Margin & As & CheckboxAttributes;
+declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => JSX.Element;
+
+declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
+
+declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
+
+declare type UseSelectProps = {
+    /** The options that will be displayed in the list */
+    options: OptionItem[];
+    /** The function called when an option is selected */
+    select: (option: OptionItem | string | null) => void;
+    /** The function to close the open option list */
+    close: Function;
+    /** The function to open the closed option list */
+    open: Function;
+    /** The condition for when the list of options is open */
+    isOpen: boolean;
+    /** The condition for when the select element is focused */
+    isFocused?: boolean;
+    /** The text from a search Droppdown */
+    searchText?: string;
+};
+declare const useSelect: ({ options, select, close, open, searchText, isOpen, isFocused }: UseSelectProps) => readonly [number, react.RefObject<HTMLDivElement>];
+
+declare type ListItem = {
+    id: number | string;
+    [otherProps: string]: unknown;
+};
+declare const useSelectAll: (items: ListItem[], defaultSelected?: boolean) => {
+    list: ListItem[];
+    partial: boolean;
+    allSelected: boolean;
+    onSelectAll: (selectAll: boolean) => void;
+    onChildChange: (val: boolean, id: number | string) => void;
+};
+
+declare const useWindowSize: () => {
+    width: number | null;
+    height: number | null;
+};
+
+declare type TimeSpec = 'onlyTime' | 'withTime' | 'relative';
+declare type TimeOptions = {
+    time?: TimeSpec;
+    lowercase?: boolean;
+};
+declare const formatDate: (value: Date, option?: TimeSpec | TimeOptions) => string;
+
+declare const copyToClipboard: (text: string) => void;
+
+export { Audio, AudioRef, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, DraftEditorRef, Dropdown, OptionItem as DropdownOption, Form, Grid, ITheme, Icon, IconNames, ImageViewer, InlineCode, Input, InputRef, _default as InputUtils, Label, Menu, Message, MessageHr, Modal, MultiSelect, Notification, Options, Pagination, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, Table, ThemeProp, Toggle, Tooltip, Action as TransferAction, Item as TransferItem, TransferList, Next as TransferNext, copyToClipboard, formatDate, theme, useEventListener, useOnClickOutside, useSelect, useSelectAll, useWindowSize };