@mackin.com/styleguide 8.0.4 → 8.2.0

package/index.js

@@ -116,8 +116,9 @@ 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.controls.buttonBoxShadow = theme.controls.boxShadow;
     theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
     theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
@@ -166,6 +167,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 +193,11 @@ const defaultTheme = {
         gap: '1rem',
         dividerMargin: '1rem',
         dividerBorder: '',
+        dividerThickness: '2px',
         headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
-        inputErrorMinHeight: ''
+        buttonBoxShadow: '',
+        inputErrorMinHeight: '',
+        paragraphPadding: '1rem'
     },
     zIndexes: {
         header: 50,
@@ -210,7 +218,7 @@ const defaultTheme = {
     },
     mediaQueries: {
         desktop: '',
-        tablet: ''
+        tablet: '' // set in calcDynamicThemeProps
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -233,7 +241,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};
@@ -242,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};
@@ -395,10 +403,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 +466,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 +786,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 +813,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();
@@ -807,10 +825,11 @@ const Text = (props) => {
     if (props.leftPad) {
         style.paddingLeft = props.leftPad;
     }
-    const styles = css.css({
+    const styles = css.css(getTagStyles(theme, tagChoice), {
         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
+    }, 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 +923,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 +1665,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) })));
@@ -2013,7 +2033,7 @@ const Header = (props) => {
 			background-color:transparent;
 		}
 		${props.inline && `
-			position: static;
+			position: relative;
 		`}
 		${!!props.rightElements && `
 			justify-content: space-between;
@@ -2050,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) {
@@ -2248,6 +2268,14 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
         ':focus': {
             outline: 'none',
             boxShadow: 'none'
+        },
+        // FF fix to hide spinner on number elements
+        appearance: props.type === 'number' ? 'none' : undefined,
+        '::-webkit-outer-spin-button': {
+            appearance: 'none'
+        },
+        '::-webkit-inner-spin-button': {
+            appearance: 'none'
         }
     }, props.rightControl && {
         paddingRight: theme.controls.height
@@ -2683,38 +2711,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 +2753,7 @@ const Label = (props) => {
 		`}
 	`;
     const labelContentStyles = css.css `
+		label: LabelContent;
 		display:inline-block;
 		width:100%;
 		${props.controlAlign && `
@@ -2730,27 +2762,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 +2798,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,180 +2925,194 @@ 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;
-    const theme = useThemeSafely();
+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 linkStyles = css.css `
-		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: ${theme.colors.font};
-			&:active,
-			&:focus,
-			&:visited {
-				color: ${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({
-                    marginRight: '1rem',
-                    display: 'inline-block',
-                    minWidth: '1.5rem',
-                    verticalAlign: 'middle'
-                }) }, props.leftIcon),
-            props.children),
-        props.rightIcon && React__namespace.createElement("span", { className: css.css({
-                marginLeft: '1rem',
-                verticalAlign: 'middle'
-            }) }, props.rightIcon));
+    const content = React__namespace.createElement(LinkContent, Object.assign({}, props));
     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));
 };
 
+//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
@@ -3083,40 +3129,42 @@ const Picker = (props) => {
         }
     }
     const theme = useThemeSafely();
-    const selectStyles = css.css `
-			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) {
@@ -3164,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) => {
@@ -3681,10 +3735,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 +3766,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);
@@ -3771,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',
@@ -4102,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};
@@ -4242,6 +4283,335 @@ 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;
+};
+
+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;
@@ -4271,10 +4641,12 @@ exports.InfoTip = InfoTip;
 exports.Input = Input;
 exports.ItemPager = ItemPager;
 exports.Label = Label;
+exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.Modal = Modal;
 exports.Nav = Nav;
+exports.NormalizeCss = NormalizeCss;
 exports.NumberInput = NumberInput;
 exports.OmniLink = OmniLink;
 exports.PagedResult = PagedResult;