@mackin.com/styleguide 8.0.0-beta.7 → 8.0.0

package/index.js

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = require('@emotion/css');
-var lodash = require('lodash');
 var React = require('react');
-var nanoid = require('nanoid');
+var css = require('@emotion/css');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var lodash = require('lodash');
 var dateFns = require('date-fns');
+var nanoid = require('nanoid');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -17,29 +17,97 @@ var ReactSlider = require('react-slider');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () {
-						return e[k];
-					}
-				});
-			}
-		});
-	}
-	n['default'] = e;
-	return Object.freeze(n);
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactSlider__default = /*#__PURE__*/_interopDefaultLegacy(ReactSlider);
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const ICONS = {
+    add: proSolidSvgIcons.faPlus,
+    delete: proSolidSvgIcons.faTrashAlt,
+    save: proSolidSvgIcons.faSave,
+    activate: proRegularSvgIcons.faCheckCircle,
+    deactivate: proRegularSvgIcons.faCircle,
+    online: proLightSvgIcons.faWifi,
+    offline: proLightSvgIcons.faWifiSlash,
+    noIcon: proSolidSvgIcons.faCrow,
+    close: proSolidSvgIcons.faTimes,
+    waiting: proSolidSvgIcons.faSync,
+    refresh: proSolidSvgIcons.faSync,
+    menu: proLightSvgIcons.faBars,
+    search: proLightSvgIcons.faSearch,
+    expand: proRegularSvgIcons.faChevronDown,
+    collapse: proRegularSvgIcons.faChevronUp,
+    help: proLightSvgIcons.faQuestionCircle,
+    debug: proLightSvgIcons.faNarwhal,
+    goTo: proLightSvgIcons.faChevronRight,
+    goBack: proLightSvgIcons.faChevronLeft,
+    download: proLightSvgIcons.faCloudDownload,
+    upload: proLightSvgIcons.faCloudUpload,
+    selected: proSolidSvgIcons.faCheckSquare,
+    unselected: proRegularSvgIcons.faSquare,
+    pagerLeft: proLightSvgIcons.faChevronLeft,
+    pagerRight: proLightSvgIcons.faChevronRight,
+    sortAsc: proRegularSvgIcons.faChevronUp,
+    sortDesc: proRegularSvgIcons.faChevronDown,
+    pickDate: proLightSvgIcons.faCalendarAlt,
+    copy: proLightSvgIcons.faCopy,
+    paste: proLightSvgIcons.faPaste,
+    clear: proRegularSvgIcons.faTimesCircle,
+    hide: proLightSvgIcons.faEyeSlash,
+    show: proLightSvgIcons.faEye
+};
+const Icon = (props) => {
+    var _a;
+    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
+};
+
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 const calcDynamicThemeProps = (theme) => {
     theme.controls.border = `${theme.controls.borderWidth} solid ${theme.colors.border}`;
@@ -47,6 +115,9 @@ const calcDynamicThemeProps = (theme) => {
     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.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
+    theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
+    theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
 const defaultTheme = {
     colors: {
@@ -76,7 +147,7 @@ const defaultTheme = {
         divider: 'rgba(0, 0, 0, 0.50)',
         nav: '#7851a9',
         navFont: 'rgba(255, 255, 255, 0.9)',
-        focusOutline: 'hsl(155deg 67% 85%)',
+        focusOutline: 'rgb(0 188 212 / 75%)',
         progressBg: '#007bff63',
         progressFill: '#007bff',
         modalBg: 'white',
@@ -115,7 +186,8 @@ const defaultTheme = {
         gap: '1rem',
         dividerMargin: '1rem',
         dividerBorder: '',
-        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)'
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        inputErrorMinHeight: ''
     },
     zIndexes: {
         header: 50,
@@ -133,6 +205,10 @@ const defaultTheme = {
     breakpoints: {
         desktop: '800px',
         tablet: '768px'
+    },
+    mediaQueries: {
+        desktop: '',
+        tablet: ''
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -153,193 +229,9 @@ const useThemeSafely = () => {
     return defaultTheme;
 };
 
-/** @deprecated Use Backdrop2 going forward. */
-const Backdrop$1 = (props) => {
-    var _a;
-    const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
-    const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
-    const theme = useThemeSafely();
-    const backdropStyles = css.css `
-		opacity: 0;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: ${theme.colors.backdrop};
-		transition: opacity ${showTimeMs}ms ease-in-out;
-		visibility: hidden;
-		user-select: none;
-		-webkit-tap-highlight-color: transparent;
-	`;
-    const showStyles = css.css `
-		z-index: ${theme.zIndexes.backdrop} !important;
-		opacity: 1.0 !important;
-		label:${backdropId.current};
-	`;
-    const bodyStyles = css.css `
-		overflow: hidden !important;
-		label:${backdropId.current};
-	`;
-    const bodyResponsiveStyles = css.css `
-		label:${backdropId.current};
-		@media(min-width:${theme.breakpoints.desktop}) {
-			overflow: auto !important;
-		}
-	`;
-    const bodyReverseResponsiveStyles = css.css `
-		${bodyStyles}
-		overflow: auto !important;
-		@media(min-width:${theme.breakpoints.desktop}) {
-			overflow: hidden !important;
-		}
-	`;
-    const styles = css.css `
-		${backdropStyles}
-		${props.onClick && `
-			cursor: pointer;
-		`}
-		${props.transparent && `
-			background-color: transparent;
-			transition: none;
-		`}
-		${props.children && `
-			display: flex;
-			justify-content:center;
-			align-items: center;
-		`}
-		${props.responsive && `
-			@media(min-width:${theme.breakpoints.desktop}) {
-				display: none;
-			}
-		`}
-		${props.reverseResponsive && `
-			display: none;
-			@media(min-width:${theme.breakpoints.desktop}) {
-				display: flex;
-			}
-		`}
-	`;
-    const backdrop = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        if (backdrop && backdrop.current) {
-            if (props.show && backdrop.current.style.visibility !== 'visible') {
-                backdrop.current.style.visibility = 'visible';
-                backdrop.current.classList.add(showStyles);
-                if (!props.allowScroll) {
-                    document.body.classList.add(bodyStyles);
-                    if (props.responsive) {
-                        document.body.classList.add(bodyResponsiveStyles);
-                    }
-                    else if (props.reverseResponsive) {
-                        document.body.classList.add(bodyReverseResponsiveStyles);
-                    }
-                }
-            }
-            else if (!props.show && backdrop.current.style.visibility === 'visible') {
-                backdrop.current.classList.remove(showStyles);
-                if (backdrop && backdrop.current) {
-                    backdrop.current.style.visibility = 'hidden';
-                    if (!props.allowScroll) {
-                        document.body.classList.remove(bodyStyles);
-                        if (props.responsive) {
-                            document.body.classList.remove(bodyResponsiveStyles);
-                        }
-                        else if (props.reverseResponsive) {
-                            document.body.classList.remove(bodyReverseResponsiveStyles);
-                        }
-                    }
-                }
-            }
-        }
-        return () => {
-            if (backdrop && backdrop.current && !props.allowScroll) {
-                document.body.classList.remove(bodyStyles);
-            }
-        };
-    }, [props.show]);
-    return (React__namespace.createElement("div", { onMouseDown: e => {
-            var _a;
-            e.stopPropagation();
-            e.preventDefault();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-        }, onClick: e => {
-            e.stopPropagation();
-            e.preventDefault();
-        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
-};
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-const ICONS = {
-    add: proSolidSvgIcons.faPlus,
-    delete: proSolidSvgIcons.faTrashAlt,
-    save: proSolidSvgIcons.faSave,
-    activate: proRegularSvgIcons.faCheckCircle,
-    deactivate: proRegularSvgIcons.faCircle,
-    online: proLightSvgIcons.faWifi,
-    offline: proLightSvgIcons.faWifiSlash,
-    noIcon: proSolidSvgIcons.faCrow,
-    close: proSolidSvgIcons.faTimes,
-    waiting: proSolidSvgIcons.faSync,
-    refresh: proSolidSvgIcons.faSync,
-    menu: proLightSvgIcons.faBars,
-    search: proLightSvgIcons.faSearch,
-    expand: proRegularSvgIcons.faChevronDown,
-    collapse: proRegularSvgIcons.faChevronUp,
-    help: proLightSvgIcons.faQuestionCircle,
-    debug: proLightSvgIcons.faNarwhal,
-    goTo: proLightSvgIcons.faChevronRight,
-    goBack: proLightSvgIcons.faChevronLeft,
-    download: proLightSvgIcons.faCloudDownload,
-    upload: proLightSvgIcons.faCloudUpload,
-    selected: proSolidSvgIcons.faCheckSquare,
-    unselected: proRegularSvgIcons.faSquare,
-    pagerLeft: proLightSvgIcons.faChevronLeft,
-    pagerRight: proLightSvgIcons.faChevronRight,
-    sortAsc: proRegularSvgIcons.faChevronUp,
-    sortDesc: proRegularSvgIcons.faChevronDown,
-    pickDate: proLightSvgIcons.faCalendarAlt,
-    copy: proLightSvgIcons.faCopy,
-    paste: proLightSvgIcons.faPaste,
-    clear: proRegularSvgIcons.faTimesCircle,
-    hide: proLightSvgIcons.faEyeSlash,
-    show: proLightSvgIcons.faEye
-};
-const Icon = (props) => {
+const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
-    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
-};
-
-const Button = (props) => {
-    var _a, _b;
-    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
+    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -356,7 +248,6 @@ const Button = (props) => {
 		font-weight: bold;
 		flex-shrink: 0;
 		min-width: ${theme.controls.height};
-		text-align: ${(_a = props.textAlign) !== null && _a !== void 0 ? _a : 'center'};
 	
 		&:disabled {
 			opacity: ${theme.controls.disabledOpacity};
@@ -475,7 +366,7 @@ const Button = (props) => {
 		${props.enforceMinWidth && `
 			min-width: ${theme.controls.formButtonMinWidth};
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 			box-shadow: none;
 			pointer-events:none;
@@ -495,9 +386,6 @@ const Button = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.block && `
-			width: 100%;
-		`}
 		${props.iconBlock && `
 			display: flex;
 			justify-content: space-between;
@@ -505,10 +393,94 @@ const Button = (props) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("button", Object.assign({}, nativeProps, { disabled: disabled, className: css.cx('button', styles, props.className), type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button' }),
+    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' }),
         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)));
+});
+
+const accordianExpandTimeMs = 250;
+const accordianMaxHeight = 1020;
+const accordianTimingFunction = 'ease-in-out';
+// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
+// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
+const visibleStyle = css.css({
+    overflow: 'visible !important'
+});
+const Accordian = (props) => {
+    var _a, _b, _c, _d;
+    const [open, setOpen] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const content = React__namespace.useRef(null);
+    const contentStyles = css.css({
+        overflow: 'hidden',
+        maxHeight: 0,
+        transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
+    });
+    const expandedContentStyles = css.css({
+        maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
+    });
+    const expandedContentWrapperStyles = !props.noPad ? css.css({
+        padding: '0 1rem 1rem 1rem'
+    }) : undefined;
+    React__namespace.useEffect(() => {
+        const currentContent = content.current;
+        if (currentContent) {
+            if (open) {
+                currentContent.classList.add(expandedContentStyles);
+                window.setTimeout(() => {
+                    currentContent.classList.add(visibleStyle);
+                }, accordianExpandTimeMs);
+            }
+            else {
+                currentContent.classList.remove(visibleStyle, expandedContentStyles);
+            }
+        }
+    }, [open]);
+    React__namespace.useEffect(() => {
+        var _a;
+        if (props.open === undefined) {
+            // technically, we only need to use this effect if props.open was initialized with a boolean.
+            // you can't have conditional effects so here we go...
+            return;
+        }
+        setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
+    }, [props.open]);
+    return (React__namespace.createElement("div", { className: "accordian" },
+        React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                height: 'auto',
+                minHeight: theme.controls.height,
+                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+            }, props.className)), onClick: e => {
+                e.stopPropagation();
+                if (props.onChange) {
+                    props.onChange(!open);
+                }
+                else {
+                    setOpen(!open);
+                }
+            }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
+            React__namespace.createElement("span", null, props.header)),
+        React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+};
+const useAccordianState = (count, openIndex) => {
+    const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
+        return i === openIndex;
+    }));
+    return [
+        panels,
+        (index, open) => {
+            setShowPanel(previousState => {
+                const newState = previousState.slice().fill(false);
+                newState[index] = open;
+                return newState;
+            });
+        }
+    ];
 };
 
 const DEFAULT_DEBOUNCE_MS = 250;
@@ -852,25 +824,12 @@ const Text = (props) => {
     }, props.children);
 };
 
-const DEFAULT_MAX_SHOWN_VALUES = 7;
-const getAutocompleteValueText = (v) => {
-    if (!v) {
-        return '';
-    }
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.name;
-};
-const getAutocompleteValueId = (v) => {
-    if (typeof v === 'string') {
-        return v;
-    }
-    return v.id;
-};
-//TB: will need to use the new input
+//TB: FUTURE will need to use the new input
+const defaultMaxShownValues = 7;
+const buttonMarkerClass = 'ListItem__button';
 const Autocomplete = (p) => {
     var _a;
+    const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
@@ -878,7 +837,7 @@ const Autocomplete = (p) => {
     const showValues = React__namespace.useMemo(() => values.length > 0, [values]);
     const shownValues = React__namespace.useMemo(() => {
         var _a;
-        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
+        return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues);
     }, [values]);
     const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
         if (!p.minChars || value.length >= p.minChars) {
@@ -892,45 +851,7 @@ const Autocomplete = (p) => {
         else {
             setValues([]);
         }
-    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
-    const theme = useThemeSafely();
-    const baseClass = css.css `
-		label: Autocomplete;
-		position: relative;
-		width: 100%;
-	`;
-    let listBorderRadius = '';
-    if (p.round || theme.controls.borderRadius) {
-        listBorderRadius = theme.controls.borderRadius || '0.5rem';
-    }
-    const listClass = css.css({
-        position: 'absolute',
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: listBorderRadius,
-        boxShadow: theme.controls.boxShadow,
-        backgroundColor: theme.colors.bg,
-        marginTop: `-4px !important`,
-        zIndex: theme.zIndexes.backdrop,
-        'li:first-child button': {
-            borderTopRightRadius: listBorderRadius,
-            borderTopLeftRadius: listBorderRadius,
-        },
-        'li:last-child button': {
-            borderBottomRightRadius: listBorderRadius,
-            borderBottomLeftRadius: listBorderRadius,
-        }
-    });
-    const inputClass = css.css `
-		${showValues && `
-			z-index: ${theme.zIndexes.backdrop};
-			position: relative;
-		`}
-	`;
-    const buttonStyles = css.css({
-        borderRadius: 0,
-    });
-    const buttonMarkerClass = 'ListItem__button';
+    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: false, trailing: true }));
     const getNextTabElement = (fromIndex, direction) => {
         var _a, _b, _c;
         if (fromIndex === -1) {
@@ -950,15 +871,41 @@ const Autocomplete = (p) => {
             }
         }
     };
-    return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
-        React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
+    React__namespace.useEffect(() => {
+        const clearItems = () => {
+            if (values.length > 0) {
+                setValues([]);
+            }
+        };
+        document.addEventListener('click', clearItems);
+        return () => {
+            document.removeEventListener('click', clearItems);
+        };
+    }, [values]);
+    let listBorderRadius = '';
+    if (p.round || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
+    return (React__namespace.createElement("div", { onClick: e => {
+            e.stopPropagation();
+        }, onKeyDown: e => {
+            var _a;
+            if (e.key === 'Escape') {
+                setValues([]);
+                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, ref: element, className: css.cx(css.css({
+            position: 'relative',
+            width: '100%',
+            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: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+            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 => {
                     const value = v;
                     p.onChange(value);
                     onChangeForOptions.current(value);
                 }, onKeyDown: e => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     if (showValues) {
                         if (e.key === 'ArrowDown') {
                             e.preventDefault();
@@ -971,8 +918,26 @@ const Autocomplete = (p) => {
                             (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                         }
                     }
+                    (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
                 }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
-            showValues && (React__namespace.createElement(List, { ref: list, className: listClass },
+            showValues && (React__namespace.createElement(List, { ref: list, className: css.css({
+                    position: 'absolute',
+                    width: '100%',
+                    border: theme.controls.border,
+                    borderRadius: listBorderRadius,
+                    boxShadow: theme.controls.boxShadow,
+                    backgroundColor: theme.colors.bg,
+                    marginTop: `-4px !important`,
+                    zIndex: theme.zIndexes.backdrop,
+                    'li:first-child button': {
+                        borderTopRightRadius: listBorderRadius,
+                        borderTopLeftRadius: listBorderRadius,
+                    },
+                    'li:last-child button': {
+                        borderBottomRightRadius: listBorderRadius,
+                        borderBottomLeftRadius: listBorderRadius,
+                    }
+                }) },
                 shownValues.map((value, listItemIndex) => {
                     return (React__namespace.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
                         React__namespace.createElement(Button, { onKeyDown: e => {
@@ -987,7 +952,9 @@ const Autocomplete = (p) => {
                                     e.preventDefault();
                                     (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                                 }
-                            }, className: css.cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
+                            }, className: css.cx(buttonMarkerClass + listItemIndex, css.css({
+                                borderRadius: 0,
+                            })), onClick: () => {
                                 p.onPick(value);
                                 setValues([]);
                                 setTimeout(() => {
@@ -1006,68 +973,208 @@ const Autocomplete = (p) => {
                         " of ",
                         values.length.toLocaleString(),
                         " results."))))))));
+};
+const getAutocompleteValueText = (v) => {
+    if (!v) {
+        return '';
+    }
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.name;
+};
+const getAutocompleteValueId = (v) => {
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.id;
+};
+
+/** @deprecated Use Backdrop2 going forward. */
+const Backdrop$1 = (props) => {
+    var _a;
+    const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
+    const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
+    const theme = useThemeSafely();
+    const backdropStyles = css.css `
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: ${theme.colors.backdrop};
+		transition: opacity ${showTimeMs}ms ease-in-out;
+		visibility: hidden;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	`;
+    const showStyles = css.css `
+		z-index: ${theme.zIndexes.backdrop} !important;
+		opacity: 1.0 !important;
+		label:${backdropId.current};
+	`;
+    const bodyStyles = css.css `
+		overflow: hidden !important;
+		label:${backdropId.current};
+	`;
+    const bodyResponsiveStyles = css.css `
+		label:${backdropId.current};
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: auto !important;
+		}
+	`;
+    const bodyReverseResponsiveStyles = css.css `
+		${bodyStyles}
+		overflow: auto !important;
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: hidden !important;
+		}
+	`;
+    const styles = css.css `
+		${backdropStyles}
+		${props.onClick && `
+			cursor: pointer;
+		`}
+		${props.transparent && `
+			background-color: transparent;
+			transition: none;
+		`}
+		${props.children && `
+			display: flex;
+			justify-content:center;
+			align-items: center;
+		`}
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: none;
+			}
+		`}
+		${props.reverseResponsive && `
+			display: none;
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: flex;
+			}
+		`}
+	`;
+    const backdrop = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (backdrop && backdrop.current) {
+            if (props.show && backdrop.current.style.visibility !== 'visible') {
+                backdrop.current.style.visibility = 'visible';
+                backdrop.current.classList.add(showStyles);
+                if (!props.allowScroll) {
+                    document.body.classList.add(bodyStyles);
+                    if (props.responsive) {
+                        document.body.classList.add(bodyResponsiveStyles);
+                    }
+                    else if (props.reverseResponsive) {
+                        document.body.classList.add(bodyReverseResponsiveStyles);
+                    }
+                }
+            }
+            else if (!props.show && backdrop.current.style.visibility === 'visible') {
+                backdrop.current.classList.remove(showStyles);
+                if (backdrop && backdrop.current) {
+                    backdrop.current.style.visibility = 'hidden';
+                    if (!props.allowScroll) {
+                        document.body.classList.remove(bodyStyles);
+                        if (props.responsive) {
+                            document.body.classList.remove(bodyResponsiveStyles);
+                        }
+                        else if (props.reverseResponsive) {
+                            document.body.classList.remove(bodyReverseResponsiveStyles);
+                        }
+                    }
+                }
+            }
+        }
+        return () => {
+            if (backdrop && backdrop.current && !props.allowScroll) {
+                document.body.classList.remove(bodyStyles);
+            }
+        };
+    }, [props.show]);
+    return (React__namespace.createElement("div", { onMouseDown: e => {
+            var _a;
+            e.stopPropagation();
+            e.preventDefault();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, onClick: e => {
+            e.stopPropagation();
+            e.preventDefault();
+        }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
+};
+
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default['default'].useRef(false);
+    React__default['default'].useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else {
+            effect();
+        }
+    }, deps);
 };
 
 const useLogger = (componentName, enabled) => {
     return (...messages) => {
         if (enabled) {
             // tslint:disable-next-line
-            console.log(componentName, ...messages);
+            console.log(`[${componentName}]`, ...messages);
         }
     };
 };
 
+const portalId = 'backdrop';
 const BackdropContext = React__default['default'].createContext({
     showing: false,
     showCount: 0,
-    portalId: 'backdrop',
-    setShow: s => {
+    portalId: portalId,
+    setShow: (s, f) => {
         /* empty */
     }
 });
 const BackdropContextProvider = (p) => {
     var _a;
     const [showCount, setShowCount] = React.useState(0);
-    const log = useLogger('BackdropContextProvider', (_a = p.debug) !== null && _a !== void 0 ? _a : false);
-    if (p.debug) {
+    const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
                 log('un-mounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('showCount changed', showCount);
         }, [showCount]);
     }
     return (React__default['default'].createElement(BackdropContext.Provider, { value: {
-            portalId: 'backdrop',
+            portalId: portalId,
             showing: showCount > 0,
             showCount: showCount,
-            setShow: (show) => {
+            setShow: (show, from) => {
                 if (show) {
                     setShowCount(s => {
                         const count = s + 1;
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
                 else {
                     setShowCount(s => {
                         const count = Math.max(0, s - 1);
-                        log('setShowCount', count);
-                        log('showCount was', showCount);
+                        log(`setShow from ${from} ${s} -> ${count}`);
                         return count;
                     });
                 }
             }
         } },
         p.children,
-        p.debug && (React__default['default'].createElement("p", { className: css.css({
+        p.__debug && (React__default['default'].createElement("p", { className: css.css({
                 position: 'fixed',
                 top: 0, right: 0,
                 backgroundColor: '#ff00004f',
@@ -1084,23 +1191,20 @@ const BackdropOverlay = (p) => {
     const context = React.useContext(BackdropContext);
     const theme = useThemeSafely();
     const showTimeMs = (_a = p.showTimeMs) !== null && _a !== void 0 ? _a : 250;
-    const log = useLogger('BackdropOverlay', (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger('BackdropOverlay', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
-        React.useEffect(() => {
+        useIgnoreMount(() => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
     return (React__default['default'].createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false);
+            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css.css({
             cursor: 'pointer',
@@ -1116,12 +1220,12 @@ const BackdropOverlay = (p) => {
         }) }));
 };
 const Backdrop = (p) => {
-    return (React__default['default'].createElement(BackdropContextProvider, { debug: p.debug },
+    return (React__default['default'].createElement(BackdropContextProvider, { __debug: p.__debug },
         React__default['default'].createElement("div", { className: css.css({
                 height: '100%'
             }) },
             p.children,
-            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, debug: p.debug }))));
+            React__default['default'].createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, __debug: p.__debug }))));
 };
 
 const Calendar = (p) => {
@@ -1217,7 +1321,7 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
-    const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readonly"]);
+    const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
     const selected = props.checkedIcon || 'selected';
     const unselected = props.uncheckedIcon || 'unselected';
     const theme = useThemeSafely();
@@ -1232,7 +1336,7 @@ const Checkbox = (props) => {
     }
     const checkboxStyles = css.css `
 		display: inline-block;
-		${!props.disabled && !props.readonly && `
+		${!props.disabled && !props.readOnly && `
 			&:hover {
 				filter: ${theme.controls.hoverBrightness};
 			}
@@ -1246,7 +1350,7 @@ const Checkbox = (props) => {
 		${props.disabled && `
 			cursor: not-allowed;
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 		`}
 	`;
@@ -1258,7 +1362,7 @@ const Checkbox = (props) => {
 		width: 0;
 		opacity: 0; 
 
-		${!props.readonly && `
+		${!props.readOnly && `
 			&:focus + .checkboxIcon {
 				box-shadow: ${theme.controls.focusOutlineShadow};
 			}
@@ -1272,7 +1376,7 @@ const Checkbox = (props) => {
 			background-color: ${theme.colors.disabled};
 			cursor: not-allowed;
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 		`}
 		${props.checked && `
@@ -1281,8 +1385,8 @@ const Checkbox = (props) => {
 	`;
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
-            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readonly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
-                    if (props.readonly) {
+            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+                    if (props.readOnly) {
                         e.preventDefault();
                         return;
                     }
@@ -1293,11 +1397,41 @@ const Checkbox = (props) => {
             props.children)));
 };
 
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = React.useRef(undefined);
+    React.useEffect(() => {
+        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+            //console.log('[useBooleanChanged] change called')
+        }
+    }, [dep]);
+};
+
 // Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
 const canUseDom = !!(typeof window !== 'undefined' &&
     window.document &&
     window.document.createElement);
 let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
 const useScrollbarSize = (recalc) => {
     if ((!size && size !== 0) || recalc) {
         if (canUseDom) {
@@ -1315,7 +1449,6 @@ const useScrollbarSize = (recalc) => {
     return size;
 };
 
-let htmlBodyStyles;
 const Modal = (p) => {
     var _a, _b, _c, _d;
     const backdrop = React.useContext(BackdropContext);
@@ -1323,42 +1456,54 @@ const Modal = (p) => {
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
     const contentRef = React__default['default'].useRef(null);
-    const log = useLogger(`Modal ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
+    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
+    const bodyStyles = React.useRef('');
+    const tryRemoveBodyStyles = () => {
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
+        }
+    };
     React.useEffect(() => {
         log('mounted');
         return () => {
-            // handle the use of modals that are rendered only as show=true and then unmounted.
-            backdrop.setShow(false);
-            log('backdrop.setShow', false);
-            if (backdrop.showCount <= 1 && htmlBodyStyles) {
-                log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
-                document.body.classList.remove(htmlBodyStyles);
+            var _a;
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveBodyStyles();
+            }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
             }
             log('un-mounted');
         };
     }, []);
-    React.useEffect(() => {
-        log('show changed', p.show);
-        backdrop.setShow(p.show);
-        log('backdrop.setShow', true);
-        if (!htmlBodyStyles) {
-            log('creating singleton htmlBodyStyles');
-            htmlBodyStyles = css.css({
+    useBooleanChanged((show, previousShow) => {
+        var _a, _b, _c;
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
+        log('backdrop.setShow', show);
+        if (!bodyStyles.current) {
+            bodyStyles.current = css.css({
+                label: 'ModalBodyOverrides_' + ((_c = (_b = p.id) === null || _b === void 0 ? void 0 : _b.replace(/\s+/, '')) !== null && _c !== void 0 ? _c : nanoid.nanoid()),
                 overflow: 'hidden',
                 paddingRight: `${useScrollbarSize()}px`
             });
+            log('creating singleton bodyStyles', bodyStyles.current);
         }
-        if (p.show) {
-            log('adding htmlBodyStyles');
-            document.body.classList.add(htmlBodyStyles);
+        if (show) {
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            document.body.classList.add(bodyStyles.current);
         }
         else {
-            if (backdrop.showCount <= 1) {
-                log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
-                document.body.classList.remove(htmlBodyStyles);
-            }
+            log('this modal is hiding. try removing singleton bodyStyles');
+            tryRemoveBodyStyles();
         }
-    }, [p.show]);
+    }, p.show);
     React__default['default'].useLayoutEffect(() => {
         var _a;
         if (p.show === true) {
@@ -1454,320 +1599,47 @@ const ConfirmModal = (props) => {
     const modalStyle = css.css `
 		${props.variant === 'omg' && `
 			.modalHeader {
-				background-color:${theme.colors.omg};
-				color:${theme.colors.omgFont};
-			}
-		`}
-	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
-        React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
-            React__namespace.createElement(Text, { align: "center" }, props.text),
-            React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
-                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
-                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
-};
-
-const CopyButton = (props) => {
-    const [copied, setCopied] = React__namespace.useState(false);
-    return (React__namespace.createElement(Button, { title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: () => {
-            setCopied(false);
-        }, onClick: e => {
-            const button = e.currentTarget;
-            let copySuccess = false;
-            try {
-                const text = document.querySelector(props.selector);
-                text.select();
-                copySuccess = document.execCommand('copy');
-                // the input gets focus on select.  bring it back.
-                button.focus();
-            }
-            catch (err) {
-                // You done wrong. 
-            }
-            setCopied(copySuccess);
-        } },
-        React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
-};
-
-const defaultMaxLength$1 = 100;
-const BaseInput = React__namespace.forwardRef((props, ref) => {
-    var _a;
-    const theme = useThemeSafely();
-    const { rightControl, round, wrapperClassName } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName"]);
-    const inputStyles = css.css({
-        fontFamily: theme.fonts.family,
-        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,
-        height: theme.controls.height,
-        transition: theme.controls.transition,
-        ':focus': {
-            outline: 'none',
-            boxShadow: theme.controls.focusOutlineShadow
-        },
-        ':disabled': {
-            backgroundColor: theme.colors.disabled,
-            cursor: 'not-allowed'
-        },
-        ':invalid': {
-            borderColor: theme.colors.required,
-            ':focus': {
-                boxShadow: theme.controls.focusOutlineRequiredShadow
-            }
-        },
-    }, props.round && {
-        borderRadius: theme.controls.roundRadius,
-        paddingLeft: `calc(${theme.controls.padding} * 2)`,
-        paddingRight: `calc(${theme.controls.padding} * 2)`
-    }, props.readOnly && {
-        backgroundColor: 'transparent',
-        cursor: 'default',
-        border: 'none',
-        ':focus': {
-            outline: 'none',
-            boxShadow: 'none'
-        }
-    }, props.rightControl && {
-        paddingRight: theme.controls.height
-    });
-    const inputElement = React__namespace.createElement("input", Object.assign({}, nativeProps, { ref: ref, autoComplete: (_a = nativeProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: nativeProps.readOnly ? -1 : nativeProps.tabIndex, maxLength: nativeProps.maxLength || defaultMaxLength$1, className: css.cx(inputStyles, props.className) }));
-    const inputWrapperStyles = css.css `
-		width:100%;
-		${props.rightControl && `
-			position: relative;
-		`}
-	`;
-    const rightControlStyles = props.rightControl && css.css `
-		position: absolute;
-		right: ${theme.controls.padding};
-		top: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		${props.round && `
-			right: calc(${theme.controls.padding} * 2);
-		`}
-	`;
-    return (React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
-        inputElement,
-        props.rightControl && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
-});
-
-const tryClampRange = (value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
-    if (value === undefined) {
-        return value;
-    }
-    if (isNaN(value)) {
-        return undefined;
-    }
-    return Math.min(Math.max(value, min), max);
-};
-
-const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
-const datePattern = dateRegex.source;
-//TB: INPUT these need to be moved into the on change handler
-const validityChecks = [
-    (value) => {
-        return isOutOfRange(parseDateMs(value)) ? 'Out of range' : '';
-    },
-    (value) => {
-        return !dateExists(parseDateMs(value)) ? 'Invalid Date' : '';
-    },
-];
-const DateInput = React__namespace.forwardRef((props, ref) => {
-    const [dateMsValue, setDateMsValue] = React__namespace.useState(undefined);
-    const [textValue, setTextValue] = React__namespace.useState(undefined);
-    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const nativeProps = __rest(props, ["customValidityChecks"]);
-    React__namespace.useEffect(() => {
-        console.log('[DateInput] setting local value to ', props.value);
-        // sync local value to outer value
-        setDateMsValue(props.value);
-        setTextValue(formatDateStringValue(props.value));
-    }, [props.value]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { type: "text", ref: inputRef, value: textValue !== null && textValue !== void 0 ? textValue : '', pattern: datePattern, maxLength: 10, onChange: e => {
-            var _a, _b;
-            const text = e.target.value || undefined;
-            let error;
-            validityChecks.some(func => {
-                error = func(text);
-                return !!error;
-            });
-            (_a = props.customValidityChecks) === null || _a === void 0 ? void 0 : _a.some(func => {
-                error = func(text);
-                return !!error;
-            });
-            e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
-            console.log(e.target.validationMessage);
-            setTextValue(text);
-            setDateMsValue(parseDateMs(text));
-            console.log(e.target.validationMessage);
-            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, e);
-        }, onBlur: e => {
-            var _a;
-            if (props.onBlur) {
-                let currentValue = dateMsValue;
-                if ((_a = props.constrainOnBlur) !== null && _a !== void 0 ? _a : true) {
-                    currentValue = tryClampRange(currentValue, props.min, props.max);
-                }
-                if (currentValue !== dateMsValue) {
-                    // we've constrained the value.  update all values
-                    setTextValue(formatDateStringValue(currentValue));
-                    setDateMsValue(currentValue);
-                }
-                else if (dateMsValue === undefined && !!textValue) {
-                    // invalid date but the bad text is still showing
-                    // clear the text and reset the validity
-                    setTextValue(undefined);
-                    e.target.setCustomValidity('');
-                }
-                props.onBlur(dateMsValue, e);
-            }
-        }, onKeyDown: e => {
-            var _a, _b;
-            if (e.key === 'Enter') {
-                // handle form submission on enter for onBlur-only situations.
-                // onBlur will not be fired so any local change will not be communicated to the outside.
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-            }
-            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
-        } })));
-});
-const isOutOfRange = (value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
-    if (typeof value === 'number') {
-        return value < min || value > max;
-    }
-    return false;
-};
-const parseDateMs = (rawValue) => {
-    if (!rawValue) {
-        return undefined;
-    }
-    let dateMs;
-    const dateParts = dateRegex.exec(rawValue);
-    if (dateParts) {
-        const month = parseInt(dateParts[1], 10) - 1;
-        const day = parseInt(dateParts[2], 10);
-        const year = parseInt(dateParts[3], 10);
-        if (dateFns.isExists(year, month, day)) {
-            dateMs = new Date(year, month, day).valueOf();
-        }
-    }
-    return dateMs;
-};
-const dateExists = (dateMs) => {
-    if (dateMs === undefined) {
-        return false;
-    }
-    const d = new Date(dateMs);
-    return dateFns.isExists(d.getFullYear(), d.getMonth() - 1, d.getDate());
-};
-const formatDateStringValue = (dateMs) => {
-    if (typeof dateMs === 'number') {
-        return dateFns.format(dateMs, 'MM/dd/yyyy');
-    }
-    return '';
-};
-
-const Popover = (p) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
-    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, _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: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
-                        }) }, p.content))));
-        } },
-        React__namespace.createElement("span", null, p.parent)));
-};
-
-const DatePicker = (p) => {
-    var _a;
-    const inputProps = __rest(p, ["reposition", "onPick"]);
-    const [showCalendar, setShowCalendar] = React__namespace.useState(false);
-    const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(p.value, p.min, p.max));
-    // controls the one-time focus set on show
-    const needsFocus = React__namespace.useRef(false);
-    const popover = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        var _a;
-        setCalendarDate(getCalendarDate((_a = p.value) !== null && _a !== void 0 ? _a : 0, p.min, p.max));
-    }, [p.value]);
-    React__namespace.useLayoutEffect(() => {
-        var _a, _b;
-        if (needsFocus.current) {
-            (_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-            needsFocus.current = false;
-        }
-    });
-    return (React__namespace.createElement(Popover, { reposition: p.reposition, isOpen: showCalendar, onClickOutside: () => {
-            needsFocus.current = false;
-            setShowCalendar(false);
-        }, parent: (React__namespace.createElement(DateInput, Object.assign({}, inputProps, { placeholder: (_a = p.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY', rightControl: !p.readOnly ? (React__namespace.createElement(Button, { variant: "icon", readonly: p.readOnly, disabled: p.disabled, small: true, style: {
-                    fontSize: '1rem'
-                }, onClick: () => {
-                    needsFocus.current = !showCalendar;
-                    setShowCalendar(!showCalendar);
-                } },
-                React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onFocus: e => {
-                var _a;
-                needsFocus.current = false;
-                setShowCalendar(false);
-                (_a = p.onFocus) === null || _a === void 0 ? void 0 : _a.call(p, e);
-            } }))), content: (React__namespace.createElement("div", { ref: popover, className: css.css({
-                paddingLeft: '1rem',
-                paddingRight: '1rem',
-                paddingBottom: '1rem'
-            }) },
-            React__namespace.createElement(Calendar, { onClick: date => {
-                    var _a;
-                    (_a = p.onPick) === null || _a === void 0 ? void 0 : _a.call(p, date.valueOf());
-                    needsFocus.current = false;
-                    setShowCalendar(false);
-                }, customTitle: React__namespace.createElement("div", { className: css.css({
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center'
-                    }) },
-                    React__namespace.createElement(Button, { disabled: !!p.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), p.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
-                        React__namespace.createElement(Icon, { id: "pagerLeft" })),
-                    React__namespace.createElement(Text, { align: "center" },
-                        dateFns.format(calendarDate, 'LLLL'),
-                        " ",
-                        calendarDate.getFullYear()),
-                    React__namespace.createElement(Button, { disabled: !!p.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), p.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
-                        React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: p.value, cellSize: '2rem', min: p.min, max: p.max }))) }));
-};
-const getCalendarDate = (date, min, max) => {
-    let calendarDate = date ? new Date(date) : new Date();
-    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
-    if (min && dateFns.isBefore(calendarDate, min)) {
-        calendarDate = new Date(min);
-    }
-    else if (max && dateFns.isAfter(calendarDate, max)) {
-        calendarDate = new Date(max);
-    }
-    return calendarDate;
+				background-color:${theme.colors.omg};
+				color:${theme.colors.omgFont};
+			}
+		`}
+	`;
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+        React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
+            React__namespace.createElement(Text, { align: "center" }, props.text),
+            React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
+                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
+                React__namespace.createElement(Button, { className: css.css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
+};
+
+const CopyButton = (props) => {
+    const [copied, setCopied] = React__namespace.useState(false);
+    return (React__namespace.createElement(Button, { title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: () => {
+            setCopied(false);
+        }, onClick: e => {
+            const button = e.currentTarget;
+            let copySuccess = false;
+            try {
+                const text = document.querySelector(props.selector);
+                text.select();
+                copySuccess = document.execCommand('copy');
+                // the input gets focus on select.  bring it back.
+                button.focus();
+            }
+            catch (err) {
+                // You done wrong. 
+            }
+            setCopied(copySuccess);
+        } },
+        React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
 };
 
-const Divider = () => {
+const Divider = (p) => {
     const theme = useThemeSafely();
-    return (React__namespace.createElement("hr", { className: css.cx("divider", css.css({
+    return (React__namespace.createElement("hr", Object.assign({}, p, { className: css.cx("divider", css.css({
             margin: theme.controls.dividerMargin,
             border: theme.controls.dividerBorder
-        })) }));
+        }), p.className) })));
 };
 
 const ErrorModal = (props) => {
@@ -1782,7 +1654,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, debug: props.debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -1910,7 +1782,7 @@ const hoverClass = css.css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
@@ -1926,7 +1798,7 @@ const FileUploader = (p) => {
             filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
         }
         else {
-            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+            filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
         }
     }
     const setAllFiles = (inputFiles) => {
@@ -1948,8 +1820,9 @@ const FileUploader = (p) => {
             maxBytes: p.maxBytes
         });
     };
+    const showInfoOnPick = (_c = p.showInfoOnPick) !== null && _c !== void 0 ? _c : true;
     let infoMessage;
-    if (p.infoMessage) {
+    if (p.infoMessage && (!files || showInfoOnPick)) {
         if (typeof p.infoMessage === 'string') {
             infoMessage = React__default['default'].createElement(Text, { noPad: true }, p.infoMessage);
         }
@@ -1966,6 +1839,8 @@ const FileUploader = (p) => {
             padding: '1rem',
             overflow: 'hidden',
             backgroundColor: theme.colors.lightBg,
+        }, p.disabled && {
+            opacity: theme.controls.disabledOpacity
         }), onDragOver: e => {
             var _a, _b;
             e.preventDefault();
@@ -1999,7 +1874,7 @@ const FileUploader = (p) => {
                 setCanUpload(false);
             });
         } },
-        React__default['default'].createElement("input", { ref: input, className: css.css({
+        React__default['default'].createElement("input", { disabled: p.disabled, ref: input, className: css.css({
                 position: 'absolute',
                 top: -50,
                 left: 0,
@@ -2008,6 +1883,8 @@ const FileUploader = (p) => {
                 width: '100%',
                 cursor: 'pointer',
                 opacity: 0
+            }, p.disabled && {
+                cursor: 'not-allowed'
             }), type: "file", multiple: p.multiple, accept: p.accept, onChange: e => {
                 try {
                     if (!e.target.files) {
@@ -2030,65 +1907,68 @@ const FileUploader = (p) => {
                 zIndex: !!(files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
             }) },
             !(files === null || files === void 0 ? void 0 : files.length) && React__default['default'].createElement(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
-            React__default['default'].createElement(Text, { align: "center", noPad: true, spacedOut: true },
+            React__default['default'].createElement(Text, { align: "center", noPad: true, spacedOut: true, className: css.css({
+                    width: '100%'
+                }) },
                 filesDisplay,
                 !!(files === null || files === void 0 ? void 0 : files.length) && (React__default['default'].createElement(Button, { onClick: e => {
                         e.stopPropagation();
                         onFilesChange(undefined);
                     }, className: css.css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default['default'].createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
             infoMessage,
-            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
+            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default['default'].createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
                 "Invalid files: ",
                 files.invalidFiles.map(f => f.name).join(', '),
                 ".")),
-            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
+            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error", className: css.css({ width: '100%' }) },
                 "Max file size exceeded (",
-                getSizeString((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
+                getFileSizeDisplay((_d = p.maxBytes) !== null && _d !== void 0 ? _d : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default['default'].createElement(Button, { className: css.css({
-                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
+                width: (_e = p.buttonWidth) !== null && _e !== void 0 ? _e : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : 'Upload')),
-        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : 'Upload successful.', onClear: () => setMessage(undefined) })),
+            }), waiting: uploading, type: "submit", variant: (_f = p.buttonVariant) !== null && _f !== void 0 ? _f : 'primary' }, (_g = p.buttonText) !== null && _g !== void 0 ? _g : 'Upload')),
+        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_h = p.successMessage) !== null && _h !== void 0 ? _h : 'Upload successful.', onClear: () => setMessage(undefined) })),
         message === 'failure' && (React__default['default'].createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {
     return (React__default['default'].createElement(InfoPanel, { variant: p.variant, className: css.css({ zIndex: 1 }) },
         p.message,
-        React__default['default'].createElement(Button, { block: true, className: css.css({
+        React__default['default'].createElement(Button, { className: css.css({
                 color: 'inherit',
-                marginTop: '1rem'
+                marginTop: '1rem',
+                width: '100%'
             }), onClick: e => {
                 e.stopPropagation();
                 p.onClear();
             }, rightIcon: React__default['default'].createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
 };
-const bytesInMb = 1048576;
-const bytesInKb = 1024;
-const getSizeString = (size) => {
-    if (size < bytesInKb) {
-        return size.toLocaleString() + ' B';
+// OMG this is dumb.  We're sticking with decimals for ease of use.
+// https://stackoverflow.com/questions/40949135/gigabyte-or-gibibyte-1000-or-1024
+const getFileSizeDisplay = (size) => {
+    let value = 0;
+    let suffix = '';
+    if (size >= 1000000000) {
+        value = size / 1000000000;
+        suffix = 'GB';
     }
-    else if (size < bytesInMb) {
-        return (size / bytesInKb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
+    else if (size >= 1000000) {
+        value = size / 1000000;
+        suffix = 'MB';
     }
-    else {
-        return (size / bytesInMb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' MB';
+    else if (size >= 1000) {
+        value = size / 1000;
+        suffix = 'KB';
     }
-};
-
-const getCurrencyDisplay = (value, isCents, denomination = '$') => {
-    let actualValue = value || 0;
-    if (isCents) {
-        actualValue /= 100;
+    else {
+        value = size;
+        suffix = 'B';
     }
-    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-};
-const noop = () => {
-    // lil' noop would be a great rap name. (thanks linter)
+    return value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ` ${suffix}`;
 };
 
 const Header = (props) => {
+    var _a;
     const theme = useThemeSafely();
     const bodyStyles = css.css `
 		padding-top: calc(${theme.layout.headerHeight} + ${theme.layout.headerBodyOffset});
@@ -2100,7 +1980,9 @@ const Header = (props) => {
             document.body.classList.remove(bodyStyles);
         };
     });
-    const toggleMenu = props.toggleMenu || noop;
+    const toggleMenu = (_a = props.toggleMenu) !== null && _a !== void 0 ? _a : (() => {
+        /* noop */
+    });
     const headerStyles = css.css `
 		display: flex;
 		gap: ${theme.controls.gap};
@@ -2199,160 +2081,545 @@ const Highlight = (props) => {
             text = props.text.replace(new RegExp(`(${replaceText})`, 'gi'), `<mark>$1</mark>`);
         }
     }
-    return (React__namespace.createElement("span", { className: css.cx('highlight', highlightStyles), dangerouslySetInnerHTML: { __html: text } }));
-};
-
-const Image = (props) => {
-    return (React__namespace.createElement("img", { alt: props.alt, style: props.style, className: css.cx('image', css.css({
-            maxWidth: '100%',
-            maxHeight: '100%',
-        }), props.className), src: props.src }));
+    return (React__namespace.createElement("span", { className: css.cx('highlight', highlightStyles), dangerouslySetInnerHTML: { __html: text } }));
+};
+
+const Image = (props) => {
+    return (React__namespace.createElement("img", { alt: props.alt, style: props.style, className: css.cx('image', css.css({
+            maxWidth: '100%',
+            maxHeight: '100%',
+        }), props.className), src: props.src }));
+};
+
+const Popover = (p) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    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, _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: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
+                        }) }, p.content))));
+        } },
+        React__namespace.createElement("span", null, p.parent)));
+};
+
+const InfoTip = (props) => {
+    var _a, _b, _c;
+    const [showTip, setShowTip] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
+    const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
+    const onClick = () => {
+        if (props.onClick) {
+            props.onClick();
+        }
+        else if (props.content) {
+            openTip();
+        }
+    };
+    const onMouseOver = () => {
+        if (props.variant === 'modal') {
+            return;
+        }
+        if (props.loadOnHover) {
+            props.loadOnHover().then(() => {
+                openTip();
+            }).catch(err => {
+                /* Not my responsiblity. */
+            });
+        }
+        else {
+            openTip();
+        }
+    };
+    const onMouseOut = () => {
+        if (props.variant === 'modal') {
+            return;
+        }
+        closeTip();
+    };
+    const openTip = () => {
+        if (!props.content) {
+            return;
+        }
+        setShowTip(props.disabled ? false : true);
+    };
+    const closeTip = () => {
+        if (!props.content) {
+            return;
+        }
+        setShowTip(false);
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    const buttonStyles = css.css `
+		font-weight: bold;
+		width: 1.5rem;
+		min-width:1.5rem;
+		height: 1.5rem;
+		padding: 0 !important;
+		font-family: serif;
+		display:inline-block;
+	`;
+    const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
+    if (props.variant === 'modal') {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            button,
+            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+                    whiteSpace: 'normal'
+                }), closeButton: true },
+                React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
+    }
+    else {
+        return (React__namespace.createElement(Popover, { positions: props.positions, reposition: (_c = props.reposition) !== null && _c !== void 0 ? _c : false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
+                    padding: '0.5rem',
+                    fontSize: '0.75rem',
+                    maxWidth: '22rem'
+                }), style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
+    }
+};
+
+const InputErrorDisplay = (props) => {
+    const theme = useThemeSafely();
+    return (React__namespace.createElement(Text, { className: css.css({
+            minHeight: theme.controls.inputErrorMinHeight,
+            lineHeight: theme.controls.inputErrorMinHeight,
+            color: theme.colors.negative
+        }), smaller: true, noPad: true }, props.error));
+};
+
+const defaultMaxLength$1 = 100;
+const BaseInput = React__namespace.forwardRef((props, ref) => {
+    var _a;
+    const theme = useThemeSafely();
+    const { rightControl, round, wrapperClassName } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName"]);
+    const inputStyles = css.css({
+        fontFamily: theme.fonts.family,
+        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,
+        height: theme.controls.height,
+        transition: theme.controls.transition,
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        },
+        ':disabled': {
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        ':invalid': {
+            borderColor: theme.colors.required,
+            ':focus': {
+                boxShadow: theme.controls.focusOutlineRequiredShadow
+            }
+        },
+    }, props.round && {
+        borderRadius: theme.controls.roundRadius,
+        paddingLeft: `calc(${theme.controls.padding} * 2)`,
+        paddingRight: `calc(${theme.controls.padding} * 2)`
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }, props.rightControl && {
+        paddingRight: theme.controls.height
+    });
+    const inputElement = React__namespace.createElement("input", Object.assign({}, nativeProps, { ref: ref, autoComplete: (_a = nativeProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: nativeProps.readOnly ? -1 : nativeProps.tabIndex, maxLength: nativeProps.maxLength || defaultMaxLength$1, className: css.cx(inputStyles, props.className) }));
+    const inputWrapperStyles = css.css `
+		width:100%;
+		${props.rightControl && `
+			position: relative;
+		`}
+	`;
+    const rightControlStyles = props.rightControl && css.css `
+		position: absolute;
+		right: ${theme.controls.padding};
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		${props.round && `
+			right: calc(${theme.controls.padding} * 2);
+		`}
+	`;
+    return (React__namespace.createElement("div", { className: css.css({
+            width: '100%'
+        }) },
+        React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
+            inputElement,
+            props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
+        React__namespace.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
+});
+
+const tryClampRange = (value, min, max) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    if (min !== undefined && value < min) {
+        return min;
+    }
+    if (max !== undefined && value > max) {
+        return max;
+    }
+    return value;
+};
+const isOutOfRange = (value, min, max) => {
+    if (min !== undefined && value < min) {
+        return true;
+    }
+    if (max !== undefined && value > max) {
+        return true;
+    }
+    return false;
+};
+const getStepDecimalPlaces = (step) => {
+    var _a, _b;
+    if (!step) {
+        return 0;
+    }
+    const strStep = typeof step === 'number' ? step.toString() : step;
+    return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+};
+const tryClampDecimals = (value, step = 0) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    const decimals = getStepDecimalPlaces(step);
+    if (decimals === 0) {
+        return Math.floor(value);
+    }
+    return parseFloat(value.toFixed(decimals));
+};
+
+/** Common state handling for displaying validation messages with inputs. */
+const useInputValidationMessage = (ref, props) => {
+    const [validationError, setValidationError] = React__default['default'].useState('');
+    const updateErrorMessage = (customErrorOverride) => {
+        var _a;
+        const customError = customErrorOverride || props.customError || '';
+        // set it OR clear it.  either way, update it.
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
+        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+    };
+    React.useEffect(() => {
+        updateErrorMessage();
+    }, [props.customError]);
+    React__default['default'].useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    return [validationError, updateErrorMessage];
+};
+const getValidationMessage = (element, patternErrorMessage) => {
+    var _a;
+    if (!element) {
+        return '';
+    }
+    const validity = element.validity;
+    if (validity.valid) {
+        return '';
+    }
+    if (validity.customError) {
+        return element.validationMessage;
+    }
+    if (validity.typeMismatch) {
+        switch (element.type) {
+            case 'url':
+                return `Invalid URL.`;
+            case 'email':
+                return `Invalid email.`;
+            default:
+                return element.validationMessage;
+        }
+    }
+    if (element instanceof HTMLInputElement) {
+        if (validity.rangeOverflow) {
+            return `Must be less than or equal to ${element.max}.`;
+        }
+        if (validity.rangeUnderflow) {
+            return `Must be greater than or equal to ${element.min}.`;
+        }
+        if (validity.stepMismatch) {
+            const decimalPlaces = getStepDecimalPlaces(element.step);
+            if (decimalPlaces > 0) {
+                const place = decimalPlaces === 1 ? 'place' : 'places';
+                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+            }
+            else {
+                /*
+                    step is buggy!
+                    
+                    at least in Chrome, setting step=5 will cause the browser to mark the field as invalid if the number is not divisible
+                    by 5.  55 is ok.  50 is ok.  59 is not ok.
+                    
+                    to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
+                    you the number 5 is now invalid and should be 4 or 9.
+                */
+                return `Must be an integer.`;
+            }
+        }
+    }
+    if (validity.tooShort) {
+        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+    }
+    if (validity.valueMissing) {
+        return 'Required.';
+    }
+    if (validity.patternMismatch && patternErrorMessage) {
+        return patternErrorMessage;
+    }
+    // unhandled.  let the browser decide.
+    return element.validationMessage;
 };
 
-const InfoTip = (props) => {
-    var _a, _b;
-    const [showTip, setShowTip] = React__namespace.useState(false);
-    const theme = useThemeSafely();
-    const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
-    const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
-    const onClick = () => {
-        if (props.onClick) {
-            props.onClick();
+const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
+const datePattern = dateRegex.source;
+const invalidDateMessage = 'Invalid date.';
+const DateInput = React__namespace.forwardRef((props, ref) => {
+    var _a;
+    const [dateValue, setDateValue] = React__namespace.useState(props.value);
+    const [textValue, setTextValue] = React__namespace.useState(parseDateString(props.value));
+    const updateValues = React__namespace.useCallback((value) => {
+        let newDateValue;
+        let newTextValue;
+        if (typeof value === 'number') {
+            newDateValue = value;
+            newTextValue = parseDateString(value);
         }
-        else if (props.content) {
-            openTip();
+        else if (typeof value === 'string') {
+            newDateValue = parseDateNumber(value);
+            newTextValue = value;
         }
-    };
-    const onMouseOver = () => {
-        if (props.variant === 'modal') {
+        setDateValue(newDateValue);
+        setTextValue(newTextValue);
+    }, []);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
+    const updateDateErrorMessages = React__namespace.useCallback(() => {
+        let dateError = '';
+        if (dateValue === undefined) {
+            if (!!textValue) {
+                // the text pattern is a valid date format, but the numbers are wrong.  example: 05/35/2000.
+                dateError = invalidDateMessage;
+            }
+        }
+        else if (isOutOfRange(dateValue, props.min, props.max)) {
+            // out of range
+            if (props.min !== undefined && props.max !== undefined) {
+                dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
+            }
+            else if (props.min !== undefined) {
+                dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
+            }
+            else {
+                dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
+            }
+        }
+        updateErrorMessage(dateError);
+    }, [dateValue, textValue]);
+    const [showCalendar, setShowCalendar] = React__namespace.useState(false);
+    const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(props.value, props.min, props.max));
+    // controls the one-time focus set on show
+    const needsFocus = React__namespace.useRef(false);
+    const toggleCalendar = React__namespace.useCallback((show) => {
+        var _a;
+        if (show === showCalendar) {
             return;
         }
-        if (props.loadOnHover) {
-            props.loadOnHover().then(() => {
-                openTip();
-            }).catch(err => {
-                /* Not my responsiblity. */
-            });
+        needsFocus.current = show;
+        setShowCalendar(show);
+        if (show) {
+            setCalendarDate(getCalendarDate(dateValue, props.min, props.max));
         }
         else {
-            openTip();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    };
-    const onMouseOut = () => {
-        if (props.variant === 'modal') {
-            return;
+    }, [dateValue, showCalendar]);
+    const popover = React__namespace.useRef(null);
+    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(dateValue);
         }
-        closeTip();
-    };
-    const openTip = () => {
-        if (!props.content) {
-            return;
+        else {
+            props.onValueChange(undefined);
         }
-        setShowTip(props.disabled ? false : true);
-    };
-    const closeTip = () => {
-        if (!props.content) {
-            return;
+        updateDateErrorMessages();
+    }, [dateValue]);
+    useIgnoreMount(() => {
+        updateDateErrorMessages();
+    }, [textValue]);
+    useIgnoreMount(() => {
+        var _a;
+        if (document.activeElement !== inputRef.current) {
+            updateValues(props.value);
+            setCalendarDate(getCalendarDate((_a = props.value) !== null && _a !== void 0 ? _a : 0, props.min, props.max));
         }
-        setShowTip(false);
-        if (props.onClose) {
-            props.onClose();
+        updateDateErrorMessages();
+    }, [props.value]);
+    React__namespace.useLayoutEffect(() => {
+        var _a, _b;
+        if (needsFocus.current) {
+            (_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            needsFocus.current = false;
         }
-    };
-    const buttonStyles = css.css `
-		font-weight: bold;
-		width: 1.5rem;
-		min-width:1.5rem;
-		height: 1.5rem;
-		padding: 0 !important;
-		font-family: serif;
-		display:inline-block;
-	`;
-    const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            button,
-            React__namespace.createElement(Modal, { id: props.modalId, debug: props.modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
-                    whiteSpace: 'normal'
-                }), closeButton: true },
-                React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
+    });
+    const input = (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "text", ref: inputRef, value: textValue !== null && textValue !== void 0 ? textValue : '', maxLength: 10, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY', pattern: datePattern, rightControl: (!props.readOnly && !props.disabled) ? (React__namespace.createElement(Button, { variant: "icon", readOnly: props.readOnly, disabled: props.disabled, small: true, style: {
+                fontSize: '1rem'
+            }, onClick: () => {
+                toggleCalendar(!showCalendar);
+            } },
+            React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: e => {
+            var _a;
+            updateValues(e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onFocus: e => {
+            var _a;
+            toggleCalendar(false);
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
+                if (dateValue !== undefined) {
+                    if (isOutOfRange(dateValue, props.min, props.max)) {
+                        // try and fix the range
+                        updateValues(tryClampRange(dateValue, props.min, props.max));
+                    }
+                }
+                else {
+                    // just wipe it all
+                    updateValues(undefined);
+                }
+            }
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+    return (React__namespace.createElement(Popover, { reposition: props.reposition, isOpen: showCalendar, onClickOutside: () => {
+            toggleCalendar(false);
+        }, parent: input, content: (React__namespace.createElement("div", { ref: popover, className: css.css({
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                paddingBottom: '1rem'
+            }) },
+            React__namespace.createElement(Calendar, { onClick: date => {
+                    updateValues(date.valueOf());
+                    toggleCalendar(false);
+                }, customTitle: React__namespace.createElement("div", { className: css.css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    }) },
+                    React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
+                        React__namespace.createElement(Icon, { id: "pagerLeft" })),
+                    React__namespace.createElement(Text, { align: "center" },
+                        dateFns.format(calendarDate, 'LLLL'),
+                        " ",
+                        calendarDate.getFullYear()),
+                    React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
+                        React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
+});
+const parseDateNumber = (rawValue) => {
+    if (!rawValue) {
+        return undefined;
     }
-    else {
-        return (React__namespace.createElement(Popover, { reposition: false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (React__namespace.createElement("div", { className: css.css({
-                    padding: '0.5rem',
-                    fontSize: '0.75rem',
-                    maxWidth: '22rem'
-                }), style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
+    let dateMs;
+    const dateParts = dateRegex.exec(rawValue);
+    if (dateParts) {
+        const month = parseInt(dateParts[1], 10) - 1;
+        const day = parseInt(dateParts[2], 10);
+        const year = parseInt(dateParts[3], 10);
+        if (dateFns.isExists(year, month, day)) {
+            dateMs = new Date(year, month, day).valueOf();
+        }
+    }
+    return dateMs;
+};
+const parseDateString = (dateMs) => {
+    if (typeof dateMs === 'number') {
+        return dateFns.format(dateMs, 'MM/dd/yyyy');
+    }
+    return undefined;
+};
+const getCalendarDate = (date, min, max) => {
+    let calendarDate = date ? new Date(date) : new Date();
+    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
+    if (min && dateFns.isBefore(calendarDate, min)) {
+        calendarDate = new Date(min);
     }
+    else if (max && dateFns.isAfter(calendarDate, max)) {
+        calendarDate = new Date(max);
+    }
+    return calendarDate;
 };
 
 const NumberInput = React__namespace.forwardRef((props, ref) => {
-    const [localValue, setLocalValue] = React__namespace.useState(undefined);
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const nativeProps = __rest(props, ["customValidityChecks", "constrainOnBlur"]);
-    React__namespace.useEffect(() => {
-        //TB: INPUT apply validation
-        // sync local value to outer value
-        setLocalValue(props.value);
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["customError", "onValueChange"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
     }, [props.value]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { ref: ref, maxLength: 20, type: "number", value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "number", ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', maxLength: 20, onChange: e => {
             var _a;
             const newLocalValue = parseNumber(e.target.value);
-            if (props.customValidityChecks) {
-                let error;
-                for (const func of props.customValidityChecks) {
-                    error = func(newLocalValue);
-                    if (error) {
-                        break;
-                    }
-                }
-                e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
-            }
             setLocalValue(newLocalValue);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newLocalValue, e);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, onBlur: e => {
-            var _a;
-            if (props.onBlur) {
-                let currentValue = localValue;
-                if ((_a = props.constrainOnBlur) !== null && _a !== void 0 ? _a : true) {
-                    currentValue = tryClampRange(currentValue, props.min, props.max);
-                    currentValue = tryClampDecimals(currentValue, props.step);
-                }
-                if (currentValue !== localValue) {
-                    setLocalValue(currentValue);
-                }
-                // after all we've done, it's still possible to have strange characters in the box.  
-                // examples are '-' and 'e'.  the box will show as invalid and no number will be sent from the control or be included in the local state.
-                // here we will clean that up locally in the control.
-                if (!e.target.checkValidity()) {
-                    e.target.value = '';
-                }
-                props.onBlur(currentValue, e);
-            }
-        }, onKeyDown: e => {
             var _a, _b;
-            if (e.key === 'Enter') {
-                // handle form submission on enter for onBlur-only situations.
-                // onBlur will not be fired so any local change will not be communicated to the outside.
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            let adjustedValue = localValue;
+            if (e.target.validity.customError) {
+                // if we're invalid due to a custom error, just wipe everything
+                adjustedValue = undefined;
+            }
+            else {
+                // try and fix the value
+                adjustedValue = tryClampRange(adjustedValue, props.min, props.max);
+                adjustedValue = tryClampDecimals(adjustedValue, props.step);
             }
-            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            setLocalValue(adjustedValue);
+            // makes our displayed value always matches the adjusted value
+            // examples of failures are 'e', '-', and 5.0 in an integer (step=0) field.
+            e.target.value = (_a = adjustedValue === null || adjustedValue === void 0 ? void 0 : adjustedValue.toString()) !== null && _a !== void 0 ? _a : '';
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
 });
-const tryClampDecimals = (value, step = 0) => {
-    var _a;
-    if (value === undefined) {
-        return value;
-    }
-    if (isNaN(value)) {
-        return undefined;
-    }
-    const decimals = step === 0 ? 0 : (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
-    if (decimals === 0) {
-        return Math.floor(value);
-    }
-    return parseFloat(value.toFixed(decimals));
-};
 const parseNumber = (rawValue) => {
     let value;
     if (rawValue) {
@@ -2366,39 +2633,41 @@ const parseNumber = (rawValue) => {
 
 const TextInput = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const [localValue, setLocalValue] = React__namespace.useState(undefined);
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const nativeProps = __rest(props, ["customValidityChecks"]);
-    React__namespace.useEffect(() => {
-        // sync local value to outer value
-        setLocalValue(props.value);
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
     }, [props.value]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
             var _a;
-            const value = e.target.value || undefined;
-            if (props.customValidityChecks) {
-                let error;
-                for (const func of props.customValidityChecks) {
-                    error = func(value);
-                    if (error) {
-                        break;
-                    }
-                }
-                e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
-            }
-            setLocalValue(value);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, e);
+            setLocalValue(props.emptyString ? e.target.value : e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, onBlur: e => {
-            var _a;
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, localValue, e);
-        }, onKeyDown: e => {
             var _a, _b;
-            if (e.key === 'Enter') {
-                // handle form submission on enter for onBlur-only situations.
-                // onBlur will not be fired so any local change will not be communicated to the outside.
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            if (!e.target.checkValidity()) {
+                setLocalValue(undefined);
+            }
+            else if ((_a = props.trim) !== null && _a !== void 0 ? _a : true) {
+                setLocalValue(currentValue => {
+                    return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                });
             }
-            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
 });
 
@@ -2494,6 +2763,9 @@ const Label = (props) => {
     From https://fireship.io/snippets/use-media-query-hook/.
     Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
 */
+/** React wrapper around window resizing and window.matchMedia.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ */
 const useMediaQuery = (query) => {
     const [matches, setMatches] = React.useState(false);
     React.useEffect(() => {
@@ -2509,11 +2781,13 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
+    var _a, _b;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
     const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
     const backdrop = React__namespace.useContext(BackdropContext);
     const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
+    const log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
     const slideRight = css.keyframes `
 		0% {
 			transform: translateX(0);
@@ -2574,9 +2848,11 @@ const Nav = (props) => {
             props.toggle(false);
         }
     }, [backdrop.showing]);
-    React__namespace.useEffect(() => {
-        backdrop.setShow(props.show);
-    }, [props.show]);
+    useBooleanChanged((current, previous) => {
+        var _a;
+        log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
+        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+    }, props.show);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
             if (props.show) {
@@ -2607,6 +2883,7 @@ 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();
@@ -2783,7 +3060,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "readonly", "round"]);
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2819,7 +3096,7 @@ const Picker = (props) => {
 			${props.round && `
 				border-radius: ${theme.controls.roundRadius};
 			`}
-			${props.readonly && `
+			${props.readOnly && `
 				background-color: transparent !important;
 				border: none;
 				-webkit-appearance: none;
@@ -2830,9 +3107,9 @@ const Picker = (props) => {
 				}
 			`}
 		`;
-    return (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 => {
+    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) {
+            if (props.readOnly) {
                 if (e.keyCode === 9) {
                     //TAB
                     return;
@@ -2845,7 +3122,7 @@ const Picker = (props) => {
             }
         }, onMouseDown: e => {
             var _a;
-            if (props.readonly) {
+            if (props.readOnly) {
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -2853,6 +3130,7 @@ const Picker = (props) => {
                 (_a = selectProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
             }
         }, onChange: e => {
+            var _a;
             let val = e.target.value;
             if (isNumber) {
                 val = parseInt(val, 10);
@@ -2860,7 +3138,8 @@ const Picker = (props) => {
                     val = '';
                 }
             }
-            props.onChange(val, e);
+            props.onValueChange(val);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }), (props.options || []).map(o => {
         var _a;
         let val;
@@ -2875,6 +3154,14 @@ 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;
 };
 
 const Pager = (props) => {
@@ -2939,8 +3226,8 @@ const BoundMemoryPager = (p) => {
     var _a, _b, _c;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
@@ -2951,8 +3238,8 @@ const BoundStaticPager = (p) => {
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -2960,6 +3247,7 @@ const BoundStaticPager = (p) => {
         } })));
 };
 
+/** A page of data with helpers props.  */
 class PagedResult {
     constructor(items = [], total = 0, page = 0, limit = 0) {
         this.items = items;
@@ -2970,10 +3258,6 @@ class PagedResult {
     static fromDto(dto) {
         return new PagedResult(dto.items, dto.total, dto.page, dto.limit);
     }
-    // allItems: T[]
-    // get pageItems(): T[] {
-    //     return this.allItems.slice(this.minPageItemIndex, this.maxPageItemIndex + 1)
-    // }
     /** Helper for items.length */
     get length() {
         return this.items ? this.items.length : 0;
@@ -3097,7 +3381,7 @@ class PagedResult {
     }
 }
 
-/** For in-memory paging. */
+/** In-memory pager. */
 class ItemPager {
     constructor(allItems, options) {
         var _a, _b, _c, _d;
@@ -3347,6 +3631,7 @@ const cleanPct = (value) => {
     return 0;
 };
 
+/** Provides stateful notifications around async calls. */
 const useWaiting = (func) => {
     // Guard against the owner of this hook being unmounted at the time of .finally.
     const isCancelled = React.useRef(false);
@@ -3379,12 +3664,12 @@ const SearchBox = (props) => {
         return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
     });
     const theme = useThemeSafely();
-    const submitButton = (React__namespace.createElement(Button, { disabled: waiting, readonly: !props.onSubmit, type: "submit", className: css.css({
+    const submitButton = (React__namespace.createElement(Button, { disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
             color: `${theme.colors.font} !important;`,
             fontSize: '1rem'
         }), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
-    //TB: replace with new inputs
+    //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 })));
 };
@@ -3417,6 +3702,28 @@ 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);
@@ -3562,7 +3869,7 @@ const TabHeader = (p) => {
                 });
             }
             return (React__namespace.createElement("li", { key: index, className: tabStyles },
-                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, onClick: () => {
+                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readOnly: active, onClick: () => {
                         setTabIndex(index);
                         if (p.onTabChanged) {
                             p.onTabChanged(index);
@@ -3698,13 +4005,29 @@ const defaultMaxLength = 200;
 const defaultRows = 10;
 const TextArea = React__namespace.forwardRef((props, ref) => {
     var _a, _b;
-    const [localValue, setLocalValue] = React__namespace.useState(undefined);
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const nativeProps = __rest(props, ["customValidityChecks"]);
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["onValueChange"]);
     const theme = useThemeSafely();
     React__namespace.useEffect(() => {
-        // sync local value to outer value
-        setLocalValue(props.value);
+        updateErrorMessage();
+    }, []);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
     }, [props.value]);
     const styles = css.css({
         maxWidth: '100%',
@@ -3743,35 +4066,24 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
             boxShadow: 'none'
         }
     });
-    return (React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: ref, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
-            var _a;
-            const value = e.target.value || undefined;
-            if (props.customValidityChecks) {
-                let error;
-                for (const func of props.customValidityChecks) {
-                    error = func(value);
-                    if (error) {
-                        break;
-                    }
-                }
-                e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
-            }
-            setLocalValue(value);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, e);
-        }, onBlur: e => {
-            var _a;
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, localValue, e);
-        }, onKeyDown: e => {
-            var _a, _b;
-            if (e.key === 'Enter') {
-                // handle form submission on enter for onBlur-only situations.
-                // onBlur will not be fired so any local change will not be communicated to the outside.
-                if (!props.onChange) {
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    return (React__namespace.createElement("span", { className: css.css({
+            display: 'inline-block',
+            width: '100%'
+        }) },
+        React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+                var _a;
+                setLocalValue(e.target.value || undefined);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: e => {
+                var _a;
+                if (!props.noTrim) {
+                    setLocalValue(currentValue => {
+                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                    });
                 }
-            }
-            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
-        } })));
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })),
+        React__namespace.createElement(InputErrorDisplay, { error: validationError })));
 });
 
 const ToggleButton = (props) => {
@@ -3841,10 +4153,9 @@ const ToggleButtonGroup = (props) => {
     })));
 };
 
-const TogglePasswordInput = (p) => {
+const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
     const [show, setShow] = React__namespace.useState(false);
-    //TB: replace with new inputs
-    return (React__namespace.createElement(Input, Object.assign({}, p, { type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
+    return (React__namespace.createElement(TextInput, Object.assign({}, props, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
                 // small button is required here due to the icon pushing outside the boundries of the
                 // parent textbox.  increasing the font size here to fill the small button.
                 fontSize: '1rem'
@@ -3852,24 +4163,21 @@ const TogglePasswordInput = (p) => {
                 setShow(previous => !previous);
             } },
             React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
-};
+});
 
 const WaitingIndicator = (p) => {
     var _a, _b;
     const [show, setShow] = React.useState(p.show);
     const hideTimer = React.useRef(0);
     const lastShowStatus = React.useRef(false);
-    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.debug) !== null && _b !== void 0 ? _b : false);
-    if (p.debug) {
+    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    if (p.__debug) {
         React.useEffect(() => {
             log('mounted');
             return () => {
                 log('unmounted');
             };
         }, []);
-        React.useEffect(() => {
-            log('re-rendered');
-        });
     }
     React.useEffect(() => {
         log('show changed', p.show);
@@ -3910,7 +4218,7 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React__default['default'].createElement(Modal, { id: p.id, debug: p.debug, className: "waitingIndicator", show: show, noBackground: true },
+    return (React__default['default'].createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
         React__default['default'].createElement("div", { className: css.css({
                 color: 'white',
                 fontSize: '3rem'
@@ -3918,6 +4226,7 @@ const WaitingIndicator = (p) => {
             React__default['default'].createElement(Icon, { id: "waiting", spin: true }))));
 };
 
+exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
 exports.Backdrop2 = Backdrop;
@@ -3928,7 +4237,7 @@ exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
 exports.ConfirmModal = ConfirmModal;
 exports.CopyButton = CopyButton;
-exports.DatePicker = DatePicker;
+exports.DateInput = DateInput;
 exports.Divider = Divider;
 exports.ErrorModal = ErrorModal;
 exports.FileUploader = FileUploader;
@@ -3978,7 +4287,14 @@ exports.Tr = Tr;
 exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
+exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
+exports.getFileSizeDisplay = getFileSizeDisplay;
+exports.useAccordianState = useAccordianState;
+exports.useBooleanChanged = useBooleanChanged;
+exports.useIgnoreMount = useIgnoreMount;
 exports.useMediaQuery = useMediaQuery;
+exports.useScrollbarSize = useScrollbarSize;
 exports.useThemeSafely = useThemeSafely;
+exports.useWaiting = useWaiting;
 //# sourceMappingURL=index.js.map