@mackin.com/styleguide 7.2.1 → 7.6.0

package/index.d.ts

@@ -133,6 +133,7 @@ interface PagerStyleProps {
     noResultsText?: string;
     /** Used for localizations.  Defaults to 'Page' */
     pageText?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     leftControls?: JSX.Element;
@@ -182,7 +183,7 @@ interface ButtonProps {
     block?: boolean;
     /** As round as can be. */
     round?: boolean;
-    /** Just taking the edge off. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     rightIcon?: JSX.Element;
@@ -247,9 +248,11 @@ declare const ErrorModal: (props: {
 declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
 interface IProps extends FormProps {
     inline?: boolean;
+    /** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called.  Defaults to true. */
+    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" | "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<any>>;
+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<any>>;
 declare const FormFlexRow: (props: {
     children: React.ReactNode;
     className?: string;
@@ -268,9 +271,11 @@ declare const Header: (props: {
     toggleMenu?: () => void | undefined;
     /** If true, will hide menu button on larger screens */
     responsive?: boolean;
-    rightElements?: JSX.Element;
     inline?: boolean;
     className?: string;
+    leftElements?: JSX.Element;
+    rightElements?: JSX.Element;
+    /** Elements will appear in the center of the header and slightly below. */
     centerOffsetElements?: JSX.Element;
     noMenu?: boolean;
     /** Will fill the title center aligned with wrapping. */
@@ -305,6 +310,8 @@ declare const InfoPanel: (props: {
     variant?: 'info' | 'warning' | 'error' | 'negative' | 'positive';
     className?: string;
     style?: React.CSSProperties;
+    /** Defaults to 'p'. */
+    tag?: 'p' | 'div';
 }) => JSX.Element;
 
 interface InfoTipProps {
@@ -345,6 +352,7 @@ interface InputProps {
     debounceMs?: number;
     /** Defaults to 'off'. */
     autoComplete?: string;
+    autoFocus?: boolean;
     /** Called with debounce when the input changes. */
     onChange?: (value: InputValue, name?: string) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
@@ -450,7 +458,7 @@ interface OmniLinkProps {
     title?: string;
     /** Only for button variants. */
     round?: boolean;
-    /** Only for button variants. */
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually.  Only for button variants. */
     rounded?: boolean;
     /** Only for button variants. */
     small?: boolean;
@@ -469,6 +477,7 @@ interface PickerProps<T extends PickerValue> {
     })[];
     onChange: (value: T) => void;
     id?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     disabled?: boolean;
     className?: string;
@@ -495,6 +504,7 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     className?: string;
     onSubmit?: () => Promise<void>;
@@ -617,6 +627,7 @@ interface DatePickerProps {
     required?: boolean;
     /** Defaults to 250ms */
     debounceMs?: number;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     round?: boolean;
     /** This is the ms from Date.valueOf(). */
@@ -634,6 +645,7 @@ interface TabHeaderTabProps {
 interface TabHeaderProps {
     tabs: TabHeaderTabProps[];
     id?: string;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
@@ -688,6 +700,8 @@ interface MackinTheme {
     fonts: {
         family: string;
         size: string;
+        sizeSmall: string;
+        sizeLarge: string;
         headerFamily: string;
     };
     controls: {
@@ -695,6 +709,7 @@ interface MackinTheme {
         fontSize: string;
         borderWidth: string;
         border: string;
+        borderRadius: string;
         height: string;
         heightSmall: string;
         boxShadow: string;
@@ -705,6 +720,7 @@ interface MackinTheme {
         focusOutlineShadow: string;
         focusOutlineRequiredShadow: string;
         roundRadius: string;
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
         roundedRadius: string;
         disabledOpacity: string;
         formButtonMinWidth: string;
@@ -912,6 +928,7 @@ declare type AutocompleteValue = string | AutoCompleteItem;
 interface AutocompleteProps {
     value: AutocompleteValue | undefined;
     round?: boolean;
+    /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
     rounded?: boolean;
     rightControl?: JSX.Element;
     placeholder?: string;
@@ -933,4 +950,4 @@ interface AutocompleteProps {
 }
 declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
 
-export { Alignment, Autocomplete, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Autocomplete, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -108,12 +108,15 @@ const defaultTheme = {
     fonts: {
         family: 'Arial, Helvetica, sans-serif',
         size: '16px',
+        sizeSmall: '0.7rem',
+        sizeLarge: '1.3rem',
         headerFamily: 'Arial, Helvetica, sans-serif',
     },
     controls: {
         padding: '0.5rem',
         fontSize: '1rem',
         borderWidth: '1px',
+        borderRadius: '',
         border: ``,
         height: '44px',
         heightSmall: '34px',
@@ -125,6 +128,7 @@ const defaultTheme = {
         focusOutlineShadow: '',
         focusOutlineRequiredShadow: '',
         roundRadius: '3rem',
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
         roundedRadius: '0.5rem',
         disabledOpacity: '0.5',
         formButtonMinWidth: '7rem',
@@ -301,6 +305,7 @@ const Button = (props) => {
 		padding-right: ${theme.controls.padding};
 		background-color: white;
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		cursor: pointer;
 		box-shadow: ${theme.controls.boxShadow};
 		color: ${theme.colors.font};
@@ -567,7 +572,7 @@ 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: '0.7rem' }, props.larger && { fontSize: '1.3rem' }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+    }, 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 && {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -695,6 +700,7 @@ const Picker = (props) => {
 			font-size: ${theme.controls.fontSize};
 			width: 100%;
 			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
 			transition: ${theme.controls.transition};
 			&:disabled {
 				color: ${theme.colors.font};
@@ -783,6 +789,7 @@ const Pager = (props) => {
 		grid-template-columns: ${theme.controls.height} 1fr ${theme.controls.height};
 		grid-column-gap: ${theme.controls.gap};
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		padding: 0.5rem;
 		background-color: ${theme.colors.pagerBg};
 		@media(min-width: ${theme.breakpoints.tablet}) {
@@ -800,7 +807,6 @@ const Pager = (props) => {
 			display: block;
 		}
 	`;
-    //TB: check this after fixing buttons
     const buttonStyles = css.css({
         backgroundColor: 'transparent'
     });
@@ -1603,7 +1609,7 @@ const ErrorModal = (props) => {
 
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
 const Form = React__namespace.forwardRef((props, ref) => {
-    const { inline, children, onSubmit, className } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className"]);
+    const { inline, children, onSubmit, className, ajax } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax"]);
     const theme = useThemeSafely();
     return (React__namespace.createElement("form", Object.assign({}, rest, { ref: ref, className: css.cx('form', css.css({
             display: 'flex',
@@ -1611,8 +1617,10 @@ const Form = React__namespace.forwardRef((props, ref) => {
             alignItems: props.inline ? 'flex-end' : 'normal',
             gap: theme.controls.gap
         }), props.className), onSubmit: e => {
-            e.preventDefault();
-            e.stopPropagation();
+            if (ajax !== false) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
             if (onSubmit) {
                 onSubmit(e);
             }
@@ -1636,7 +1644,6 @@ const FormColumnRow = (props) => {
         }), props.className) }, props.children));
 };
 
-//TB: have a sticky variant
 const Header = (props) => {
     const theme = useThemeSafely();
     const bodyStyles = css.css `
@@ -1696,6 +1703,12 @@ const Header = (props) => {
 		grid-auto-flow: column;
 		align-items: center;
 	`;
+    const leftElementStyles = props.leftElements && css.css({
+        display: 'grid',
+        gap: '0.5rem',
+        gridAutoFlow: 'column',
+        alignItems: 'center'
+    });
     const centerElementsStyles = props.centerOffsetElements && css.css `
 		position: absolute;
 		display: flex;
@@ -1721,6 +1734,7 @@ const Header = (props) => {
     return (React__namespace.createElement("div", { className: css.cx('header', headerStyles, props.className) },
         !props.noMenu && (React__namespace.createElement(Button, { variant: "icon", className: headerButtonStyles, onClick: toggleMenu },
             React__namespace.createElement(Icon, { id: "menu" }))),
+        props.leftElements && React__namespace.createElement("div", { className: leftElementStyles }, props.leftElements),
         title,
         props.rightElements && React__namespace.createElement("div", { className: rightElementStyles }, props.rightElements),
         props.centerOffsetElements && (React__namespace.createElement("div", { className: centerElementsStyles },
@@ -1779,7 +1793,7 @@ const InfoPanel = (props) => {
 			color:${theme.colors.positiveFont};
 		`}
 	`;
-    return (React__namespace.createElement(Text, { style: props.style, align: "center", className: css.cx('infoPanel', styles, props.className) }, props.children));
+    return (React__namespace.createElement(Text, { tag: props.tag || 'p', style: props.style, align: "center", className: css.cx('infoPanel', styles, props.className) }, props.children));
 };
 
 const Popover = (p) => {
@@ -1789,13 +1803,14 @@ const Popover = (p) => {
     return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
             zIndex: theme.zIndexes.tooltip
         }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
                 React__namespace.createElement(TabLocker, null,
                     React__namespace.createElement("div", { className: css.css({
                             border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
+                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
                             boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_c = p.backgroundColor) !== null && _c !== void 0 ? _c : theme.colors.bg,
+                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
                         }) }, p.content))));
         } },
         React__namespace.createElement("span", null, p.parent)));
@@ -1926,6 +1941,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
         fontSize: theme.fonts.size,
         width: '100%',
         border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
         color: theme.colors.font,
         paddingLeft: theme.controls.padding,
         paddingRight: theme.controls.padding,
@@ -2033,15 +2049,15 @@ const Input = React__namespace.forwardRef((props, ref) => {
         };
     }
     if (props.type === 'number') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
             // set fixed default to defeat pasting stupid numbers
             maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'date') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'textarea') {
-        inputElement = React__namespace.createElement("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
+        inputElement = React__namespace.createElement("textarea", { autoFocus: props.autoFocus, ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
 			${inputStyles}
 			max-width: 100%;
 			min-height: ${theme.controls.height};
@@ -2050,7 +2066,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
     }
     else {
         // text, password, email, and url
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     const inputWrapperStyles = css.css `
 		width:100%;
@@ -2273,6 +2289,7 @@ const OmniLink = (props) => {
 			padding-left: ${theme.controls.padding};
 			padding-right: ${theme.controls.padding};
 			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
 			box-shadow: ${theme.controls.boxShadow};
 			height: ${theme.controls.height};
 			line-height: ${theme.controls.height};
@@ -2512,6 +2529,7 @@ const ToggleButtonGroup = (props) => {
     const groupStyles = css.css `
 		display: flex;
 		box-shadow: ${theme.controls.boxShadow};
+		border-radius: ${theme.controls.borderRadius};
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
@@ -2522,6 +2540,15 @@ const ToggleButtonGroup = (props) => {
 		&:nth-of-type(1n+2){
 			margin-left: -1px;
 		}
+		border-radius: 0;
+		&:first-of-type{
+			border-top-left-radius: ${theme.controls.borderRadius};
+			border-bottom-left-radius: ${theme.controls.borderRadius};
+		}
+		&:last-child {
+			border-top-right-radius: ${theme.controls.borderRadius};
+			border-bottom-right-radius: ${theme.controls.borderRadius};
+		}
 		${props.round && `
 			&:first-of-type{
 				border-top-left-radius: ${theme.controls.roundRadius};
@@ -2761,7 +2788,7 @@ const DatePicker = (p) => {
             } }))), content: (React__namespace.createElement("div", { ref: popover, className: css.css({
                 paddingLeft: '1rem',
                 paddingRight: '1rem',
-                paddingBottom: '1rem',
+                paddingBottom: '1rem'
             }) },
             React__namespace.createElement(Calendar, { onClick: date => {
                     p.onChange(date.valueOf());
@@ -2813,12 +2840,15 @@ const TabHeader = (p) => {
                     zIndex: 1,
                 }, active && {
                     border: theme.controls.border,
+                    borderRadius: theme.controls.borderRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
                     borderBottom: 'none',
                     zIndex: 3,
                 }, active && p.rounded && {
                     borderRadius: p.rounded && theme.controls.roundedRadius,
                     borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0
+                    borderBottomRightRadius: 0,
                 });
                 buttonVariant = 'link';
                 buttonStyles = css.css({
@@ -3393,6 +3423,7 @@ const Autocomplete = (p) => {
 		position: absolute;
 		width: 100%;
 		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
 		box-shadow: ${theme.controls.boxShadow};
 		background-color: ${theme.colors.bg};
 		margin-top: -4px !important;

package/package.json

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