@mackin.com/styleguide 8.0.4 → 8.1.0

package/index.d.ts

@@ -53,6 +53,7 @@ interface AutocompleteProps<T extends AutocompleteValue> {
     inputAriaAttributes?: React.AriaAttributes;
     /** Defaults to 0ms. */
     getOptionsDebounceMs?: number;
+    autoFocus?: boolean;
     onChange: (value: string) => void;
     getOptions: (value: string) => Promise<T[]>;
     onPick: (value: T) => void;
@@ -100,8 +101,10 @@ interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes
     waiting?: boolean;
     /** The minimum button size will be set to the themes' formButtonMinWidth. */
     enforceMinWidth?: boolean;
+    /** If true, bottom padding will be added to account for other inputs having space for error messages. */
+    controlAlign?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "variant" | "round" | "rightIcon" | "leftIcon" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "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<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "variant" | "round" | "rightIcon" | "leftIcon" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "controlAlign" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "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<HTMLButtonElement>>;
 
 interface CalendarProps {
     month: number;
@@ -401,16 +404,14 @@ declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "t
 /** useEffect but ignores the first call on component mount. */
 declare const useIgnoreMount: (effect: React__default.EffectCallback, deps?: React__default.DependencyList | undefined) => void;
 
-interface LabelProps {
+interface LabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
     text: string | JSX.Element;
-    children: React.ReactNode;
+    /** Displays the label NOT using a label element. */
     static?: boolean;
-    htmlFor?: string;
     /** Defaults to 'vertical'. */
     orientation?: 'vertical' | 'horizontal' | 'horizontalReverse';
     /** The alignment of the label text.  Defaults to 'left'.  Ignored for horizontal and horizontalReverse orientation. */
     align?: 'left' | 'right' | 'center';
-    className?: string;
     /** Don't wrap the children in the <label>. Fixes re-focus bugs with the date picker and possible future libraries. */
     noWrap?: boolean;
     /** Smaller text next to the main label. */
@@ -464,12 +465,8 @@ declare const Nav: (props: {
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
-interface OmniLinkProps {
+interface OmniLinkProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     href: string;
-    children: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-    className?: string;
-    style?: React.CSSProperties;
     noRouter?: boolean;
     /** Ignored if 'noRouter' is false */
     target?: string;
@@ -480,12 +477,11 @@ interface OmniLinkProps {
     iconBlock?: boolean;
     /** Corresponds to the button variants of the same name. */
     variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-    title?: string;
     /** Only for button variants. */
     round?: boolean;
     /** Only for button variants. */
     small?: boolean;
-    /** Overrides the default color (theme.colors.link) for non-button variants. To be used under exceptional circumstances. To change all link colors, override theme.colors.link directly. */
+    /** Overrides the `theme.colors.link` for non-button variants or `theme.colors.font` for the `button` variant.  Does not apply to themed button variants like `primary`. */
     colorOverride?: string;
 }
 declare const OmniLink: (props: OmniLinkProps) => JSX.Element;
@@ -720,21 +716,13 @@ interface SearchBoxProps {
     onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
+    autoFocus?: boolean;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 
 declare type Alignment = 'left' | 'right' | 'center';
 
-declare const GlobalStyles: () => null;
-
-declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
-/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
-declare const enumToEntities: <T extends {
-    [key: string]: string | number;
-}>(enumObj: T) => {
-    id: string | number;
-    name: string;
-}[];
+declare const GlobalStyles: (p: {}) => null;
 
 interface MackinTheme {
     colors: {
@@ -782,6 +770,10 @@ interface MackinTheme {
         sizeSmall: string;
         sizeLarge: string;
         headerFamily: string;
+        sizeH1: string;
+        sizeH2: string;
+        sizeH3: string;
+        sizeH4: string;
     };
     controls: {
         padding: string;
@@ -804,8 +796,10 @@ interface MackinTheme {
         gap: string;
         dividerMargin: string;
         dividerBorder: string;
+        dividerThickness: string;
         headerBoxShadow: string;
         inputErrorMinHeight: string;
+        paragraphPadding: string;
     };
     zIndexes: {
         header: number;
@@ -930,10 +924,11 @@ declare const TabLocker: (props: {
     style?: React.CSSProperties;
 }) => JSX.Element;
 
+declare type SupportedTags = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
 interface TextProps {
     children: any;
     /** Defaults to 'p'. */
-    tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
+    tag?: SupportedTags;
     align?: Alignment;
     bold?: boolean;
     italics?: boolean;
@@ -941,14 +936,19 @@ interface TextProps {
     /** You will need to set a width or max-width on the element for this to work. */
     ellipsis?: boolean;
     style?: React.CSSProperties;
+    /** Applies `theme.fonts.sizeSmall` to the font-size. */
     smaller?: boolean;
+    /** Applies `theme.fonts.sizeLarge` to the font-size. */
     larger?: boolean;
+    /** Overrides the theme font-size. */
+    fontSize?: string | number;
     spacedOut?: boolean;
     lineClamp?: number;
     /** Will remove all margin/padding from specified tag */
     noPad?: boolean;
     leftPad?: string;
 }
+/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
 declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
     style: React.CSSProperties;
     className: string;
@@ -1025,4 +1025,20 @@ declare const useWaiting: <TArgs extends any[], TReturn>(func: (...args: TArgs)
 */
 declare const useBooleanChanged: (effect: (current: boolean, previous: boolean) => void, dep: boolean | undefined) => void;
 
-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, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, 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, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+interface NormalizeCssProps {
+}
+/** Resets certain styles so there is more consistancy between browsers. */
+declare const NormalizeCss: (p: NormalizeCssProps) => null;
+
+/** Displays the value in American dollars. */
+declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
+
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+declare const enumToEntities: <T extends {
+    [key: string]: string | number;
+}>(enumObj: T) => {
+    id: string | number;
+    name: string;
+}[];
+
+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, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, 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, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -116,7 +116,7 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.transition = `box-shadow ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, opacity ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, background-color ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, filter ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}`;
     theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
-    theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
+    theme.controls.dividerBorder = `${theme.controls.dividerThickness} solid ${theme.colors.divider}`;
     theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
     theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
     theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
@@ -166,6 +166,10 @@ const defaultTheme = {
         sizeSmall: '0.7rem',
         sizeLarge: '1.3rem',
         headerFamily: 'Arial, Helvetica, sans-serif',
+        sizeH1: '2rem',
+        sizeH2: '1.5rem',
+        sizeH3: '1.17rem',
+        sizeH4: '1rem',
     },
     controls: {
         padding: '0.5rem',
@@ -188,8 +192,10 @@ const defaultTheme = {
         gap: '1rem',
         dividerMargin: '1rem',
         dividerBorder: '',
+        dividerThickness: '2px',
         headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
-        inputErrorMinHeight: ''
+        inputErrorMinHeight: '',
+        paragraphPadding: '1rem'
     },
     zIndexes: {
         header: 50,
@@ -233,7 +239,7 @@ const useThemeSafely = () => {
 
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
+    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -395,10 +401,18 @@ const Button = React__namespace.forwardRef((props, ref) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
+    const button = (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : '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)));
+    if (props.controlAlign) {
+        return (React__namespace.createElement("span", { className: css.css({
+                display: 'inline-block',
+                width: '100%',
+                paddingBottom: theme.controls.inputErrorMinHeight
+            }) }, button));
+    }
+    return button;
 });
 
 const accordianExpandTimeMs = 250;
@@ -450,8 +464,6 @@ const Accordian = (props) => {
     }, [props.open]);
     return (React__namespace.createElement("div", { className: "accordian" },
         React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
-                //TB: fix this with a global reset
-                margin: 0,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
@@ -772,23 +784,26 @@ const TabLocker = (props) => {
         } }, props.children));
 };
 
-const tagStyles = {
-    'p': {
-        marginTop: '1rem',
-        marginBottom: '1rem'
-    },
-    'h1': {
-        fontSize: '2rem',
-    },
-    'h2': {
-        fontSize: '1.5rem'
-    },
-    'h3': {
-        fontSize: '1.17rem' // Chrome default
-    },
-    'h4': {
-        fontSize: '1rem'
-    },
+const getTagStyles = (theme, tag) => {
+    switch (tag) {
+        case 'p': return {
+            marginTop: theme.controls.paragraphPadding,
+            marginBottom: theme.controls.paragraphPadding
+        };
+        case 'h1': return {
+            fontSize: theme.fonts.sizeH1
+        };
+        case 'h2': return {
+            fontSize: theme.fonts.sizeH2
+        };
+        case 'h3': return {
+            fontSize: theme.fonts.sizeH3
+        };
+        case 'h4': return {
+            fontSize: theme.fonts.sizeH4
+        };
+        default: return undefined;
+    }
 };
 const headerRegex = /h1|h2|h3|h4/;
 const alignStyles = {
@@ -796,6 +811,7 @@ const alignStyles = {
     'left': { textAlign: 'left' },
     'right': { textAlign: 'right' }
 };
+/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
 const Text = (props) => {
     var _a, _b;
     const theme = useThemeSafely();
@@ -809,8 +825,9 @@ const Text = (props) => {
     }
     const styles = css.css({
         userSelect: 'text',
-        label: 'Text'
-    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+        label: 'Text',
+        fontSize: props.fontSize ? props.fontSize : undefined
+    }, getTagStyles(theme, tagChoice), alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -904,7 +921,7 @@ const Autocomplete = (p) => {
             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: p.inputClassName, maxLength: p.maxLength, required: p.required, onChange: v => {
+            React__namespace.createElement(Input, { autoFocus: p.autoFocus, 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);
@@ -1646,6 +1663,7 @@ const CopyButton = (props) => {
 const Divider = (p) => {
     const theme = useThemeSafely();
     return (React__namespace.createElement("hr", Object.assign({}, p, { className: css.cx("divider", css.css({
+            label: 'Divider',
             margin: theme.controls.dividerMargin,
             border: theme.controls.dividerBorder
         }), p.className) })));
@@ -2248,7 +2266,9 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
         ':focus': {
             outline: 'none',
             boxShadow: 'none'
-        }
+        },
+        // FF fix to hide spinner on number elements
+        appearance: props.type === 'number' ? 'textfield' : undefined
     }, props.rightControl && {
         paddingRight: theme.controls.height
     });
@@ -2683,38 +2703,41 @@ const TextInput = React__namespace.forwardRef((props, ref) => {
 
 const Label = (props) => {
     var _a, _b, _c;
+    const labelProps = __rest(props, ["text", "static", "orientation", "align", "noWrap", "subText", "optional", "controlAlign"]);
     const theme = useThemeSafely();
-    const orientation = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
-    const align = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
+    const orientationChoice = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
+    const alignChoice = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
     const padding = '0.25rem';
     const labelStyles = css.css `
+		label: Label;
 		${padding};
 		display: flex;
-		${orientation === 'vertical' && `
+		${orientationChoice === 'vertical' && `
 			flex-direction: column;
 		`}
-		${orientation === 'horizontal' && `
+		${orientationChoice === 'horizontal' && `
 			flex-direction: row;
 			align-items: center;
 		`}
-		${orientation === 'horizontalReverse' && `
+		${orientationChoice === 'horizontalReverse' && `
 			flex-direction: row-reverse;
 			align-items: center;
 		`}
 	`;
     const labelTextStyles = css.css `
+		label: LabelText;
 		flex-shrink:0;
-		${orientation === 'vertical' && `
+		${orientationChoice === 'vertical' && `
 			margin-bottom: ${padding};
 		`}
-		${orientation === 'horizontal' && `
+		${orientationChoice === 'horizontal' && `
 			flex-direction: row;
 			margin-right:${padding};
 			${props.static && `
 				margin-right:0.5rem;
 			`}
 		`}
-		${orientation === 'horizontalReverse' && `
+		${orientationChoice === 'horizontalReverse' && `
 			margin-left:${padding};
 		`}
 		${(props.subText || props.optional) && `
@@ -2722,6 +2745,7 @@ const Label = (props) => {
 		`}
 	`;
     const labelContentStyles = css.css `
+		label: LabelContent;
 		display:inline-block;
 		width:100%;
 		${props.controlAlign && `
@@ -2730,27 +2754,27 @@ const Label = (props) => {
 		`}
 	`;
     const outerClass = props.className;
-    let labelText = React__namespace.createElement(Text, { align: align, className: labelTextStyles, tag: "div", bold: true }, props.text);
-    let subText;
+    let labelText = React__namespace.createElement(Text, { align: alignChoice, className: labelTextStyles, tag: "div", bold: true }, props.text);
+    let subTextChoice;
     if (props.subText) {
         if (typeof props.subText === 'string') {
-            subText = React__namespace.createElement(Text, { tag: "div" }, props.subText);
+            subTextChoice = React__namespace.createElement(Text, { tag: "div" }, props.subText);
         }
         else {
-            subText = props.subText;
+            subTextChoice = props.subText;
         }
     }
     else if (props.optional) {
-        subText = React__namespace.createElement(Text, { tag: "div" },
+        subTextChoice = React__namespace.createElement(Text, { tag: "div" },
             React__namespace.createElement("em", null, "(optional)"));
     }
-    if (subText) {
+    if (subTextChoice) {
         labelText = React__namespace.createElement("span", { className: css.css({ display: 'flex' }) },
             labelText,
             React__namespace.createElement("span", { className: css.css({
                     fontSize: '90%',
                     marginBottom: padding
-                }) }, subText));
+                }) }, subTextChoice));
     }
     if (props.noWrap) {
         return (React__namespace.createElement("span", { className: css.cx(labelStyles, outerClass) },
@@ -2766,7 +2790,7 @@ const Label = (props) => {
     // labels without htmlFor can cause focus, hover, and click issues when wrapping other elements.
     // this fixes the issues.
     const htmlFor = (_c = props.htmlFor) !== null && _c !== void 0 ? _c : nanoid.nanoid();
-    return (React__namespace.createElement("label", { htmlFor: htmlFor, className: css.cx('label', labelStyles, outerClass) }, content));
+    return (React__namespace.createElement("label", Object.assign({}, labelProps, { htmlFor: htmlFor, className: css.cx('label', labelStyles, outerClass) }), content));
 };
 
 /*
@@ -2893,11 +2917,12 @@ const Nav = (props) => {
     return (React__namespace.createElement("nav", { ref: nav, className: css.cx('nav', navStyles, props.className) }, props.children));
 };
 
-//TB: FUTURE make just a basic styled link so you don't have to go with React Router if you don't want to.
 const OmniLink = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
+    const linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
     const theme = useThemeSafely();
     const linkStyles = css.css `
+		label: OmniLink;
 		display: inline-block;
 		cursor: pointer;
 		text-decoration: none;
@@ -2925,11 +2950,11 @@ const OmniLink = (props) => {
 			height: ${theme.controls.height};
 			line-height: ${theme.controls.height};
 			font-weight: bold;
-			color: ${theme.colors.font};
+			color: ${(_d = props.colorOverride) !== null && _d !== void 0 ? _d : theme.colors.font};
 			&:active,
 			&:focus,
 			&:visited {
-				color: ${theme.colors.font};
+				color: ${(_e = props.colorOverride) !== null && _e !== void 0 ? _e : theme.colors.font};
 			}
 			&:focus {
 				outline: none;
@@ -3051,6 +3076,7 @@ const OmniLink = (props) => {
     const content = React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("span", null,
             props.leftIcon && React__namespace.createElement("span", { className: css.css({
+                    label: 'OmniLinkLeftIcon',
                     marginRight: '1rem',
                     display: 'inline-block',
                     minWidth: '1.5rem',
@@ -3058,13 +3084,14 @@ const OmniLink = (props) => {
                 }) }, props.leftIcon),
             props.children),
         props.rightIcon && React__namespace.createElement("span", { className: css.css({
+                label: 'OmniLinkRightIcon',
                 marginLeft: '1rem',
                 verticalAlign: 'middle'
             }) }, props.rightIcon));
     if (props.noRouter) {
-        return (React__namespace.createElement("a", { title: props.title, style: props.style, target: props.target, className: mainClassName, href: props.href, onClick: props.onClick }, content));
+        return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
     }
-    return (React__namespace.createElement(reactRouterDom.Link, { title: props.title, style: props.style, className: mainClassName, onClick: props.onClick, to: props.href }, content));
+    return (React__namespace.createElement(reactRouterDom.Link, Object.assign({}, linkProps, { className: mainClassName, to: props.href }), content));
 };
 
 const Picker = (props) => {
@@ -3084,6 +3111,7 @@ const Picker = (props) => {
     }
     const theme = useThemeSafely();
     const selectStyles = css.css `
+			background-color: ${theme.colors.bg};
 			color:  ${theme.colors.font};
 			padding-left: ${theme.controls.padding};
 			padding-right: ${theme.controls.padding};
@@ -3681,10 +3709,10 @@ const SearchBox = (props) => {
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //TB: FUTURE replace with new inputs
     return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
-        React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
+        React__namespace.createElement(Input, { autoFocus: props.autoFocus, id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
 };
 
-const GlobalStyles = () => {
+const GlobalStyles = (p) => {
     const theme = useThemeSafely();
     css.injectGlobal({
         '*': {
@@ -3712,28 +3740,6 @@ const GlobalStyles = () => {
     return null;
 };
 
-const getCurrencyDisplay = (value, isCents, denomination = '$') => {
-    let actualValue = value || 0;
-    if (isCents) {
-        actualValue /= 100;
-    }
-    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-};
-/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
-const enumToEntities = (enumObj) => {
-    const entities = [];
-    for (const key in enumObj) {
-        if (isNaN(parseInt(key, 10))) {
-            entities.push({
-                id: enumObj[key],
-                name: key
-            });
-        }
-    }
-    return entities;
-};
-//TB: FUTURE  Expose in UI.
-
 const Slider = (p) => {
     const theme = useThemeSafely();
     const currentValue = React.useRef(p.value);
@@ -4242,6 +4248,326 @@ const WaitingIndicator = (p) => {
             React__default['default'].createElement(Icon, { id: "waiting", spin: true }))));
 };
 
+/*
+    pulled from https://github.com/necolas/normalize.css/blob/master/normalize.css.
+    the IE-specific fixes have been removed.
+*/
+/** Resets certain styles so there is more consistancy between browsers. */
+const NormalizeCss = (p) => {
+    /* tslint:disable:no-unused-expression */
+    css.injectGlobal `
+	/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on 'h1' elements within 'section' and
+ * 'article' contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent 'sub' and 'sup' elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from 'fieldset' elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    'fieldset' elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to 'inherit' in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+`;
+    return null;
+};
+
+/** Displays the value in American dollars. */
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+const enumToEntities = (enumObj) => {
+    const entities = [];
+    for (const key in enumObj) {
+        if (isNaN(parseInt(key, 10))) {
+            entities.push({
+                id: enumObj[key],
+                name: key
+            });
+        }
+    }
+    return entities;
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
@@ -4275,6 +4601,7 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.Modal = Modal;
 exports.Nav = Nav;
+exports.NormalizeCss = NormalizeCss;
 exports.NumberInput = NumberInput;
 exports.OmniLink = OmniLink;
 exports.PagedResult = PagedResult;

package/package.json

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