@mackin.com/styleguide 7.13.1 → 7.14.1-beta1

package/index.esm.js

@@ -0,0 +1,3817 @@
+import { css, cx, keyframes, injectGlobal } from '@emotion/css';
+import { debounce, sumBy, orderBy, get } from 'lodash';
+import * as React from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
+import { nanoid } from 'nanoid';
+import { faCheckCircle, faCircle, faChevronDown, faChevronUp, faSquare, faTimesCircle } from '@fortawesome/pro-regular-svg-icons';
+import { faPlus, faTrashAlt, faSave, faCrow, faTimes, faSync, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';
+import { faWifi, faWifiSlash, faBars, faSearch, faQuestionCircle, faNarwhal, faChevronRight, faChevronLeft, faCloudDownload, faCloudUpload, faCalendarAlt, faCopy, faPaste, faEyeSlash, faEye } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { format, isExists, getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, endOfMonth, addMonths, startOfMonth } from 'date-fns';
+import { createPortal } from 'react-dom';
+import { Popover as Popover$1, ArrowContainer } from 'react-tiny-popover';
+import { Link } from 'react-router-dom';
+import ReactSlider from 'react-slider';
+
+/** 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}`;
+    theme.controls.transition = `box-shadow ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, opacity ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, background-color ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, filter ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}`;
+    theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
+    theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
+    theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
+    theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
+    theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
+};
+const defaultTheme = {
+    colors: {
+        primary: '#7851a9',
+        primaryFont: 'rgba(255, 255, 255, 0.9)',
+        primary2: '#007bff',
+        primary2Font: 'rgba(255, 255, 255, 0.9)',
+        secondary: '#9e9e9e',
+        secondary2Font: 'rgba(255, 255, 255, 0.9)',
+        info: '#7851a9',
+        infoFont: 'rgba(255, 255, 255, 0.9)',
+        warning: '#F5AD94',
+        warningFont: 'rgba(0, 0, 0, 0.9)',
+        positive: '#28a745',
+        positiveFont: 'rgba(255, 255, 255, 0.9)',
+        negative: '#dc3545',
+        negativeFont: 'rgba(255, 255, 255, 0.9)',
+        omg: '#dc3545',
+        omgFont: 'rgba(255, 255, 255, 0.9)',
+        bg: 'white',
+        lightBg: 'rgba(0,0,0,.075)',
+        font: 'rgba(0, 0, 0, 0.70)',
+        header: '#7851a9',
+        headerFont: 'rgba(255, 255, 255, 0.9)',
+        link: '#007bff',
+        border: 'rgba(0, 0, 0, 0.25)',
+        divider: 'rgba(0, 0, 0, 0.50)',
+        nav: '#7851a9',
+        navFont: 'rgba(255, 255, 255, 0.9)',
+        focusOutline: 'hsl(155deg 67% 85%)',
+        progressBg: '#007bff63',
+        progressFill: '#007bff',
+        modalBg: 'white',
+        disabled: 'rgba(0,0,0,.075)',
+        textHighlight: 'hsl(54deg 100% 62%)',
+        required: '#dc3545',
+        focusOutlineRequired: 'rgb(212 28 89 / 75%)',
+        backdrop: 'rgba(0, 0, 0, 0.25)',
+        pagerBg: 'rgba(0,0,0,.075)'
+    },
+    fonts: {
+        family: 'Arial, Helvetica, sans-serif',
+        size: '16px',
+        sizeSmall: '0.7rem',
+        sizeLarge: '1.3rem',
+        headerFamily: 'Arial, Helvetica, sans-serif',
+    },
+    controls: {
+        padding: '0.5rem',
+        fontSize: '1rem',
+        borderWidth: '1px',
+        borderRadius: '',
+        border: ``,
+        height: '44px',
+        heightSmall: '34px',
+        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        hoverBrightness: 'brightness(0.75)',
+        transitionDuration: '0.25s',
+        transitionEasing: 'ease-in-out',
+        transition: '',
+        focusOutlineShadow: '',
+        focusOutlineRequiredShadow: '',
+        roundRadius: '3rem',
+        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
+        roundedRadius: '0.5rem',
+        disabledOpacity: '0.5',
+        formButtonMinWidth: '7rem',
+        gap: '1rem',
+        dividerMargin: '1rem',
+        dividerBorder: '',
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)'
+    },
+    zIndexes: {
+        header: 50,
+        backdrop: 100,
+        nav: 110,
+        flyout: 120,
+        modal: 130,
+        tooltip: 1000
+    },
+    layout: {
+        headerHeight: '74px',
+        headerBodyOffset: '2rem',
+        navWidth: '300px'
+    },
+    breakpoints: {
+        desktop: '800px',
+        tablet: '768px'
+    },
+    mediaQueries: {
+        desktop: '',
+        tablet: ''
+    }
+};
+calcDynamicThemeProps(defaultTheme);
+
+const ThemeContext = createContext(defaultTheme);
+const ThemeProvider = (p) => {
+    return (React__default.createElement(ThemeContext.Provider, { value: p.theme }, p.children));
+};
+
+/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
+const useThemeSafely = () => {
+    const theme = useContext(ThemeContext);
+    // Check for expected prop.  If not present, the user did not wrap the app in ThemeProvider
+    // OR did not pass the default theme as the base.
+    if (theme && theme.breakpoints) {
+        return theme;
+    }
+    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.useRef('Backdrop' + nanoid());
+    const theme = useThemeSafely();
+    const backdropStyles = 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 `
+		z-index: ${theme.zIndexes.backdrop} !important;
+		opacity: 1.0 !important;
+		label:${backdropId.current};
+	`;
+    const bodyStyles = css `
+		overflow: hidden !important;
+		label:${backdropId.current};
+	`;
+    const bodyResponsiveStyles = css `
+		label:${backdropId.current};
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: auto !important;
+		}
+	`;
+    const bodyReverseResponsiveStyles = css `
+		${bodyStyles}
+		overflow: auto !important;
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: hidden !important;
+		}
+	`;
+    const styles = 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.useRef(null);
+    React.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.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: 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: faPlus,
+    delete: faTrashAlt,
+    save: faSave,
+    activate: faCheckCircle,
+    deactivate: faCircle,
+    online: faWifi,
+    offline: faWifiSlash,
+    noIcon: faCrow,
+    close: faTimes,
+    waiting: faSync,
+    refresh: faSync,
+    menu: faBars,
+    search: faSearch,
+    expand: faChevronDown,
+    collapse: faChevronUp,
+    help: faQuestionCircle,
+    debug: faNarwhal,
+    goTo: faChevronRight,
+    goBack: faChevronLeft,
+    download: faCloudDownload,
+    upload: faCloudUpload,
+    selected: faCheckSquare,
+    unselected: faSquare,
+    pagerLeft: faChevronLeft,
+    pagerRight: faChevronRight,
+    sortAsc: faChevronUp,
+    sortDesc: faChevronDown,
+    pickDate: faCalendarAlt,
+    copy: faCopy,
+    paste: faPaste,
+    clear: faTimesCircle,
+    hide: faEyeSlash,
+    show: faEye
+};
+const Icon = (props) => {
+    var _a;
+    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
+    return React.createElement(FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: cx('icon', props.className), icon: icon });
+};
+
+const Button = (props) => {
+    var _a, _b;
+    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rounded", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
+    const theme = useThemeSafely();
+    const buttonStyles = css `
+		padding-left: ${theme.controls.padding};
+		padding-right: ${theme.controls.padding};
+		background-color: white;
+		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
+		cursor: pointer;
+		box-shadow: ${theme.controls.boxShadow};
+		color: ${theme.colors.font};
+		height: ${theme.controls.height};
+		transition: ${theme.controls.transition};
+		font-size: 1rem;
+		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};
+			cursor: not-allowed;
+		}
+	
+		&:focus {
+			outline: none;
+			box-shadow: ${theme.controls.focusOutlineShadow};
+			position: relative;
+			z-index: 2;
+		}
+	
+		&:active {
+			box-shadow: none;
+		}
+	
+		&:hover:not(:disabled) {
+			filter: ${theme.controls.hoverBrightness};
+		}
+	`;
+    const styles = css `
+		${buttonStyles}
+		${props.variant === 'circle' && `
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+			`}
+		`}
+		${props.variant === 'icon' && `
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			padding: 0;
+			box-shadow: none;
+			border: none;
+			font-size: 1.6rem;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+				font-size: 1.3rem;
+			`}
+		`}
+		${props.variant === 'label' && `
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+		`}
+		${props.variant === 'link' && `
+			padding: 0;
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			color: ${theme.colors.link};
+			font-weight: normal;
+			background-color: transparent;
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				box-shadow: none;
+				text-decoration: underline;
+			}
+		`}
+		${props.variant === 'inlineLink' && `
+			padding: 0;
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			color: ${theme.colors.link};
+			font-weight: normal;
+			height: auto;
+			background-color: transparent;
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				box-shadow: none;
+				text-decoration: underline;
+			}
+		`}
+		${props.variant === 'primary' && `
+			background-color: ${theme.colors.primary};
+			color: ${theme.colors.primaryFont};
+		`}
+		${props.variant === 'primary2' && `
+			background-color: ${theme.colors.primary2};
+			color: ${theme.colors.primary2Font};
+		`}
+		${props.variant === 'secondary' && `
+			background-color: ${theme.colors.secondary};
+			color: ${theme.colors.secondary2Font};
+		`}
+		${props.variant === 'omg' && `
+			background-color: ${theme.colors.omg};
+			color: ${theme.colors.omgFont};
+		`}
+		${props.variant === 'positive' && `
+			background-color: ${theme.colors.positive};
+			color: ${theme.colors.positiveFont};
+		`}
+		${props.variant === 'negative' && `
+			background-color: ${theme.colors.negative};
+			color: ${theme.colors.negativeFont};
+		`}
+		${props.enforceMinWidth && `
+			min-width: ${theme.controls.formButtonMinWidth};
+		`}
+		${props.readonly && `
+			cursor: default;
+			box-shadow: none;
+			pointer-events:none;
+
+			&:hover {
+				filter:none;
+			}
+
+			&:focus {
+				box-shadow: none;
+			}
+		`}
+		${props.small && `
+			font-size: 0.8rem;
+			height:${theme.controls.heightSmall};
+		`}
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+		${props.block && `
+			width: 100%;
+		`}
+		${props.iconBlock && `
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		`}
+	`;
+    const disabled = props.disabled || props.waiting;
+    return (React.createElement("button", Object.assign({}, nativeProps, { disabled: disabled, className: cx('button', styles, props.className), type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button' }),
+        props.leftIcon && React.createElement("span", { className: css({ marginRight: '0.5rem' }) }, props.leftIcon),
+        props.waiting ? React.createElement(Icon, { id: "waiting", spin: true }) : props.children,
+        props.rightIcon && React.createElement("span", { className: css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+};
+
+const DEFAULT_DEBOUNCE_MS = 250;
+const NUMBER_REGEX = /^-?\d+\.?\d*$/;
+const DATE_REGEX = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
+const DEFAULT_MAX_LENGTH = 100;
+const formatLocalValue = (value, type) => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+        if (type === 'date' && typeof value === 'number') {
+            newValue = format(value, 'MM/dd/yyyy');
+        }
+        else {
+            newValue = value;
+        }
+    }
+    return newValue;
+};
+/** @deprecated Use DateInput, NumberInput, or TextInput instead. */
+const Input = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const [localValue, setLocalValue] = React.useState(formatLocalValue(props.value, props.type));
+    const debounceMs = (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEFAULT_DEBOUNCE_MS;
+    const autoComplete = (_b = props.autoComplete) !== null && _b !== void 0 ? _b : 'off';
+    const vars = React.useRef({
+        wrappedOnChange: (props.onChange && debounceMs) ? debounce((value, name) => {
+            var _a;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, name);
+        }, debounceMs) : undefined,
+        focused: false
+    });
+    const outerOnChange = (_c = vars.current.wrappedOnChange) !== null && _c !== void 0 ? _c : props.onChange;
+    const trySyncLocalValue = () => {
+        if (vars.current.focused) {
+            return;
+        }
+        if (props.value === localValue) {
+            return;
+        }
+        const newValue = formatLocalValue(props.value, props.type);
+        setLocalValue(newValue);
+    };
+    React.useEffect(() => {
+        trySyncLocalValue();
+    }, [props.value]);
+    const theme = useThemeSafely();
+    const inputStyles = 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 && props.type !== 'textarea' && {
+        borderRadius: theme.controls.roundRadius,
+        paddingLeft: `calc(${theme.controls.padding} * 2)`,
+        paddingRight: `calc(${theme.controls.padding} * 2)`
+    }, props.rounded && {
+        borderRadius: theme.controls.roundedRadius
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }, props.rightControl && props.type !== 'textarea' && {
+        paddingRight: theme.controls.height
+    });
+    let inputElement;
+    const onFocus = (e) => {
+        var _a;
+        vars.current.focused = true;
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        vars.current.focused = false;
+        trySyncLocalValue();
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    let localOnChange;
+    if (props.type === 'number') {
+        localOnChange = e => {
+            const value = e.target.value;
+            if (NUMBER_REGEX.test(value)) {
+                let numValue = parseFloat(value);
+                if (props.min && numValue < props.min) {
+                    numValue = props.min;
+                }
+                if (props.max && numValue > props.max) {
+                    numValue = props.max;
+                }
+                setLocalValue(numValue);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(numValue, props.name, e);
+            }
+            else if (!value) {
+                setLocalValue(value);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(undefined, props.name, e);
+            }
+        };
+    }
+    else if (props.type === 'date') {
+        localOnChange = e => {
+            const value = e.target.value;
+            setLocalValue(value);
+            if (outerOnChange) {
+                const dateParts = DATE_REGEX.exec(value);
+                if (!dateParts) {
+                    outerOnChange(undefined, props.name, e);
+                }
+                else {
+                    const year = parseInt(dateParts[3], 10);
+                    const month = parseInt(dateParts[1], 10);
+                    const day = parseInt(dateParts[2], 10);
+                    if (isExists(year, month, day)) {
+                        let ms = new Date(year, month - 1, day).valueOf();
+                        if (props.min && ms < props.min) {
+                            ms = props.min;
+                        }
+                        if (props.max && ms > props.max) {
+                            ms = props.max;
+                        }
+                        outerOnChange(ms, props.name, e);
+                    }
+                    else {
+                        outerOnChange(undefined, props.name, e);
+                    }
+                }
+            }
+        };
+    }
+    else {
+        localOnChange = e => {
+            const value = e.target.value;
+            setLocalValue(value);
+            outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value, props.name, e);
+        };
+    }
+    if (props.type === 'number') {
+        inputElement = React.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
+            // set fixed default to defeat pasting stupid numbers
+            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
+    }
+    else if (props.type === 'date') {
+        inputElement = React.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
+    }
+    else if (props.type === 'textarea') {
+        inputElement = React.createElement("textarea", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: cx(css `
+			${inputStyles}
+			max-width: 100%;
+			min-height: ${theme.controls.height};
+			padding-top: 0.75rem;
+			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
+    }
+    else {
+        // text, password, email, and url
+        inputElement = React.createElement("input", Object.assign({}, props.inputAriaAttributes, { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress }));
+    }
+    const inputWrapperStyles = css `
+		width:100%;
+		${props.rightControl && `
+			position: relative;
+		`}
+	`;
+    const rightControlStyles = props.rightControl && 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.createElement("div", { className: cx('input', inputWrapperStyles, props.className) },
+        inputElement,
+        props.rightControl && props.type !== 'textarea' && React.createElement("div", { className: rightControlStyles }, props.rightControl)));
+});
+
+const List = React.forwardRef((props, ref) => {
+    const children = props.items ? props.items.map((item, i) => React.createElement(ListItem, { key: i }, item)) : props.children;
+    const theme = useThemeSafely();
+    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
+    const listStyles = css `
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		${props.altRowColor && `
+			> .listItem:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+		${props.noLines && `
+			> .listItem {
+				border-bottom: none;
+			}
+		`}
+	`;
+    return (React.createElement("ul", Object.assign({}, listProps, { ref: ref, className: cx('list', listStyles, props.className) }), children));
+});
+const ListItem = (props) => {
+    const liProps = __rest(props, ["variant"]);
+    const theme = useThemeSafely();
+    const itemStyles = css `
+		border-bottom: ${theme.controls.border};
+		&:last-child {
+            border-bottom: none;
+        }
+	`;
+    const contentStyle = css `
+		padding: calc(${theme.controls.padding} * 1.5);
+		${props.variant === 'full' && `
+			padding:0;
+			>.button {
+				padding: calc(${theme.controls.padding} * 1.5);
+				width: 100%;
+				border: none;
+			}
+			>.omniLink {
+				padding-left: calc(${theme.controls.padding} * 1.5);
+				padding-right: calc(${theme.controls.padding} * 1.5);
+				width: 100%;
+				line-height: ${theme.controls.height};
+				border: none;
+			}
+			>.button:not(:focus), >.omniLink:not(:focus) {
+				box-shadow: none;
+			}
+			>.omniLink:not(.omniLink--iconBlock){
+				display: block;
+			}
+		`}
+	`;
+    return (React.createElement("li", Object.assign({}, liProps, { className: cx('listItem', itemStyles, props.className) }),
+        React.createElement("div", { className: css(contentStyle) }, props.children)));
+};
+
+const TabLocker = (props) => {
+    const tabLocker = React.useRef(null);
+    return (React.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+            var _a, _b;
+            if (props.disabled) {
+                return;
+            }
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                e.stopPropagation();
+                const tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter(el => !el.hasAttribute('disabled'));
+                if (tabElements.length) {
+                    const direction = e.shiftKey ? -1 : 1;
+                    const index = tabElements.findIndex(x => x === document.activeElement);
+                    if (index === undefined) {
+                        tabElements[0].focus();
+                    }
+                    else if (index === tabElements.length - 1 && direction === 1) {
+                        tabElements[0].focus();
+                    }
+                    else if (index === 0 && direction === -1) {
+                        tabElements[tabElements.length - 1].focus();
+                    }
+                    else {
+                        tabElements[index + direction].focus();
+                    }
+                }
+            }
+        } }, props.children));
+};
+
+const tagStyles = {
+    'p': {
+        marginTop: '1rem',
+        marginBottom: '1rem'
+    },
+    'h1': {
+        fontSize: '2rem',
+    },
+    'h2': {
+        fontSize: '1.5rem'
+    },
+    'h3': {
+        fontSize: '1.17rem' // Chrome default
+    },
+    'h4': {
+        fontSize: '1rem'
+    },
+};
+const headerRegex = /h1|h2|h3|h4/;
+const alignStyles = {
+    'center': { textAlign: 'center' },
+    'left': { textAlign: 'left' },
+    'right': { textAlign: 'right' }
+};
+const Text = (props) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const tagChoice = props.tag || 'p';
+    const style = props.style || {};
+    if (props.lineClamp) {
+        style.WebkitLineClamp = props.lineClamp;
+    }
+    if (props.leftPad) {
+        style.paddingLeft = props.leftPad;
+    }
+    const styles = css({
+        userSelect: 'text',
+        label: 'Text'
+    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }, props.lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box'
+    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+        fontFamily: theme.fonts.headerFamily
+    });
+    return React.createElement(tagChoice, {
+        style: style,
+        className: cx('text', styles, props.className)
+    }, 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
+const Autocomplete = (p) => {
+    var _a, _b, _c;
+    const element = React.useRef(null);
+    const input = React.useRef(null);
+    const list = React.useRef(null);
+    const [values, setValues] = React.useState([]);
+    const showValues = React.useMemo(() => values.length > 0, [values]);
+    const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES;
+    const shownValues = React.useMemo(() => {
+        if (!p.allowScroll) {
+            //TB:normalize this value and use it below for list building
+            return values.slice(0, maxShowValues);
+        }
+        return values.slice();
+    }, [values]);
+    const onChangeForOptions = React.useRef(debounce((value) => {
+        if (!p.minChars || value.length >= p.minChars) {
+            p.getOptions(value)
+                .then(vals => {
+                setValues(vals);
+            }).catch(err => {
+                // ignore it
+            });
+        }
+        else {
+            setValues([]);
+        }
+    }, (_b = p.getOptionsDebounceMs) !== null && _b !== void 0 ? _b : 0, (_c = p.debounceOptions) !== null && _c !== void 0 ? _c : { leading: true, trailing: true }));
+    const theme = useThemeSafely();
+    const baseClass = css `
+		label: Autocomplete;
+		position: relative;
+		width: 100%;
+	`;
+    let listBorderRadius = '';
+    if (p.round || p.rounded || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
+    const listClass = css({
+        position: 'absolute',
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: listBorderRadius,
+        boxShadow: theme.controls.boxShadow,
+        backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
+        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 `
+		${showValues && `
+			z-index: ${theme.zIndexes.backdrop};
+			position: relative;
+		`}
+	`;
+    const buttonStyles = css({
+        borderRadius: 0,
+    });
+    const buttonMarkerClass = 'ListItem__button';
+    const getNextTabElement = (fromIndex, direction) => {
+        var _a, _b, _c;
+        if (fromIndex === -1) {
+            let buttonIndex = 0;
+            if (direction === -1) {
+                buttonIndex = shownValues.length - 1;
+            }
+            return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
+        }
+        else {
+            const nextIndex = fromIndex + direction;
+            if (nextIndex >= shownValues.length || nextIndex < 0) {
+                return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
+            }
+            else {
+                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
+            }
+        }
+    };
+    return (React.createElement("div", { ref: element, className: cx(baseClass, 'autocomplete') },
+        React.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
+        React.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
+            React.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rounded: p.rounded, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+                    const value = v;
+                    p.onChange(value);
+                    onChangeForOptions.current(value);
+                }, onKeyDown: e => {
+                    var _a, _b;
+                    if (showValues) {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
+                    }
+                }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
+            showValues && (React.createElement(List, { ref: list, className: cx(listClass, p.allowScroll && shownValues.length > maxShowValues && css({
+                    overflowY: 'scroll',
+                    maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
+                })) },
+                shownValues.map((value, listItemIndex) => {
+                    return (React.createElement(ListItem, { key: getAutocompleteValueId(value), variant: "full" },
+                        React.createElement(Button, { onKeyDown: e => {
+                                var _a, _b;
+                                if (e.key === 'ArrowDown') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                                }
+                            }, className: cx(buttonMarkerClass + listItemIndex, buttonStyles), onClick: () => {
+                                p.onPick(value);
+                                setValues([]);
+                                setTimeout(() => {
+                                    var _a;
+                                    // we need to wait until the component is re-rendered.
+                                    // outside changes to Inputs will be ignored if the component has focus.
+                                    (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, 0);
+                            } },
+                            React.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, getAutocompleteValueText(value)))));
+                }),
+                !p.allowScroll && shownValues.length < values.length && (React.createElement(ListItem, null,
+                    React.createElement(Text, { tag: "div", italics: true, align: "center" },
+                        "Showing ",
+                        shownValues.length.toLocaleString(),
+                        " of ",
+                        values.length.toLocaleString(),
+                        " results."))))))));
+};
+
+const useLogger = (componentName, enabled) => {
+    return (...messages) => {
+        if (enabled) {
+            // tslint:disable-next-line
+            console.log(componentName, ...messages);
+        }
+    };
+};
+
+const BackdropContext = React__default.createContext({
+    showing: false,
+    showCount: 0,
+    portalId: 'backdrop',
+    setShow: s => {
+        /* empty */
+    }
+});
+const BackdropContextProvider = (p) => {
+    var _a;
+    const [showCount, setShowCount] = useState(0);
+    const log = useLogger('BackdropContextProvider', (_a = p.debug) !== null && _a !== void 0 ? _a : false);
+    if (p.debug) {
+        useEffect(() => {
+            log('mounted');
+            return () => {
+                log('un-mounted');
+            };
+        }, []);
+        useEffect(() => {
+            log('showCount changed', showCount);
+        }, [showCount]);
+    }
+    return (React__default.createElement(BackdropContext.Provider, { value: {
+            portalId: 'backdrop',
+            showing: showCount > 0,
+            showCount: showCount,
+            setShow: (show) => {
+                if (show) {
+                    setShowCount(s => {
+                        const count = s + 1;
+                        log('setShowCount', count);
+                        log('showCount was', showCount);
+                        return count;
+                    });
+                }
+                else {
+                    setShowCount(s => {
+                        const count = Math.max(0, s - 1);
+                        log('setShowCount', count);
+                        log('showCount was', showCount);
+                        return count;
+                    });
+                }
+            }
+        } },
+        p.children,
+        p.debug && (React__default.createElement("p", { className: css({
+                position: 'fixed',
+                top: 0, right: 0,
+                backgroundColor: '#ff00004f',
+                color: 'white',
+                padding: '0.5rem',
+                margin: 0,
+                zIndex: 9999
+            }) },
+            "Backdrop showCount: ",
+            showCount))));
+};
+const BackdropOverlay = (p) => {
+    var _a, _b;
+    const context = 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) {
+        useEffect(() => {
+            log('mounted');
+            return () => {
+                log('unmounted');
+            };
+        }, []);
+        useEffect(() => {
+            log('context.showing changed', context.showing);
+        }, [context.showing]);
+    }
+    return (React__default.createElement("div", { onClick: () => {
+            context === null || context === void 0 ? void 0 : context.setShow(false);
+            log('onClick', 'setShow', false);
+        }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css({
+            cursor: 'pointer',
+            position: 'fixed',
+            top: 0, right: 0, bottom: 0, left: 0,
+            backgroundColor: theme.colors.backdrop,
+            zIndex: (context === null || context === void 0 ? void 0 : context.showing) ? theme.zIndexes.backdrop : -1,
+            visibility: (context === null || context === void 0 ? void 0 : context.showing) ? 'visible' : 'hidden',
+            opacity: (context === null || context === void 0 ? void 0 : context.showing) ? 1 : 0,
+            transition: `opacity ${showTimeMs}ms ease-in-out`,
+            userSelect: 'none',
+            WebkitTapHighlightColor: 'transparent'
+        }) }));
+};
+const Backdrop = (p) => {
+    return (React__default.createElement(BackdropContextProvider, { debug: p.debug },
+        React__default.createElement("div", { className: css({
+                height: '100%'
+            }) },
+            p.children,
+            React__default.createElement(BackdropOverlay, { showTimeMs: p.showTimeMs, debug: p.debug }))));
+};
+
+const Calendar = (p) => {
+    var _a, _b, _c, _d;
+    const theme = useThemeSafely();
+    const cellSize = (_a = p.cellSize) !== null && _a !== void 0 ? _a : '3rem';
+    const showTitle = (_b = p.title) !== null && _b !== void 0 ? _b : true;
+    const calendarStyles = css({
+        display: 'grid',
+        gridTemplateColumns: `repeat(7, ${cellSize})`,
+    });
+    const cellStyles = css({
+        border: 'none',
+        backgroundColor: 'transparent',
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        color: theme.colors.font,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderTop: theme.controls.border,
+        borderLeft: theme.controls.border,
+        width: cellSize,
+        height: cellSize
+    });
+    const rightCellStyles = css({
+        borderRight: theme.controls.border
+    });
+    const bottomCellStyles = css({
+        borderBottom: theme.controls.border
+    });
+    const nonDayStyles = css({
+        backgroundColor: theme.colors.disabled
+    });
+    const clickableStyles = css({
+        cursor: 'pointer',
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow,
+            position: 'relative',
+            zIndex: 2
+        },
+        ":active": {
+            boxShadow: 'none'
+        },
+        ":hover": {
+            backgroundColor: theme.colors.lightBg,
+            color: theme.colors.font,
+        }
+    });
+    const monthStart = new Date(p.year, p.month - 1, 1);
+    const days = getDaysInMonth(monthStart);
+    const startDayOfWeek = getDay(monthStart);
+    const dayEndIndex = startDayOfWeek + days - 1;
+    const cellCount = p.fixedRows ? 42 : Math.ceil((days + startDayOfWeek) / 7) * 7;
+    const bottomRowStartIndex = cellCount - 7;
+    const currentDate = p.showCurrent ? new Date() : undefined;
+    const selectedDate = p.selectedValue && isSameMonth(p.selectedValue, monthStart) ? new Date(p.selectedValue) : undefined;
+    const cells = [];
+    for (let i = 0; i < cellCount; i++) {
+        const dayOfMonth = i >= startDayOfWeek && i <= dayEndIndex ? i - startDayOfWeek + 1 : undefined;
+        const cellDate = dayOfMonth ? new Date(p.year, p.month - 1, dayOfMonth) : undefined;
+        let canInteract = !!cellDate;
+        if (p.min && isBefore(cellDate !== null && cellDate !== void 0 ? cellDate : 0, p.min)) {
+            canInteract = false;
+        }
+        if (p.max && isAfter(cellDate !== null && cellDate !== void 0 ? cellDate : 0, p.max)) {
+            canInteract = false;
+        }
+        if (cellDate && p.onClick && ((_c = p.isCellDisabled) === null || _c === void 0 ? void 0 : _c.call(p, cellDate))) {
+            canInteract = false;
+        }
+        const styles = css(cellStyles, (i + 1) % 7 === 0 && rightCellStyles, i >= bottomRowStartIndex && bottomCellStyles, !canInteract && nonDayStyles, currentDate && cellDate && isSameDay(currentDate, cellDate) && { fontWeight: 'bold' }, selectedDate && cellDate && isSameDay(selectedDate, cellDate) && { backgroundColor: theme.colors.primary, color: theme.colors.primaryFont }, canInteract && p.onClick && clickableStyles);
+        const onClick = canInteract && p.onClick ? () => {
+            var _a;
+            if (cellDate) {
+                (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, cellDate);
+            }
+        } : undefined;
+        const cellContent = cellDate && (p.renderCell ? p.renderCell(cellDate) : cellDate.getDate());
+        const cell = onClick ? (React.createElement("button", { type: "button", key: i, className: styles, onClick: onClick }, cellContent)) : (React.createElement("div", { key: i, className: styles }, cellContent));
+        cells.push(cell);
+    }
+    return (React.createElement("div", { id: p.id, className: "calendar" },
+        showTitle && ((_d = p.customTitle) !== null && _d !== void 0 ? _d : React.createElement(Text, { larger: true, align: "center" },
+            format(monthStart, 'LLLL'),
+            p.yearInTitle && ` ${p.year}`)),
+        React.createElement("div", { className: calendarStyles },
+            ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => {
+                return (React.createElement(Text, { style: { paddingBottom: '0.25rem' }, key: day, smaller: p.smallHeader, noPad: true, align: "center" }, day));
+            }),
+            cells)));
+};
+
+const Checkbox = (props) => {
+    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();
+    let finalCheckedColor;
+    if (props.checked) {
+        if (props.checkedThemeColor) {
+            finalCheckedColor = theme.colors[props.checkedThemeColor];
+        }
+        else {
+            finalCheckedColor = props.checkedColor;
+        }
+    }
+    const checkboxStyles = css `
+		display: inline-block;
+		${!props.disabled && !props.readonly && `
+			&:hover {
+				filter: ${theme.controls.hoverBrightness};
+			}
+		`}
+	`;
+    const labelStyles = css `
+		cursor: pointer;
+		user-select: none;
+		display: flex;
+		align-items: center;
+		${props.disabled && `
+			cursor: not-allowed;
+		`}
+		${props.readonly && `
+			cursor: default;
+		`}
+	`;
+    // had to reference a marker class ('checkboxIcon') here for the sibling selector to work.
+    // opacity: 0 required for firefox.  ignores the width of 0.
+    const nativeCheckboxStyles = css `
+		margin: 0;
+		padding: 0;
+		width: 0;
+		opacity: 0; 
+
+		${!props.readonly && `
+			&:focus + .checkboxIcon {
+				box-shadow: ${theme.controls.focusOutlineShadow};
+			}
+		`}
+	`;
+    const iconStyles = css `
+		${!!props.label && `
+			margin-right: 0.5rem;
+		`}
+		${props.disabled && `
+			background-color: ${theme.colors.disabled};
+			cursor: not-allowed;
+		`}
+		${props.readonly && `
+			cursor: default;
+		`}
+		${props.checked && `
+			color: ${finalCheckedColor}
+		`}
+	`;
+    return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
+        React.createElement("label", { className: labelStyles },
+            React.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readonly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+                    if (props.readonly) {
+                        e.preventDefault();
+                        return;
+                    }
+                    return props.onChange(e.currentTarget.checked, e);
+                } })),
+            React.createElement(Icon, { className: cx('checkboxIcon', iconStyles), id: props.checked ? selected : unselected }),
+            props.label,
+            props.children)));
+};
+
+// 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;
+const useScrollbarSize = (recalc) => {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDom) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '50px';
+            scrollDiv.style.height = '50px';
+            scrollDiv.style.overflow = 'scroll';
+            document.body.appendChild(scrollDiv);
+            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+        }
+    }
+    return size;
+};
+
+let htmlBodyStyles;
+const Modal = (p) => {
+    var _a, _b, _c, _d;
+    const backdrop = useContext(BackdropContext);
+    const mouseDownElement = useRef(undefined);
+    const theme = useThemeSafely();
+    const hasHeader = p.closeButton || p.heading;
+    const contentRef = React__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 showing = useRef(p.show);
+    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 (showing.current && backdrop.showCount <= 1 && htmlBodyStyles) {
+                log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
+                document.body.classList.remove(htmlBodyStyles);
+            }
+            log('un-mounted');
+        };
+    }, []);
+    useEffect(() => {
+        log('show changed', p.show);
+        backdrop.setShow(p.show);
+        showing.current = p.show;
+        log('backdrop.setShow', true);
+        if (!htmlBodyStyles) {
+            log('creating singleton htmlBodyStyles');
+            htmlBodyStyles = css({
+                label: 'ModalBodyOverrides',
+                overflow: 'hidden',
+                paddingRight: `${useScrollbarSize()}px`
+            });
+        }
+        if (p.show) {
+            log('adding htmlBodyStyles');
+            document.body.classList.add(htmlBodyStyles);
+        }
+        else {
+            if (backdrop.showCount <= 1) {
+                log('backdrop.showCount', backdrop.showCount, 'removing htmlBodyStyles');
+                document.body.classList.remove(htmlBodyStyles);
+            }
+        }
+    }, [p.show]);
+    React__default.useLayoutEffect(() => {
+        var _a;
+        if (p.show === true) {
+            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            // still need to wait for the next tick so the children are all rendered.
+            setTimeout(() => {
+                var _a;
+                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
+                element === null || element === void 0 ? void 0 : element.focus();
+                log('set focus', focusSelector);
+            });
+        }
+    }, [p.show]);
+    const modalBodyStyles = css({
+        zIndex: theme.zIndexes.modal,
+        cursor: 'default',
+        margin: '1rem',
+        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
+        border: p.noBackground ? undefined : theme.controls.border,
+        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
+        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
+        opacity: p.show ? 1 : 0,
+        fontSize: theme.fonts.size,
+        fontFamily: theme.fonts.family,
+        fontWeight: 'normal',
+        '&:focus': {
+            outline: 'none'
+        }
+    });
+    const modalHeaderStyles = css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colors.header,
+        padding: '1rem',
+        color: theme.colors.headerFont
+    });
+    const modalContainerStyles = css([{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            backgroundColor: "transparent",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: p.onClick ? 'pointer' : 'default'
+        }, p.scrollable && {
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            alignItems: 'flex-start'
+        }]);
+    if (p.show) {
+        const backdropContainer = document.getElementById(backdrop.portalId);
+        if (backdropContainer) {
+            return createPortal((React__default.createElement("div", { onClick: e => {
+                    e.stopPropagation();
+                    if (!mouseDownElement.current) {
+                        if (p.onClick) {
+                            log('backdropContainer onClick');
+                            p.onClick();
+                        }
+                    }
+                    mouseDownElement.current = undefined;
+                }, className: cx('modalContainer', modalContainerStyles) },
+                React__default.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                        mouseDownElement.current = e.target;
+                        e.stopPropagation();
+                    }, onMouseUp: e => {
+                        mouseDownElement.current = undefined;
+                        e.stopPropagation();
+                    }, className: cx('modalBody', modalBodyStyles, p.className) },
+                    React__default.createElement(TabLocker, null,
+                        hasHeader && (React__default.createElement("header", { className: cx('modalHeader', modalHeaderStyles) },
+                            p.heading ? React__default.createElement(Text, { className: css({
+                                    margin: 0,
+                                    flexGrow: 1
+                                }), tag: "h1", bold: true }, p.heading) : React__default.createElement("span", null),
+                            p.closeButton && p.onClick ? React__default.createElement(Button, { className: cx('modalCloseButton', css({
+                                    color: theme.colors.headerFont,
+                                    marginLeft: '1rem',
+                                    backgroundColor: 'transparent'
+                                })), variant: "icon", onClick: p.onClick },
+                                React__default.createElement(Icon, { id: "close" })) : React__default.createElement("span", null))),
+                        p.children)))), backdropContainer);
+        }
+    }
+    return null;
+};
+
+const ConfirmModal = (props) => {
+    const theme = useThemeSafely();
+    const modalStyle = css `
+		${props.variant === 'omg' && `
+			.modalHeader {
+				background-color:${theme.colors.omg};
+				color:${theme.colors.omgFont};
+			}
+		`}
+	`;
+    return (React.createElement(Modal, { id: props.id, debug: props.debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+        React.createElement("div", { className: css({ padding: '1rem' }) },
+            React.createElement(Text, { align: "center" }, props.text),
+            React.createElement("div", { className: css({ textAlign: 'center' }) },
+                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
+                React.createElement(Button, { className: css({ margin: '0 0.5rem' }), enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel')))));
+};
+
+const CopyButton = (props) => {
+    const [copied, setCopied] = React.useState(false);
+    return (React.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.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
+};
+
+const Popover = (p) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    return (React.createElement(Popover$1, { containerClassName: 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.createElement(ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
+                React.createElement(TabLocker, null,
+                    React.createElement("div", { className: 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.createElement("span", null, p.parent)));
+};
+
+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 && isBefore(calendarDate, min)) {
+        calendarDate = new Date(min);
+    }
+    else if (max && isAfter(calendarDate, max)) {
+        calendarDate = new Date(max);
+    }
+    return calendarDate;
+};
+const DatePicker = (p) => {
+    const [showCalendar, setShowCalendar] = React.useState(false);
+    const [calendarDate, setCalendarDate] = React.useState(getCalendarDate(p.value, p.min, p.max));
+    // controls the one-time focus set on show
+    const needsFocus = React.useRef(false);
+    const popover = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        setCalendarDate(getCalendarDate((_a = p.value) !== null && _a !== void 0 ? _a : 0, p.min, p.max));
+    }, [p.value]);
+    React.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;
+        }
+    });
+    //TB: replace with new inputs
+    return (React.createElement(Popover, { reposition: p.reposition, isOpen: showCalendar, onClickOutside: () => {
+            needsFocus.current = false;
+            setShowCalendar(false);
+        }, parent: (React.createElement(Input, Object.assign({ onFocus: () => {
+                needsFocus.current = false;
+                setShowCalendar(false);
+            }, placeholder: 'MM/DD/YYYY' }, p, { type: "date", rightControl: !p.readOnly ? (React.createElement(Button, { variant: "icon", readonly: p.readOnly, disabled: p.disabled, small: true, style: {
+                    fontSize: '1rem'
+                }, onClick: () => {
+                    needsFocus.current = !showCalendar;
+                    setShowCalendar(!showCalendar);
+                } },
+                React.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: v => {
+                p.onChange(v);
+            } }))), content: (React.createElement("div", { ref: popover, className: css({
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                paddingBottom: '1rem'
+            }) },
+            React.createElement(Calendar, { onClick: date => {
+                    p.onChange(date.valueOf());
+                    needsFocus.current = false;
+                    setShowCalendar(false);
+                }, customTitle: React.createElement("div", { className: css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    }) },
+                    React.createElement(Button, { disabled: !!p.min && isBefore(endOfMonth(addMonths(calendarDate, -1)), p.min), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, -1)) },
+                        React.createElement(Icon, { id: "pagerLeft" })),
+                    React.createElement(Text, { align: "center" },
+                        format(calendarDate, 'LLLL'),
+                        " ",
+                        calendarDate.getFullYear()),
+                    React.createElement(Button, { disabled: !!p.max && isAfter(startOfMonth(addMonths(calendarDate, 1)), p.max), small: true, variant: "icon", onClick: () => setCalendarDate(addMonths(calendarDate, 1)) },
+                        React.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 Divider = () => {
+    const theme = useThemeSafely();
+    return (React.createElement("hr", { className: cx("divider", css({
+            margin: theme.controls.dividerMargin,
+            border: theme.controls.dividerBorder
+        })) }));
+};
+
+const ErrorModal = (props) => {
+    const { message } = props;
+    const theme = useThemeSafely();
+    const modalStyles = css `
+		.modalHeader {
+			background-color: ${theme.colors.omg};
+			color:  ${theme.colors.omgFont};
+		}
+		.modalCloseButton {
+			color:  ${theme.colors.omgFont};
+		}
+	`;
+    return (React.createElement(Modal, { id: props.id, debug: props.debug, className: cx('errorModal', modalStyles), heading: "Error", closeButton: true, show: props.show, onClick: props.close },
+        React.createElement("div", { className: css({ padding: '1rem' }) },
+            React.createElement(Text, { align: "center" }, message))));
+};
+
+/** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
+const Form = React.forwardRef((props, ref) => {
+    const { inline, children, onSubmit, className, ajax } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax"]);
+    const theme = useThemeSafely();
+    return (React.createElement("form", Object.assign({}, rest, { ref: ref, className: cx('form', css({
+            display: 'flex',
+            flexDirection: props.inline ? 'row' : 'column',
+            alignItems: props.inline ? 'flex-end' : 'normal',
+            gap: theme.controls.gap
+        }), props.className), onSubmit: e => {
+            if (ajax !== false) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (onSubmit) {
+                onSubmit(e);
+            }
+        } }), children));
+});
+const FormFlexRow = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    return (React.createElement("div", { style: props.style, className: cx('formFlexRow', css({
+            display: 'flex',
+            gap: theme.controls.gap,
+            justifyContent: (_a = props.justifyContent) !== null && _a !== void 0 ? _a : 'normal'
+        }), props.className) }, props.children));
+};
+const FormColumnRow = (props) => {
+    const theme = useThemeSafely();
+    return (React.createElement("div", { style: props.style, className: cx('formColumnRow', css({
+            display: 'grid',
+            gap: theme.controls.gap,
+            gridTemplateColumns: `repeat(${props.cols},1fr)`
+        }), props.className) }, props.children));
+};
+
+const InfoPanel = (props) => {
+    const theme = useThemeSafely();
+    const styles = css `
+		border:${theme.colors.border};
+		padding:1rem;
+		color: rgba(0, 0, 0, 0.7);
+		margin: 0 !important;
+		${props.variant === 'info' && `
+			background-color:${theme.colors.info};
+			color:${theme.colors.infoFont};
+		`}
+		${props.variant === 'warning' && `
+			background-color:${theme.colors.warning};
+			color:${theme.colors.warningFont};
+		`}
+		${props.variant === 'error' && `
+			background-color:${theme.colors.omg};
+			color:${theme.colors.omgFont};
+		`}
+		${props.variant === 'negative' && `
+			background-color:${theme.colors.negative};
+			color:${theme.colors.negativeFont};
+		`}
+		${props.variant === 'positive' && `
+			background-color:${theme.colors.positive};
+			color:${theme.colors.positiveFont};
+		`}
+	`;
+    return (React.createElement(Text, { tag: props.tag || 'p', style: props.style, align: "center", className: cx('infoPanel', styles, props.className) }, props.children));
+};
+
+class FileListPlus {
+    constructor(_raw, _args = {}) {
+        this._raw = _raw;
+        this._args = _args;
+        this._files = Array.from(this._raw).map(f => {
+            return { name: f.name, size: f.size, type: f.type };
+        });
+        if (this._args.accept) {
+            const acceptTypes = this._args.accept.split(',');
+            this._invalidFiles = this._files.filter(f => {
+                if (acceptTypes.includes(f.type)) {
+                    return false;
+                }
+                if (acceptTypes.some(t => f.name.endsWith(t))) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        else {
+            this._invalidFiles = [];
+        }
+    }
+    get raw() {
+        return this._raw;
+    }
+    get length() {
+        return this._files.length;
+    }
+    get files() {
+        return this._files;
+    }
+    get invalidFiles() {
+        return this._invalidFiles;
+    }
+    get totalBytes() {
+        return sumBy(this.files, f => f.size);
+    }
+    get overMaxBytes() {
+        var _a;
+        return this.totalBytes >= ((_a = this._args.maxBytes) !== null && _a !== void 0 ? _a : Infinity);
+    }
+    get overFileLimit() {
+        return this.length > (this._args.multiple ? Infinity : 1);
+    }
+    get hasErrors() {
+        return this.overMaxBytes || this.overFileLimit || !!this.invalidFiles.length;
+    }
+}
+
+const DEFAULT_FAILURE_MESSAGE = 'Upload failed.';
+const hoverClass = css({
+    backgroundColor: 'rgba(0,0,0,0.25) !important'
+});
+const FileUploader = (p) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [message, setMessage] = useState(undefined);
+    const [canUpload, setCanUpload] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [files, setFiles] = useState(undefined);
+    const [fullFailureMessage, setFullFailureMessage] = useState(undefined);
+    const form = useRef(null);
+    const input = useRef(null);
+    const totalFileSize = (_a = files === null || files === void 0 ? void 0 : files.totalBytes) !== null && _a !== void 0 ? _a : 0;
+    const theme = useThemeSafely();
+    let filesDisplay = '';
+    if (!message) {
+        if (!(files === null || files === void 0 ? void 0 : files.length)) {
+            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 (${getFileSizeDisplay(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
+        }
+    }
+    const setAllFiles = (inputFiles) => {
+        if (input.current && inputFiles === undefined) {
+            input.current.value = '';
+        }
+        setFiles(inputFiles);
+    };
+    const onFilesChange = (rawFiles) => {
+        setAllFiles(rawFiles ? createFileList(rawFiles) : undefined);
+        setCanUpload(!!(rawFiles === null || rawFiles === void 0 ? void 0 : rawFiles.length));
+        setMessage(undefined);
+        setFullFailureMessage(undefined);
+    };
+    const createFileList = (rawFiles) => {
+        return new FileListPlus(rawFiles, {
+            accept: p.accept,
+            multiple: p.multiple,
+            maxBytes: p.maxBytes
+        });
+    };
+    const showInfoOnPick = (_c = p.showInfoOnPick) !== null && _c !== void 0 ? _c : true;
+    let infoMessage;
+    if (p.infoMessage && (!files || showInfoOnPick)) {
+        if (typeof p.infoMessage === 'string') {
+            infoMessage = React__default.createElement(Text, { noPad: true }, p.infoMessage);
+        }
+        else {
+            infoMessage = p.infoMessage;
+        }
+    }
+    return (React__default.createElement(Form, { ref: form, className: css({
+            border: theme.controls.border,
+            borderStyle: 'dashed',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            padding: '1rem',
+            overflow: 'hidden',
+            backgroundColor: theme.colors.lightBg,
+        }, p.disabled && {
+            opacity: theme.controls.disabledOpacity
+        }), onDragOver: e => {
+            var _a, _b;
+            e.preventDefault();
+            // we're using onDragOver instead of onDragEnter because *Enter and *Leave apparently can fire multiple times even though you're over the target.
+            // *Over is continuous.
+            if (!((_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.contains(hoverClass))) {
+                (_b = form.current) === null || _b === void 0 ? void 0 : _b.classList.add(hoverClass);
+            }
+        }, onDragLeave: e => {
+            var _a;
+            (_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.remove(hoverClass);
+        }, onDrop: e => {
+            var _a;
+            e.preventDefault();
+            (_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.remove(hoverClass);
+            onFilesChange(e.dataTransfer.files);
+        }, onSubmit: e => {
+            if (!files) {
+                return;
+            }
+            setUploading(true);
+            p.onUpload(files.raw).then(() => {
+                setMessage('success');
+                setAllFiles(undefined);
+            }).catch(err => {
+                var _a;
+                setMessage('failure');
+                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
+            }).finally(() => {
+                setUploading(false);
+                setCanUpload(false);
+            });
+        } },
+        React__default.createElement("input", { disabled: p.disabled, ref: input, className: css({
+                position: 'absolute',
+                top: -50,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                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) {
+                        onFilesChange(undefined);
+                        return;
+                    }
+                    onFilesChange(e.target.files);
+                }
+                catch (err) {
+                    // tslint:disable-next-line
+                    console.error(err);
+                    onFilesChange(undefined);
+                }
+            } }),
+        !message && (React__default.createElement("span", { className: css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem',
+                alignItems: 'center',
+                zIndex: !!(files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
+            }) },
+            !(files === null || files === void 0 ? void 0 : files.length) && React__default.createElement(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
+            React__default.createElement(Text, { align: "center", noPad: true, spacedOut: true, className: css({
+                    width: '100%'
+                }) },
+                filesDisplay,
+                !!(files === null || files === void 0 ? void 0 : files.length) && (React__default.createElement(Button, { onClick: e => {
+                        e.stopPropagation();
+                        onFilesChange(undefined);
+                    }, className: css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+            infoMessage,
+            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default.createElement(InfoPanel, { variant: "error", className: css({ width: '100%' }) },
+                "Invalid files: ",
+                files.invalidFiles.map(f => f.name).join(', '),
+                ".")),
+            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default.createElement(InfoPanel, { variant: "error", className: css({ width: '100%' }) },
+                "Max file size exceeded (",
+                getFileSizeDisplay((_d = p.maxBytes) !== null && _d !== void 0 ? _d : 0),
+                ").")))),
+        canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default.createElement(Button, { className: css({
+                width: (_e = p.buttonWidth) !== null && _e !== void 0 ? _e : '10rem',
+                zIndex: 1,
+            }), 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.createElement(UploadInfoPanel, { variant: "positive", message: (_h = p.successMessage) !== null && _h !== void 0 ? _h : 'Upload successful.', onClear: () => setMessage(undefined) })),
+        message === 'failure' && (React__default.createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
+};
+const UploadInfoPanel = (p) => {
+    return (React__default.createElement(InfoPanel, { variant: p.variant, className: css({ zIndex: 1 }) },
+        p.message,
+        React__default.createElement(Button, { block: true, className: css({
+                color: 'inherit',
+                marginTop: '1rem'
+            }), onClick: e => {
+                e.stopPropagation();
+                p.onClear();
+            }, rightIcon: React__default.createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+};
+// 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 >= 1000000) {
+        value = size / 1000000;
+        suffix = 'MB';
+    }
+    else if (size >= 1000) {
+        value = size / 1000;
+        suffix = 'KB';
+    }
+    else {
+        value = size;
+        suffix = 'B';
+    }
+    return value.toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ` ${suffix}`;
+};
+
+/** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
+const mergeClassNames = (...classes) => {
+    if (!classes) {
+        return undefined;
+    }
+    return classes.filter(c => c).map(c => c).join(' ');
+};
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+const noop = () => {
+    // lil' noop would be a great rap name. (thanks linter)
+};
+//TB: this will need to be exposed in v8 on the helpers page.
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+const enumToEntities = (enumObj) => {
+    const entities = [];
+    for (const key in enumObj) {
+        if (isNaN(parseInt(key, 10))) {
+            entities.push({
+                id: enumObj[key],
+                name: key
+            });
+        }
+    }
+    return entities;
+};
+
+const Header = (props) => {
+    const theme = useThemeSafely();
+    const bodyStyles = css `
+		padding-top: calc(${theme.layout.headerHeight} + ${theme.layout.headerBodyOffset});
+		label: Header;
+	`;
+    React.useEffect(() => {
+        document.body.classList.add(bodyStyles);
+        return () => {
+            document.body.classList.remove(bodyStyles);
+        };
+    });
+    const toggleMenu = props.toggleMenu || noop;
+    const headerStyles = css `
+		display: flex;
+		gap: ${theme.controls.gap};
+		justify-content: flex-start;
+		align-items: center;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: ${theme.layout.headerHeight};
+		background-color: ${theme.colors.header};
+		box-shadow: ${theme.controls.headerBoxShadow};	
+		color: ${theme.colors.headerFont};
+		padding: 1rem;
+		z-index: ${theme.zIndexes.header};
+		flex-wrap: wrap;
+		.button {
+			color: ${theme.colors.headerFont};
+			background-color:transparent;
+		}
+		${props.inline && `
+			position: static;
+		`}
+		${!!props.rightElements && `
+			justify-content: space-between;
+		`}
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				justify-content: flex-end;
+			}
+		`}
+	`;
+    const headerButtonStyles = !props.noMenu ? css `
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: none;
+			}
+		`}
+	` : undefined;
+    const rightElementStyles = props.rightElements && css `
+		margin-left: 1rem;
+		display: grid;
+		grid-gap: 0.5rem;
+		grid-auto-flow: column;
+		align-items: center;
+	`;
+    const leftElementStyles = props.leftElements && css({
+        display: 'grid',
+        gap: '0.5rem',
+        gridAutoFlow: 'column',
+        alignItems: 'center'
+    });
+    const centerElementsStyles = props.centerOffsetElements && css `
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		left: 0;
+		right: 0;
+		margin-top: calc(${theme.layout.headerHeight} * 1.25);
+	`;
+    let title;
+    if (props.title) {
+        if (typeof props.title === 'string') {
+            title = (React.createElement(Text, { className: css({
+                    margin: 0,
+                    fontSize: '2rem',
+                    flexGrow: 1,
+                    flexBasis: '33%'
+                }), tag: "h1", ellipsis: !props.fillTitle, align: props.fillTitle ? 'center' : 'left' }, props.title));
+        }
+        else {
+            title = props.title;
+        }
+    }
+    return (React.createElement("div", { className: cx('header', headerStyles, props.className) },
+        !props.noMenu && (React.createElement(Button, { variant: "icon", className: headerButtonStyles, onClick: toggleMenu },
+            React.createElement(Icon, { id: "menu" }))),
+        props.leftElements && React.createElement("div", { className: leftElementStyles }, props.leftElements),
+        title,
+        props.rightElements && React.createElement("div", { className: rightElementStyles }, props.rightElements),
+        props.centerOffsetElements && (React.createElement("div", { className: centerElementsStyles },
+            React.createElement("div", null, props.centerOffsetElements)))));
+};
+
+const Highlight = (props) => {
+    const theme = useThemeSafely();
+    const highlightStyles = css `
+		> mark {
+			background-color: ${theme.colors.textHighlight};
+		}
+	`;
+    let text = props.text;
+    if (props.text && props.highlightText) {
+        const replaceText = props.highlightText.trim();
+        if (replaceText) {
+            text = props.text.replace(new RegExp(`(${replaceText})`, 'gi'), `<mark>$1</mark>`);
+        }
+    }
+    return (React.createElement("span", { className: cx('highlight', highlightStyles), dangerouslySetInnerHTML: { __html: text } }));
+};
+
+const Image = (props) => {
+    return (React.createElement("img", { alt: props.alt, style: props.style, className: cx('image', css({
+            maxWidth: '100%',
+            maxHeight: '100%',
+        }), props.className), src: props.src }));
+};
+
+const InfoTip = (props) => {
+    var _a, _b, _c;
+    const [showTip, setShowTip] = React.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 `
+		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.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.createElement(React.Fragment, null,
+            button,
+            React.createElement(Modal, { id: props.modalId, debug: props.modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css({
+                    whiteSpace: 'normal'
+                }), closeButton: true },
+                React.createElement("div", { className: css({ padding: '1rem' }) }, props.content))));
+    }
+    else {
+        return (React.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.createElement("div", { className: css({
+                    padding: '0.5rem',
+                    fontSize: '0.75rem',
+                    maxWidth: '22rem'
+                }), style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
+    }
+};
+
+const defaultMaxLength$1 = 100;
+const BaseInput = React.forwardRef((props, ref) => {
+    var _a;
+    const theme = useThemeSafely();
+    const { rightControl, round, wrapperClassName } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName"]);
+    const inputStyles = 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.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: cx(inputStyles, props.className) }));
+    const inputWrapperStyles = css `
+		width:100%;
+		${props.rightControl && `
+			position: relative;
+		`}
+	`;
+    const rightControlStyles = props.rightControl && 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.createElement("div", { className: cx('input', inputWrapperStyles, wrapperClassName) },
+        inputElement,
+        props.rightControl && React.createElement("div", { className: rightControlStyles }, props.rightControl)));
+});
+
+const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
+const datePattern = dateRegex.source;
+const outOfRangeValidityMessage = 'Out of range';
+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, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
+    let value;
+    let outOfRange = false;
+    const dateParts = dateRegex.exec(rawValue);
+    if (dateParts) {
+        const month = parseInt(dateParts[1], 10);
+        const day = parseInt(dateParts[2], 10);
+        const year = parseInt(dateParts[3], 10);
+        if (isExists(year, month, day)) {
+            value = new Date(year, month - 1, day).valueOf();
+            outOfRange = isOutOfRange(value, min, max);
+            if (outOfRange) {
+                value = Math.max(Math.min(value, max), min);
+            }
+        }
+    }
+    return {
+        value,
+        outOfRange
+    };
+};
+const formatOuterValue = (value) => {
+    if (typeof value === 'number') {
+        return format(value, 'MM/dd/yyyy');
+    }
+    return '';
+};
+const DateInput = React.forwardRef((props, ref) => {
+    const [localValue, setLocalValue] = React.useState('');
+    const hasFocus = React.useRef(false);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
+    const { value, onChange } = props, otherProps = __rest(props, ["value", "onChange"]);
+    React.useEffect(() => {
+        var _a;
+        // prevent the outer value from influencing the inner value while you're typing.
+        if (!hasFocus.current) {
+            // sync the outer value to the local value if it changed.
+            setLocalValue(formatOuterValue(value));
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity((isOutOfRange(value, props.min, props.max) ? outOfRangeValidityMessage : ''));
+        }
+    }, [value]);
+    return (React.createElement(BaseInput, Object.assign({}, otherProps, { pattern: datePattern, maxLength: 10, ref: inputRef, type: "text", value: localValue, onChange: e => {
+            setLocalValue(e.target.value);
+            const { value: v, outOfRange } = parseDateMs(e.target.value, props.min, props.max);
+            // need to force invalid due to our using a 'text' input rather than a 'number' or 'date'.
+            e.target.setCustomValidity(outOfRange ? outOfRangeValidityMessage : '');
+            onChange(v, e);
+        }, onFocus: e => {
+            var _a;
+            hasFocus.current = true;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a;
+            hasFocus.current = false;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            // min/max constraints won't be reflected in the local input value.  fix that now.
+            // handling min/max while typing would be difficult and frustrating to the user.
+            setLocalValue(formatOuterValue(value));
+            e.target.setCustomValidity(isOutOfRange(value, props.min, props.max) ? outOfRangeValidityMessage : '');
+        } })));
+});
+
+const parseNumber = (rawValue, step = 0, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, applyMinMax) => {
+    var _a;
+    const decimals = step === 0 ? 0 : (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
+    let value;
+    if (rawValue) {
+        value = parseFloat(rawValue);
+        if (isNaN(value)) {
+            value = undefined;
+        }
+        else {
+            if (decimals === 0) {
+                value = Math.floor(value);
+            }
+            else {
+                value = parseFloat(value.toFixed(decimals));
+            }
+            if (applyMinMax) {
+                value = Math.max(Math.min(value, max), min);
+            }
+        }
+    }
+    return [value, value === null || value === void 0 ? void 0 : value.toString()];
+};
+const NumberInput = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const { value, onChange, constrainOnInput } = props, otherProps = __rest(props, ["value", "onChange", "constrainOnInput"]);
+    const applyInputConstraints = (_a = props.constrainOnInput) !== null && _a !== void 0 ? _a : true;
+    return (React.createElement(BaseInput, Object.assign({}, otherProps, { ref: ref, maxLength: (_b = props.maxLength) !== null && _b !== void 0 ? _b : 50, type: "number", value: value !== null && value !== void 0 ? value : '', onChange: e => {
+            const [v, displayValue] = parseNumber(e.target.value, props.step, props.min, props.max, applyInputConstraints);
+            // make sure the displayed value always matches our parsed value.
+            e.target.value = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+            onChange(v, e);
+        }, onBlur: e => {
+            if (applyInputConstraints) {
+                // catch all for things we missed.  
+                // onChange would have been called with undefined, but something strange might remain.
+                if (!e.target.checkValidity()) {
+                    e.target.value = '';
+                }
+            }
+        } })));
+});
+
+const defaultMaxLength = 200;
+const defaultRows = 10;
+const TextArea = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const { className, value, onChange } = props, otherProps = __rest(props, ["className", "value", "onChange"]);
+    const theme = useThemeSafely();
+    const styles = css({
+        maxWidth: '100%',
+        minHeight: theme.controls.height,
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
+        color: theme.colors.font,
+        paddingTop: '0.75rem',
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        height: 'auto',
+        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.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    return (React.createElement("textarea", Object.assign({}, otherProps, { className: cx(styles, 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: value !== null && value !== void 0 ? value : '', onChange: e => {
+            onChange(e.target.value || undefined, e);
+        } })));
+});
+
+const TextInput = React.forwardRef((props, ref) => {
+    var _a;
+    const { value, onChange } = props, otherProps = __rest(props, ["value", "onChange"]);
+    return (React.createElement(BaseInput, Object.assign({}, otherProps, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: ref, value: value !== null && value !== void 0 ? value : '', onChange: e => {
+            onChange(e.target.value || undefined, e);
+        } })));
+});
+
+const Label = (props) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const orientation = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
+    const align = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
+    const padding = '0.25rem';
+    const labelStyles = css `
+		${padding};
+		display: flex;
+		${orientation === 'vertical' && `
+			flex-direction: column;
+		`}
+		${orientation === 'horizontal' && `
+			flex-direction: row;
+			align-items: center;
+		`}
+		${orientation === 'horizontalReverse' && `
+			flex-direction: row-reverse;
+			align-items: center;
+		`}
+	`;
+    const labelTextStyles = css `
+		flex-shrink:0;
+		${orientation === 'vertical' && `
+			margin-bottom: ${padding};
+		`}
+		${orientation === 'horizontal' && `
+			flex-direction: row;
+			margin-right:${padding};
+			${props.static && `
+				margin-right:0.5rem;
+			`}
+		`}
+		${orientation === 'horizontalReverse' && `
+			margin-left:${padding};
+		`}
+		${(props.subText || props.optional) && `
+			margin-right: 0.5rem;
+		`}
+	`;
+    const labelContentStyles = css `
+		display:inline-block;
+		width:100%;
+		${props.controlAlign && `
+			height:${theme.controls.height};
+			line-height:${theme.controls.height};
+		`}
+	`;
+    const outerClass = props.className;
+    let labelText = React.createElement(Text, { align: align, className: labelTextStyles, tag: "div", bold: true }, props.text);
+    let subText;
+    if (props.subText) {
+        if (typeof props.subText === 'string') {
+            subText = React.createElement(Text, { tag: "div" }, props.subText);
+        }
+        else {
+            subText = props.subText;
+        }
+    }
+    else if (props.optional) {
+        subText = React.createElement(Text, { tag: "div" },
+            React.createElement("em", null, "(optional)"));
+    }
+    if (subText) {
+        labelText = React.createElement("span", { className: css({ display: 'flex' }) },
+            labelText,
+            React.createElement("span", { className: css({
+                    fontSize: '90%',
+                    marginBottom: padding
+                }) }, subText));
+    }
+    if (props.noWrap) {
+        return (React.createElement("span", { className: cx(labelStyles, outerClass) },
+            React.createElement("label", { htmlFor: props.htmlFor, className: outerClass }, labelText),
+            props.children));
+    }
+    const content = React.createElement(React.Fragment, null,
+        labelText,
+        React.createElement("span", { className: css(labelContentStyles) }, props.children));
+    if (props.static) {
+        return (React.createElement("span", { className: cx(labelStyles, outerClass) }, content));
+    }
+    // labels without htmlFor can cause focus, hover, and click issues when wrapping other elements.
+    // this fixes the issues.
+    const htmlFor = (_c = props.htmlFor) !== null && _c !== void 0 ? _c : nanoid();
+    return (React.createElement("label", { htmlFor: htmlFor, className: cx('label', labelStyles, outerClass) }, content));
+};
+
+/*
+    From https://fireship.io/snippets/use-media-query-hook/.
+    Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
+*/
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        window.addEventListener("resize", listener);
+        return () => window.removeEventListener("resize", listener);
+    }, [matches, query]);
+    return matches;
+};
+
+const Nav = (props) => {
+    const nav = React.useRef(null);
+    const theme = useThemeSafely();
+    const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
+    const backdrop = React.useContext(BackdropContext);
+    const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
+    const slideRight = keyframes `
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(${totalNavOffset});
+		}
+	`;
+    const slideLeft = keyframes `
+		0% {
+			transform: translateX(${totalNavOffset});
+		}
+
+		100% {
+			transform: translateX(0px);
+		}
+	`;
+    const classNavShowing = css `
+		animation: ${slideRight} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const classNavNotShowing = css `
+		animation: ${slideLeft} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
+    const navStyles = css `
+		position: fixed;
+		top: 0;
+		left: calc(${totalNavOffset} * -1);
+		bottom: 0;
+		background-color: ${theme.colors.nav};
+		color: ${theme.colors.navFont};
+		width: ${theme.layout.navWidth};
+		min-width: ${theme.layout.navWidth};
+		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
+		z-index: ${theme.zIndexes.nav};
+		overflow-y: auto;
+		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
+			color: ${theme.colors.navFont};
+		}
+		padding-top:0;
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				position: relative;
+				left: 0;
+				box-shadow: none;
+				z-index: 1;
+				animation: none !important;
+				margin-right: 1rem;
+				overflow-y: visible;
+				margin-top:-2rem;
+				padding-top: 1rem;
+			}
+		`}
+	`;
+    React.useEffect(() => {
+        if (!backdrop.showing) {
+            props.toggle(false);
+        }
+    }, [backdrop.showing]);
+    React.useEffect(() => {
+        backdrop.setShow(props.show);
+    }, [props.show]);
+    React.useLayoutEffect(() => {
+        if (nav && nav.current) {
+            if (props.show) {
+                if (!nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.add(classNavShowing);
+                }
+            }
+            else {
+                if (nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.remove(classNavShowing);
+                    nav.current.classList.add(classNavNotShowing);
+                    setTimeout(() => {
+                        if (nav && nav.current) {
+                            nav.current.classList.remove(classNavNotShowing);
+                        }
+                    }, 250);
+                }
+            }
+        }
+    });
+    if (props.responsive) {
+        React.useEffect(() => {
+            if (backdrop.showing) {
+                props.toggle(false);
+            }
+        }, [isLargeScreen]);
+    }
+    return (React.createElement("nav", { ref: nav, className: cx('nav', navStyles, props.className) }, props.children));
+};
+
+const OmniLink = (props) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const linkStyles = css `
+		display: inline-block;
+		cursor: pointer;
+		text-decoration: none;
+		color: ${(_a = props.colorOverride) !== null && _a !== void 0 ? _a : theme.colors.link};
+		transition: ${theme.controls.transition};
+		&:hover {
+			filter: ${theme.controls.hoverBrightness};
+			text-decoration: underline;
+		}
+		&:active,
+		&:visited {
+			color: ${(_b = props.colorOverride) !== null && _b !== void 0 ? _b : theme.colors.link};
+		}
+		&:focus {
+			text-decoration: underline;
+			outline: none;
+			color: ${(_c = props.colorOverride) !== null && _c !== void 0 ? _c : theme.colors.link};
+		}
+		${!!props.variant && `
+			padding-left: ${theme.controls.padding};
+			padding-right: ${theme.controls.padding};
+			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
+			box-shadow: ${theme.controls.boxShadow};
+			height: ${theme.controls.height};
+			line-height: ${theme.controls.height};
+			font-weight: bold;
+			color: ${theme.colors.font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.font};
+			}
+			&:focus {
+				outline: none;
+				box-shadow: ${theme.controls.focusOutlineShadow};
+				text-decoration: none;
+			}
+			&:active {
+				box-shadow: none;
+			}
+			&:hover {
+				text-decoration: none;
+			}
+		`}
+		${props.variant === 'button' && `
+			text-align: center;
+		`}
+		${props.variant === 'circle' && `
+			text-align: center;
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+			`}
+		`}
+		${props.variant === 'primary' && `
+			text-align: center;
+			background-color: ${theme.colors.primary};
+			color: ${theme.colors.primaryFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.primaryFont};
+			}
+		`}
+		${props.variant === 'primary2' && `
+			text-align: center;	
+			background-color: ${theme.colors.primary2};
+			color: ${theme.colors.primary2Font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.primary2Font};
+			}
+		`}
+		${props.variant === 'secondary' && `
+			text-align: center;
+			background-color: ${theme.colors.secondary};
+			color: ${theme.colors.secondary2Font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.secondary2Font};
+			}
+		`}
+		${props.variant === 'positive' && `
+			text-align: center;
+			background-color: ${theme.colors.positive};
+			color: ${theme.colors.positiveFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.positiveFont};
+			}
+		`}
+		${props.variant === 'negative' && `
+			text-align: center;
+			background-color: ${theme.colors.negative};
+			color: ${theme.colors.negativeFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.negativeFont};
+			}
+		`}
+		${props.variant === 'omg' && `
+			text-align: center;
+			background-color: ${theme.colors.omg};
+			color: ${theme.colors.omgFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.omgFont};
+			}
+		`}
+		${props.variant === 'label' && `
+			box-shadow: none;
+			border: none;
+		`}
+		${props.variant === 'icon' && `
+			box-shadow: none;
+			border: none;
+			border-radius: 100%;
+			width: ${theme.controls.height};
+			text-align: center;
+		`}
+		${props.block && `
+			display: block;
+			width:100%;
+		`}
+		${props.iconBlock && `
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		`}
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+		${props.small && `
+			font-size: 0.8rem;
+			height: ${theme.controls.heightSmall};
+			line-height: ${theme.controls.heightSmall};
+		`}
+	`;
+    const mainClassName = cx('omniLink', linkStyles, props.className);
+    const content = React.createElement(React.Fragment, null,
+        React.createElement("span", null,
+            props.leftIcon && React.createElement("span", { className: css({
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                }) }, props.leftIcon),
+            props.children),
+        props.rightIcon && React.createElement("span", { className: css({
+                marginLeft: '1rem',
+                verticalAlign: 'middle'
+            }) }, props.rightIcon));
+    if (props.noRouter) {
+        return (React.createElement("a", { title: props.title, style: props.style, target: props.target, className: mainClassName, href: props.href, onClick: props.onClick }, content));
+    }
+    return (React.createElement(Link, { title: props.title, style: props.style, className: mainClassName, onClick: props.onClick, to: props.href }, content));
+};
+
+const Picker = (props) => {
+    const selectProps = __rest(props
+    // if we put numbers in, we expect them out
+    , ["value", "options", "onChange", "type", "rounded", "round", "readonly"]);
+    // if we put numbers in, we expect them out
+    let isNumber = false;
+    if (props.options && props.options.length) {
+        const testOption = props.options[0];
+        if (typeof testOption === 'object') {
+            isNumber = typeof testOption.id === 'number';
+        }
+        else {
+            isNumber = typeof testOption === 'number';
+        }
+    }
+    const theme = useThemeSafely();
+    const selectStyles = css `
+			color:  ${theme.colors.font};
+			padding-left: ${theme.controls.padding};
+			padding-right: ${theme.controls.padding};
+			height: ${theme.controls.height};
+			font-size: ${theme.controls.fontSize};
+			width: 100%;
+			border: ${theme.controls.border};
+			border-radius: ${theme.controls.borderRadius};
+			transition: ${theme.controls.transition};
+			&:disabled {
+				color: ${theme.colors.font};
+				opacity: 1;
+				background-color: ${theme.colors.disabled};
+				cursor: not-allowed;
+			}
+			&:focus {
+				outline: none;
+				box-shadow: ${theme.controls.focusOutlineShadow};
+			}
+			${props.rounded && `
+				border-radius: ${theme.controls.roundedRadius};
+			`}
+			${props.round && `
+				border-radius: ${theme.controls.roundRadius};
+			`}
+			${props.readonly && `
+				background-color: transparent !important;
+				border: none;
+				-webkit-appearance: none;
+				-moz-appearance: none;
+				&:focus {
+					outline: none;
+					box-shadow: none;
+				}
+			`}
+		`;
+    return (React.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readonly ? -1 : selectProps.tabIndex, className: cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
+            var _a;
+            if (props.readonly) {
+                if (e.keyCode === 9) {
+                    //TAB
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                (_a = selectProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
+            }
+        }, onMouseDown: e => {
+            var _a;
+            if (props.readonly) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                (_a = selectProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
+            }
+        }, onChange: e => {
+            let val = e.target.value;
+            if (isNumber) {
+                val = parseInt(val, 10);
+                if (isNaN(val)) {
+                    val = '';
+                }
+            }
+            props.onChange(val, e);
+        } }), (props.options || []).map(o => {
+        var _a;
+        let val;
+        let label;
+        if (typeof o === 'object') {
+            val = o.id;
+            label = (_a = o.name) !== null && _a !== void 0 ? _a : o.id;
+        }
+        else {
+            val = o;
+            label = o;
+        }
+        return React.createElement("option", { key: val, value: val }, label);
+    })));
+};
+
+const Pager = (props) => {
+    var _a;
+    const canGoNext = props.canGoNext && props.totalItems > 0;
+    const canGoPrevious = props.canGoPrevious && props.totalItems > 0;
+    const dividerText = props.itemDividerText || 'of';
+    let itemText = '';
+    if (props.totalItems > 0) {
+        itemText = `${props.minItem.toLocaleString()}-${props.maxItem.toLocaleString()} ${dividerText} ${props.totalItems.toLocaleString()}`;
+    }
+    else {
+        itemText = props.noResultsText || 'No Results';
+    }
+    let pageText;
+    if (props.pageIndex !== undefined && props.totalPages) {
+        pageText = `${(_a = props.pageText) !== null && _a !== void 0 ? _a : 'Page'} ${(props.pageIndex + 1).toLocaleString()} ${dividerText} ${props.totalPages.toLocaleString()}`;
+    }
+    const theme = useThemeSafely();
+    const pagerStyles = css `
+		display: grid;
+		grid-template-columns: ${theme.controls.height} 1fr ${theme.controls.height};
+		grid-column-gap: ${theme.controls.gap};
+		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
+		padding: 0.5rem;
+		background-color: ${theme.colors.pagerBg};
+		@media(min-width: ${theme.breakpoints.tablet}) {
+			grid-template-columns: ${theme.controls.height} 1fr 1fr 1fr ${theme.controls.height};
+		}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+	`;
+    const controlStyles = css `
+		display: none;
+		padding:0 1rem;
+		justify-self: center;
+		@media(min-width: ${theme.breakpoints.tablet}) {
+			display: block;
+		}
+	`;
+    const buttonStyles = css({
+        backgroundColor: 'transparent'
+    });
+    return (React.createElement("div", { className: cx(pagerStyles, props.className) },
+        React.createElement(Button, { className: buttonStyles, disabled: !canGoPrevious, onClick: () => props.page(-1), variant: "icon" },
+            React.createElement(Icon, { id: "pagerLeft" })),
+        React.createElement("div", { className: controlStyles }, props.leftControls),
+        React.createElement("div", { className: css({
+                alignSelf: 'center',
+                justifySelf: 'center',
+                display: 'flex',
+                gap: '0.5rem',
+                flexDirection: 'column'
+            }) },
+            React.createElement(Text, { tag: "span", align: "center" }, itemText),
+            pageText && (React.createElement(Text, { tag: "span", smaller: true, align: "center" }, pageText))),
+        React.createElement("div", { className: controlStyles }, props.rightControls),
+        React.createElement(Button, { className: buttonStyles, disabled: !canGoNext, onClick: () => props.page(1), variant: "icon" },
+            React.createElement(Icon, { id: "pagerRight" }))));
+};
+
+const BoundMemoryPager = (p) => {
+    var _a, _b, _c;
+    const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
+    return (React.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.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+            React.createElement(Picker, { type: "select", 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.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React.createElement(Picker, { type: "select", 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 => {
+            p.onPage(d);
+        } })));
+};
+
+const BoundStaticPager = (p) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { result, showPageText } = p, rest = __rest(p, ["result", "showPageText"]);
+    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.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.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+            React.createElement(Picker, { type: "select", 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.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React.createElement(Picker, { type: "select", value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+                    var _a;
+                    (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
+                } }))) : undefined, page: d => {
+            p.onPage(d);
+        } })));
+};
+
+class PagedResult {
+    constructor(items = [], total = 0, page = 0, limit = 0) {
+        this.items = items;
+        this.page = page;
+        this.limit = limit;
+        this.total = total;
+    }
+    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;
+    }
+    get hasItems() {
+        return !!this.length;
+    }
+    get previousPage() {
+        return Math.max(this.page - 1, 0);
+    }
+    get hasPrevious() {
+        return this.previousPage !== this.page;
+    }
+    get nextPage() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.min(this.page + 1, this.lastPage);
+    }
+    get hasNext() {
+        return this.page !== this.lastPage;
+    }
+    get lastPage() {
+        return Math.max(this.totalPages - 1, 0);
+    }
+    get totalPages() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.floor(this.total / this.limit) + (this.total % this.limit ? 1 : 0);
+    }
+    get minPageItemIndex() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return this.page * this.limit;
+    }
+    get maxPageItemIndex() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.min(this.minPageItemIndex + this.limit - 1, this.total - 1);
+    }
+    /** Returns the first item on the current page. */
+    get firstPageItem() {
+        return this.items[0];
+    }
+    /** Returns the last item on the current page */
+    get lastPageItem() {
+        return this.items[this.items.length - 1];
+    }
+    getPageRelativeItemIndex(item) {
+        return this.items.indexOf(item);
+    }
+    getResultRelativeItemIndex(item) {
+        const index = this.getPageRelativeItemIndex(item);
+        if (index >= 0) {
+            return this.getPageRelativeItemIndex(item) + this.limit * this.page;
+        }
+        return undefined;
+    }
+    getPreviousItem(fromItem) {
+        const index = this.getPageRelativeItemIndex(fromItem);
+        if (index <= 0) {
+            return undefined;
+        }
+        return this.items[index - 1];
+    }
+    getNextItem(fromItem) {
+        const index = this.getPageRelativeItemIndex(fromItem);
+        if (index < 0) {
+            return undefined;
+        }
+        return this.items[index + 1];
+    }
+    getPagingRange(radius) {
+        const minItems = radius * 2 + 1;
+        const indexes = [];
+        let startIndex = 0;
+        let endIndex = 0;
+        if (this.totalPages > minItems) {
+            startIndex = this.page - radius;
+            endIndex = this.page + radius;
+            if (endIndex > this.lastPage) {
+                startIndex -= endIndex - this.lastPage;
+                endIndex = this.lastPage;
+            }
+        }
+        else {
+            startIndex = 0;
+            endIndex = this.lastPage;
+        }
+        for (let i = startIndex; i <= endIndex; i++) {
+            if (i < 0) {
+                endIndex++;
+            }
+            else {
+                indexes.push(i);
+            }
+        }
+        return indexes;
+    }
+    toJSON() {
+        const json = {
+            items: this.items.map(item => {
+                if (typeof item === 'object') {
+                    if ('toJSON' in item) {
+                        return item.toJSON();
+                    }
+                }
+                return item;
+            }),
+            page: this.page,
+            limit: this.limit,
+            total: this.total
+        };
+        return json;
+    }
+    clone(newItems) {
+        return new PagedResult(newItems || this.items.slice(), this.total, this.page, this.limit);
+    }
+}
+
+/** For in-memory paging. */
+class ItemPager {
+    constructor(allItems, options) {
+        var _a, _b, _c, _d;
+        this._page = 0;
+        this._allItems = allItems || [];
+        this._limitOptions = ((_a = options === null || options === void 0 ? void 0 : options.previous) === null || _a === void 0 ? void 0 : _a.limitOptions) || (options === null || options === void 0 ? void 0 : options.limitOptions) || [10];
+        this._limit = ((_b = options === null || options === void 0 ? void 0 : options.previous) === null || _b === void 0 ? void 0 : _b.limit) || (options === null || options === void 0 ? void 0 : options.limit) || 10;
+        this._filteredItems = [...allItems];
+        this._pageResult = this.createPageResult();
+        this._sortOptions = ((_c = options === null || options === void 0 ? void 0 : options.previous) === null || _c === void 0 ? void 0 : _c.sortOptions) || (options === null || options === void 0 ? void 0 : options.sortOptions) || [];
+        this.sort = ((_d = options === null || options === void 0 ? void 0 : options.previous) === null || _d === void 0 ? void 0 : _d.sort) || (options === null || options === void 0 ? void 0 : options.sort);
+        if (options === null || options === void 0 ? void 0 : options.previous) {
+            if (options.previous._currentFilter) {
+                this.applyFilter(options.previous._currentFilter);
+            }
+            this.page = options.previous.page;
+        }
+    }
+    get allItems() {
+        return this._allItems;
+    }
+    /** The ID of the current sort within the sortOptions. */
+    get sort() {
+        return this._sort;
+    }
+    set sort(sortId) {
+        const option = this._sortOptions.find(o => o.id === sortId);
+        if (!option) {
+            return;
+        }
+        this._sort = sortId;
+        this._allItems = option.sort(this._allItems);
+        this._filteredItems = option.sort(this._filteredItems);
+        this.page = 0;
+    }
+    /** The direction of the current sort when using an option created from addToggleSortOption */
+    get sortDirection() {
+        if (!this.sort) {
+            return undefined;
+        }
+        const [, direction] = this.sort.split('-');
+        return direction;
+    }
+    get sortOptions() {
+        return this._sortOptions;
+    }
+    get limit() {
+        return this._limit;
+    }
+    set limit(value) {
+        if (value >= 0) {
+            this._limit = value;
+            this.page = 0;
+        }
+    }
+    get limitOptions() {
+        return this._limitOptions;
+    }
+    get totalPages() {
+        return this._pageResult.totalPages;
+    }
+    /** The zero-based page index. */
+    get page() {
+        return this._page;
+    }
+    /** The zero-based page index. */
+    set page(value) {
+        if (value >= 0) {
+            this._page = Math.min(value, this._pageResult.lastPage);
+            this._pageResult = this.createPageResult();
+        }
+    }
+    get pageItems() {
+        return this._pageResult.items;
+    }
+    get totalItems() {
+        return this._pageResult.total;
+    }
+    get minItemIndex() {
+        return this._pageResult.minPageItemIndex;
+    }
+    get maxItemIndex() {
+        return this._pageResult.maxPageItemIndex;
+    }
+    get hasNext() {
+        return this._pageResult.hasNext;
+    }
+    get hasPrevious() {
+        return this._pageResult.hasPrevious;
+    }
+    /**
+     * Adds both asc and des sort options
+     *
+     * @param propPath Prop name or path ('resource.title').
+     * @param name Name to display or asc Name and desc Name.
+     */
+    addToggleSortOption(propPath, name) {
+        if (!this._sortOptions) {
+            this._sortOptions = [];
+        }
+        const sort = (item) => {
+            const value = get(item, propPath);
+            if (typeof value === 'string') {
+                return value.toLocaleLowerCase();
+            }
+            return value;
+        };
+        let ascName;
+        let descName;
+        if (name) {
+            if (Array.isArray(name)) {
+                ascName = name[0];
+                descName = name[1];
+            }
+            else {
+                ascName = name;
+                descName = name;
+            }
+        }
+        this._sortOptions.push({ id: `${propPath}-asc`, name: ascName, sort: (items) => orderBy(items, sort, 'asc') });
+        this._sortOptions.push({ id: `${propPath}-desc`, name: descName, sort: (items) => orderBy(items, sort, 'desc') });
+    }
+    /**
+     * Toggles between asc and desc.
+     * @param sortId The ID or partial ID (no '-asc' or '-desc') of a sort option created through addToggleSortOption
+     */
+    toggleSort(sortId) {
+        const [id,] = sortId.split('-');
+        let nextSort;
+        if (!this.sort || !this.sort.startsWith(id)) {
+            nextSort = `${id}-asc`;
+        }
+        else {
+            if (this.sort.endsWith('-asc')) {
+                nextSort = `${id}-desc`;
+            }
+            else {
+                nextSort = `${id}-asc`;
+            }
+        }
+        this.sort = nextSort;
+    }
+    applyFilter(filter, keepPage) {
+        this._currentFilter = filter;
+        if (!this._currentFilter) {
+            this._filteredItems = [...this.allItems];
+        }
+        else {
+            this._filteredItems = this.allItems.filter(this._currentFilter);
+        }
+        if (!keepPage) {
+            this.page = 0;
+        }
+        else {
+            // recreate the page results manually since we're not resetting the page
+            this._pageResult = this.createPageResult();
+        }
+    }
+    next() {
+        if (this._pageResult.hasNext) {
+            this.page = this._pageResult.nextPage;
+        }
+    }
+    previous() {
+        if (this._pageResult.hasPrevious) {
+            this.page = this._pageResult.previousPage;
+        }
+    }
+    pageByOffset(direction) {
+        if (direction === 1) {
+            this.next();
+        }
+        else {
+            this.previous();
+        }
+    }
+    /** Adds the item optionally keeping the current page. */
+    add(item, position = 'end', keepPage = true) {
+        if (position === 'start') {
+            this._allItems.unshift(item);
+        }
+        else {
+            this._allItems.push(item);
+        }
+        this.applyFilter(this._currentFilter, keepPage);
+    }
+    /** Removes the matched item(s). */
+    remove(comparer, keepPage = true) {
+        this._allItems = this.allItems.filter(i => comparer(i) === false);
+        this.applyFilter(this._currentFilter, keepPage);
+        if (!this.pageItems.length) {
+            this.pageByOffset(-1);
+        }
+    }
+    replace(newItem, comparer) {
+        this.allItems.forEach((item, i) => {
+            if (comparer && comparer(item)) {
+                this.allItems[i] = newItem;
+            }
+        });
+        this.applyFilter(this._currentFilter, true);
+    }
+    createPageResult() {
+        const page = new PagedResult([], this._filteredItems.length, this.page, this.limit);
+        page.items = this._filteredItems.slice(page.minPageItemIndex, page.maxPageItemIndex + 1) || [];
+        return page;
+    }
+}
+
+const ProgressBar = (props) => {
+    const bar = React.useRef(null);
+    React.useEffect(() => {
+        const pct = cleanPct(props.pct);
+        if (bar.current) {
+            bar.current.style.width = `${pct}%`;
+        }
+    });
+    const theme = useThemeSafely();
+    const barStyles = css `
+		width: 100%;
+		height: 1rem;
+		border: ${theme.controls.border};
+		background-color: ${theme.colors.progressBg};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const fillStyles = css `
+		transition: width 0.5s ease-in-out;
+		height: 100%;
+		background-color: ${theme.colors.progressFill};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    return (React.createElement("div", { className: "progressBar" },
+        React.createElement("div", { className: cx(barStyles, props.className) },
+            React.createElement("div", { ref: bar, className: fillStyles })),
+        props.showPct && React.createElement(Text, { align: "center", tag: "div", spacedOut: true },
+            props.pct,
+            "\u00A0%")));
+};
+const cleanPct = (value) => {
+    if (value) {
+        return Math.min(Math.max(value, 0), 100);
+    }
+    return 0;
+};
+
+const useWaiting = (func) => {
+    // Guard against the owner of this hook being unmounted at the time of .finally.
+    const isCancelled = useRef(false);
+    const [waiting, setWaiting] = useState(false);
+    const wrappedFunc = (...args) => {
+        setWaiting(true);
+        return func(...args).finally(() => {
+            if (!isCancelled.current) {
+                setWaiting(false);
+            }
+        });
+    };
+    useEffect(() => {
+        isCancelled.current = false;
+        return () => {
+            isCancelled.current = true;
+        };
+    }, []);
+    return [waiting, wrappedFunc];
+};
+
+const SearchBox = (props) => {
+    const [waiting, onSubmit] = useWaiting(async () => {
+        var _a, _b, _c;
+        // the active element will be the input. if the submit action changes props.value it will
+        // be ignored due to Inputs focused handling.
+        if (document.activeElement) {
+            (_b = (_a = document.activeElement).blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
+    });
+    const theme = useThemeSafely();
+    const submitButton = (React.createElement(Button, { disabled: waiting, readonly: !props.onSubmit, type: "submit", className: css({
+            color: `${theme.colors.font} !important;`,
+            fontSize: '1rem'
+        }), variant: "icon", small: true },
+        React.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
+    //TB: replace with new inputs
+    return (React.createElement(Form, { role: "search", className: cx('searchBox', props.className), onSubmit: onSubmit },
+        React.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, rounded: props.rounded, onChange: props.onChange, rightControl: submitButton })));
+};
+
+const GlobalStyles = () => {
+    const theme = useThemeSafely();
+    injectGlobal({
+        '*': {
+            boxSizing: 'border-box'
+        },
+        'html,body': {
+            backgroundColor: theme.colors.bg,
+            color: theme.colors.font,
+            margin: 0
+        },
+        'html,body,main': {
+            height: '100%',
+            fontFamily: theme.fonts.family,
+            fontSize: theme.fonts.size
+        },
+        'main': {
+            height: 'auto',
+            minHeight: '100%',
+            padding: '0 1rem'
+        },
+        'pre': {
+            backgroundColor: theme.colors.lightBg
+        }
+    });
+    return null;
+};
+
+const Slider = (p) => {
+    const theme = useThemeSafely();
+    const currentValue = useRef(p.value);
+    const sliderContainer = useRef(null);
+    const height = p.showValue ? `calc(${theme.controls.height} + 1.5rem)` : theme.controls.height;
+    return (React__default.createElement("div", { ref: sliderContainer, className: css({
+            width: '100%',
+            height,
+        }) },
+        React__default.createElement(ReactSlider, { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value, index) => {
+                p.onChange(value);
+            }, onChange: p.onUpdate || p.showValue ? (value, index) => {
+                var _a;
+                currentValue.current = value;
+                (_a = p.onUpdate) === null || _a === void 0 ? void 0 : _a.call(p, value);
+            } : undefined, renderTrack: (props, state) => {
+                const { className } = props, rest = __rest(props, ["className"]);
+                return React__default.createElement("div", Object.assign({ className: cx(className, css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: theme.controls.height
+                    })) }, rest),
+                    React__default.createElement("div", { className: css({
+                            backgroundColor: theme.colors.secondary,
+                            height: `calc(${theme.controls.height} / 4)`,
+                            borderRadius: theme.controls.roundRadius,
+                            width: '100%'
+                        }) }));
+            }, renderThumb: (props, state) => {
+                const { className } = props, rest = __rest(props, ["className"]);
+                return (React__default.createElement("div", Object.assign({ className: cx(className, css({
+                        width: theme.controls.height,
+                        height: theme.controls.height,
+                        borderRadius: theme.controls.roundRadius,
+                        backgroundColor: 'white',
+                        border: theme.controls.border,
+                        cursor: 'grab',
+                        boxShadow: theme.controls.boxShadow,
+                        transition: theme.controls.transition,
+                        '&:focus': {
+                            outline: 'none',
+                            boxShadow: theme.controls.focusOutlineShadow
+                        },
+                        '&:active': {
+                            boxShadow: 'none',
+                            cursor: 'grabbing'
+                        },
+                        '&:hover': {
+                            filter: theme.controls.hoverBrightness
+                        }
+                    })) }, rest), p.showValue && (React__default.createElement(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+            } })));
+};
+const rectsCollideX = (r1, r2) => {
+    if (r1.left >= r2.left && r1.left <= r2.right) {
+        return true;
+    }
+    if (r1.right >= r2.left && r1.right <= r2.right) {
+        return true;
+    }
+    return false;
+};
+const HandleText = (p) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
+    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : theme.controls.height;
+    const renderValueLeft = useMemo(() => {
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${theme.controls.height} * 0.5))`;
+    }, [p.renderValueWidth]);
+    const [flipText, setFlipText] = useState(false);
+    useEffect(() => {
+        // this needs to fire on every render due to the other handle also moving.
+        var _a, _b;
+        if (p.index === 1) {
+            // only do this for the max/right-most handle
+            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
+            if (r1 && r2) {
+                setFlipText(rectsCollideX(r1, r2));
+            }
+        }
+    });
+    return (React__default.createElement(Text, { ellipsis: true, className: cx('slider-handle', css({
+            width: renderValueWidth,
+            left: renderValueLeft,
+            top: flipText ? undefined : theme.controls.height,
+            bottom: flipText ? theme.controls.height : undefined,
+            position: 'absolute',
+            overflow: 'hidden',
+        })), tag: "div", align: "center" }, displayValue));
+};
+
+const TabHeader = (p) => {
+    var _a;
+    const [tabIndex, setTabIndex] = React.useState(0);
+    const theme = useThemeSafely();
+    const variant = (_a = p.variant) !== null && _a !== void 0 ? _a : 'tab';
+    const menuStyles = css({
+        display: 'flex',
+        gap: theme.controls.gap,
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0,
+        flexWrap: variant === 'button' ? 'wrap' : 'nowrap'
+    }, variant === 'button' && {
+        borderBottom: theme.controls.border,
+        paddingBottom: '1rem'
+    });
+    return (React.createElement("div", { className: "tabHeader" },
+        React.createElement("ul", { className: menuStyles }, p.tabs.map((tab, index) => {
+            var _a, _b;
+            const active = index === tabIndex;
+            let tabStyles;
+            let buttonStyles;
+            let buttonVariant;
+            if (variant === 'tab') {
+                tabStyles = css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    backgroundColor: theme.colors.bg,
+                    zIndex: 1,
+                }, active && {
+                    border: theme.controls.border,
+                    borderRadius: theme.controls.borderRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    borderBottom: 'none',
+                    zIndex: 3,
+                }, active && p.rounded && {
+                    borderRadius: p.rounded && theme.controls.roundedRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                });
+                buttonVariant = 'link';
+                buttonStyles = css({
+                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
+                    overflow: 'hidden'
+                });
+            }
+            else {
+                buttonVariant = active ? 'primary' : undefined;
+                buttonStyles = css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
+                    overflow: 'hidden',
+                });
+            }
+            return (React.createElement("li", { key: index, className: tabStyles },
+                React.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, rounded: p.rounded && variant === 'button', onClick: () => {
+                        setTabIndex(index);
+                        if (p.onTabChanged) {
+                            p.onTabChanged(index);
+                        }
+                    } }, tab.name)));
+        })),
+        variant === 'tab' && (React.createElement("div", { className: css({
+                borderBottom: theme.controls.border,
+                marginTop: `calc(${theme.controls.borderWidth} * -1)`,
+                zIndex: 2,
+                position: 'relative'
+            }) }))));
+};
+
+const Table = (props) => {
+    const theme = useThemeSafely();
+    const tableStyles = css `
+		width: 100%;
+		border-collapse: collapse;
+		${props.noCellBorder && `
+			.table__td {
+				border-left: none;
+				border-right: none;
+			}
+		`}
+		${props.altRows && `
+			.table__tr:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+	`;
+    const wrapperStyles = css `
+		width:100%;
+        overflow-y: auto;
+        padding:0 1px;  //fixes always showing of the table scroller
+	`;
+    return (React.createElement("div", { className: wrapperStyles },
+        React.createElement("table", { className: cx(tableStyles, props.className) },
+            props.caption && React.createElement("caption", { className: css({
+                    fontWeight: 'bold',
+                    padding: theme.controls.padding
+                }) }, props.caption),
+            props.children)));
+};
+const Tr = (props) => {
+    return (React.createElement("tr", { className: cx('table__tr', props.className) }, props.children));
+};
+const Th = (props) => {
+    var _a;
+    let style = props.style;
+    if (props.width) {
+        if (style) {
+            style = Object.assign(Object.assign({}, style), { width: props.width, minWidth: props.width });
+        }
+        else {
+            style = { width: props.width, minWidth: props.width };
+        }
+    }
+    const theme = useThemeSafely();
+    const thStyles = css `
+		border-bottom: ${theme.controls.border};
+		padding: ${theme.controls.padding};
+		font-weight: bold;
+		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
+		> .button {
+            font-weight: bold;
+        }
+	`;
+    return (React.createElement("th", { className: cx(thStyles, props.className), style: style }, props.children));
+};
+const Td = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    const tdStyles = css `
+		border: ${theme.controls.border};
+		padding: ${theme.controls.padding};
+		vertical-align: middle;
+		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
+	`;
+    return (React.createElement("td", { colSpan: props.colSpan, style: props.style, className: cx('table__td', tdStyles) }, props.children));
+};
+
+const TdCurrency = (props) => {
+    let actualValue = props.value || 0;
+    if (props.cents) {
+        actualValue = actualValue / 100;
+    }
+    const displayValue = actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    return (React.createElement(Td, { align: "right" },
+        "$",
+        displayValue));
+};
+
+const TdNumber = (props) => {
+    return React.createElement(Td, { align: "right" }, props.value || props.value === 0 ? props.value.toLocaleString() : '');
+};
+
+const ThSort = (props) => {
+    let iconId = '';
+    if (props.direction) {
+        if (props.direction === 'asc') {
+            iconId = 'sortAsc';
+        }
+        else {
+            iconId = 'sortDesc';
+        }
+    }
+    let rightContentSpecialJustify = 'center';
+    switch (props.align) {
+        case 'left':
+            rightContentSpecialJustify = 'flex-start';
+            break;
+        case 'right':
+            rightContentSpecialJustify = 'flex-end';
+            break;
+    }
+    return (React.createElement(Th, { align: props.align, style: props.style, width: props.width },
+        React.createElement("div", { className: props.rightContent && css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: rightContentSpecialJustify,
+                gap: '0.5rem'
+            }) },
+            React.createElement(Button, { onClick: props.onClick, variant: "link" },
+                props.text,
+                iconId && React.createElement(Icon, { className: css({
+                        marginLeft: '0.5rem'
+                    }), id: iconId })),
+            props.rightContent)));
+};
+
+const ToggleButton = (props) => {
+    return (React.createElement(Button, { type: "button", className: cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style, onClick: props.onClick }, props.checked ? props.checkedText : props.uncheckedText));
+};
+
+const ToggleButtonGroup = (props) => {
+    const theme = useThemeSafely();
+    const groupStyles = css `
+		display: flex;
+		box-shadow: ${theme.controls.boxShadow};
+		border-radius: ${theme.controls.borderRadius};
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+	`;
+    const buttonStyles = css `
+		flex-grow:1;
+		box-shadow: none;
+		&:nth-of-type(1n+2){
+			margin-left: -1px;
+		}
+		border-radius: 0;
+		&:first-of-type{
+			border-top-left-radius: ${theme.controls.borderRadius};
+			border-bottom-left-radius: ${theme.controls.borderRadius};
+		}
+		&:last-child {
+			border-top-right-radius: ${theme.controls.borderRadius};
+			border-bottom-right-radius: ${theme.controls.borderRadius};
+		}
+		${props.round && `
+			&:first-of-type{
+				border-top-left-radius: ${theme.controls.roundRadius};
+				border-bottom-left-radius: ${theme.controls.roundRadius};
+				padding-left: 1rem;
+			}
+			&:last-child {
+				border-top-right-radius: ${theme.controls.roundRadius};
+				border-bottom-right-radius: ${theme.controls.roundRadius};
+				padding-right: 1rem;
+			}
+		`}
+	`;
+    return (React.createElement("div", { className: cx('toggleButtonGroup', groupStyles, props.className) }, props.options.map(o => {
+        const active = o.id === props.value;
+        return React.createElement(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, className: cx(css `
+					${buttonStyles}
+					${active && `
+						background-color: ${theme.colors.font};
+						color: ${theme.colors.bg};
+						cursor: default;
+						&:hover:not(:disabled) {
+							filter: none;
+						}
+						&:focus {
+							outline: none;
+							box-shadow: none;
+						}
+					`}
+				`, active ? o.activeClass : undefined), disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
+                if (active) {
+                    return;
+                }
+                props.onChange(o.id);
+            } }, o.name);
+    })));
+};
+
+const TogglePasswordInput = (p) => {
+    const [show, setShow] = React.useState(false);
+    //TB: replace with new inputs
+    return (React.createElement(Input, Object.assign({}, p, { type: show ? 'text' : 'password', rightControl: (React.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'
+            }, variant: "icon", onClick: () => {
+                setShow(previous => !previous);
+            } },
+            React.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
+};
+
+const WaitingIndicator = (p) => {
+    var _a, _b;
+    const [show, setShow] = useState(p.show);
+    const hideTimer = useRef(0);
+    const lastShowStatus = 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) {
+        useEffect(() => {
+            log('mounted');
+            return () => {
+                log('unmounted');
+            };
+        }, []);
+    }
+    useEffect(() => {
+        log('show changed', p.show);
+        // we need to store the 'last props' since props.show will be captured locally and the incorrect
+        // value will display in the timeout below.
+        log('storing lastShowStatus', p.show);
+        lastShowStatus.current = p.show;
+        if (p.show) {
+            log('setShow', true);
+            setShow(true);
+            if (p.minShowTimeMs) {
+                log('staring hideTimer', 'timout in ms:', p.minShowTimeMs);
+                hideTimer.current = window.setTimeout(() => {
+                    log('hideTimer complete', 'clearing hideTimer');
+                    window.clearTimeout(hideTimer.current);
+                    hideTimer.current = 0;
+                    // this check is necessary since the show status may have updated again to true.
+                    // if so, ignore this timeout since we're already past the min time and we're still
+                    // showing the component.
+                    if (!lastShowStatus.current) {
+                        log('setShow', false);
+                        setShow(false);
+                    }
+                    else {
+                        log('ignoring hideTimer handler due to hideTimer ticking');
+                    }
+                }, p.minShowTimeMs);
+            }
+        }
+        else {
+            // ignore hiding the component since the min timer is running.
+            if (!hideTimer.current) {
+                log('setShow', false);
+                setShow(false);
+            }
+            else {
+                log('ignoring show change due to hideTimer ticking');
+            }
+        }
+    }, [p.show]);
+    return (React__default.createElement(Modal, { id: p.id, debug: p.debug, className: "waitingIndicator", show: show, noBackground: true },
+        React__default.createElement("div", { className: css({
+                color: 'white',
+                fontSize: '3rem'
+            }) },
+            React__default.createElement(Icon, { id: "waiting", spin: true }))));
+};
+
+export { Autocomplete, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, DatePicker, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, Input, ItemPager, Label, List, ListItem, Modal, Nav, NumberInput, OmniLink, PagedResult, Pager, Picker, Popover, ProgressBar, SearchBox, Slider, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+//# sourceMappingURL=index.esm.js.map