@mackin.com/styleguide 7.8.0 → 7.10.0

package/index.d.ts

@@ -27,6 +27,8 @@ interface AutocompleteProps {
     /** The minimum characters before 'getOptions' is called.  No default. */
     minChars?: number;
     inputAriaAttributes?: React.AriaAttributes;
+    /** Defaults to 0ms. */
+    getOptionsDebounceMs?: number;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<AutocompleteValue[]>;
     onPick: (value: AutocompleteValue) => void;
@@ -59,15 +61,7 @@ declare const Backdrop: (p: {
 }) => JSX.Element;
 
 declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface ButtonProps {
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    type?: 'button' | 'submit';
-    children?: any;
-    style?: React.CSSProperties;
+interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Defaults to 'center'. */
     textAlign?: 'left' | 'center' | 'right';
@@ -76,21 +70,16 @@ interface ButtonProps {
     round?: boolean;
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
-    className?: string;
     rightIcon?: JSX.Element;
     leftIcon?: JSX.Element;
     /** full width with max space between the text and the icon */
     iconBlock?: boolean;
     small?: boolean;
-    disabled?: boolean;
     /** The button will not respond to click or mouse events, but it will appear normal. */
     readonly?: boolean;
     waiting?: boolean;
     /** The minimum button size will be set to the themes' formButtonMinWidth. */
     enforceMinWidth?: boolean;
-    title?: string;
-    tabIndex?: number;
-    id?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 
@@ -215,17 +204,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 = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
+interface FormProps extends BaseProps {
     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;
@@ -415,20 +408,17 @@ interface LabelProps {
 }
 declare const Label: (props: LabelProps) => JSX.Element;
 
-declare const List: (props: {
-    children?: any;
+interface ListProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
     altRowColor?: boolean;
     noLines?: boolean;
-    className?: string;
     items?: (string | JSX.Element)[];
-}) => JSX.Element;
-declare const ListItem: (props: {
-    children?: any;
-    id?: string | number;
+}
+declare const List: React.ForwardRefExoticComponent<Pick<ListProps, "altRowColor" | "noLines" | "items" | "key" | "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<HTMLUListElement>>;
+interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
     variant?: 'full';
-    className?: string;
-}) => JSX.Element;
+}
+declare const ListItem: (props: ListItemProps) => JSX.Element;
 
 interface ModalProps {
     show: boolean;
@@ -670,6 +660,7 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     type?: 'select';
     /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
+    round?: boolean;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -994,4 +985,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, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, 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, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var css = require('@emotion/css');
+var lodash = require('lodash');
 var React = require('react');
 var nanoid = require('nanoid');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
@@ -8,7 +9,6 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var dateFns = require('date-fns');
-var lodash = require('lodash');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -271,6 +271,33 @@ const Backdrop$1 = (props) => {
         }, 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,
@@ -313,7 +340,8 @@ const Icon = (props) => {
 };
 
 const Button = (props) => {
-    var _a;
+    var _a, _b;
+    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rounded", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -482,7 +510,7 @@ const Button = (props) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("button", { id: props.id, tabIndex: props.tabIndex, title: props.title, disabled: disabled, style: props.style, onClick: props.onClick, className: css.cx('button', styles, props.className), onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, type: props.type || 'button' },
+    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { disabled: disabled, className: css.cx('button', styles, props.className), type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button' }),
         props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
         props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
         props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
@@ -686,9 +714,10 @@ const Input = React__namespace.forwardRef((props, ref) => {
         props.rightControl && props.type !== 'textarea' && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
 });
 
-const List = (props) => {
+const List = React__namespace.forwardRef((props, ref) => {
     const children = props.items ? props.items.map((item, i) => React__namespace.createElement(ListItem, { key: i }, item)) : props.children;
     const theme = useThemeSafely();
+    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
     const listStyles = css.css `
 		margin: 0;
 		padding: 0;
@@ -704,9 +733,10 @@ const List = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("ul", { className: css.cx('list', listStyles, props.className) }, children));
-};
+    return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
+});
 const ListItem = (props) => {
+    const liProps = __rest(props, ["variant"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -738,7 +768,7 @@ const ListItem = (props) => {
 			}
 		`}
 	`;
-    return (React__namespace.createElement("li", { className: css.cx('listItem', itemStyles, props.className) },
+    return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
         React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
 };
 
@@ -847,36 +877,55 @@ const getAutocompleteValueId = (v) => {
 };
 //TB: will need to use the new input
 const Autocomplete = (p) => {
+    var _a;
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
+    const list = React__namespace.useRef(null);
     const [values, setValues] = React__namespace.useState([]);
     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);
     }, [values]);
+    const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
+        if (!p.minChars || value.length >= p.minChars) {
+            p.getOptions(value)
+                .then(vals => {
+                setValues(vals);
+            }).catch(err => {
+                // ignore it
+            });
+        }
+        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 || p.rounded || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
     const listClass = css.css({
         position: 'absolute',
         width: '100%',
         border: theme.controls.border,
-        borderRadius: p.round || p.rounded ? theme.controls.roundedRadius : theme.controls.borderRadius,
+        borderRadius: listBorderRadius,
         boxShadow: theme.controls.boxShadow,
         backgroundColor: theme.colors.bg,
         marginTop: `-4px !important`,
         zIndex: theme.zIndexes.backdrop,
         'li:first-child button': {
-            borderTopRightRadius: theme.controls.borderRadius,
-            borderTopLeftRadius: theme.controls.borderRadius,
+            borderTopRightRadius: listBorderRadius,
+            borderTopLeftRadius: listBorderRadius,
         },
         'li:last-child button': {
-            borderBottomRightRadius: theme.controls.borderRadius,
-            borderBottomLeftRadius: theme.controls.borderRadius,
+            borderBottomRightRadius: listBorderRadius,
+            borderBottomLeftRadius: listBorderRadius,
         }
     });
     const inputClass = css.css `
@@ -888,28 +937,64 @@ const Autocomplete = (p) => {
     const buttonStyles = css.css({
         borderRadius: 0,
     });
+    const buttonMarkerClass = 'ListItem__button';
+    const getNextTabElement = (fromIndex, direction) => {
+        var _a, _b, _c;
+        if (fromIndex === -1) {
+            let buttonIndex = 0;
+            if (direction === -1) {
+                buttonIndex = shownValues.length - 1;
+            }
+            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
+        }
+        else {
+            const nextIndex = fromIndex + direction;
+            if (nextIndex >= shownValues.length || nextIndex < 0) {
+                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
+            }
+            else {
+                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
+            }
+        }
+    };
     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.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, rounded: p.rounded, 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 => {
                     const value = v;
                     p.onChange(value);
-                    if (!p.minChars || value.length >= p.minChars) {
-                        p.getOptions(value)
-                            .then(vals => {
-                            setValues(vals);
-                        }).catch(err => {
-                            // ignore it
-                        });
-                    }
-                    else {
-                        setValues([]);
+                    onChangeForOptions.current(value);
+                }, onKeyDown: e => {
+                    var _a, _b;
+                    if (showValues) {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
                     }
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { className: listClass },
-                shownValues.map(value => {
+            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+                shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
-                        React__namespace.createElement(Button, { className: buttonStyles, onClick: () => {
+                        React__namespace.createElement(Button, { onKeyDown: e => {
+                                var _a, _b;
+                                if (e.key === 'ArrowDown') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                                }
+                            }, className: css.cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
                                 p.onPick(value);
                                 setValues([]);
                                 setTimeout(() => {
@@ -1138,33 +1223,6 @@ const Calendar = (p) => {
             cells)));
 };
 
-/*! *****************************************************************************
-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 Checkbox = (props) => {
     const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readonly"]);
     const selected = props.checkedIcon || 'selected';
@@ -1673,7 +1731,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);
@@ -1689,7 +1747,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) => {
@@ -1711,8 +1769,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);
         }
@@ -1729,6 +1788,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();
@@ -1762,7 +1823,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,
@@ -1771,6 +1832,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) {
@@ -1793,26 +1856,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) => {
@@ -1826,18 +1891,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}`;
 };
 
 /** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
@@ -2678,7 +2753,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "type", "rounded", "readonly"]);
+    , ["value", "options", "onChange", "type", "rounded", "round", "readonly"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2714,6 +2789,9 @@ const Picker = (props) => {
 			${props.rounded && `
 				border-radius: ${theme.controls.roundedRadius};
 			`}
+			${props.round && `
+				border-radius: ${theme.controls.roundRadius};
+			`}
 			${props.readonly && `
 				background-color: transparent !important;
 				border: none;
@@ -3802,6 +3880,7 @@ exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
+exports.getFileSizeDisplay = getFileSizeDisplay;
 exports.mergeClassNames = mergeClassNames;
 exports.useMediaQuery = useMediaQuery;
 exports.useThemeSafely = useThemeSafely;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.8.0",
+	"version": "7.10.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",