@mackin.com/styleguide 8.12.0 → 8.12.1

package/index.esm.js

@@ -0,0 +1,4831 @@
+import * as React from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
+import { cx, css, keyframes, injectGlobal } from '@emotion/css';
+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 { debounce, sumBy, orderBy, get } from 'lodash';
+import { format, isExists, getDaysInMonth, getDay, isSameMonth, isBefore, isAfter, isSameDay, endOfMonth, addMonths, startOfMonth } from 'date-fns';
+import { nanoid } from 'nanoid';
+import { createPortal } from 'react-dom';
+import { Popover as Popover$1, ArrowContainer } from 'react-tiny-popover';
+import { Link as Link$1 } from 'react-router-dom';
+import ReactSlider from 'react-slider';
+
+/*! *****************************************************************************
+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;
+}
+
+//TB: FUTURE will need to update.  the versions of fa are at 6 now.
+// major version
+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, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: cx('icon', css({ label: 'Icon' }), props.className), icon: icon });
+};
+
+/** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
+const calcDynamicThemeProps = (theme) => {
+    theme.controls.border = `${theme.controls.borderWidth} solid ${theme.colors.border}`;
+    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 = `${theme.controls.dividerThickness} solid ${theme.colors.divider}`;
+    theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
+    theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
+    theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
+};
+const defaultTheme = {
+    colors: {
+        primary: '#7851a9',
+        primaryFont: 'rgba(255, 255, 255, 0.9)',
+        primary2: '#007bff',
+        primary2Font: 'rgba(255, 255, 255, 0.9)',
+        secondary: '#9e9e9e',
+        secondaryFont: 'rgba(255, 255, 255, 0.9)',
+        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: 'rgb(0 188 212 / 75%)',
+        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',
+        sizeH1: '2rem',
+        sizeH2: '1.5rem',
+        sizeH3: '1.17rem',
+        sizeH4: '1rem',
+    },
+    controls: {
+        padding: '0.5rem',
+        fontSize: '1rem',
+        borderWidth: '1px',
+        borderRadius: '',
+        border: ``,
+        height: '44px',
+        heightSmall: '34px',
+        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        buttonBoxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        hoverBrightness: 'brightness(0.8)',
+        hoverBackground: 'rgba(0, 0, 0, 0.1)',
+        transitionDuration: '0.25s',
+        transitionEasing: 'ease-in-out',
+        transition: '',
+        focusOutlineShadow: '',
+        focusOutlineRequiredShadow: '',
+        roundRadius: '3rem',
+        disabledOpacity: '0.5',
+        formButtonMinWidth: '7rem',
+        gap: '1rem',
+        dividerMargin: '1rem',
+        dividerBorder: '',
+        dividerThickness: '2px',
+        inputErrorMinHeight: '',
+        paragraphPadding: '1rem'
+    },
+    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: '' // set in calcDynamicThemeProps
+    },
+    timings: {
+        nav: {
+            slideMs: 250
+        }
+    }
+};
+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;
+};
+
+const getTagStyles = (theme, tag) => {
+    switch (tag) {
+        case 'p': return {
+            marginTop: theme.controls.paragraphPadding,
+            marginBottom: theme.controls.paragraphPadding
+        };
+        case 'h1': return {
+            fontSize: theme.fonts.sizeH1
+        };
+        case 'h2': return {
+            fontSize: theme.fonts.sizeH2
+        };
+        case 'h3': return {
+            fontSize: theme.fonts.sizeH3
+        };
+        case 'h4': return {
+            fontSize: theme.fonts.sizeH4
+        };
+        default: return undefined;
+    }
+};
+const headerRegex = /h1|h2|h3|h4/;
+const alignStyles = {
+    'center': { textAlign: 'center' },
+    'left': { textAlign: 'left' },
+    'right': { textAlign: 'right' }
+};
+/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
+const Text = (props) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const tagChoice = props.tag || 'p';
+    const style = props.style || {};
+    if (props.lineClamp) {
+        style.WebkitLineClamp = props.lineClamp;
+    }
+    if (props.leftPad) {
+        style.paddingLeft = props.leftPad;
+    }
+    let fontWeight;
+    if (props.bold) {
+        fontWeight = 'bold';
+    }
+    else if (props.bold === false) {
+        fontWeight = 'normal';
+    }
+    const styles = css(getTagStyles(theme, tagChoice), {
+        userSelect: 'text',
+        label: 'Text',
+        fontSize: props.fontSize ? props.fontSize : undefined
+    }, alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }, props.lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box'
+    }, props.spacedOut && { lineHeight: '1.5rem' }, { fontWeight }, 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);
+};
+
+//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
+const Button = React.forwardRef((props, ref) => {
+    var _a;
+    const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
+    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.buttonBoxShadow};
+		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};
+	
+		&: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;
+			background-color: transparent;
+			&:hover:not(:disabled) {
+				background-color: ${theme.controls.hoverBackground};
+			}
+			${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;
+			background-color: transparent;
+			&:hover:not(:disabled) {
+				background-color: ${theme.controls.hoverBackground};
+			}
+		`}
+		${(props.variant === 'text') && `
+			background-color: transparent;
+			font-weight: normal;
+			cursor: auto;
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			line-height: ${theme.controls.height};
+			&:hover:not(:disabled) {
+				filter: 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.iconBlock && `
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		`}
+	`;
+    const disabled = props.disabled || props.waiting;
+    let content;
+    if (variant === 'text') {
+        content = React.createElement(Text, { className: cx(styles, props.className), tag: "div" }, props.children);
+    }
+    else {
+        content = (React.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : '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)));
+    }
+    if (props.controlAlign) {
+        return (React.createElement("span", { className: css({
+                display: 'inline-block',
+                paddingBottom: theme.controls.inputErrorMinHeight
+            }) }, content));
+    }
+    return content;
+});
+
+const accordianExpandTimeMs = 250;
+const accordianMaxHeight = 1020;
+const accordianTimingFunction = 'ease-in-out';
+// we need to apply the seperately so stuff doesn't hang over during expand/collapse.
+// if we remove this and just keep overflow:hidden, autocompletes will get cut off in the subpanels.
+const visibleStyle = css({
+    overflow: 'visible !important'
+});
+const Accordian = (props) => {
+    var _a, _b, _c, _d;
+    const [open, setOpen] = React.useState(false);
+    const theme = useThemeSafely();
+    const content = React.useRef(null);
+    const contentStyles = css({
+        overflow: 'hidden',
+        maxHeight: 0,
+        transition: `max-height ${(_a = props.expandTimeMs) !== null && _a !== void 0 ? _a : accordianExpandTimeMs}ms ${(_b = props.transitionTimingFunction) !== null && _b !== void 0 ? _b : accordianTimingFunction}`
+    });
+    const expandedContentStyles = css({
+        maxHeight: (_c = props.maxHeight) !== null && _c !== void 0 ? _c : accordianMaxHeight
+    });
+    const expandedContentWrapperStyles = !props.noPad ? css({
+        padding: '0 1rem 1rem 1rem'
+    }) : undefined;
+    React.useEffect(() => {
+        const currentContent = content.current;
+        if (currentContent) {
+            if (open) {
+                currentContent.classList.add(expandedContentStyles);
+                window.setTimeout(() => {
+                    currentContent.classList.add(visibleStyle);
+                }, accordianExpandTimeMs);
+            }
+            else {
+                currentContent.classList.remove(visibleStyle, expandedContentStyles);
+            }
+        }
+    }, [open]);
+    React.useEffect(() => {
+        var _a;
+        if (props.open === undefined) {
+            // technically, we only need to use this effect if props.open was initialized with a boolean.
+            // you can't have conditional effects so here we go...
+            return;
+        }
+        setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
+    }, [props.open]);
+    return (React.createElement("div", { className: "accordian" },
+        React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                height: 'auto',
+                minHeight: theme.controls.height,
+                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+            }, props.className)), onClick: e => {
+                e.stopPropagation();
+                if (props.onChange) {
+                    props.onChange(!open);
+                }
+                else {
+                    setOpen(!open);
+                }
+            }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
+            React.createElement("span", null, props.header)),
+        React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
+            React.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+};
+const useAccordianState = (count, openIndex) => {
+    const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
+        return i === openIndex;
+    }));
+    return [
+        panels,
+        (index, open) => {
+            setShowPanel(previousState => {
+                const newState = previousState.slice().fill(false);
+                newState[index] = open;
+                return newState;
+            });
+        }
+    ];
+};
+
+const DEFAULT_DEBOUNCE_MS = 250;
+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.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", "noContentStyling"]);
+    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
+    }, !props.noContentStyling && {
+        '>.button': {
+            padding: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none'
+        },
+        '>.omniLink': {
+            paddingLeft: `calc(${theme.controls.padding} * 1.5)`,
+            paddingRight: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none',
+            lineHeight: theme.controls.height
+        },
+        '>.button:not(:focus), >.omniLink:not(:focus)': {
+            boxShadow: '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));
+};
+
+//TB: FUTURE will need to use the new input
+const defaultMaxShownValues = 7;
+const buttonMarkerClass = 'ListItem__button';
+const Autocomplete = (p) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    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 : defaultMaxShownValues;
+    const shownValues = React.useMemo(() => {
+        if (!p.allowScroll) {
+            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, { leading: false, trailing: true }));
+    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}`);
+            }
+        }
+    };
+    React.useEffect(() => {
+        const clearItems = () => {
+            if (values.length > 0) {
+                setValues([]);
+            }
+        };
+        document.addEventListener('click', clearItems);
+        return () => {
+            document.removeEventListener('click', clearItems);
+        };
+    }, [values]);
+    let listBorderRadius = '';
+    if (p.round || theme.controls.borderRadius) {
+        listBorderRadius = theme.controls.borderRadius || '0.5rem';
+    }
+    return (React.createElement("div", { onClick: e => {
+            e.stopPropagation();
+        }, onKeyDown: e => {
+            var _a;
+            if (e.key === 'Escape') {
+                setValues([]);
+                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, ref: element, className: cx(css({
+            position: 'relative',
+            width: '100%',
+            label: 'Autocomplete'
+        }), 'autocomplete') },
+        React.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
+            React.createElement(Input, { autoFocus: p.autoFocus, inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: p.inputClassName, maxLength: p.maxLength, required: p.required, onChange: v => {
+                    const value = v;
+                    p.onChange(value);
+                    onChangeForOptions.current(value);
+                }, onKeyDown: e => {
+                    var _a, _b, _c;
+                    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();
+                        }
+                    }
+                    (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
+                }, onKeyPress: e => { var _a; return (_a = p.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(p, e); } }),
+            showValues && (React.createElement(List, { ref: list, className: cx(css({
+                    position: 'absolute',
+                    width: '100%',
+                    border: theme.controls.border,
+                    borderRadius: listBorderRadius,
+                    boxShadow: theme.controls.boxShadow,
+                    backgroundColor: theme.colors.bg,
+                    marginTop: `-4px !important`,
+                    zIndex: theme.zIndexes.backdrop,
+                    'li:first-child button': {
+                        borderTopRightRadius: listBorderRadius,
+                        borderTopLeftRadius: listBorderRadius,
+                    },
+                    'li:last-child button': {
+                        borderBottomRightRadius: listBorderRadius,
+                        borderBottomLeftRadius: listBorderRadius,
+                    }
+                }), 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, css({
+                                borderRadius: 0,
+                            })), 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 getAutocompleteValueText = (v) => {
+    if (!v) {
+        return '';
+    }
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.name;
+};
+const getAutocompleteValueId = (v) => {
+    if (typeof v === 'string') {
+        return v;
+    }
+    return v.id;
+};
+
+/** @deprecated Use Backdrop2 going forward. */
+const Backdrop$1 = (props) => {
+    var _a;
+    const showTimeMs = (_a = props.showTimeMs) !== null && _a !== void 0 ? _a : 250;
+    const backdropId = React.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));
+};
+
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+const modalScrollFixClassName = 'modal-scroll-fix';
+
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default.useRef(false);
+    React__default.useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else {
+            effect();
+        }
+    }, deps);
+};
+
+const useLogger = (componentName, enabled) => {
+    return (...messages) => {
+        if (enabled) {
+            // tslint:disable-next-line
+            console.log(`[${componentName}]`, ...messages);
+        }
+    };
+};
+
+const portalId = 'backdrop';
+const BackdropContext = React__default.createContext({
+    showing: false,
+    showCount: 0,
+    portalId: portalId,
+    setShow: (s, f) => {
+        /* 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');
+            };
+        }, []);
+        useIgnoreMount(() => {
+            log('showCount changed', showCount);
+        }, [showCount]);
+    }
+    return (React__default.createElement(BackdropContext.Provider, { value: {
+            portalId: portalId,
+            showing: showCount > 0,
+            showCount: showCount,
+            setShow: (show, from) => {
+                if (show) {
+                    setShowCount(s => {
+                        const count = s + 1;
+                        log(`setShow from ${from} ${s} -> ${count}`);
+                        return count;
+                    });
+                }
+                else {
+                    setShowCount(s => {
+                        const count = Math.max(0, s - 1);
+                        log(`setShow from ${from} ${s} -> ${count}`);
+                        return count;
+                    });
+                }
+            }
+        } },
+        p.children,
+        p.__debug && (React__default.createElement("p", { className: cx(modalScrollFixClassName, 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');
+            };
+        }, []);
+        useIgnoreMount(() => {
+            log('context.showing changed', context.showing);
+        }, [context.showing]);
+    }
+    return (React__default.createElement("div", { onClick: () => {
+            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
+            log('onClick', 'setShow', false);
+        }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css({
+            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)));
+};
+
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = useRef(undefined);
+    useEffect(() => {
+        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+            //console.log('[useBooleanChanged] change called')
+        }
+    }, [dep]);
+};
+
+// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
+const canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+const useScrollbarSize = (recalc) => {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDom) {
+            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;
+};
+
+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((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = useRef(p.show);
+    const bodyStyles = useRef('');
+    const fixedElementStyles = useRef('');
+    const addScrollStyles = () => {
+        var _a, _b, _c, _d;
+        if (!bodyStyles.current) {
+            bodyStyles.current = css({
+                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid()),
+                overflow: 'hidden',
+                paddingRight: `${useScrollbarSize()}px`
+            });
+            log('creating singleton bodyStyles', bodyStyles.current);
+        }
+        if (!fixedElementStyles.current) {
+            fixedElementStyles.current = css({
+                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid()),
+                paddingRight: `${useScrollbarSize()}px`
+            });
+        }
+        document.body.classList.add(bodyStyles.current);
+        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+            e.classList.add(fixedElementStyles.current);
+        });
+    };
+    const tryRemoveScrollStyles = () => {
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
+        }
+        if (fixedElementStyles.current) {
+            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+                e.classList.remove(fixedElementStyles.current);
+            });
+        }
+    };
+    useEffect(() => {
+        log('mounted');
+        return () => {
+            var _a;
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveScrollStyles();
+            }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
+            }
+            log('un-mounted');
+        };
+    }, []);
+    useBooleanChanged((show, previousShow) => {
+        var _a;
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
+        log('backdrop.setShow', show);
+        if (show) {
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            addScrollStyles();
+        }
+        else {
+            log('this modal is hiding. try removing singleton bodyStyles');
+            tryRemoveScrollStyles();
+        }
+    }, 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({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
+        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 = cx(css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colors.header,
+        padding: '1rem',
+        color: theme.colors.headerFont
+    }), p.headerClassName);
+    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;
+                        /*
+                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
+                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
+                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
+                        */
+                        // 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 Divider = (p) => {
+    const theme = useThemeSafely();
+    return (React.createElement("hr", Object.assign({}, p, { className: cx("divider", css({
+            label: 'Divider',
+            margin: theme.controls.dividerMargin,
+            border: theme.controls.dividerBorder
+        }), p.className) })));
+};
+
+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, unstyled } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax", "unstyled"]);
+    const theme = useThemeSafely();
+    let defaultStyle;
+    if (!props.unstyled) {
+        defaultStyle = css({
+            label: 'Form',
+            display: 'flex',
+            flexDirection: props.inline ? 'row' : 'column',
+            alignItems: props.inline ? 'flex-end' : 'normal',
+            gap: theme.controls.gap
+        });
+    }
+    return (React.createElement("form", Object.assign({}, rest, { ref: ref, className: cx('form', defaultStyle, props.className), onSubmit: e => {
+            if (ajax !== false) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (onSubmit) {
+                onSubmit(e);
+            }
+        } }), children));
+});
+/** @deprecated Just style normally using flex, grid, etc. */
+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));
+};
+/** @deprecated Just style normally using flex, grid, etc. */
+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, { className: css({
+                color: 'inherit',
+                marginTop: '1rem',
+                width: '100%'
+            }), 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}`;
+};
+
+const Header = (props) => {
+    var _a;
+    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 = (_a = props.toggleMenu) !== null && _a !== void 0 ? _a : (() => {
+        /* 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: relative;
+		`}
+		${!!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;
+		bottom: calc(${theme.layout.headerHeight} / 2 * -1);
+	`;
+    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 = React.forwardRef((p, ref) => {
+    return (React.createElement("img", Object.assign({}, p, { ref: ref, className: cx('image', css({
+            label: 'Image',
+            maxWidth: '100%',
+            maxHeight: '100%',
+        }), p.className) })));
+});
+
+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 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 InputErrorDisplay = (props) => {
+    const theme = useThemeSafely();
+    return (React.createElement(Text, { className: css({
+            minHeight: theme.controls.inputErrorMinHeight,
+            lineHeight: theme.controls.inputErrorMinHeight,
+            color: theme.colors.negative
+        }), smaller: true, noPad: true }, props.error));
+};
+
+const defaultMaxLength$1 = 100;
+const BaseInput = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const { rightControl, round, wrapperClassName, showErrorDisplay } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName", "showErrorDisplay"]);
+    const inputStyles = css({
+        backgroundColor: theme.colors.bg,
+        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'
+        },
+        // FF fix to hide spinner on number elements
+        appearance: props.type === 'number' ? 'none' : undefined,
+        '::-webkit-outer-spin-button': {
+            appearance: 'none'
+        },
+        '::-webkit-inner-spin-button': {
+            appearance: 'none'
+        }
+    }, props.rightControl && {
+        paddingRight: theme.controls.height
+    });
+    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: css({
+            width: '100%',
+            label: 'BaseInput'
+        }) },
+        React.createElement("div", { className: cx('input', inputWrapperStyles, wrapperClassName) },
+            inputElement,
+            props.rightControl && (React.createElement("div", { className: rightControlStyles }, props.rightControl))),
+        ((_b = props.showErrorDisplay) !== null && _b !== void 0 ? _b : true) && React.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
+});
+
+const tryClampRange = (value, min, max) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    if (min !== undefined && value < min) {
+        return min;
+    }
+    if (max !== undefined && value > max) {
+        return max;
+    }
+    return value;
+};
+const isOutOfRange = (value, min, max) => {
+    if (min !== undefined && value < min) {
+        return true;
+    }
+    if (max !== undefined && value > max) {
+        return true;
+    }
+    return false;
+};
+const getStepDecimalPlaces = (step) => {
+    var _a, _b;
+    if (!step) {
+        return 0;
+    }
+    const strStep = typeof step === 'number' ? step.toString() : step;
+    return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+};
+const tryClampDecimals = (value, step = 0) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    const decimals = getStepDecimalPlaces(step);
+    if (decimals === 0) {
+        return Math.floor(value);
+    }
+    return parseFloat(value.toFixed(decimals));
+};
+
+/** Common state handling for displaying validation messages with inputs. */
+const useInputValidationMessage = (ref, props) => {
+    const [validationError, setValidationError] = React__default.useState('');
+    const updateErrorMessage = (customErrorOverride) => {
+        var _a;
+        const customError = customErrorOverride || props.customError || '';
+        // set it OR clear it.  either way, update it.
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
+        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+    };
+    useEffect(() => {
+        updateErrorMessage();
+    }, [props.customError]);
+    React__default.useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    return [validationError, updateErrorMessage];
+};
+const getValidationMessage = (element, patternErrorMessage) => {
+    var _a;
+    if (!element) {
+        return '';
+    }
+    const validity = element.validity;
+    if (validity.valid) {
+        return '';
+    }
+    if (validity.customError) {
+        return element.validationMessage;
+    }
+    if (validity.typeMismatch) {
+        switch (element.type) {
+            case 'url':
+                return `Invalid URL.`;
+            case 'email':
+                return `Invalid email.`;
+            default:
+                return element.validationMessage;
+        }
+    }
+    if (element instanceof HTMLInputElement) {
+        if (validity.rangeOverflow) {
+            return `Must be less than or equal to ${element.max}.`;
+        }
+        if (validity.rangeUnderflow) {
+            return `Must be greater than or equal to ${element.min}.`;
+        }
+        if (validity.stepMismatch) {
+            const decimalPlaces = getStepDecimalPlaces(element.step);
+            if (decimalPlaces > 0) {
+                const place = decimalPlaces === 1 ? 'place' : 'places';
+                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+            }
+            else {
+                /*
+                    step is buggy!
+                    
+                    at least in Chrome, setting step=5 will cause the browser to mark the field as invalid if the number is not divisible
+                    by 5.  55 is ok.  50 is ok.  59 is not ok.
+                    
+                    to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
+                    you the number 5 is now invalid and should be 4 or 9.
+                */
+                return `Must be an integer.`;
+            }
+        }
+    }
+    if (validity.tooShort) {
+        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+    }
+    if (validity.valueMissing) {
+        return 'Required.';
+    }
+    if (validity.patternMismatch && patternErrorMessage) {
+        return patternErrorMessage;
+    }
+    // unhandled.  let the browser decide.
+    return element.validationMessage;
+};
+
+const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
+const datePattern = dateRegex.source;
+const invalidDateMessage = 'Invalid date.';
+const DateInput = React.forwardRef((props, ref) => {
+    var _a;
+    const [dateValue, setDateValue] = React.useState(props.value);
+    const [textValue, setTextValue] = React.useState(parseDateString(props.value));
+    const updateValues = React.useCallback((value) => {
+        let newDateValue;
+        let newTextValue;
+        if (typeof value === 'number') {
+            newDateValue = value;
+            newTextValue = parseDateString(value);
+        }
+        else if (typeof value === 'string') {
+            newDateValue = parseDateNumber(value);
+            newTextValue = value;
+        }
+        setDateValue(newDateValue);
+        setTextValue(newTextValue);
+    }, []);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
+    const updateDateErrorMessages = React.useCallback(() => {
+        let dateError = '';
+        if (dateValue === undefined) {
+            if (!!textValue) {
+                // the text pattern is a valid date format, but the numbers are wrong.  example: 05/35/2000.
+                dateError = invalidDateMessage;
+            }
+        }
+        else if (isOutOfRange(dateValue, props.min, props.max)) {
+            // out of range
+            if (props.min !== undefined && props.max !== undefined) {
+                dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
+            }
+            else if (props.min !== undefined) {
+                dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
+            }
+            else {
+                dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
+            }
+        }
+        updateErrorMessage(dateError);
+    }, [dateValue, textValue]);
+    const [showCalendar, setShowCalendar] = React.useState(false);
+    const [calendarDate, setCalendarDate] = React.useState(getCalendarDate(props.value, props.min, props.max));
+    // controls the one-time focus set on show
+    const needsFocus = React.useRef(false);
+    const toggleCalendar = React.useCallback((show) => {
+        var _a;
+        if (show === showCalendar) {
+            return;
+        }
+        needsFocus.current = show;
+        setShowCalendar(show);
+        if (show) {
+            setCalendarDate(getCalendarDate(dateValue, props.min, props.max));
+        }
+        else {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [dateValue, showCalendar]);
+    const popover = React.useRef(null);
+    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange"]);
+    useIgnoreMount(() => {
+        var _a;
+        /*
+            Run this right away.
+            If not, our value may be valid but our error system reports it otherwise due to not being updated yet.
+        */
+        updateDateErrorMessages();
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(dateValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+    }, [dateValue]);
+    useIgnoreMount(() => {
+        updateDateErrorMessages();
+    }, [textValue]);
+    useIgnoreMount(() => {
+        var _a;
+        if (document.activeElement !== inputRef.current) {
+            updateValues(props.value);
+            setCalendarDate(getCalendarDate((_a = props.value) !== null && _a !== void 0 ? _a : 0, props.min, props.max));
+        }
+        updateDateErrorMessages();
+    }, [props.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;
+        }
+    });
+    const input = (React.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "text", ref: inputRef, value: textValue !== null && textValue !== void 0 ? textValue : '', maxLength: 10, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY', pattern: datePattern, rightControl: (!props.readOnly && !props.disabled) ? (React.createElement(Button, { variant: "icon", readOnly: props.readOnly, disabled: props.disabled, small: true, style: {
+                fontSize: '1rem'
+            }, onClick: () => {
+                toggleCalendar(!showCalendar);
+            } },
+            React.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: e => {
+            var _a;
+            updateValues(e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onFocus: e => {
+            var _a;
+            toggleCalendar(false);
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
+                if (dateValue !== undefined) {
+                    if (isOutOfRange(dateValue, props.min, props.max)) {
+                        // try and fix the range
+                        updateValues(tryClampRange(dateValue, props.min, props.max));
+                    }
+                }
+                else {
+                    // just wipe it all
+                    updateValues(undefined);
+                }
+            }
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+    return (React.createElement(Popover, { reposition: props.reposition, isOpen: showCalendar, onClickOutside: () => {
+            toggleCalendar(false);
+        }, parent: input, content: (React.createElement("div", { ref: popover, className: css({
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                paddingBottom: '1rem'
+            }) },
+            React.createElement(Calendar, { onClick: date => {
+                    updateValues(date.valueOf());
+                    toggleCalendar(false);
+                }, customTitle: React.createElement("div", { className: css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    }) },
+                    React.createElement(Button, { disabled: !!props.min && isBefore(endOfMonth(addMonths(calendarDate, -1)), props.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: !!props.max && isAfter(startOfMonth(addMonths(calendarDate, 1)), props.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: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
+});
+const parseDateNumber = (rawValue) => {
+    if (!rawValue) {
+        return undefined;
+    }
+    let dateMs;
+    const dateParts = dateRegex.exec(rawValue);
+    if (dateParts) {
+        const month = parseInt(dateParts[1], 10) - 1;
+        const day = parseInt(dateParts[2], 10);
+        const year = parseInt(dateParts[3], 10);
+        if (isExists(year, month, day)) {
+            dateMs = new Date(year, month, day).valueOf();
+        }
+    }
+    return dateMs;
+};
+const parseDateString = (dateMs) => {
+    if (typeof dateMs === 'number') {
+        return format(dateMs, 'MM/dd/yyyy');
+    }
+    return undefined;
+};
+const getCalendarDate = (date, min, max) => {
+    let calendarDate = date ? new Date(date) : new Date();
+    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
+    if (min && isBefore(calendarDate, min)) {
+        calendarDate = new Date(min);
+    }
+    else if (max && isAfter(calendarDate, max)) {
+        calendarDate = new Date(max);
+    }
+    return calendarDate;
+};
+
+const NumberInput = React.forwardRef((props, ref) => {
+    const [localValue, setLocalValue] = React.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["customError", "onValueChange"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    return (React.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "number", ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', maxLength: 20, onChange: e => {
+            var _a;
+            const newLocalValue = parseNumber(e.target.value);
+            setLocalValue(newLocalValue);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            let adjustedValue = localValue;
+            if (e.target.validity.customError) {
+                // if we're invalid due to a custom error, just wipe everything
+                adjustedValue = undefined;
+            }
+            else {
+                // try and fix the value
+                adjustedValue = tryClampRange(adjustedValue, props.min, props.max);
+                adjustedValue = tryClampDecimals(adjustedValue, props.step);
+            }
+            setLocalValue(adjustedValue);
+            // makes our displayed value always matches the adjusted value
+            // examples of failures are 'e', '-', and 5.0 in an integer (step=0) field.
+            e.target.value = (_a = adjustedValue === null || adjustedValue === void 0 ? void 0 : adjustedValue.toString()) !== null && _a !== void 0 ? _a : '';
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+});
+const parseNumber = (rawValue) => {
+    let value;
+    if (rawValue) {
+        value = parseFloat(rawValue);
+        if (isNaN(value)) {
+            return undefined;
+        }
+    }
+    return value;
+};
+
+const TextInput = React.forwardRef((props, ref) => {
+    var _a;
+    const [localValue, setLocalValue] = React.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    return (React.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+            var _a;
+            setLocalValue(props.emptyString ? e.target.value : e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            if (!e.target.checkValidity()) {
+                setLocalValue(undefined);
+            }
+            else if ((_a = props.trim) !== null && _a !== void 0 ? _a : true) {
+                setLocalValue(currentValue => {
+                    return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                });
+            }
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+});
+
+const Label = (props) => {
+    var _a, _b, _c;
+    const labelProps = __rest(props, ["text", "static", "orientation", "align", "noWrap", "subText", "optional", "controlAlign"]);
+    const theme = useThemeSafely();
+    const orientationChoice = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
+    const alignChoice = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
+    const padding = '0.25rem';
+    const labelStyles = css `
+		label: Label;
+		${padding};
+		display: flex;
+		${orientationChoice === 'vertical' && `
+			flex-direction: column;
+		`}
+		${orientationChoice === 'horizontal' && `
+			flex-direction: row;
+			align-items: center;
+		`}
+		${orientationChoice === 'horizontalReverse' && `
+			flex-direction: row-reverse;
+			align-items: center;
+		`}
+	`;
+    const labelTextStyles = css `
+		label: LabelText;
+		flex-shrink:0;
+		${orientationChoice === 'vertical' && `
+			margin-bottom: ${padding};
+		`}
+		${orientationChoice === 'horizontal' && `
+			flex-direction: row;
+			margin-right:${padding};
+			${props.static && `
+				margin-right:0.5rem;
+			`}
+		`}
+		${orientationChoice === 'horizontalReverse' && `
+			margin-left:${padding};
+		`}
+		${(props.subText || props.optional) && `
+			margin-right: 0.5rem;
+		`}
+	`;
+    const labelContentStyles = css `
+		label: LabelContent;
+		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: alignChoice, className: labelTextStyles, tag: "div", bold: true }, props.text);
+    let subTextChoice;
+    if (props.subText) {
+        if (typeof props.subText === 'string') {
+            subTextChoice = React.createElement(Text, { tag: "div" }, props.subText);
+        }
+        else {
+            subTextChoice = props.subText;
+        }
+    }
+    else if (props.optional) {
+        subTextChoice = React.createElement(Text, { tag: "div" },
+            React.createElement("em", null, "(optional)"));
+    }
+    if (subTextChoice) {
+        labelText = React.createElement("span", { className: css({ display: 'flex' }) },
+            labelText,
+            React.createElement("span", { className: css({
+                    fontSize: '90%',
+                    marginBottom: padding
+                }) }, subTextChoice));
+    }
+    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", Object.assign({}, labelProps, { 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.
+*/
+/** React wrapper around window resizing and window.matchMedia.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(window.matchMedia(query).matches);
+    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) => {
+    var _a, _b, _c;
+    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 log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
+    const slideMs = (_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs;
+    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} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const classNavNotShowing = css `
+		animation: ${slideLeft} ${slideMs}ms 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 `
+		label: Nav;
+		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]);
+    useBooleanChanged((current, previous) => {
+        var _a;
+        log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
+        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+    }, props.show);
+    React.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);
+                        }
+                    }, slideMs);
+                }
+            }
+        }
+    });
+    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 LinkContent = (props) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", null,
+            props.leftIcon && React.createElement("span", { className: css({
+                    label: 'LinkLeftIcon',
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                }) }, props.leftIcon),
+            props.children),
+        props.rightIcon && React.createElement("span", { className: css({
+                label: 'LinkRightIcon',
+                marginLeft: '1rem',
+                verticalAlign: 'middle'
+            }) }, props.rightIcon)));
+};
+
+//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
+const generateLinkStyles = (props, theme) => {
+    var _a, _b, _c, _d, _e;
+    const linkStyles = css `
+	label: Link;
+	display: inline-block;
+	cursor: pointer;
+	text-decoration: none;
+	color: ${(_a = props.colorOverride) !== null && _a !== void 0 ? _a : theme.colors.link};
+	transition: ${theme.controls.transition};
+	&:hover {
+		filter: ${theme.controls.hoverBrightness};
+		text-decoration: underline;
+	}
+	&:active,
+	&:visited {
+		color: ${(_b = props.colorOverride) !== null && _b !== void 0 ? _b : theme.colors.link};
+	}
+	&:focus {
+		text-decoration: underline;
+		outline: none;
+		color: ${(_c = props.colorOverride) !== null && _c !== void 0 ? _c : theme.colors.link};
+	}
+	${!!props.variant && `
+		padding-left: ${theme.controls.padding};
+		padding-right: ${theme.controls.padding};
+		border: ${theme.controls.border};
+		border-radius: ${theme.controls.borderRadius};
+		box-shadow: ${theme.controls.buttonBoxShadow};
+		height: ${theme.controls.height};
+		line-height: ${theme.controls.height};
+		font-weight: bold;
+		color: ${(_d = props.colorOverride) !== null && _d !== void 0 ? _d : theme.colors.font};
+		&:active,
+		&:focus,
+		&:visited {
+			color: ${(_e = props.colorOverride) !== null && _e !== void 0 ? _e : theme.colors.font};
+		}
+		&:focus {
+			outline: none;
+			box-shadow: ${theme.controls.focusOutlineShadow};
+			text-decoration: none;
+		}
+		&:active {
+			box-shadow: none;
+		}
+		&:hover {
+			text-decoration: none;
+		}
+	`}
+	${props.variant === 'button' && `
+		text-align: center;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
+	`}
+	${props.variant === 'circle' && `
+		text-align: center;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
+		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;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
+	`}
+	${props.variant === 'text' && `
+		font-weight: normal;
+		box-shadow: none;
+		border: none;
+		cursor: auto;
+	`}
+	${props.variant === 'icon' && `
+		box-shadow: none;
+		border: none;
+		border-radius: 100%;
+		width: ${theme.controls.height};
+		text-align: center;
+		font-size: 1.6rem;
+		padding-left: 0;
+		padding-right: 0;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
+	`}
+	${props.block && `
+		display: block;
+		width:100%;
+	`}
+	${props.iconBlock && `
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	`}
+	${props.round && `
+		border-radius: ${theme.controls.roundRadius};
+	`}
+	${props.small && `
+		font-size: 0.8rem;
+		height: ${theme.controls.heightSmall};
+		line-height: ${theme.controls.heightSmall};
+	`}
+`;
+    return linkStyles;
+};
+
+const OmniLink = (props) => {
+    const { noRouter, rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const theme = useThemeSafely();
+    const linkStyles = generateLinkStyles(props, theme);
+    const mainClassName = cx('omniLink', linkStyles, props.className);
+    if (variant === 'text') {
+        return React.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
+    const content = React.createElement(LinkContent, Object.assign({}, props));
+    if (props.noRouter) {
+        return (React.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
+    }
+    return (React.createElement(Link$1, Object.assign({}, linkProps, { className: mainClassName, to: props.href }), content));
+};
+
+const roundPxPadding = '4px';
+const Picker = (props) => {
+    const selectProps = __rest(props
+    // if we put numbers in, we expect them out
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName"]);
+    // 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({
+        // fix the arrow so browser all look the same
+        appearance: 'none',
+        paddingLeft: theme.controls.padding,
+        paddingRight: `calc(${theme.controls.padding} + 1rem)`,
+        backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
+        height: theme.controls.height,
+        fontSize: theme.controls.fontSize,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius || 0,
+        transition: theme.controls.transition,
+        '&:disabled': {
+            color: theme.colors.font,
+            opacity: 1,
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        '&:focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        }
+    }, props.round && {
+        borderRadius: theme.controls.roundRadius,
+        paddingLeft: `calc(${theme.controls.padding} + ${roundPxPadding})`,
+        paddingRight: `calc(${theme.controls.padding} + 1rem + ${roundPxPadding})`,
+    }, props.readOnly && {
+        backgroundColor: 'transparent !important',
+        backgroundImage: 'unset',
+        border: 'none',
+        '&:focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    const select = (React.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 => {
+            var _a;
+            let val = e.target.value;
+            if (isNumber) {
+                val = parseInt(val, 10);
+                if (isNaN(val)) {
+                    val = '';
+                }
+            }
+            props.onValueChange(val);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, 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);
+    })));
+    let iconHeight;
+    if (props.controlAlign) {
+        iconHeight = `calc(100% - ${theme.controls.inputErrorMinHeight})`;
+    }
+    else {
+        iconHeight = '100%';
+    }
+    return (React.createElement("span", { className: cx(css({
+            label: 'PickerWrapper',
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+            paddingBottom: props.controlAlign ? theme.controls.inputErrorMinHeight : undefined
+        }), props.wrapperClassName) },
+        select,
+        !props.readOnly && (React.createElement(Icon, { id: "sortDesc", className: cx(css({
+                position: 'absolute',
+                right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
+                height: iconHeight,
+                pointerEvents: 'none',
+                color: theme.colors.font
+            }), props.iconClassName) }))));
+};
+
+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};
+		}
+	`;
+    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, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            p.onPage(d);
+        } })));
+};
+
+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, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
+                    var _a;
+                    (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
+                } }))) : undefined, page: d => {
+            p.onPage(d);
+        } })));
+};
+
+/** A page of data with helpers props.  */
+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);
+    }
+    /** 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);
+    }
+}
+
+/** In-memory pager. */
+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;
+};
+
+/** Provides stateful notifications around async calls. */
+const useWaiting = (func) => {
+    // Guard against the owner of this hook being unmounted at the time of .finally.
+    const isCancelled = 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, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: cx(css({
+            color: `${theme.colors.font} !important;`,
+            fontSize: '1rem'
+        }), props.buttonClassName), variant: "icon", small: true },
+        React.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
+    //TB: FUTURE replace with new inputs
+    //TB: change the search icon to x when value is present
+    const input = (React.createElement(Input, { inputClassName: props.inputClassName, autoFocus: props.autoFocus, id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton }));
+    const wrapperClassName = cx('searchBox', props.className);
+    if (!props.noForm) {
+        return (React.createElement(Form, { role: "search", className: wrapperClassName, onSubmit: onSubmit }, input));
+    }
+    return (React.createElement("div", { className: wrapperClassName }, input));
+};
+
+const GlobalStyles = (p) => {
+    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) => {
+    var _a;
+    const theme = useThemeSafely();
+    const currentValue = useRef(p.value);
+    const sliderContainer = useRef(null);
+    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
+    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
+    return (React__default.createElement("div", { ref: sliderContainer, className: cx(css({
+            label: 'Slider',
+            width: '100%',
+            height,
+        }), p.className) },
+        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, p.trackClassName, css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: sliderHandleSize
+                    })) }, rest),
+                    React__default.createElement("div", { className: css({
+                            backgroundColor: theme.colors.secondary,
+                            height: `calc(${sliderHandleSize} / 4)`,
+                            borderRadius: theme.controls.roundRadius,
+                            width: '100%'
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
+            }, renderThumb: (props, state) => {
+                const { className } = props, rest = __rest(props, ["className"]);
+                let specificThumbStyles;
+                if (p.handle1ClassName && props.key === 'thumb-0') {
+                    specificThumbStyles = p.handle1ClassName;
+                }
+                else if (p.handle2ClassName && props.key === 'thumb-1') {
+                    specificThumbStyles = p.handle2ClassName;
+                }
+                return (React__default.createElement("div", Object.assign({ className: cx(className, css({
+                        borderRadius: theme.controls.roundRadius,
+                        backgroundColor: 'white',
+                        border: theme.controls.border,
+                        cursor: 'grab',
+                        boxShadow: theme.controls.buttonBoxShadow,
+                        transition: theme.controls.transition,
+                        '&:focus': {
+                            outline: 'none',
+                            boxShadow: theme.controls.focusOutlineShadow
+                        },
+                        '&:active': {
+                            boxShadow: 'none',
+                            cursor: 'grabbing'
+                        },
+                        '&:hover': {
+                            filter: theme.controls.hoverBrightness
+                        }
+                    }), specificThumbStyles, p.handleClassName, css({
+                        width: sliderHandleSize,
+                        height: sliderHandleSize,
+                    })) }, rest), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, 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 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 : p.sliderHandleSize;
+    const renderValueLeft = useMemo(() => {
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
+    }, [p.renderValueWidth]);
+    const [flipText, setFlipText] = useState(false);
+    const offset = '2px';
+    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 : `calc(${p.sliderHandleSize} + ${offset})`,
+            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
+            position: 'absolute',
+            overflow: 'hidden',
+        }), p.className), tag: "div", align: "center" }, displayValue));
+};
+
+const TabHeader = (p) => {
+    var _a, _b;
+    const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const [tabsChanging, setTabsChanging] = React.useState(false);
+    const theme = useThemeSafely();
+    const variant = (_b = p.variant) !== null && _b !== void 0 ? _b : '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: cx(menuStyles, p.containerClassName) }, 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,
+                });
+                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',
+                });
+            }
+            let title = tab.title;
+            let buttonContent;
+            if (typeof tab.name === 'string') {
+                title !== null && title !== void 0 ? title : (title = tab.name);
+                buttonContent = React.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
+            }
+            else {
+                buttonContent = tab.name;
+            }
+            return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
+                React.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        const onChange = () => {
+                            var _a;
+                            setTabIndex(index);
+                            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+                        };
+                        if (p.onBeforeTabChanged) {
+                            setTabsChanging(true);
+                            p.onBeforeTabChanged(index)
+                                .then(() => {
+                                onChange();
+                            })
+                                .catch(err => {
+                                /* do nothing */
+                            })
+                                .finally(() => {
+                                setTabsChanging(false);
+                            });
+                        }
+                        else {
+                            onChange();
+                        }
+                    } }, buttonContent)));
+        })),
+        variant === 'tab' && (React.createElement("div", { className: cx(css({
+                label: 'TabHeaderDivider',
+                borderBottom: theme.controls.border,
+                marginTop: `calc(${theme.controls.borderWidth} * -1)`,
+                zIndex: 2,
+                position: 'relative'
+            }), p.tabHeaderDividerClassName) }))));
+};
+
+const Table = (props) => {
+    const theme = useThemeSafely();
+    const tableStyles = css `
+		label: Table;
+		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 `
+		label: TableScrollWrapper;
+		width:100%;
+        overflow-y: auto;
+        padding:0 1px;  //fixes always showing of the table scroller
+	`;
+    return (React.createElement("div", { className: cx(wrapperStyles, props.wrapperClassName) },
+        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.className) }, 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 defaultMaxLength = 200;
+const defaultRows = 10;
+const TextArea = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const [localValue, setLocalValue] = React.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError", "showErrorDisplay"]);
+    const theme = useThemeSafely();
+    React.useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            if (props.reportValueOnError) {
+                //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
+                props.onValueChange(localValue);
+            }
+            else {
+                props.onValueChange(undefined);
+            }
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    const styles = css({
+        backgroundColor: theme.colors.bg,
+        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("span", { className: css({
+            display: 'inline-block',
+            width: '100%'
+        }) },
+        React.createElement("textarea", Object.assign({}, nativeProps, { className: cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+                var _a;
+                setLocalValue(e.target.value || undefined);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: e => {
+                var _a;
+                if (!props.noTrim) {
+                    setLocalValue(currentValue => {
+                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                    });
+                }
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })),
+        ((_c = props.showErrorDisplay) !== null && _c !== void 0 ? _c : true) && React.createElement(InputErrorDisplay, { error: validationError })));
+});
+
+const ToggleButton = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const buttonProps = __rest(props, ["checked", "checkedText", "uncheckedText", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
+    let children;
+    if (props.checked) {
+        children = (_a = props.checkedChildren) !== null && _a !== void 0 ? _a : props.checkedText;
+    }
+    else {
+        children = (_b = props.uncheckedChildren) !== null && _b !== void 0 ? _b : props.uncheckedText;
+    }
+    return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style }), children));
+});
+
+const ToggleButtonGroup = (props) => {
+    const theme = useThemeSafely();
+    const groupStyles = css `
+		display: flex;
+		box-shadow: ${theme.controls.buttonBoxShadow};
+		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 = React.forwardRef((props, ref) => {
+    const [show, setShow] = React.useState(false);
+    return (React.createElement(TextInput, Object.assign({}, props, { ref: ref, 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',
+                padding: '0.7rem'
+            }) },
+            React__default.createElement(Icon, { id: "waiting", spin: true }))));
+};
+
+/*
+    pulled from https://github.com/necolas/normalize.css/blob/master/normalize.css.
+    the IE-specific fixes have been removed.
+*/
+/** Resets certain styles so there is more consistancy between browsers. */
+const NormalizeCss = (p) => {
+    /* tslint:disable:no-unused-expression */
+    injectGlobal `
+	/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on 'h1' elements within 'section' and
+ * 'article' contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent 'sub' and 'sup' elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  /* line-height: 1.15; This causes issues with Chrome buttons. */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from 'fieldset' elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    'fieldset' elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to 'inherit' in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+`;
+    return null;
+};
+
+/** Displays the value in American dollars. */
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+const enumToEntities = (enumObj) => {
+    const entities = [];
+    for (const key in enumObj) {
+        if (isNaN(parseInt(key, 10))) {
+            entities.push({
+                id: enumObj[key],
+                name: key
+            });
+        }
+    }
+    return entities;
+};
+
+const Link = (props) => {
+    const { rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const theme = useThemeSafely();
+    const linkStyles = generateLinkStyles(props, theme);
+    const mainClassName = cx('link', linkStyles, props.className);
+    if (variant === 'text') {
+        return React.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
+    return (React.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }),
+        React.createElement(LinkContent, Object.assign({}, props))));
+};
+
+const ThemeRenderer = (p) => {
+    const { backgroundColor, color } = p, theme = __rest(p, ["backgroundColor", "color"]);
+    const flatTheme = flatten(theme);
+    const entries = orderBy(Object.entries(flatTheme), x => x[0]);
+    return (React.createElement(Table, { caption: (React.createElement("div", null,
+            React.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
+            React.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
+            color: color !== null && color !== void 0 ? color : 'black'
+        }) },
+        React.createElement("thead", null,
+            React.createElement(Tr, null,
+                React.createElement(Th, { align: "left" }, "Property"),
+                React.createElement(Th, { align: "left" }, "Value"))),
+        React.createElement("tbody", null, entries.map(([key, value]) => {
+            let colorBox;
+            if (/color/i.test(key)) {
+                colorBox = (React.createElement("span", { className: css({
+                        display: 'block',
+                        border: '1px solid black',
+                        width: '100%',
+                        height: 24,
+                        background: value
+                    }) }));
+            }
+            return (React.createElement(Tr, { key: key },
+                React.createElement(Td, { align: "left" }, key),
+                React.createElement(Td, { align: "left" },
+                    React.createElement("div", { className: css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem'
+                        }) },
+                        React.createElement("span", { className: css({ flexShrink: 1 }) }, value),
+                        " ",
+                        colorBox))));
+        }))));
+};
+const flatten = (obj, parent, path = 'theme') => {
+    const flatObj = parent !== null && parent !== void 0 ? parent : {};
+    for (const prop in obj) {
+        const value = obj[prop];
+        const fullPath = `${path}.${prop}`;
+        if (typeof value !== 'object') {
+            flatObj[fullPath] = value;
+        }
+        else {
+            flatten(value, flatObj, fullPath);
+        }
+    }
+    return flatObj;
+};
+
+const TabContainer = (p) => {
+    var _a;
+    const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const theme = useThemeSafely();
+    return (React.createElement("div", { className: css({
+            label: 'TabContainer'
+        }) },
+        React.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+                var _a;
+                setTabIndex(newIndex);
+                (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
+            } }),
+        React.createElement("div", { className: cx(css({
+                label: 'TabContainerContent',
+                padding: '1rem',
+                borderLeft: theme.controls.border,
+                borderRight: theme.controls.border,
+                borderBottom: theme.controls.border,
+            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
+};
+
+export { Accordian, Autocomplete, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, Input, ItemPager, Label, Link, List, ListItem, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, Popover, ProgressBar, SearchBox, Slider, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+//# sourceMappingURL=index.esm.js.map