@mackin.com/styleguide 8.0.0-beta.10 → 8.0.0-beta.13

package/index.d.ts

@@ -3,13 +3,39 @@ import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
-interface AutoCompleteItem {
+declare type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+interface AccordianProps {
+    header: JSX.Element | string;
+    children: React.ReactNode;
+    variant?: HeaderVariant;
+    /** Defaults to 'true'. */
+    block?: boolean;
+    className?: string;
+    /** If true, padding will not be added to the expanded content */
+    noPad?: boolean;
+    /** The initial state of the Accordian.  Defaults to 'false'.
+     * Use with onChange to control the state from outside the Accordian.
+     */
+    open?: boolean;
+    disabled?: boolean;
+    /** Defaults to 1020px. */
+    maxHeight?: string | undefined;
+    /** Defaults to 250ms. */
+    expandTimeMs?: number;
+    /** Defaults to 'ease-in-out'. */
+    transitionTimingFunction?: string;
+    onChange?: (open: boolean) => void;
+}
+declare const Accordian: (props: AccordianProps) => JSX.Element;
+declare const useAccordianState: (count: number, openIndex?: number | undefined) => [boolean[], (index: number, open: boolean) => void];
+
+interface AutoCompleteEntity {
     id: string | number;
     name: string;
 }
-declare type AutocompleteValue = string | AutoCompleteItem;
-interface AutocompleteProps {
-    value: AutocompleteValue | undefined;
+declare type AutocompleteValue = string | AutoCompleteEntity;
+interface AutocompleteProps<T extends AutocompleteValue> {
+    value: T | undefined;
     round?: boolean;
     rightControl?: JSX.Element;
     placeholder?: string;
@@ -28,11 +54,11 @@ interface AutocompleteProps {
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
     onChange: (value: string) => void;
-    getOptions: (value: string) => Promise<AutocompleteValue[]>;
-    onPick: (value: AutocompleteValue) => void;
+    getOptions: (value: string) => Promise<T[]>;
+    onPick: (value: T) => void;
     onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
+declare const Autocomplete: <T extends AutocompleteValue>(p: AutocompleteProps<T>) => JSX.Element;
 
 /** @deprecated Use Backdrop2 going forward. */
 declare const Backdrop$1: (props: {
@@ -173,17 +199,21 @@ interface FileUploaderProps {
     instructionMessage?: string;
     /** For additional info below the instructionMessage. */
     infoMessage?: string | JSX.Element;
+    /** If false, the 'infoMessage' will be hidden when a file is picked.  Defaults to 'true' */
+    showInfoOnPick?: boolean;
+    disabled?: boolean;
 }
-declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
+declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
+declare const getFileSizeDisplay: (size: number) => string;
 
-declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
-interface IProps extends FormProps {
+declare type BaseProps$3 = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
+interface FormProps extends BaseProps$3 {
     inline?: boolean;
     /** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called.  Defaults to true. */
     ajax?: boolean;
 }
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
-declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "inline" | "ajax" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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"> & React.RefAttributes<HTMLFormElement>>;
+declare const Form: React.ForwardRefExoticComponent<Pick<FormProps, "inline" | "ajax" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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"> & React.RefAttributes<HTMLFormElement>>;
 declare const FormFlexRow: (props: {
     children: React.ReactNode;
     className?: string;
@@ -356,9 +386,11 @@ interface TextInputProps extends BaseProps {
     value?: string;
     /** Defaults to 'text'. */
     type?: 'text' | 'email' | 'url' | 'password';
+    /** By default all leading and trailing whitespace will be cleared on blur. */
+    noTrim?: boolean;
     onValueChange: (value: string | undefined) => void;
 }
-declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noTrim" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
 
 interface LabelProps {
     text: string | JSX.Element;
@@ -897,9 +929,11 @@ declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
 
 interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> {
     value?: string;
+    /** By default all leading and trailing whitespace will be cleared on blur. */
+    noTrim?: boolean;
     onValueChange: (value: string | undefined) => void;
 }
-declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noTrim" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface ToggleButtonProps {
@@ -949,4 +983,4 @@ declare const WaitingIndicator: (p: {
     debug?: boolean;
 }) => JSX.Element;
 
-export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, useMediaQuery, useThemeSafely };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useMediaQuery, useThemeSafely };

package/index.js

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = require('@emotion/css');
-var lodash = require('lodash');
 var React = require('react');
-var nanoid = require('nanoid');
+var css = require('@emotion/css');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var lodash = require('lodash');
 var dateFns = require('date-fns');
+var nanoid = require('nanoid');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -17,29 +17,97 @@ var ReactSlider = require('react-slider');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () {
-						return e[k];
-					}
-				});
-			}
-		});
-	}
-	n['default'] = e;
-	return Object.freeze(n);
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactSlider__default = /*#__PURE__*/_interopDefaultLegacy(ReactSlider);
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const ICONS = {
+    add: proSolidSvgIcons.faPlus,
+    delete: proSolidSvgIcons.faTrashAlt,
+    save: proSolidSvgIcons.faSave,
+    activate: proRegularSvgIcons.faCheckCircle,
+    deactivate: proRegularSvgIcons.faCircle,
+    online: proLightSvgIcons.faWifi,
+    offline: proLightSvgIcons.faWifiSlash,
+    noIcon: proSolidSvgIcons.faCrow,
+    close: proSolidSvgIcons.faTimes,
+    waiting: proSolidSvgIcons.faSync,
+    refresh: proSolidSvgIcons.faSync,
+    menu: proLightSvgIcons.faBars,
+    search: proLightSvgIcons.faSearch,
+    expand: proRegularSvgIcons.faChevronDown,
+    collapse: proRegularSvgIcons.faChevronUp,
+    help: proLightSvgIcons.faQuestionCircle,
+    debug: proLightSvgIcons.faNarwhal,
+    goTo: proLightSvgIcons.faChevronRight,
+    goBack: proLightSvgIcons.faChevronLeft,
+    download: proLightSvgIcons.faCloudDownload,
+    upload: proLightSvgIcons.faCloudUpload,
+    selected: proSolidSvgIcons.faCheckSquare,
+    unselected: proRegularSvgIcons.faSquare,
+    pagerLeft: proLightSvgIcons.faChevronLeft,
+    pagerRight: proLightSvgIcons.faChevronRight,
+    sortAsc: proRegularSvgIcons.faChevronUp,
+    sortDesc: proRegularSvgIcons.faChevronDown,
+    pickDate: proLightSvgIcons.faCalendarAlt,
+    copy: proLightSvgIcons.faCopy,
+    paste: proLightSvgIcons.faPaste,
+    clear: proRegularSvgIcons.faTimesCircle,
+    hide: proLightSvgIcons.faEyeSlash,
+    show: proLightSvgIcons.faEye
+};
+const Icon = (props) => {
+    var _a;
+    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
+};
+
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 const calcDynamicThemeProps = (theme) => {
     theme.controls.border = `${theme.controls.borderWidth} solid ${theme.colors.border}`;
@@ -77,7 +145,7 @@ const defaultTheme = {
         divider: 'rgba(0, 0, 0, 0.50)',
         nav: '#7851a9',
         navFont: 'rgba(255, 255, 255, 0.9)',
-        focusOutline: 'hsl(155deg 67% 85%)',
+        focusOutline: 'rgb(0 188 212 / 75%)',
         progressBg: '#007bff63',
         progressFill: '#007bff',
         modalBg: 'white',
@@ -155,190 +223,6 @@ const useThemeSafely = () => {
     return defaultTheme;
 };
 
-/** @deprecated Use Backdrop2 going forward. */
-const Backdrop$1 = (props) => {
-    var _a;
-    const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
-    const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
-    const theme = useThemeSafely();
-    const backdropStyles = css.css `
-		opacity: 0;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: ${theme.colors.backdrop};
-		transition: opacity ${showTimeMs}ms ease-in-out;
-		visibility: hidden;
-		user-select: none;
-		-webkit-tap-highlight-color: transparent;
-	`;
-    const showStyles = css.css `
-		z-index: ${theme.zIndexes.backdrop} !important;
-		opacity: 1.0 !important;
-		label:${backdropId.current};
-	`;
-    const bodyStyles = css.css `
-		overflow: hidden !important;
-		label:${backdropId.current};
-	`;
-    const bodyResponsiveStyles = css.css `
-		label:${backdropId.current};
-		@media(min-width:${theme.breakpoints.desktop}) {
-			overflow: auto !important;
-		}
-	`;
-    const bodyReverseResponsiveStyles = css.css `
-		${bodyStyles}
-		overflow: auto !important;
-		@media(min-width:${theme.breakpoints.desktop}) {
-			overflow: hidden !important;
-		}
-	`;
-    const styles = css.css `
-		${backdropStyles}
-		${props.onClick && `
-			cursor: pointer;
-		`}
-		${props.transparent && `
-			background-color: transparent;
-			transition: none;
-		`}
-		${props.children && `
-			display: flex;
-			justify-content:center;
-			align-items: center;
-		`}
-		${props.responsive && `
-			@media(min-width:${theme.breakpoints.desktop}) {
-				display: none;
-			}
-		`}
-		${props.reverseResponsive && `
-			display: none;
-			@media(min-width:${theme.breakpoints.desktop}) {
-				display: flex;
-			}
-		`}
-	`;
-    const backdrop = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        if (backdrop && backdrop.current) {
-            if (props.show && backdrop.current.style.visibility !== 'visible') {
-                backdrop.current.style.visibility = 'visible';
-                backdrop.current.classList.add(showStyles);
-                if (!props.allowScroll) {
-                    document.body.classList.add(bodyStyles);
-                    if (props.responsive) {
-                        document.body.classList.add(bodyResponsiveStyles);
-                    }
-                    else if (props.reverseResponsive) {
-                        document.body.classList.add(bodyReverseResponsiveStyles);
-                    }
-                }
-            }
-            else if (!props.show && backdrop.current.style.visibility === 'visible') {
-                backdrop.current.classList.remove(showStyles);
-                if (backdrop && backdrop.current) {
-                    backdrop.current.style.visibility = 'hidden';
-                    if (!props.allowScroll) {
-                        document.body.classList.remove(bodyStyles);
-                        if (props.responsive) {
-                            document.body.classList.remove(bodyResponsiveStyles);
-                        }
-                        else if (props.reverseResponsive) {
-                            document.body.classList.remove(bodyReverseResponsiveStyles);
-                        }
-                    }
-                }
-            }
-        }
-        return () => {
-            if (backdrop && backdrop.current && !props.allowScroll) {
-                document.body.classList.remove(bodyStyles);
-            }
-        };
-    }, [props.show]);
-    return (React__namespace.createElement("div", { onMouseDown: e => {
-            var _a;
-            e.stopPropagation();
-            e.preventDefault();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-        }, onClick: e => {
-            e.stopPropagation();
-            e.preventDefault();
-        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
-};
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-const ICONS = {
-    add: proSolidSvgIcons.faPlus,
-    delete: proSolidSvgIcons.faTrashAlt,
-    save: proSolidSvgIcons.faSave,
-    activate: proRegularSvgIcons.faCheckCircle,
-    deactivate: proRegularSvgIcons.faCircle,
-    online: proLightSvgIcons.faWifi,
-    offline: proLightSvgIcons.faWifiSlash,
-    noIcon: proSolidSvgIcons.faCrow,
-    close: proSolidSvgIcons.faTimes,
-    waiting: proSolidSvgIcons.faSync,
-    refresh: proSolidSvgIcons.faSync,
-    menu: proLightSvgIcons.faBars,
-    search: proLightSvgIcons.faSearch,
-    expand: proRegularSvgIcons.faChevronDown,
-    collapse: proRegularSvgIcons.faChevronUp,
-    help: proLightSvgIcons.faQuestionCircle,
-    debug: proLightSvgIcons.faNarwhal,
-    goTo: proLightSvgIcons.faChevronRight,
-    goBack: proLightSvgIcons.faChevronLeft,
-    download: proLightSvgIcons.faCloudDownload,
-    upload: proLightSvgIcons.faCloudUpload,
-    selected: proSolidSvgIcons.faCheckSquare,
-    unselected: proRegularSvgIcons.faSquare,
-    pagerLeft: proLightSvgIcons.faChevronLeft,
-    pagerRight: proLightSvgIcons.faChevronRight,
-    sortAsc: proRegularSvgIcons.faChevronUp,
-    sortDesc: proRegularSvgIcons.faChevronDown,
-    pickDate: proLightSvgIcons.faCalendarAlt,
-    copy: proLightSvgIcons.faCopy,
-    paste: proLightSvgIcons.faPaste,
-    clear: proRegularSvgIcons.faTimesCircle,
-    hide: proLightSvgIcons.faEyeSlash,
-    show: proLightSvgIcons.faEye
-};
-const Icon = (props) => {
-    var _a;
-    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
-    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
-};
-
 const Button = (props) => {
     var _a, _b;
     const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
@@ -513,6 +397,86 @@ const Button = (props) => {
         props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
 };
 
+const accordianExpandTimeMs = 250;
+const accordianMaxHeight = 1020;
+const accordianTimingFunction = 'ease-in-out';
+// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
+// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
+const visibleStyle = css.css({
+    overflow: 'visible'
+});
+const Accordian = (props) => {
+    var _a, _b, _c, _d;
+    const [open, setOpen] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const content = React__namespace.useRef(null);
+    const contentStyles = css.css({
+        overflow: 'hidden',
+        maxHeight: 0,
+        transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
+    });
+    const expandedContentStyles = css.css({
+        maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
+    });
+    const expandedContentWrapperStyles = !props.noPad ? css.css({
+        padding: '0 1rem 1rem 1rem'
+    }) : undefined;
+    React__namespace.useEffect(() => {
+        const currentContent = content.current;
+        if (currentContent) {
+            if (open) {
+                currentContent.classList.add(expandedContentStyles);
+                window.setTimeout(() => {
+                    currentContent.classList.add(visibleStyle);
+                }, accordianExpandTimeMs);
+            }
+            else {
+                currentContent.classList.remove(visibleStyle, expandedContentStyles);
+            }
+        }
+    }, [open]);
+    if (props.open !== undefined) {
+        React__namespace.useEffect(() => {
+            var _a;
+            setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
+        }, [props.open]);
+    }
+    return (React__namespace.createElement("div", { className: "accordian" },
+        React__namespace.createElement(Button, { readOnly: props.disabled, block: (_d = props.block) !== null && _d !== void 0 ? _d : true, variant: props.variant, className: css.cx(css.css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                height: 'auto',
+                minHeight: theme.controls.height
+            }, props.className)), onClick: e => {
+                e.stopPropagation();
+                if (props.onChange) {
+                    props.onChange(!open);
+                }
+                else {
+                    setOpen(!open);
+                }
+            }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
+            React__namespace.createElement("span", null, props.header)),
+        React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+};
+const useAccordianState = (count, openIndex) => {
+    const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
+        return i === openIndex;
+    }));
+    return [
+        panels,
+        (index, open) => {
+            setShowPanel(previousState => {
+                const newState = previousState.slice().fill(false);
+                newState[index] = open;
+                return newState;
+            });
+        }
+    ];
+};
+
 const DEFAULT_DEBOUNCE_MS = 250;
 const NUMBER_REGEX = /^-?\d+\.?\d*$/;
 const DATE_REGEX = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
@@ -854,25 +818,12 @@ const Text = (props) => {
     }, props.children);
 };
 
-const DEFAULT_MAX_SHOWN_VALUES = 7;
-const getAutocompleteValueText = (v) => {
-    if (!v) {
-        return '';
-    }
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.name;
-};
-const getAutocompleteValueId = (v) => {
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.id;
-};
 //TB: FUTURE will need to use the new input
+const defaultMaxShownValues = 7;
+const buttonMarkerClass = 'ListItem__button';
 const Autocomplete = (p) => {
     var _a;
+    const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
@@ -880,7 +831,7 @@ const Autocomplete = (p) => {
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
     const shownValues = React__namespace.useMemo(() => {
         var _a;
-        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues);
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -894,45 +845,7 @@ const Autocomplete = (p) => {
         else {
             setValues([]);
         }
-    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
-    const theme = useThemeSafely();
-    const baseClass = css.css `
-		label: Autocomplete;
-		position: relative;
-		width: 100%;
-	`;
-    let listBorderRadius = '';
-    if (p.round || theme.controls.borderRadius) {
-        listBorderRadius = theme.controls.borderRadius || '0.5rem';
-    }
-    const listClass = css.css({
-        position: 'absolute',
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: listBorderRadius,
-        boxShadow: theme.controls.boxShadow,
-        backgroundColor: theme.colors.bg,
-        marginTop: `-4px !important`,
-        zIndex: theme.zIndexes.backdrop,
-        'li:first-child button': {
-            borderTopRightRadius: listBorderRadius,
-            borderTopLeftRadius: listBorderRadius,
-        },
-        'li:last-child button': {
-            borderBottomRightRadius: listBorderRadius,
-            borderBottomLeftRadius: listBorderRadius,
-        }
-    });
-    const inputClass = css.css `
-		${showValues && `
-			z-index: ${theme.zIndexes.backdrop};
-			position: relative;
-		`}
-	`;
-    const buttonStyles = css.css({
-        borderRadius: 0,
-    });
-    const buttonMarkerClass = 'ListItem__button';
+    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: false, trailing: true }));
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -952,10 +865,36 @@ const Autocomplete = (p) => {
             }
         }
     };
-    return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
-        React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
+    React__namespace.useEffect(() => {
+        const clearItems = () => {
+            if (values.length > 0) {
+                setValues([]);
+            }
+        };
+        document.addEventListener('click', clearItems);
+        return () => {
+            document.removeEventListener('click', clearItems);
+        };
+    }, [values]);
+    let listBorderRadius = '';
+    if (p.round || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
+    return (React__namespace.createElement("div", { onClick: e => {
+            e.stopPropagation();
+        }, onKeyDown: e => {
+            var _a;
+            if (e.key === 'Escape') {
+                setValues([]);
+                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, ref: element, className: css.cx(css.css({
+            position: 'relative',
+            width: '100%',
+            label: 'Autocomplete'
+        }), 'autocomplete') },
         React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
-            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: p.inputClassName, maxLength: p.maxLength, required: p.required, onChange: v => {
                     const value = v;
                     p.onChange(value);
                     onChangeForOptions.current(value);
@@ -974,7 +913,24 @@ const Autocomplete = (p) => {
                         }
                     }
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.css({
+                    position: 'absolute',
+                    width: '100%',
+                    border: theme.controls.border,
+                    borderRadius: listBorderRadius,
+                    boxShadow: theme.controls.boxShadow,
+                    backgroundColor: theme.colors.bg,
+                    marginTop: `-4px !important`,
+                    zIndex: theme.zIndexes.backdrop,
+                    'li:first-child button': {
+                        borderTopRightRadius: listBorderRadius,
+                        borderTopLeftRadius: listBorderRadius,
+                    },
+                    'li:last-child button': {
+                        borderBottomRightRadius: listBorderRadius,
+                        borderBottomLeftRadius: listBorderRadius,
+                    }
+                }) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -989,7 +945,9 @@ const Autocomplete = (p) => {
                                     e.preventDefault();
                                     (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                                 }
-                            }, className: css.cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
+                            }, className: css.cx(buttonMarkerClass + listItemIndex, css.css({
+                                borderRadius: 0,
+                            })), onClick: () => {
                                 p.onPick(value);
                                 setValues([]);
                                 setTimeout(() => {
@@ -1008,6 +966,137 @@ const Autocomplete = (p) => {
                         " of ",
                         values.length.toLocaleString(),
                         " results."))))))));
+};
+const getAutocompleteValueText = (v) => {
+    if (!v) {
+        return '';
+    }
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.name;
+};
+const getAutocompleteValueId = (v) => {
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.id;
+};
+
+/** @deprecated Use Backdrop2 going forward. */
+const Backdrop$1 = (props) => {
+    var _a;
+    const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
+    const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
+    const theme = useThemeSafely();
+    const backdropStyles = css.css `
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: ${theme.colors.backdrop};
+		transition: opacity ${showTimeMs}ms ease-in-out;
+		visibility: hidden;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	`;
+    const showStyles = css.css `
+		z-index: ${theme.zIndexes.backdrop} !important;
+		opacity: 1.0 !important;
+		label:${backdropId.current};
+	`;
+    const bodyStyles = css.css `
+		overflow: hidden !important;
+		label:${backdropId.current};
+	`;
+    const bodyResponsiveStyles = css.css `
+		label:${backdropId.current};
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: auto !important;
+		}
+	`;
+    const bodyReverseResponsiveStyles = css.css `
+		${bodyStyles}
+		overflow: auto !important;
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: hidden !important;
+		}
+	`;
+    const styles = css.css `
+		${backdropStyles}
+		${props.onClick && `
+			cursor: pointer;
+		`}
+		${props.transparent && `
+			background-color: transparent;
+			transition: none;
+		`}
+		${props.children && `
+			display: flex;
+			justify-content:center;
+			align-items: center;
+		`}
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: none;
+			}
+		`}
+		${props.reverseResponsive && `
+			display: none;
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: flex;
+			}
+		`}
+	`;
+    const backdrop = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (backdrop && backdrop.current) {
+            if (props.show && backdrop.current.style.visibility !== 'visible') {
+                backdrop.current.style.visibility = 'visible';
+                backdrop.current.classList.add(showStyles);
+                if (!props.allowScroll) {
+                    document.body.classList.add(bodyStyles);
+                    if (props.responsive) {
+                        document.body.classList.add(bodyResponsiveStyles);
+                    }
+                    else if (props.reverseResponsive) {
+                        document.body.classList.add(bodyReverseResponsiveStyles);
+                    }
+                }
+            }
+            else if (!props.show && backdrop.current.style.visibility === 'visible') {
+                backdrop.current.classList.remove(showStyles);
+                if (backdrop && backdrop.current) {
+                    backdrop.current.style.visibility = 'hidden';
+                    if (!props.allowScroll) {
+                        document.body.classList.remove(bodyStyles);
+                        if (props.responsive) {
+                            document.body.classList.remove(bodyResponsiveStyles);
+                        }
+                        else if (props.reverseResponsive) {
+                            document.body.classList.remove(bodyReverseResponsiveStyles);
+                        }
+                    }
+                }
+            }
+        }
+        return () => {
+            if (backdrop && backdrop.current && !props.allowScroll) {
+                document.body.classList.remove(bodyStyles);
+            }
+        };
+    }, [props.show]);
+    return (React__namespace.createElement("div", { onMouseDown: e => {
+            var _a;
+            e.stopPropagation();
+            e.preventDefault();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, onClick: e => {
+            e.stopPropagation();
+            e.preventDefault();
+        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
 const useLogger = (componentName, enabled) => {
@@ -1639,7 +1728,7 @@ const hoverClass = css.css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
@@ -1655,7 +1744,7 @@ const FileUploader = (p) => {
             filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
         }
         else {
-            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
         }
     }
     const setAllFiles = (inputFiles) => {
@@ -1677,8 +1766,9 @@ const FileUploader = (p) => {
             maxBytes: p.maxBytes
         });
     };
+    const showInfoOnPick = (_c = p.showInfoOnPick) !== null && _c !== void 0 ? _c : true;
     let infoMessage;
-    if (p.infoMessage) {
+    if (p.infoMessage && (!files || showInfoOnPick)) {
         if (typeof p.infoMessage === 'string') {
             infoMessage = React__default['default'].createElement(Text, { noPad: true }, p.infoMessage);
         }
@@ -1695,6 +1785,8 @@ const FileUploader = (p) => {
             padding: '1rem',
             overflow: 'hidden',
             backgroundColor: theme.colors.lightBg,
+        }, p.disabled && {
+            opacity: theme.controls.disabledOpacity
         }), onDragOver: e => {
             var _a, _b;
             e.preventDefault();
@@ -1728,7 +1820,7 @@ const FileUploader = (p) => {
                 setCanUpload(false);
             });
         } },
-        React__default['default'].createElement("input", { ref: input, className: css.css({
+        React__default['default'].createElement("input", { disabled: p.disabled, ref: input, className: css.css({
                 position: 'absolute',
                 top: -50,
                 left: 0,
@@ -1737,6 +1829,8 @@ const FileUploader = (p) => {
                 width: '100%',
                 cursor: 'pointer',
                 opacity: 0
+            }, p.disabled && {
+                cursor: 'not-allowed'
             }), type: "file", multiple: p.multiple, accept: p.accept, onChange: e => {
                 try {
                     if (!e.target.files) {
@@ -1759,26 +1853,28 @@ const FileUploader = (p) => {
                 zIndex: !!(files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
             }) },
             !(files === null || files === void 0 ? void 0 : files.length) && React__default['default'].createElement(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
-            React__default['default'].createElement(Text, { align: "center", noPad: true, spacedOut: true },
+            React__default['default'].createElement(Text, { align: "center", noPad: true, spacedOut: true, className: css.css({
+                    width: '100%'
+                }) },
                 filesDisplay,
                 !!(files === null || files === void 0 ? void 0 : files.length) && (React__default['default'].createElement(Button, { onClick: e => {
                         e.stopPropagation();
                         onFilesChange(undefined);
                     }, className: css.css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default['default'].createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
             infoMessage,
-            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
+            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default['default'].createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
                 "Invalid files: ",
                 files.invalidFiles.map(f => f.name).join(', '),
                 ".")),
-            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
+            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
                 "Max file size exceeded (",
-                getSizeString((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
+                getFileSizeDisplay((_d = p.maxBytes) !== null && _d !== void 0 ? _d : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default['default'].createElement(Button, { className: css.css({
-                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
+                width: (_e = p.buttonWidth) !== null && _e !== void 0 ? _e : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : 'Upload')),
-        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : 'Upload successful.', onClear: () => setMessage(undefined) })),
+            }), waiting: uploading, type: "submit", variant: (_f = p.buttonVariant) !== null && _f !== void 0 ? _f : 'primary' }, (_g = p.buttonText) !== null && _g !== void 0 ? _g : 'Upload')),
+        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_h = p.successMessage) !== null && _h !== void 0 ? _h : 'Upload successful.', onClear: () => setMessage(undefined) })),
         message === 'failure' && (React__default['default'].createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {
@@ -1792,18 +1888,28 @@ const UploadInfoPanel = (p) => {
                 p.onClear();
             }, rightIcon: React__default['default'].createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
 };
-const bytesInMb = 1048576;
-const bytesInKb = 1024;
-const getSizeString = (size) => {
-    if (size < bytesInKb) {
-        return size.toLocaleString() + ' B';
-    }
-    else if (size < bytesInMb) {
-        return (size / bytesInKb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
+// OMG this is dumb.  We're sticking with decimals for ease of use.
+// https://stackoverflow.com/questions/40949135/gigabyte-or-gibibyte-1000-or-1024
+const getFileSizeDisplay = (size) => {
+    let value = 0;
+    let suffix = '';
+    if (size >= 1000000000) {
+        value = size / 1000000000;
+        suffix = 'GB';
+    }
+    else if (size >= 1000000) {
+        value = size / 1000000;
+        suffix = 'MB';
+    }
+    else if (size >= 1000) {
+        value = size / 1000;
+        suffix = 'KB';
     }
     else {
-        return (size / bytesInMb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' MB';
+        value = size;
+        suffix = 'B';
     }
+    return value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ` ${suffix}`;
 };
 
 const getCurrencyDisplay = (value, isCents, denomination = '$') => {
@@ -2517,6 +2623,11 @@ const TextInput = React__namespace.forwardRef((props, ref) => {
             if (!e.target.checkValidity()) {
                 setLocalValue(undefined);
             }
+            else if (!props.noTrim) {
+                setLocalValue(currentValue => {
+                    return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                });
+            }
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } })));
 });
@@ -3897,6 +4008,14 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
                 var _a;
                 setLocalValue(e.target.value || undefined);
                 (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: e => {
+                var _a;
+                if (!props.noTrim) {
+                    setLocalValue(currentValue => {
+                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                    });
+                }
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             } })),
         React__namespace.createElement(InputErrorDisplay, { error: validationError })));
 });
@@ -4044,6 +4163,7 @@ const WaitingIndicator = (p) => {
             React__default['default'].createElement(Icon, { id: "waiting", spin: true }))));
 };
 
+exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
 exports.Backdrop2 = Backdrop;
@@ -4105,6 +4225,8 @@ exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
+exports.getFileSizeDisplay = getFileSizeDisplay;
+exports.useAccordianState = useAccordianState;
 exports.useMediaQuery = useMediaQuery;
 exports.useThemeSafely = useThemeSafely;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.0.0-beta.10",
+	"version": "8.0.0-beta.13",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",