@mackin.com/styleguide 8.1.1 → 8.2.0

package/index.d.ts

@@ -237,7 +237,7 @@ declare const Header: (props: {
     className?: string;
     leftElements?: JSX.Element;
     rightElements?: JSX.Element;
-    /** Elements will appear in the center of the header and slightly below. */
+    /** @deprecated 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. */
@@ -465,24 +465,10 @@ declare const Nav: (props: {
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
-interface OmniLinkProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
-    href: string;
+interface OmniLinkProps extends LinkProps {
     noRouter?: boolean;
     /** Ignored if 'noRouter' is false */
     target?: string;
-    rightIcon?: JSX.Element;
-    leftIcon?: JSX.Element;
-    block?: boolean;
-    /** Full width with max space between the text and the icon */
-    iconBlock?: boolean;
-    /** Corresponds to the button variants of the same name. */
-    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-    /** Only for button variants. */
-    round?: boolean;
-    /** Only for button variants. */
-    small?: boolean;
-    /** 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;
 
@@ -798,6 +784,7 @@ interface MackinTheme {
         dividerBorder: string;
         dividerThickness: string;
         headerBoxShadow: string;
+        buttonBoxShadow: string;
         inputErrorMinHeight: string;
         paragraphPadding: string;
     };
@@ -967,24 +954,23 @@ interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLA
 declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noTrim" | "customError" | "reportValueOnError" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
-interface ToggleButtonProps {
+declare type PartialButtonProps = Omit<ButtonProps, 'variant' | 'rightIcon' | 'leftIcon' | 'children'>;
+interface ToggleButtonProps extends PartialButtonProps {
     checked: boolean;
-    checkedText: string;
-    uncheckedText: string;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    className?: string;
-    checkedClassName?: string;
-    disabled?: boolean;
-    /** The minimum button size will be set to the themes' formButtonMinWidth. */
-    enforceMinWidth?: boolean;
-    checkedIcon?: JSX.Element;
-    uncheckedIcon?: JSX.Element;
+    /** @deprecated Use 'checkedChildren' */
+    checkedText?: string;
+    /** @deprecated Use 'uncheckedChildren' */
+    uncheckedText?: string;
+    checkedChildren?: React.ReactNode;
+    uncheckedChildren?: React.ReactNode;
     variant?: ToggleButtonVariant;
     checkedVariant?: ToggleButtonVariant;
-    style?: React.CSSProperties;
+    checkedClassName?: string;
     checkedStyle?: React.CSSProperties;
+    checkedIcon?: JSX.Element;
+    uncheckedIcon?: JSX.Element;
 }
-declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
+declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, "variant" | "round" | "iconBlock" | "small" | "readOnly" | "waiting" | "enforceMinWidth" | "controlAlign" | "key" | "autoFocus" | "disabled" | "form" | "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" | "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" | "checked" | "checkedText" | "uncheckedText" | "checkedChildren" | "uncheckedChildren" | "checkedVariant" | "checkedClassName" | "checkedStyle" | "checkedIcon" | "uncheckedIcon"> & React.RefAttributes<HTMLButtonElement>>;
 
 interface ToggleButtonGroupProps {
     value: string | number;
@@ -1041,4 +1027,26 @@ declare const enumToEntities: <T extends {
     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 };
+interface LinkContentProps {
+    rightIcon?: JSX.Element;
+    leftIcon?: JSX.Element;
+    children?: ReactNode;
+}
+
+interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+    href: string;
+    block?: boolean;
+    /** Full width with max space between the text and the icon */
+    iconBlock?: boolean;
+    /** Corresponds to the button variants of the same name. */
+    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+    /** Only for button variants. */
+    round?: boolean;
+    /** Only for button variants. */
+    small?: boolean;
+    /** 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 Link: (props: LinkProps) => JSX.Element;
+
+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, Link, LinkProps, 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

@@ -118,6 +118,7 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `${theme.controls.dividerThickness} solid ${theme.colors.divider}`;
     theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
+    theme.controls.buttonBoxShadow = theme.controls.boxShadow;
     theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
     theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
@@ -194,6 +195,7 @@ const defaultTheme = {
         dividerBorder: '',
         dividerThickness: '2px',
         headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        buttonBoxShadow: '',
         inputErrorMinHeight: '',
         paragraphPadding: '1rem'
     },
@@ -216,7 +218,7 @@ const defaultTheme = {
     },
     mediaQueries: {
         desktop: '',
-        tablet: ''
+        tablet: '' // set in calcDynamicThemeProps
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -248,7 +250,7 @@ const Button = React__namespace.forwardRef((props, ref) => {
 		border: ${theme.controls.border};
 		border-radius: ${theme.controls.borderRadius};
 		cursor: pointer;
-		box-shadow: ${theme.controls.boxShadow};
+		box-shadow: ${theme.controls.buttonBoxShadow};
 		color: ${theme.colors.font};
 		height: ${theme.controls.height};
 		transition: ${theme.controls.transition};
@@ -2031,7 +2033,7 @@ const Header = (props) => {
 			background-color:transparent;
 		}
 		${props.inline && `
-			position: static;
+			position: relative;
 		`}
 		${!!props.rightElements && `
 			justify-content: space-between;
@@ -2068,7 +2070,7 @@ const Header = (props) => {
 		justify-content: center;
 		left: 0;
 		right: 0;
-		margin-top: calc(${theme.layout.headerHeight} * 1.25);
+		bottom: calc(${theme.layout.headerHeight} / 2 * -1);
 	`;
     let title;
     if (props.title) {
@@ -2268,7 +2270,13 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
             boxShadow: 'none'
         },
         // FF fix to hide spinner on number elements
-        appearance: props.type === 'number' ? 'textfield' : undefined
+        appearance: props.type === 'number' ? 'none' : undefined,
+        '::-webkit-outer-spin-button': {
+            appearance: 'none'
+        },
+        '::-webkit-inner-spin-button': {
+            appearance: 'none'
+        }
     }, props.rightControl && {
         paddingRight: theme.controls.height
     });
@@ -2917,183 +2925,194 @@ const Nav = (props) => {
     return (React__namespace.createElement("nav", { ref: nav, className: css.cx('nav', navStyles, props.className) }, props.children));
 };
 
-const OmniLink = (props) => {
+const LinkContent = (props) => {
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("span", null,
+            props.leftIcon && React__namespace.createElement("span", { className: css.css({
+                    label: 'LinkLeftIcon',
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                }) }, props.leftIcon),
+            props.children),
+        props.rightIcon && React__namespace.createElement("span", { className: css.css({
+                label: 'LinkRightIcon',
+                marginLeft: '1rem',
+                verticalAlign: 'middle'
+            }) }, props.rightIcon)));
+};
+
+const generateLinkStyles = (props, theme) => {
     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;
-		color: ${(_a = props.colorOverride) !== null && _a !== void 0 ? _a : theme.colors.link};
-		transition: ${theme.controls.transition};
-		&:hover {
-			filter: ${theme.controls.hoverBrightness};
-			text-decoration: underline;
-		}
+	label: Link;
+	display: inline-block;
+	cursor: pointer;
+	text-decoration: none;
+	color: ${(_a = props.colorOverride) !== null && _a !== void 0 ? _a : theme.colors.link};
+	transition: ${theme.controls.transition};
+	&:hover {
+		filter: ${theme.controls.hoverBrightness};
+		text-decoration: underline;
+	}
+	&:active,
+	&:visited {
+		color: ${(_b = props.colorOverride) !== null && _b !== void 0 ? _b : theme.colors.link};
+	}
+	&:focus {
+		text-decoration: underline;
+		outline: none;
+		color: ${(_c = props.colorOverride) !== null && _c !== void 0 ? _c : theme.colors.link};
+	}
+	${!!props.variant && `
+		padding-left: ${theme.controls.padding};
+		padding-right: ${theme.controls.padding};
+		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
+		box-shadow: ${theme.controls.buttonBoxShadow};
+		height: ${theme.controls.height};
+		line-height: ${theme.controls.height};
+		font-weight: bold;
+		color: ${(_d = props.colorOverride) !== null && _d !== void 0 ? _d : theme.colors.font};
 		&:active,
+		&:focus,
 		&:visited {
-			color: ${(_b = props.colorOverride) !== null && _b !== void 0 ? _b : theme.colors.link};
+			color: ${(_e = props.colorOverride) !== null && _e !== void 0 ? _e : theme.colors.font};
 		}
 		&:focus {
-			text-decoration: underline;
 			outline: none;
-			color: ${(_c = props.colorOverride) !== null && _c !== void 0 ? _c : theme.colors.link};
+			box-shadow: ${theme.controls.focusOutlineShadow};
+			text-decoration: none;
 		}
-		${!!props.variant && `
-			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};
-			font-weight: bold;
-			color: ${(_d = props.colorOverride) !== null && _d !== void 0 ? _d : theme.colors.font};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${(_e = props.colorOverride) !== null && _e !== void 0 ? _e : theme.colors.font};
-			}
-			&:focus {
-				outline: none;
-				box-shadow: ${theme.controls.focusOutlineShadow};
-				text-decoration: none;
-			}
-			&:active {
-				box-shadow: none;
-			}
-			&:hover {
-				text-decoration: none;
-			}
-		`}
-		${props.variant === 'button' && `
-			text-align: center;
-		`}
-		${props.variant === 'circle' && `
-			text-align: center;
-			width: ${theme.controls.height};
-			border-radius: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			${props.small && `
-				width: ${theme.controls.heightSmall};
-				min-width: ${theme.controls.heightSmall};
-			`}
+		&:active {
+			box-shadow: none;
+		}
+		&:hover {
+			text-decoration: none;
+		}
+	`}
+	${props.variant === 'button' && `
+		text-align: center;
+	`}
+	${props.variant === 'circle' && `
+		text-align: center;
+		width: ${theme.controls.height};
+		border-radius: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		${props.small && `
+			width: ${theme.controls.heightSmall};
+			min-width: ${theme.controls.heightSmall};
 		`}
-		${props.variant === 'primary' && `
-			text-align: center;
-			background-color: ${theme.colors.primary};
+	`}
+	${props.variant === 'primary' && `
+		text-align: center;
+		background-color: ${theme.colors.primary};
+		color: ${theme.colors.primaryFont};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.primaryFont};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.primaryFont};
-			}
-		`}
-		${props.variant === 'primary2' && `
-			text-align: center;	
-			background-color: ${theme.colors.primary2};
+		}
+	`}
+	${props.variant === 'primary2' && `
+		text-align: center;	
+		background-color: ${theme.colors.primary2};
+		color: ${theme.colors.primary2Font};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.primary2Font};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.primary2Font};
-			}
-		`}
-		${props.variant === 'secondary' && `
-			text-align: center;
-			background-color: ${theme.colors.secondary};
+		}
+	`}
+	${props.variant === 'secondary' && `
+		text-align: center;
+		background-color: ${theme.colors.secondary};
+		color: ${theme.colors.secondary2Font};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.secondary2Font};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.secondary2Font};
-			}
-		`}
-		${props.variant === 'positive' && `
-			text-align: center;
-			background-color: ${theme.colors.positive};
+		}
+	`}
+	${props.variant === 'positive' && `
+		text-align: center;
+		background-color: ${theme.colors.positive};
+		color: ${theme.colors.positiveFont};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.positiveFont};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.positiveFont};
-			}
-		`}
-		${props.variant === 'negative' && `
-			text-align: center;
-			background-color: ${theme.colors.negative};
+		}
+	`}
+	${props.variant === 'negative' && `
+		text-align: center;
+		background-color: ${theme.colors.negative};
+		color: ${theme.colors.negativeFont};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.negativeFont};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.negativeFont};
-			}
-		`}
-		${props.variant === 'omg' && `
-			text-align: center;
-			background-color: ${theme.colors.omg};
+		}
+	`}
+	${props.variant === 'omg' && `
+		text-align: center;
+		background-color: ${theme.colors.omg};
+		color: ${theme.colors.omgFont};
+		&:active,
+		&:focus,
+		&:visited {
 			color: ${theme.colors.omgFont};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${theme.colors.omgFont};
-			}
-		`}
-		${props.variant === 'label' && `
-			box-shadow: none;
-			border: none;
-		`}
-		${props.variant === 'icon' && `
-			box-shadow: none;
-			border: none;
-			border-radius: 100%;
-			width: ${theme.controls.height};
-			text-align: center;
-		`}
-		${props.block && `
-			display: block;
-			width:100%;
-		`}
-		${props.iconBlock && `
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		`}
-		${props.round && `
-			border-radius: ${theme.controls.roundRadius};
-		`}
-		${props.small && `
-			font-size: 0.8rem;
-			height: ${theme.controls.heightSmall};
-			line-height: ${theme.controls.heightSmall};
-		`}
-	`;
+		}
+	`}
+	${props.variant === 'label' && `
+		box-shadow: none;
+		border: none;
+	`}
+	${props.variant === 'icon' && `
+		box-shadow: none;
+		border: none;
+		border-radius: 100%;
+		width: ${theme.controls.height};
+		text-align: center;
+	`}
+	${props.block && `
+		display: block;
+		width:100%;
+	`}
+	${props.iconBlock && `
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	`}
+	${props.round && `
+		border-radius: ${theme.controls.roundRadius};
+	`}
+	${props.small && `
+		font-size: 0.8rem;
+		height: ${theme.controls.heightSmall};
+		line-height: ${theme.controls.heightSmall};
+	`}
+`;
+    return linkStyles;
+};
+
+const OmniLink = (props) => {
+    const linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const theme = useThemeSafely();
+    const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = css.cx('omniLink', linkStyles, props.className);
-    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',
-                    verticalAlign: 'middle'
-                }) }, props.leftIcon),
-            props.children),
-        props.rightIcon && React__namespace.createElement("span", { className: css.css({
-                label: 'OmniLinkRightIcon',
-                marginLeft: '1rem',
-                verticalAlign: 'middle'
-            }) }, props.rightIcon));
+    const content = React__namespace.createElement(LinkContent, Object.assign({}, props));
     if (props.noRouter) {
         return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
     }
     return (React__namespace.createElement(reactRouterDom.Link, Object.assign({}, linkProps, { className: mainClassName, to: props.href }), content));
 };
 
+//TB: test in safari with the new arrow
+const roundPxPadding = '4px';
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
@@ -3110,41 +3129,42 @@ 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};
-			height: ${theme.controls.height};
-			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};
-				opacity: 1;
-				background-color: ${theme.colors.disabled};
-				cursor: not-allowed;
-			}
-			&:focus {
-				outline: none;
-				box-shadow: ${theme.controls.focusOutlineShadow};
-			}
-			${props.round && `
-				border-radius: ${theme.controls.roundRadius};
-			`}
-			${props.readOnly && `
-				background-color: transparent !important;
-				border: none;
-				-webkit-appearance: none;
-				-moz-appearance: none;
-				&:focus {
-					outline: none;
-					box-shadow: none;
-				}
-			`}
-		`;
+    const selectStyles = css.css({
+        // fix the arrow so browser all look the same
+        appearance: 'none',
+        paddingLeft: theme.controls.padding,
+        paddingRight: `calc(${theme.controls.padding} + 1rem)`,
+        backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
+        height: theme.controls.height,
+        fontSize: theme.controls.fontSize,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius || 0,
+        transition: theme.controls.transition,
+        '&:disabled': {
+            color: theme.colors.font,
+            opacity: 1,
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        '&:focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        }
+    }, props.round && {
+        borderRadius: theme.controls.roundRadius,
+        paddingLeft: `calc(${theme.controls.padding} + ${roundPxPadding})`,
+        paddingRight: `calc(${theme.controls.padding} + 1rem + ${roundPxPadding})`,
+    }, props.readOnly && {
+        backgroundColor: 'transparent !important',
+        backgroundImage: 'unset',
+        border: 'none',
+        '&:focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
     const select = (React__namespace.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readOnly ? -1 : selectProps.tabIndex, className: css.cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
             var _a;
             if (props.readOnly) {
@@ -3192,14 +3212,20 @@ const Picker = (props) => {
         }
         return React__namespace.createElement("option", { key: val, value: val }, label);
     })));
-    if (props.controlAlign) {
-        return (React__namespace.createElement("span", { className: css.css({
-                display: 'inline-block',
-                width: '100%',
-                paddingBottom: theme.controls.inputErrorMinHeight
-            }) }, select));
-    }
-    return select;
+    return (React__namespace.createElement("span", { className: css.css({
+            label: 'PickerWrapper',
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+            paddingBottom: props.controlAlign ? theme.controls.inputErrorMinHeight : undefined
+        }) },
+        select,
+        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.css({
+                position: 'absolute',
+                right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
+                height: theme.controls.height,
+                pointerEvents: 'none'
+            }) }))));
 };
 
 const Pager = (props) => {
@@ -3777,7 +3803,7 @@ const Slider = (p) => {
                         backgroundColor: 'white',
                         border: theme.controls.border,
                         cursor: 'grab',
-                        boxShadow: theme.controls.boxShadow,
+                        boxShadow: theme.controls.buttonBoxShadow,
                         transition: theme.controls.transition,
                         '&:focus': {
                             outline: 'none',
@@ -4108,15 +4134,24 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
         React__namespace.createElement(InputErrorDisplay, { error: validationError })));
 });
 
-const ToggleButton = (props) => {
-    return (React__namespace.createElement(Button, { type: "button", className: css.cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style, onClick: props.onClick }, props.checked ? props.checkedText : props.uncheckedText));
-};
+const ToggleButton = React__namespace.forwardRef((props, ref) => {
+    var _a, _b;
+    const buttonProps = __rest(props, ["checked", "checkedText", "uncheckedText", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
+    let children;
+    if (props.checked) {
+        children = (_a = props.checkedChildren) !== null && _a !== void 0 ? _a : props.checkedText;
+    }
+    else {
+        children = (_b = props.uncheckedChildren) !== null && _b !== void 0 ? _b : props.uncheckedText;
+    }
+    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: css.cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style }), children));
+});
 
 const ToggleButtonGroup = (props) => {
     const theme = useThemeSafely();
     const groupStyles = css.css `
 		display: flex;
-		box-shadow: ${theme.controls.boxShadow};
+		box-shadow: ${theme.controls.buttonBoxShadow};
 		border-radius: ${theme.controls.borderRadius};
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
@@ -4568,6 +4603,15 @@ const enumToEntities = (enumObj) => {
     return entities;
 };
 
+const Link = (props) => {
+    const linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const theme = useThemeSafely();
+    const linkStyles = generateLinkStyles(props, theme);
+    const mainClassName = css.cx('link', linkStyles, props.className);
+    return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }),
+        React__namespace.createElement(LinkContent, Object.assign({}, props))));
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
@@ -4597,6 +4641,7 @@ exports.InfoTip = InfoTip;
 exports.Input = Input;
 exports.ItemPager = ItemPager;
 exports.Label = Label;
+exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.Modal = Modal;

package/package.json

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