@mackin.com/styleguide 4.2.0

package/index.js

@@ -0,0 +1,3126 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var React = require('react');
+var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var nanoid = require('nanoid');
+var css = require('@emotion/css');
+var lodash = require('lodash');
+var reactTinyPopover = require('react-tiny-popover');
+var dateFns = require('date-fns');
+var reactRouterDom = require('react-router-dom');
+var ReactSlider = require('react-slider');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () {
+						return e[k];
+					}
+				});
+			}
+		});
+	}
+	n['default'] = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactSlider__default = /*#__PURE__*/_interopDefaultLegacy(ReactSlider);
+
+const mergeClassNames = (...classes) => {
+    if (!classes) {
+        return undefined;
+    }
+    return classes.filter(c => c).map(c => c).join(' ');
+};
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+const noop = () => {
+    // lil' noop would be a great rap name. (thanks linter)
+};
+
+/** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
+const calcDynamicThemeProps = (theme) => {
+    theme.controls.border = `${theme.controls.borderWidth} solid ${theme.colors.border}`;
+    theme.controls.transition = `box-shadow ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, opacity ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, background-color ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}, filter ${theme.controls.transitionDuration} ${theme.controls.transitionEasing}`;
+    theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
+    theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
+    theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
+};
+const defaultTheme = {
+    colors: {
+        primary: '#7851a9',
+        primaryFont: 'rgba(255, 255, 255, 0.9)',
+        primary2: '#007bff',
+        primary2Font: 'rgba(255, 255, 255, 0.9)',
+        secondary: '#9e9e9e',
+        secondary2Font: 'rgba(255, 255, 255, 0.9)',
+        info: '#7851a9',
+        infoFont: 'rgba(255, 255, 255, 0.9)',
+        warning: '#F5AD94',
+        warningFont: 'rgba(0, 0, 0, 0.9)',
+        positive: '#28a745',
+        positiveFont: 'rgba(255, 255, 255, 0.9)',
+        negative: '#dc3545',
+        negativeFont: 'rgba(255, 255, 255, 0.9)',
+        omg: '#dc3545',
+        omgFont: 'rgba(255, 255, 255, 0.9)',
+        bg: 'white',
+        lightBg: 'rgba(0,0,0,.075)',
+        font: 'rgba(0, 0, 0, 0.70)',
+        header: '#7851a9',
+        headerFont: 'rgba(255, 255, 255, 0.9)',
+        link: '#007bff',
+        border: 'rgba(0, 0, 0, 0.25)',
+        divider: 'rgba(0, 0, 0, 0.50)',
+        nav: '#7851a9',
+        navFont: 'rgba(255, 255, 255, 0.9)',
+        focusOutline: 'hsl(155deg 67% 85%)',
+        progressBg: '#007bff63',
+        progressFill: '#007bff',
+        modalBg: 'white',
+        disabled: 'rgba(0,0,0,.075)',
+        textHighlight: 'hsl(54deg 100% 62%)',
+        required: '#dc3545',
+        focusOutlineRequired: 'rgb(212 28 89 / 75%)',
+        backdrop: 'rgba(0, 0, 0, 0.25)',
+        pagerBg: 'rgba(0,0,0,.075)'
+    },
+    fonts: {
+        family: 'Arial, Helvetica, sans-serif',
+        size: '16px',
+        headerFamily: 'Arial, Helvetica, sans-serif',
+    },
+    controls: {
+        padding: '0.5rem',
+        fontSize: '1rem',
+        borderWidth: '1px',
+        border: ``,
+        height: '44px',
+        heightSmall: '34px',
+        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        hoverBrightness: 'brightness(0.75)',
+        transitionDuration: '0.25s',
+        transitionEasing: 'ease-in-out',
+        transition: '',
+        focusOutlineShadow: '',
+        focusOutlineRequiredShadow: '',
+        roundRadius: '3rem',
+        roundedRadius: '0.5rem',
+        disabledOpacity: '0.5',
+        formButtonMinWidth: '7rem',
+        gap: '1rem',
+        dividerMargin: '1rem',
+        dividerBorder: '',
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)'
+    },
+    zIndexes: {
+        header: 50,
+        backdrop: 100,
+        nav: 110,
+        flyout: 120,
+        modal: 130,
+        tooltip: 1000
+    },
+    layout: {
+        headerHeight: '74px',
+        headerBodyOffset: '2rem',
+        navWidth: '300px'
+    },
+    breakpoints: {
+        desktop: '800px',
+        tablet: '768px'
+    }
+};
+calcDynamicThemeProps(defaultTheme);
+
+const useWaiting = (func) => {
+    // Guard against the owner of this hook being unmounted at the time of .finally.
+    const isCancelled = React.useRef(false);
+    const [waiting, setWaiting] = React.useState(false);
+    const wrappedFunc = (...args) => {
+        setWaiting(true);
+        return func(...args).finally(() => {
+            if (!isCancelled.current) {
+                setWaiting(false);
+            }
+        });
+    };
+    React.useEffect(() => {
+        isCancelled.current = false;
+        return () => {
+            isCancelled.current = true;
+        };
+    }, []);
+    return [waiting, wrappedFunc];
+};
+/** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
+const useThemeSafely = () => {
+    const theme = react.useTheme();
+    // 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;
+};
+
+/** @jsx jsx */
+const Table = (props) => {
+    const theme = useThemeSafely();
+    const tableStyles = react.css `
+		width: 100%;
+		border-collapse: collapse;
+		${props.noCellBorder && `
+			.table__td {
+				border-left: none;
+				border-right: none;
+			}
+		`}
+		${props.altRows && `
+			.table__tr:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+	`;
+    const wrapperStyles = react.css `
+		width:100%;
+        overflow-y: auto;
+        padding:0 1px;  //fixes always showing of the table scroller
+	`;
+    return (react.jsx("div", { css: wrapperStyles },
+        react.jsx("table", { css: tableStyles, className: props.className },
+            props.caption && react.jsx("caption", { css: {
+                    fontWeight: 'bold',
+                    padding: theme.controls.padding
+                } }, props.caption),
+            props.children)));
+};
+const Tr = (props) => {
+    return (react.jsx("tr", { className: mergeClassNames('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 = react.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.jsx("th", { css: thStyles, className: props.className, style: style }, props.children));
+};
+const Td = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    const tdStyles = react.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.jsx("td", { colSpan: props.colSpan, css: tdStyles, style: props.style, className: "table__td" }, 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__namespace.createElement(Td, { align: "right" },
+        "$",
+        displayValue));
+};
+
+const TdNumber = (props) => {
+    return React__namespace.createElement(Td, { align: "right" }, props.value || props.value === 0 ? props.value.toLocaleString() : '');
+};
+
+const ICONS = {
+    add: proSolidSvgIcons.faPlus,
+    delete: proSolidSvgIcons.faTrashAlt,
+    save: proSolidSvgIcons.faSave,
+    activate: proRegularSvgIcons.faCheckCircle,
+    deactivate: proRegularSvgIcons.faCircle,
+    online: proLightSvgIcons.faWifi,
+    offline: proLightSvgIcons.faWifiSlash,
+    noIcon: proSolidSvgIcons.faCrow,
+    close: proSolidSvgIcons.faTimes,
+    waiting: proSolidSvgIcons.faSync,
+    refresh: proSolidSvgIcons.faSync,
+    menu: proLightSvgIcons.faBars,
+    search: proLightSvgIcons.faSearch,
+    expand: proRegularSvgIcons.faChevronDown,
+    collapse: proRegularSvgIcons.faChevronUp,
+    help: proLightSvgIcons.faQuestionCircle,
+    debug: proLightSvgIcons.faNarwhal,
+    goTo: proLightSvgIcons.faChevronRight,
+    goBack: proLightSvgIcons.faChevronLeft,
+    download: proLightSvgIcons.faCloudDownload,
+    upload: proLightSvgIcons.faCloudUpload,
+    selected: proLightSvgIcons.faCheckCircle,
+    unselected: proLightSvgIcons.faCircle,
+    pagerLeft: proLightSvgIcons.faChevronLeft,
+    pagerRight: proLightSvgIcons.faChevronRight,
+    sortAsc: proRegularSvgIcons.faChevronUp,
+    sortDesc: proRegularSvgIcons.faChevronDown,
+    pickDate: proLightSvgIcons.faCalendarAlt,
+    copy: proLightSvgIcons.faCopy,
+    paste: proLightSvgIcons.faPaste,
+    clear: proRegularSvgIcons.faTimesCircle,
+    hide: proLightSvgIcons.faEyeSlash,
+    show: proLightSvgIcons.faEye
+};
+const Icon = (props) => {
+    var _a;
+    const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: mergeClassNames('icon', props.className), icon: icon });
+};
+
+/** @jsx jsx */
+const Button = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    const buttonStyles = react.css `
+		padding-left: ${theme.controls.padding};
+		padding-right: ${theme.controls.padding};
+		background-color: white;
+		border: ${theme.controls.border};
+		cursor: pointer;
+		box-shadow: ${theme.controls.boxShadow};
+		color: ${theme.colors.font};
+		height: ${theme.controls.height};
+		transition: ${theme.controls.transition};
+		font-size: 1rem;
+		font-weight: bold;
+		flex-shrink: 0;
+		min-width: ${theme.controls.height};
+		text-align: ${(_a = props.textAlign) !== null && _a !== void 0 ? _a : 'center'};
+	
+		&:disabled {
+			opacity: ${theme.controls.disabledOpacity};
+			cursor: not-allowed;
+		}
+	
+		&:focus {
+			outline: none;
+			box-shadow: ${theme.controls.focusOutlineShadow};
+			position: relative;
+			z-index: 2;
+		}
+	
+		&:active {
+			box-shadow: none;
+		}
+	
+		&:hover:not(:disabled) {
+			filter: ${theme.controls.hoverBrightness};
+		}
+	`;
+    const styles = react.css `
+		${buttonStyles}
+		${props.variant === 'circle' && `
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+			`}
+		`}
+		${props.variant === 'icon' && `
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			padding: 0;
+			box-shadow: none;
+			border: none;
+			font-size: 1.6rem;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+				font-size: 1.3rem;
+			`}
+		`}
+		${props.variant === 'label' && `
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+		`}
+		${props.variant === 'link' && `
+			padding: 0;
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			color: ${theme.colors.link};
+			font-weight: normal;
+			background-color: transparent;
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				box-shadow: none;
+				text-decoration: underline;
+			}
+		`}
+		${props.variant === 'inlineLink' && `
+			padding: 0;
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			color: ${theme.colors.link};
+			font-weight: normal;
+			height: auto;
+			background-color: transparent;
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				box-shadow: none;
+				text-decoration: underline;
+			}
+		`}
+		${props.variant === 'primary' && `
+			background-color: ${theme.colors.primary};
+			color: ${theme.colors.primaryFont};
+		`}
+		${props.variant === 'primary2' && `
+			background-color: ${theme.colors.primary2};
+			color: ${theme.colors.primary2Font};
+		`}
+		${props.variant === 'secondary' && `
+			background-color: ${theme.colors.secondary};
+			color: ${theme.colors.secondary2Font};
+		`}
+		${props.variant === 'omg' && `
+			background-color: ${theme.colors.omg};
+			color: ${theme.colors.omgFont};
+		`}
+		${props.variant === 'positive' && `
+			background-color: ${theme.colors.positive};
+			color: ${theme.colors.positiveFont};
+		`}
+		${props.variant === 'negative' && `
+			background-color: ${theme.colors.negative};
+			color: ${theme.colors.negativeFont};
+		`}
+		${props.enforceMinWidth && `
+			min-width: ${theme.controls.formButtonMinWidth};
+		`}
+		${props.readonly && `
+			cursor: default;
+			box-shadow: none;
+			pointer-events:none;
+
+			&:hover {
+				filter:none;
+			}
+
+			&:focus {
+				box-shadow: none;
+			}
+		`}
+		${props.small && `
+			font-size: 0.8rem;
+			height:${theme.controls.heightSmall};
+		`}
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+		${props.block && `
+			width: 100%;
+		`}
+		${props.iconBlock && `
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		`}
+	`;
+    const disabled = props.disabled || props.waiting;
+    return (react.jsx("button", { id: props.id, css: styles, tabIndex: props.tabIndex, title: props.title, disabled: disabled, style: props.style, onClick: props.onClick, className: mergeClassNames('button', props.className), onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, type: props.type || 'button' },
+        props.leftIcon && react.jsx("span", { css: { marginRight: '0.5rem' } }, props.leftIcon),
+        props.waiting ? react.jsx(Icon, { id: "waiting", spin: true }) : props.children,
+        props.rightIcon && react.jsx("span", { css: { marginLeft: '0.5rem' } }, props.rightIcon)));
+};
+
+/** @jsx jsx */
+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.jsx(Th, { align: props.align, style: props.style, width: props.width },
+        react.jsx("div", { css: props.rightContent && {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: rightContentSpecialJustify,
+                gap: '0.5rem'
+            } },
+            react.jsx(Button, { onClick: props.onClick, variant: "link" },
+                props.text,
+                iconId && react.jsx(Icon, { css: {
+                        marginLeft: '0.5rem'
+                    }, id: iconId })),
+            props.rightContent)));
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const tagStyles = {
+    'p': {
+        marginTop: '1rem',
+        marginBottom: '1rem'
+    },
+    'h1': {
+        fontSize: '2rem',
+    },
+    'h2': {
+        fontSize: '1.5rem'
+    },
+    'h3': {
+        fontSize: '1.17rem' // Chrome default
+    },
+    'h4': {
+        fontSize: '1rem'
+    },
+};
+const headerRegex = /h1|h2|h3|h4/;
+const alignStyles = {
+    'center': { textAlign: 'center' },
+    'left': { textAlign: 'left' },
+    'right': { textAlign: 'right' }
+};
+const Text = (props) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const tagChoice = props.tag || 'p';
+    const style = props.style || {};
+    if (props.lineClamp) {
+        style.WebkitLineClamp = props.lineClamp;
+    }
+    if (props.leftPad) {
+        style.paddingLeft = props.leftPad;
+    }
+    const styles = css.css({
+        userSelect: 'text',
+        label: 'Text'
+    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: '0.7rem' }, props.larger && { fontSize: '1.3rem' }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }, props.lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box'
+    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+        fontFamily: theme.fonts.headerFamily
+    });
+    return React__namespace.createElement(tagChoice, {
+        style: style,
+        className: mergeClassNames('text', styles, props.className)
+    }, props.children);
+};
+
+/** @jsx jsx */
+const Label = (props) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const orientation = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
+    const align = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
+    const padding = '0.25rem';
+    const labelStyles = react.css `
+		${padding};
+		display: flex;
+		${orientation === 'vertical' && `
+			flex-direction: column;
+		`}
+		${orientation === 'horizontal' && `
+			flex-direction: row;
+			align-items: center;
+		`}
+		${orientation === 'horizontalReverse' && `
+			flex-direction: row-reverse;
+			align-items: center;
+		`}
+	`;
+    const labelTextStyles = react.css `
+		flex-shrink:0;
+		${orientation === 'vertical' && `
+			margin-bottom: ${padding};
+		`}
+		${orientation === 'horizontal' && `
+			flex-direction: row;
+			margin-right:${padding};
+			${props.static && `
+				margin-right:0.5rem;
+			`}
+		`}
+		${orientation === 'horizontalReverse' && `
+			margin-left:${padding};
+		`}
+		${(props.subText || props.optional) && `
+			margin-right: 0.5rem;
+		`}
+	`;
+    const labelContentStyles = react.css `
+		display:inline-block;
+		width:100%;
+		${props.controlAlign && `
+			height:${theme.controls.height};
+			line-height:${theme.controls.height};
+		`}
+	`;
+    const className = props.className;
+    let labelText = react.jsx(Text, { align: align, css: labelTextStyles, tag: "div", bold: true }, props.text);
+    let subText;
+    if (props.subText) {
+        if (typeof props.subText === 'string') {
+            subText = react.jsx(Text, { tag: "div" }, props.subText);
+        }
+        else {
+            subText = props.subText;
+        }
+    }
+    else if (props.optional) {
+        subText = react.jsx(Text, { tag: "div" },
+            react.jsx("em", null, "(optional)"));
+    }
+    if (subText) {
+        labelText = react.jsx("span", { css: { display: 'flex' } },
+            labelText,
+            react.jsx("span", { css: { fontSize: '90%' } }, subText));
+    }
+    if (props.noWrap) {
+        return (react.jsx("span", { css: labelStyles, className: className },
+            react.jsx("label", { htmlFor: props.htmlFor, className: className }, labelText),
+            props.children));
+    }
+    const content = react.jsx(React__namespace.Fragment, null,
+        labelText,
+        react.jsx("span", { css: labelContentStyles }, props.children));
+    if (props.static) {
+        return (react.jsx("span", { css: labelStyles, className: className }, 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.nanoid();
+    return (react.jsx("label", { htmlFor: htmlFor, css: labelStyles, className: mergeClassNames('label', className) }, content));
+};
+
+/** @jsx jsx */
+const Picker = (props) => {
+    // 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();
+    if (props.type === 'select') {
+        const selectStyles = react.css `
+			color:  ${theme.colors.font};
+			padding-left: ${theme.controls.padding};
+			padding-right: ${theme.controls.padding};
+			height: ${theme.controls.height};
+			font-size: ${theme.controls.fontSize};
+			width: 100%;
+			border: ${theme.controls.border};
+			transition: ${theme.controls.transition};
+			&:disabled {
+				color: ${theme.colors.font};
+				opacity: 1;
+				background-color: ${theme.colors.disabled};
+				cursor: not-allowed;
+			}
+			&:focus {
+				outline: none;
+				box-shadow: ${theme.controls.focusOutlineShadow};
+			}
+			${props.rounded && `
+				border-radius: ${theme.controls.roundedRadius};
+			`}
+			${props.readonly && `
+				background-color: transparent !important;
+				border: none;
+				-webkit-appearance: none;
+				-moz-appearance: none;
+				&:focus {
+					outline: none;
+					box-shadow: none;
+				}
+			`}
+		`;
+        return (react.jsx("select", { tabIndex: props.readonly ? -1 : undefined, disabled: props.disabled, id: props.id, css: selectStyles, className: mergeClassNames('picker', props.className), value: props.value, onKeyDown: e => {
+                if (props.readonly) {
+                    if (e.keyCode === 9) {
+                        //TAB
+                        return;
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, onMouseDown: e => {
+                if (props.readonly) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, onChange: e => {
+                let value = e.target.value;
+                if (isNumber) {
+                    value = parseInt(value, 10);
+                    if (isNaN(value)) {
+                        value = '';
+                    }
+                }
+                props.onChange(value);
+            } }, (props.options || []).map(o => {
+            var _a;
+            let value;
+            let label;
+            if (typeof o === 'object') {
+                value = o.id;
+                label = (_a = o.name) !== null && _a !== void 0 ? _a : o.id;
+            }
+            else {
+                value = o;
+                label = o;
+            }
+            return react.jsx("option", { key: value, value: value }, label);
+        })));
+    }
+    return null;
+};
+
+/** @jsx jsx */
+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 = react.css `
+		display: grid;
+		grid-template-columns: ${theme.controls.height} 1fr ${theme.controls.height};
+		grid-column-gap: ${theme.controls.gap};
+		border: ${theme.controls.border};
+		padding: 0.5rem;
+		background-color: ${theme.colors.pagerBg};
+		@media(min-width: ${theme.breakpoints.tablet}) {
+			grid-template-columns: ${theme.controls.height} 1fr 1fr 1fr ${theme.controls.height};
+		}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+	`;
+    const controlStyles = react.css `
+		display: none;
+		padding:0 1rem;
+		justify-self: center;
+		@media(min-width: ${theme.breakpoints.tablet}) {
+			display: block;
+		}
+	`;
+    const buttonStyles = react.css({
+        backgroundColor: 'transparent'
+    });
+    return (react.jsx("div", { css: pagerStyles, className: props.className },
+        react.jsx(Button, { css: buttonStyles, disabled: !canGoPrevious, onClick: () => props.page(-1), variant: "icon" },
+            react.jsx(Icon, { id: "pagerLeft" })),
+        react.jsx("div", { css: controlStyles }, props.leftControls),
+        react.jsx("div", { css: {
+                alignSelf: 'center',
+                justifySelf: 'center',
+                display: 'flex',
+                gap: '0.5rem',
+                flexDirection: 'column'
+            } },
+            react.jsx(Text, { tag: "span", align: "center" }, itemText),
+            pageText && (react.jsx(Text, { tag: "span", smaller: true, align: "center" }, pageText))),
+        react.jsx("div", { css: controlStyles }, props.rightControls),
+        react.jsx(Button, { css: buttonStyles, disabled: !canGoNext, onClick: () => props.page(1), variant: "icon" },
+            react.jsx(Icon, { id: "pagerRight" }))));
+};
+
+const BoundMemoryPager = (p) => {
+    var _a, _b, _c;
+    const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
+    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+            React__namespace.createElement(Picker, { type: "select", value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { type: "select", value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            p.onPage(d);
+        } })));
+};
+
+class PagedResult {
+    constructor(items = [], total = 0, page = 0, limit = 0) {
+        this.items = items;
+        this.page = page;
+        this.limit = limit;
+        this.total = total;
+    }
+    static fromDto(dto) {
+        return new PagedResult(dto.items, dto.total, dto.page, dto.limit);
+    }
+    // allItems: T[]
+    // get pageItems(): T[] {
+    //     return this.allItems.slice(this.minPageItemIndex, this.maxPageItemIndex + 1)
+    // }
+    /** Helper for items.length */
+    get length() {
+        return this.items ? this.items.length : 0;
+    }
+    get hasItems() {
+        return !!this.length;
+    }
+    get previousPage() {
+        return Math.max(this.page - 1, 0);
+    }
+    get hasPrevious() {
+        return this.previousPage !== this.page;
+    }
+    get nextPage() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.min(this.page + 1, this.lastPage);
+    }
+    get hasNext() {
+        return this.page !== this.lastPage;
+    }
+    get lastPage() {
+        return Math.max(this.totalPages - 1, 0);
+    }
+    get totalPages() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.floor(this.total / this.limit) + (this.total % this.limit ? 1 : 0);
+    }
+    get minPageItemIndex() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return this.page * this.limit;
+    }
+    get maxPageItemIndex() {
+        if (!this.total || !this.limit) {
+            return 0;
+        }
+        return Math.min(this.minPageItemIndex + this.limit - 1, this.total - 1);
+    }
+    /** Returns the first item on the current page. */
+    get firstPageItem() {
+        return this.items[0];
+    }
+    /** Returns the last item on the current page */
+    get lastPageItem() {
+        return this.items[this.items.length - 1];
+    }
+    getPageRelativeItemIndex(item) {
+        return this.items.indexOf(item);
+    }
+    getResultRelativeItemIndex(item) {
+        const index = this.getPageRelativeItemIndex(item);
+        if (index >= 0) {
+            return this.getPageRelativeItemIndex(item) + this.limit * this.page;
+        }
+        return undefined;
+    }
+    getPreviousItem(fromItem) {
+        const index = this.getPageRelativeItemIndex(fromItem);
+        if (index <= 0) {
+            return undefined;
+        }
+        return this.items[index - 1];
+    }
+    getNextItem(fromItem) {
+        const index = this.getPageRelativeItemIndex(fromItem);
+        if (index < 0) {
+            return undefined;
+        }
+        return this.items[index + 1];
+    }
+    getPagingRange(radius) {
+        const minItems = radius * 2 + 1;
+        const indexes = [];
+        let startIndex = 0;
+        let endIndex = 0;
+        if (this.totalPages > minItems) {
+            startIndex = this.page - radius;
+            endIndex = this.page + radius;
+            if (endIndex > this.lastPage) {
+                startIndex -= endIndex - this.lastPage;
+                endIndex = this.lastPage;
+            }
+        }
+        else {
+            startIndex = 0;
+            endIndex = this.lastPage;
+        }
+        for (let i = startIndex; i <= endIndex; i++) {
+            if (i < 0) {
+                endIndex++;
+            }
+            else {
+                indexes.push(i);
+            }
+        }
+        return indexes;
+    }
+    toJSON() {
+        const json = {
+            items: this.items.map(item => {
+                if (typeof item === 'object') {
+                    if ('toJSON' in item) {
+                        return item.toJSON();
+                    }
+                }
+                return item;
+            }),
+            page: this.page,
+            limit: this.limit,
+            total: this.total
+        };
+        return json;
+    }
+    clone(newItems) {
+        return new PagedResult(newItems || this.items.slice(), this.total, this.page, this.limit);
+    }
+}
+
+/** For in-memory paging. */
+class ItemPager {
+    constructor(allItems, options) {
+        var _a, _b, _c, _d;
+        this._page = 0;
+        this._allItems = allItems || [];
+        this._limitOptions = ((_a = options === null || options === void 0 ? void 0 : options.previous) === null || _a === void 0 ? void 0 : _a.limitOptions) || (options === null || options === void 0 ? void 0 : options.limitOptions) || [10];
+        this._limit = ((_b = options === null || options === void 0 ? void 0 : options.previous) === null || _b === void 0 ? void 0 : _b.limit) || (options === null || options === void 0 ? void 0 : options.limit) || 10;
+        this._filteredItems = [...allItems];
+        this._pageResult = this.createPageResult();
+        this._sortOptions = ((_c = options === null || options === void 0 ? void 0 : options.previous) === null || _c === void 0 ? void 0 : _c.sortOptions) || (options === null || options === void 0 ? void 0 : options.sortOptions) || [];
+        this.sort = ((_d = options === null || options === void 0 ? void 0 : options.previous) === null || _d === void 0 ? void 0 : _d.sort) || (options === null || options === void 0 ? void 0 : options.sort);
+        if (options === null || options === void 0 ? void 0 : options.previous) {
+            if (options.previous._currentFilter) {
+                this.applyFilter(options.previous._currentFilter);
+            }
+            this.page = options.previous.page;
+        }
+    }
+    get allItems() {
+        return this._allItems;
+    }
+    /** The ID of the current sort within the sortOptions. */
+    get sort() {
+        return this._sort;
+    }
+    set sort(sortId) {
+        const option = this._sortOptions.find(o => o.id === sortId);
+        if (!option) {
+            return;
+        }
+        this._sort = sortId;
+        this._allItems = option.sort(this._allItems);
+        this._filteredItems = option.sort(this._filteredItems);
+        this.page = 0;
+    }
+    /** The direction of the current sort when using an option created from addToggleSortOption */
+    get sortDirection() {
+        if (!this.sort) {
+            return undefined;
+        }
+        const [, direction] = this.sort.split('-');
+        return direction;
+    }
+    get sortOptions() {
+        return this._sortOptions;
+    }
+    get limit() {
+        return this._limit;
+    }
+    set limit(value) {
+        if (value >= 0) {
+            this._limit = value;
+            this.page = 0;
+        }
+    }
+    get limitOptions() {
+        return this._limitOptions;
+    }
+    get totalPages() {
+        return this._pageResult.totalPages;
+    }
+    /** The zero-based page index. */
+    get page() {
+        return this._page;
+    }
+    /** The zero-based page index. */
+    set page(value) {
+        if (value >= 0) {
+            this._page = Math.min(value, this._pageResult.lastPage);
+            this._pageResult = this.createPageResult();
+        }
+    }
+    get pageItems() {
+        return this._pageResult.items;
+    }
+    get totalItems() {
+        return this._pageResult.total;
+    }
+    get minItemIndex() {
+        return this._pageResult.minPageItemIndex;
+    }
+    get maxItemIndex() {
+        return this._pageResult.maxPageItemIndex;
+    }
+    get hasNext() {
+        return this._pageResult.hasNext;
+    }
+    get hasPrevious() {
+        return this._pageResult.hasPrevious;
+    }
+    /**
+     * Adds both asc and des sort options
+     *
+     * @param propPath Prop name or path ('resource.title').
+     * @param name Name to display or asc Name and desc Name.
+     */
+    addToggleSortOption(propPath, name) {
+        if (!this._sortOptions) {
+            this._sortOptions = [];
+        }
+        const sort = (item) => {
+            const value = lodash.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) => lodash.orderBy(items, sort, 'asc') });
+        this._sortOptions.push({ id: `${propPath}-desc`, name: descName, sort: (items) => lodash.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;
+    }
+}
+
+/** @jsx jsx */
+const Checkbox = (props) => {
+    const selected = props.checkedIcon || 'selected';
+    const unselected = props.uncheckedIcon || 'unselected';
+    const theme = useThemeSafely();
+    const checkboxStyles = react.css `
+		display: inline-block;
+		${!props.disabled && !props.readonly && `
+			&:hover {
+				filter: ${theme.controls.hoverBrightness};
+			}
+		`}
+	`;
+    const labelStyles = react.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.
+    const nativeCheckboxStyles = react.css `
+		margin: 0;
+		padding: 0;
+		width: 0;
+
+		${!props.readonly && `
+			&:focus + .checkboxIcon {
+				box-shadow: ${theme.controls.focusOutlineShadow};
+				border-radius: 100%;
+			}
+		`}
+	`;
+    const iconStyles = react.css `
+		${!!props.label && `
+			margin-right: 0.5rem;
+		`}
+		${props.disabled && `
+			background-color: ${theme.colors.disabled};
+			border-radius: 100%;
+			cursor: not-allowed;
+		`}
+		${props.readonly && `
+			cursor: default;
+		`}
+	`;
+    return (react.jsx("span", { css: checkboxStyles, className: mergeClassNames('checkbox', props.className) },
+        react.jsx("label", { css: labelStyles },
+            react.jsx("input", { tabIndex: props.readonly ? -1 : undefined, disabled: props.disabled, css: nativeCheckboxStyles, type: "checkbox", checked: props.checked, onChange: e => {
+                    if (props.readonly) {
+                        e.preventDefault();
+                        return;
+                    }
+                    return props.onChange(e.currentTarget.checked);
+                } }),
+            react.jsx(Icon, { css: iconStyles, className: "checkboxIcon", id: props.checked ? selected : unselected }),
+            props.label,
+            props.children)));
+};
+
+/** @jsx jsx */
+const SHOW_TIME_MS = 250;
+const Backdrop = (props) => {
+    const backdropId = React__namespace.useRef('Backdrop' + nanoid.nanoid());
+    const theme = useThemeSafely();
+    const backdropStyles = react.css `
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: ${theme.colors.backdrop};
+		transition: opacity 0.25s ease-in-out;
+		visibility: hidden;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	`;
+    const showStyles = css.css `
+		z-index: ${theme.zIndexes.backdrop} !important;
+		opacity: 1.0 !important;
+		label:${backdropId.current};
+	`;
+    const bodyStyles = css.css `
+		overflow: hidden !important;
+		label:${backdropId.current};
+	`;
+    const bodyResponsiveStyles = css.css `
+		label:${backdropId.current};
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: auto !important;
+		}
+	`;
+    const bodyReverseResponsiveStyles = css.css `
+		${bodyStyles}
+		overflow: auto !important;
+		@media(min-width:${theme.breakpoints.desktop}) {
+			overflow: hidden !important;
+		}
+	`;
+    const styles = react.css `
+		${backdropStyles}
+		${props.onClick && `
+			cursor: pointer;
+		`}
+		${props.transparent && `
+			background-color: transparent;
+			transition: none;
+		`}
+		${props.children && `
+			display: flex;
+			justify-content:center;
+			align-items: center;
+		`}
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: none;
+			}
+		`}
+		${props.reverseResponsive && `
+			display: none;
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: flex;
+			}
+		`}
+	`;
+    const backdrop = React__namespace.useRef(null);
+    const hideTimeoutId = React__namespace.useRef();
+    React__namespace.useEffect(() => {
+        if (backdrop && backdrop.current) {
+            if (props.show && backdrop.current.style.visibility !== 'visible') {
+                //TB: bug here.  if you call show when the timer is in the process of ticking to hide,
+                // this clear timeout won't be hit
+                // you can add move the line above, but you would have to re-add the show styles
+                // which already have been cleared below
+                // cancel a current hide timeout if it exists.  this happens when we show a waiting indicator after another one is in the process of 
+                // transitioning to close.
+                if (hideTimeoutId.current) {
+                    clearTimeout(hideTimeoutId.current);
+                    hideTimeoutId.current = undefined;
+                }
+                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);
+                hideTimeoutId.current = setTimeout(() => {
+                    //TB: this will hide prior to the animation callback being hit.  why?  does it matter?
+                    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);
+                            }
+                        }
+                    }
+                }, SHOW_TIME_MS);
+            }
+        }
+        return () => {
+            if (backdrop && backdrop.current && !props.allowScroll) {
+                document.body.classList.remove(bodyStyles);
+            }
+        };
+    }, [props.show]);
+    return (react.jsx("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, css: styles, className: mergeClassNames('backdrop', props.className) }, props.children));
+};
+
+const TabLocker = (props) => {
+    const tabLocker = React__namespace.useRef(null);
+    return (React__namespace.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));
+};
+
+/** @jsx jsx */
+const Modal = (props) => {
+    var _a, _b;
+    const hasHeader = props.closeButton || props.heading;
+    const theme = useThemeSafely();
+    const contentStyles = react.css `
+		z-index: ${theme.zIndexes.modal};
+		cursor: default;
+		margin: 1rem;
+		padding: 1rem;
+		background-color: ${theme.colors.modalBg};
+		border: ${theme.controls.border};
+		box-shadow: ${theme.controls.boxShadow};
+		max-width: ${(_a = props.maxWidth) !== null && _a !== void 0 ? _a : theme.breakpoints.tablet};
+		min-width: ${(_b = props.minWidth) !== null && _b !== void 0 ? _b : undefined};
+		opacity: 0;
+		font-size: ${theme.fonts.size};
+		font-family: ${theme.fonts.family};
+		font-weight: normal;
+		&:focus {
+            outline: none;
+        }
+		${props.noBackground && `
+			background-color: transparent;
+			border: none;
+			box-shadow: none;
+		`}
+		${hasHeader && `
+			padding: 0;
+			min-width: 250px;
+		`}
+		${props.show && `
+			opacity: 1;
+		`}
+	`;
+    const headerStyles = react.css `
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: ${theme.colors.header};
+		padding: 1rem;
+		color: ${theme.colors.headerFont};
+	`;
+    const contentRef = React__namespace.useRef(null);
+    const backdropStyles = props.scrollable && react.css `
+		height: 100%;
+		width:100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		display: flex;
+		justify-content: center;
+		align-items:flex-start;
+		padding-top:2rem;
+	`;
+    React__namespace.useLayoutEffect(() => {
+        var _a;
+        if (props.show === true) {
+            const focusSelector = (_a = props.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();
+            });
+        }
+    }, [props.show]);
+    return (react.jsx(Backdrop, { show: props.show, css: backdropStyles, onClick: props.close },
+        react.jsx("div", { id: props.id, tabIndex: -1, ref: contentRef, css: contentStyles, className: mergeClassNames('modal', props.className) },
+            react.jsx(TabLocker, null,
+                hasHeader && (
+                // Marker class.  Do not remove.
+                react.jsx("header", { onClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), css: headerStyles, className: "modalHeader" },
+                    props.heading ? react.jsx(Text, { css: {
+                            margin: 0,
+                            flexGrow: 1
+                        }, tag: "h1", bold: true }, props.heading) : react.jsx("span", null),
+                    props.closeButton && props.close ? react.jsx(Button, { css: {
+                            color: theme.colors.headerFont,
+                            marginLeft: '1rem',
+                            backgroundColor: 'transparent'
+                        }, variant: "icon", onClick: props.close, 
+                        // Marker class.  Do not remove.
+                        className: "modalCloseButton" },
+                        react.jsx(Icon, { id: "close" })) : react.jsx("span", null))),
+                react.jsx("div", { onClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), css: {
+                        padding: hasHeader ? '1rem' : undefined,
+                    } }, props.children)))));
+};
+
+/** @jsx jsx */
+const ConfirmModal = (props) => {
+    const theme = useThemeSafely();
+    const modalStyle = react.css `
+		${props.variant === 'omg' && `
+			.modalHeader {
+				background-color:${theme.colors.omg};
+				color:${theme.colors.omgFont};
+			}
+		`}
+	`;
+    return (react.jsx(Modal, { css: modalStyle, className: mergeClassNames('confirmModal', props.className), heading: props.header, closeButton: true, show: props.show, close: props.onCancel },
+        react.jsx(Text, { align: "center" }, props.text),
+        react.jsx("div", { css: { textAlign: 'center' } },
+            react.jsx(Button, { css: { margin: '0 0.5rem' }, enforceMinWidth: true, variant: props.variant === 'omg' ? "omg" : 'primary2', onClick: props.onConfirm }, props.confirmText || 'OK'),
+            react.jsx(Button, { css: { margin: '0 0.5rem' }, enforceMinWidth: true, onClick: props.onCancel }, props.cancelText || 'Cancel'))));
+};
+
+/** @jsx jsx */
+const Divider = (props) => {
+    const theme = useThemeSafely();
+    return (react.jsx("hr", { className: "divider", css: {
+            margin: theme.controls.dividerMargin,
+            border: theme.controls.dividerBorder
+        } }));
+};
+
+/** @jsx jsx */
+const ErrorModal = (props) => {
+    const { message } = props, rest = __rest(props, ["message"]);
+    const theme = useThemeSafely();
+    const modalStyles = react.css `
+		.modalHeader {
+			background-color: ${theme.colors.omg};
+			color:  ${theme.colors.omgFont};
+		}
+		.modalCloseButton {
+			color:  ${theme.colors.omgFont};
+		}
+	`;
+    return (react.jsx(Modal, Object.assign({ css: modalStyles, className: "errorModal", heading: "Error", closeButton: true }, rest),
+        react.jsx(Text, { align: "center" }, message)));
+};
+
+/** @jsx jsx */
+const InfoPanel = (props) => {
+    const theme = useThemeSafely();
+    const styles = react.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.jsx(Text, { style: props.style, align: "center", css: styles, className: mergeClassNames('infoPanel', 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 lodash.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;
+    }
+}
+
+/** @jsx jsx */
+/** Basic implementation here for later abstraction. */
+const FilePicker = (props) => {
+    var _a, _b, _c, _d;
+    const input = React__namespace.useRef(null);
+    const [fileList, setFileList] = React__namespace.useState(undefined);
+    const totalFileSize = (_a = fileList === null || fileList === void 0 ? void 0 : fileList.totalBytes) !== null && _a !== void 0 ? _a : 0;
+    const theme = useThemeSafely();
+    let filesDisplay = '';
+    if (!(fileList === null || fileList === void 0 ? void 0 : fileList.length)) {
+        filesDisplay = `No file${props.multiple ? 's' : ''} chosen.`;
+    }
+    else {
+        filesDisplay = `${fileList.length.toLocaleString()} file${fileList.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${fileList.files.map(f => f.name).join(', ')}`;
+    }
+    const width = '10rem';
+    const nativeInputStyles = react.css `
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		border: 1px solid black;
+		cursor: pointer;
+		width:${width};
+		opacity: 0;
+	`;
+    const buttonText = (_b = props.buttonText) !== null && _b !== void 0 ? _b : `Choose File${props.multiple ? 's' : ''}`;
+    const clearFiles = () => {
+        if (input.current) {
+            input.current.value = '';
+        }
+        setFileList(undefined);
+    };
+    (_c = props.__passClearFilesHandle) === null || _c === void 0 ? void 0 : _c.call(props, clearFiles);
+    return (react.jsx("span", { css: { display: 'inline-block' }, className: "fileUploader" },
+        react.jsx("div", { css: {
+                position: 'relative',
+                width
+            } },
+            react.jsx(Button, { block: true, variant: "secondary", type: "button" }, buttonText),
+            react.jsx("input", { ref: input, css: nativeInputStyles, type: "file", multiple: props.multiple, accept: props.accept, onChange: e => {
+                    var _a;
+                    try {
+                        if (!e.target.files) {
+                            setFileList(undefined);
+                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
+                            return;
+                        }
+                        const fileListPlus = new FileListPlus(e.target.files, {
+                            accept: props.accept,
+                            multiple: props.multiple,
+                            maxBytes: props.maxBytes
+                        });
+                        if (props.onChange) {
+                            if (fileListPlus.hasErrors) {
+                                props.onChange(undefined);
+                                setFileList(fileListPlus);
+                            }
+                            else {
+                                const removeFiles = props.onChange(fileListPlus.raw);
+                                if (removeFiles) {
+                                    setFileList(undefined);
+                                }
+                                else {
+                                    setFileList(fileListPlus);
+                                }
+                            }
+                        }
+                        else {
+                            setFileList(fileListPlus);
+                        }
+                    }
+                    catch (err) {
+                        // tslint:disable-next-line
+                        console.error(err);
+                        setFileList(undefined);
+                    }
+                } })),
+        react.jsx(Text, null,
+            filesDisplay,
+            !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && (react.jsx(Button, { onClick: () => {
+                    var _a;
+                    clearFiles();
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
+                }, css: { marginLeft: '1rem', color: theme.colors.negative }, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+        !!(fileList === null || fileList === void 0 ? void 0 : fileList.invalidFiles.length) && react.jsx(InfoPanel, { variant: "error" },
+            "Invalid files: ",
+            fileList.invalidFiles.map(f => f.name).join(', '),
+            "."),
+        (fileList === null || fileList === void 0 ? void 0 : fileList.overMaxBytes) && react.jsx(InfoPanel, { variant: "error" },
+            "Max file size exceeded (",
+            getSizeString((_d = props.maxBytes) !== null && _d !== void 0 ? _d : 0),
+            ").")));
+};
+const bytesInMb = 1048576;
+const bytesInKb = 1024;
+const getSizeString = (size) => {
+    if (size < bytesInKb) {
+        return size.toLocaleString() + ' B';
+    }
+    else if (size < bytesInMb) {
+        return (size / bytesInKb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
+    }
+    else {
+        return (size / bytesInMb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' MB';
+    }
+};
+
+/** @jsx jsx */
+/** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
+const Form = (props) => {
+    const { inline, children, onSubmit } = props, rest = __rest(props, ["inline", "children", "onSubmit"]);
+    const theme = useThemeSafely();
+    return (react.jsx("form", Object.assign({ className: "form", css: {
+            display: 'flex',
+            flexDirection: props.inline ? 'row' : 'column',
+            alignItems: props.inline ? 'flex-end' : 'normal',
+            gap: theme.controls.gap
+        } }, rest, { onSubmit: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (onSubmit) {
+                onSubmit(e);
+            }
+        } }), children));
+};
+const FormFlexRow = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    return (react.jsx("div", { style: props.style, className: mergeClassNames('formFlexRow', props.className), css: {
+            display: 'flex',
+            gap: theme.controls.gap,
+            justifyContent: (_a = props.justifyContent) !== null && _a !== void 0 ? _a : 'normal'
+        } }, props.children));
+};
+const FormColumnRow = (props) => {
+    const theme = useThemeSafely();
+    return (react.jsx("div", { style: props.style, className: mergeClassNames('formColumnRow', props.className), css: {
+            display: 'grid',
+            gap: theme.controls.gap,
+            gridTemplateColumns: `repeat(${props.cols},1fr)`
+        } }, props.children));
+};
+
+/** @jsx jsx */
+const Header = (props) => {
+    const theme = useThemeSafely();
+    const bodyStyles = css.css `
+		padding-top: calc(${theme.layout.headerHeight} + ${theme.layout.headerBodyOffset});
+		label: Header;
+	`;
+    React__namespace.useEffect(() => {
+        document.body.classList.add(bodyStyles);
+        return () => {
+            document.body.classList.remove(bodyStyles);
+        };
+    });
+    const toggleMenu = props.toggleMenu || noop;
+    const headerStyles = react.css `
+		display: flex;
+		gap: ${theme.controls.gap};
+		justify-content: flex-start;
+		align-items: center;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: ${theme.layout.headerHeight};
+		background-color: ${theme.colors.header};
+		box-shadow: ${theme.controls.headerBoxShadow};	
+		color: ${theme.colors.headerFont};
+		padding: 1rem;
+		z-index: ${theme.zIndexes.header};
+		flex-wrap: wrap;
+		.button {
+			color: ${theme.colors.headerFont};
+			background-color:transparent;
+		}
+		${props.inline && `
+			position: static;
+		`}
+		${!!props.rightElements && `
+			justify-content: space-between;
+		`}
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				justify-content: flex-end;
+			}
+		`}
+	`;
+    const headerButtonStyles = !props.noMenu && react.css `
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				display: none;
+			}
+		`}
+	`;
+    const rightElementStyles = props.rightElements && react.css `
+		margin-left: 1rem;
+		display: grid;
+		grid-gap: 0.5rem;
+		grid-auto-flow: column;
+		align-items: center;
+	`;
+    const centerElementsStyles = props.centerOffsetElements && react.css `
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		left: 0;
+		right: 0;
+		margin-top: calc(${theme.layout.headerHeight} * 1.25);
+	`;
+    let title;
+    if (props.title) {
+        if (typeof props.title === 'string') {
+            title = (react.jsx(Text, { 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.jsx("div", { css: headerStyles, className: mergeClassNames('header', props.className) },
+        !props.noMenu && (react.jsx(Button, { variant: "icon", css: headerButtonStyles, onClick: toggleMenu },
+            react.jsx(Icon, { id: "menu" }))),
+        title,
+        props.rightElements && react.jsx("div", { css: rightElementStyles }, props.rightElements),
+        props.centerOffsetElements && (react.jsx("div", { css: centerElementsStyles },
+            react.jsx("div", null, props.centerOffsetElements)))));
+};
+
+/** @jsx jsx */
+const Highlight = (props) => {
+    const theme = useThemeSafely();
+    const highlightStyles = react.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.jsx("span", { className: "highlight", css: highlightStyles, dangerouslySetInnerHTML: { __html: text } }));
+};
+
+/** @jsx jsx */
+const Image = (props) => {
+    return (react.jsx("img", { css: {
+            maxWidth: '100%',
+            maxHeight: '100%',
+        }, alt: props.alt, style: props.style, className: mergeClassNames('image', props.className), src: props.src }));
+};
+
+/** @jsx jsx */
+const Popover = (p) => {
+    var _a;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    return (react.jsx(reactTinyPopover.Popover, { containerClassName: css.css({
+            zIndex: theme.zIndexes.tooltip
+        }), reposition: resposition, isOpen: p.isOpen, positions: ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
+            var _a, _b, _c;
+            return (react.jsx(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
+                react.jsx(TabLocker, null,
+                    react.jsx("div", { css: {
+                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
+                            boxShadow: theme.controls.boxShadow,
+                            backgroundColor: (_c = p.backgroundColor) !== null && _c !== void 0 ? _c : theme.colors.bg,
+                        } }, p.content))));
+        } },
+        react.jsx("span", null, p.parent)));
+};
+
+/** @jsx jsx */
+const InfoTip = (props) => {
+    var _a, _b;
+    const [showTip, setShowTip] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
+    const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
+    const onClick = () => {
+        if (props.onClick) {
+            props.onClick();
+        }
+        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 = react.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.jsx(Button, { css: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
+    if (props.variant === 'modal') {
+        return (react.jsx(React__namespace.Fragment, null,
+            button,
+            react.jsx(Modal, { show: showTip, heading: props.modalHeader, close: closeTip, css: {
+                    whiteSpace: 'normal'
+                }, closeButton: true }, props.content)));
+    }
+    else {
+        return (react.jsx(Popover, { reposition: false, isOpen: showTip, onClickOutside: closeTip, arrorColor: bgColor, border: '', backgroundColor: bgColor, parent: button, content: (react.jsx("div", { css: {
+                    padding: '0.5rem',
+                    fontSize: '0.75rem',
+                    maxWidth: '22rem'
+                }, style: { backgroundColor: bgColor, color: fontColor }, onMouseOut: closeTip }, props.content)) }));
+    }
+};
+
+/** @jsx jsx */
+const 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 = dateFns.format(value, 'MM/dd/yyyy');
+        }
+        else {
+            newValue = value;
+        }
+    }
+    return newValue;
+};
+const Input = (props) => {
+    var _a;
+    const [localValue, setLocalValue] = React__namespace.useState(formatLocalValue(props.value, props.type));
+    const vars = React__namespace.useRef({
+        debouncedOnChange: props.onChange && lodash.debounce((value) => {
+            var _a;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+        }, (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEBOUNCE_MS),
+        focused: false
+    });
+    const trySyncLocalValue = () => {
+        if (vars.current.focused) {
+            return;
+        }
+        if (props.value === localValue) {
+            return;
+        }
+        const newValue = formatLocalValue(props.value, props.type);
+        setLocalValue(newValue);
+    };
+    React__namespace.useEffect(() => {
+        trySyncLocalValue();
+    });
+    const theme = useThemeSafely();
+    const inputStyles = react.css `
+		font-family: ${theme.fonts.family};
+		font-size:  ${theme.fonts.size};
+		width: 100%;
+		border:  ${theme.controls.border};
+		color:  ${theme.colors.font};
+		padding-left: ${theme.controls.padding};
+		padding-right: ${theme.controls.padding};
+		height: ${theme.controls.height};
+		transition: ${theme.controls.transition};
+		&:focus {
+			outline: none;
+			box-shadow: ${theme.controls.focusOutlineShadow};
+		}
+		&:disabled {
+			background-color: ${theme.colors.disabled};
+			cursor: not-allowed;
+		}
+		${props.required && !localValue && `
+			border-color: ${theme.colors.required};
+			&:focus {
+				box-shadow: ${theme.controls.focusOutlineRequiredShadow};
+			}
+		`}
+		${props.round && props.type !== 'textarea' && `
+			border-radius: ${theme.controls.roundRadius};
+			padding-left: calc(${theme.controls.padding} * 2);
+			padding-right: calc(${theme.controls.padding} * 2);
+		`}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+		${props.readOnly && `
+			background-color: transparent;
+			cursor: default;
+			border: none;
+			&:focus {
+				outline: none;
+				box-shadow: none;
+			}
+		`}
+		${props.rightControl && props.type !== 'textarea' && `
+			padding-right: ${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);
+    };
+    if (props.type === 'number') {
+        inputElement = react.jsx("input", { style: props.style, autoComplete: "off", 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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: 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);
+                    if (vars.current.debouncedOnChange) {
+                        vars.current.debouncedOnChange(numValue);
+                    }
+                }
+                else if (!value) {
+                    setLocalValue(value);
+                    if (vars.current.debouncedOnChange) {
+                        vars.current.debouncedOnChange(undefined);
+                    }
+                }
+            } });
+    }
+    else if (props.type === 'date') {
+        inputElement = react.jsx("input", { style: props.style, autoComplete: "off", tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
+                const value = e.target.value;
+                setLocalValue(value);
+                if (vars.current.debouncedOnChange) {
+                    const dateParts = DATE_REGEX.exec(value);
+                    if (!dateParts) {
+                        vars.current.debouncedOnChange(undefined);
+                    }
+                    else {
+                        const year = parseInt(dateParts[3], 10);
+                        const month = parseInt(dateParts[1], 10);
+                        const day = parseInt(dateParts[2], 10);
+                        if (dateFns.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;
+                            }
+                            vars.current.debouncedOnChange(ms);
+                        }
+                        else {
+                            vars.current.debouncedOnChange(undefined);
+                        }
+                    }
+                }
+            } });
+    }
+    else if (props.type === 'textarea') {
+        inputElement = react.jsx("textarea", { style: props.style, rows: props.rows || 10, autoComplete: "off", tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, css: react.css `
+				${inputStyles}
+				max-width: 100%;
+				min-height: ${theme.controls.height};
+				padding-top: 0.75rem;
+				height:auto;
+			`, className: props.inputClassName, placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
+                const value = e.target.value;
+                setLocalValue(value);
+                if (vars.current.debouncedOnChange) {
+                    vars.current.debouncedOnChange(value);
+                }
+            } });
+    }
+    else {
+        // text & password
+        inputElement = react.jsx("input", { style: props.style, autoComplete: "off", tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
+                const value = e.target.value;
+                setLocalValue(value);
+                if (vars.current.debouncedOnChange) {
+                    vars.current.debouncedOnChange(value);
+                }
+            } });
+    }
+    const inputWrapperStyles = react.css `
+		width:100%;
+		${props.rightControl && `
+			position: relative;
+		`}
+	`;
+    const rightControlStyles = props.rightControl && react.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.jsx("div", { css: inputWrapperStyles, className: mergeClassNames('input', props.className) },
+        inputElement,
+        props.rightControl && props.type !== 'textarea' && react.jsx("div", { css: rightControlStyles }, props.rightControl)));
+};
+
+/** @jsx jsx */
+const List = (props) => {
+    const children = props.items ? props.items.map((item, i) => react.jsx(ListItem, { key: i }, item)) : props.children;
+    const theme = useThemeSafely();
+    const listStyles = react.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.jsx("ul", { css: listStyles, className: mergeClassNames('list', props.className) }, children));
+};
+const ListItem = (props) => {
+    const theme = useThemeSafely();
+    const itemStyles = react.css `
+		border-bottom: ${theme.controls.border};
+		&:last-child {
+            border-bottom: none;
+        }
+	`;
+    const contentStyle = react.css `
+		padding: calc(${theme.controls.padding} * 1.5);
+		${props.variant === 'full' && `
+			padding:0;
+			>.button {
+				padding: calc(${theme.controls.padding} * 1.5);
+				width: 100%;
+				border: none;
+			}
+			>.omniLink {
+				padding-left: calc(${theme.controls.padding} * 1.5);
+				padding-right: calc(${theme.controls.padding} * 1.5);
+				width: 100%;
+				line-height: ${theme.controls.height};
+				border: none;
+			}
+			>.button:not(:focus), >.omniLink:not(:focus) {
+				box-shadow: none;
+			}
+			>.omniLink:not(.omniLink--iconBlock){
+				display: block;
+			}
+		`}
+	`;
+    return (react.jsx("li", { css: itemStyles, className: mergeClassNames('listItem', props.className) },
+        react.jsx("div", { css: contentStyle }, props.children)));
+};
+
+/** @jsx jsx */
+const Nav = (props) => {
+    const nav = React__namespace.useRef(null);
+    const theme = useThemeSafely();
+    const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
+    const slideRight = react.keyframes `
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(${totalNavOffset});
+		}
+	`;
+    const slideLeft = react.keyframes `
+		0% {
+			transform: translateX(${totalNavOffset});
+		}
+
+		100% {
+			transform: translateX(0px);
+		}
+	`;
+    const classNavShowing = css.css `
+		animation: ${slideRight} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const classNavNotShowing = css.css `
+		animation: ${slideLeft} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
+    const navStyles = react.css `
+		position: fixed;
+		top: 0;
+		left: calc(${totalNavOffset} * -1);
+		bottom: 0;
+		background-color: ${theme.colors.nav};
+		color: ${theme.colors.navFont};
+		width: ${theme.layout.navWidth};
+		min-width: ${theme.layout.navWidth};
+		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
+		z-index: ${theme.zIndexes.nav};
+		overflow-y: auto;
+		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
+			color: ${theme.colors.navFont};
+		}
+		padding-top:0;
+		${props.responsive && `
+			@media(min-width:${theme.breakpoints.desktop}) {
+				position: relative;
+				left: 0;
+				box-shadow: none;
+				z-index: 1;
+				animation: none !important;
+				margin-right: 1rem;
+				overflow-y: visible;
+				margin-top:-2rem;
+				padding-top: 1rem;
+			}
+		`}
+	`;
+    React__namespace.useLayoutEffect(() => {
+        if (nav && nav.current) {
+            if (props.show) {
+                if (!nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.add(classNavShowing);
+                }
+            }
+            else {
+                if (nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.remove(classNavShowing);
+                    nav.current.classList.add(classNavNotShowing);
+                    setTimeout(() => {
+                        if (nav && nav.current) {
+                            nav.current.classList.remove(classNavNotShowing);
+                        }
+                    }, 250);
+                }
+            }
+        }
+    });
+    return (react.jsx(React__namespace.Fragment, null,
+        react.jsx(Backdrop, { show: props.show, onClick: () => {
+                props.toggle();
+            }, responsive: props.responsive }),
+        react.jsx("nav", { ref: nav, css: navStyles, className: mergeClassNames('nav', props.className) }, props.children)));
+};
+
+/** @jsx jsx */
+const OmniLink = (props) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const linkStyles = react.css `
+		display: inline-block;
+		cursor: pointer;
+		text-decoration: none;
+		color: ${(_a = props.colorOverride) !== null && _a !== void 0 ? _a : theme.colors.link};
+		transition: ${theme.controls.transition};
+		&:hover {
+			filter: ${theme.controls.hoverBrightness};
+			text-decoration: underline;
+		}
+		&:active,
+		&:visited {
+			color: ${(_b = props.colorOverride) !== null && _b !== void 0 ? _b : theme.colors.link};
+		}
+		&:focus {
+			text-decoration: underline;
+			outline: none;
+			color: ${(_c = props.colorOverride) !== null && _c !== void 0 ? _c : theme.colors.link};
+		}
+		${!!props.variant && `
+			padding-left: ${theme.controls.padding};
+			padding-right: ${theme.controls.padding};
+			border: ${theme.controls.border};
+			box-shadow: ${theme.controls.boxShadow};
+			height: ${theme.controls.height};
+			line-height: ${theme.controls.height};
+			font-weight: bold;
+			color: ${theme.colors.font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.font};
+			}
+			&:focus {
+				outline: none;
+				box-shadow: ${theme.controls.focusOutlineShadow};
+				text-decoration: none;
+			}
+			&:active {
+				box-shadow: none;
+			}
+			&:hover {
+				text-decoration: none;
+			}
+		`}
+		${props.variant === 'button' && `
+			text-align: center;
+		`}
+		${props.variant === 'circle' && `
+			text-align: center;
+			width: ${theme.controls.height};
+			border-radius: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			${props.small && `
+				width: ${theme.controls.heightSmall};
+				min-width: ${theme.controls.heightSmall};
+			`}
+		`}
+		${props.variant === 'primary' && `
+			text-align: center;
+			background-color: ${theme.colors.primary};
+			color: ${theme.colors.primaryFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.primaryFont};
+			}
+		`}
+		${props.variant === 'primary2' && `
+			text-align: center;	
+			background-color: ${theme.colors.primary2};
+			color: ${theme.colors.primary2Font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.primary2Font};
+			}
+		`}
+		${props.variant === 'secondary' && `
+			text-align: center;
+			background-color: ${theme.colors.secondary};
+			color: ${theme.colors.secondary2Font};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.secondary2Font};
+			}
+		`}
+		${props.variant === 'positive' && `
+			text-align: center;
+			background-color: ${theme.colors.positive};
+			color: ${theme.colors.positiveFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.positiveFont};
+			}
+		`}
+		${props.variant === 'negative' && `
+			text-align: center;
+			background-color: ${theme.colors.negative};
+			color: ${theme.colors.negativeFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.negativeFont};
+			}
+		`}
+		${props.variant === 'omg' && `
+			text-align: center;
+			background-color: ${theme.colors.omg};
+			color: ${theme.colors.omgFont};
+			&:active,
+			&:focus,
+			&:visited {
+				color: ${theme.colors.omgFont};
+			}
+		`}
+		${props.variant === 'label' && `
+			box-shadow: none;
+			border: none;
+		`}
+		${props.variant === 'icon' && `
+			box-shadow: none;
+			border: none;
+			border-radius: 100%;
+			width: ${theme.controls.height};
+			text-align: center;
+		`}
+		${props.block && `
+			display: block;
+			width:100%;
+		`}
+		${props.iconBlock && `
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		`}
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+		${props.rounded && `
+			border-radius: ${theme.controls.roundedRadius};
+		`}
+		${props.small && `
+			font-size: 0.8rem;
+			height: ${theme.controls.heightSmall};
+			line-height: ${theme.controls.heightSmall};
+		`}
+	`;
+    const className = mergeClassNames('omniLink', props.className);
+    const content = react.jsx(React__namespace.Fragment, null,
+        react.jsx("span", null,
+            props.leftIcon && react.jsx("span", { css: {
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                } }, props.leftIcon),
+            props.children),
+        props.rightIcon && react.jsx("span", { css: {
+                marginLeft: '1rem',
+                verticalAlign: 'middle'
+            } }, props.rightIcon));
+    if (props.noRouter) {
+        return (react.jsx("a", { title: props.title, css: linkStyles, target: props.target, className: className, href: props.href, onClick: props.onClick }, content));
+    }
+    return (react.jsx(reactRouterDom.Link, { title: props.title, css: linkStyles, className: className, onClick: props.onClick, to: props.href }, content));
+};
+
+/** @jsx jsx */
+const ProgressBar = (props) => {
+    const bar = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        const pct = cleanPct(props.pct);
+        if (bar.current) {
+            bar.current.style.width = `${pct}%`;
+        }
+    });
+    const theme = useThemeSafely();
+    const barStyles = react.css `
+		width: 100%;
+		height: 1rem;
+		border: ${theme.controls.border};
+		background-color: ${theme.colors.progressBg};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const fillStyles = react.css `
+		transition: width 0.5s ease-in-out;
+		height: 100%;
+		background-color: ${theme.colors.progressFill};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    return (react.jsx("div", { className: "progressBar" },
+        react.jsx("div", { css: barStyles, className: props.className },
+            react.jsx("div", { ref: bar, css: fillStyles })),
+        props.showPct && react.jsx(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;
+};
+
+/** @jsx jsx */
+const SearchBox = (props) => {
+    const [waiting, onSubmit] = useWaiting(props.onSubmit || (() => Promise.resolve()));
+    const theme = useThemeSafely();
+    const submitButton = (react.jsx(Button, { disabled: waiting, readonly: !props.onSubmit, type: "submit", css: {
+            color: `${theme.colors.font} !important;`,
+            fontSize: '1rem'
+        }, variant: "icon", small: true },
+        react.jsx(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
+    return (react.jsx(Form, { role: "search", className: mergeClassNames('searchBox', props.className), onSubmit: onSubmit },
+        react.jsx(Input, { disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, rounded: props.rounded, onChange: props.onChange, rightControl: submitButton })));
+};
+
+const ToggleButton = (props) => {
+    return (React__namespace.createElement(Button, { type: "button", className: mergeClassNames('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style, onClick: props.onClick }, props.checked ? props.checkedText : props.uncheckedText));
+};
+
+/** @jsx jsx */
+const ToggleButtonGroup = (props) => {
+    const theme = useThemeSafely();
+    const groupStyles = react.css `
+		display: flex;
+		box-shadow: ${theme.controls.boxShadow};
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+	`;
+    const buttonStyles = react.css `
+		flex-grow:1;
+		box-shadow: none;
+		&:nth-of-type(1n+2){
+			margin-left: -1px;
+		}
+		${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.jsx("div", { css: groupStyles, className: mergeClassNames('toggleButtonGroup', props.className) }, props.options.map(o => {
+        const active = o.id === props.value;
+        return react.jsx(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, css: react.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;
+							}
+						`}
+					`, className: active ? o.activeClass : undefined, disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
+                if (active) {
+                    return;
+                }
+                props.onChange(o.id);
+            } }, o.name);
+    })));
+};
+
+/** @jsx jsx */
+const WaitingIndicator = (props) => {
+    return (react.jsx(Modal, { className: "waitingIndicator", show: props.show, noBackground: true },
+        react.jsx("div", { css: {
+                color: 'white',
+                fontSize: '3rem'
+            } },
+            react.jsx(Icon, { id: "waiting", spin: true }))));
+};
+
+/** @jsx jsx */
+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 = react.css({
+        display: 'grid',
+        gridTemplateColumns: `repeat(7, ${cellSize})`,
+    });
+    const cellStyles = react.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 = react.css({
+        borderRight: theme.controls.border
+    });
+    const bottomCellStyles = react.css({
+        borderBottom: theme.controls.border
+    });
+    const nonDayStyles = react.css({
+        backgroundColor: theme.colors.disabled
+    });
+    const clickableStyles = react.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 = dateFns.getDaysInMonth(monthStart);
+    const startDayOfWeek = dateFns.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 && dateFns.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 && dateFns.isBefore(cellDate !== null && cellDate !== void 0 ? cellDate : 0, p.min)) {
+            canInteract = false;
+        }
+        if (p.max && dateFns.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 = react.css(cellStyles, (i + 1) % 7 === 0 && rightCellStyles, i >= bottomRowStartIndex && bottomCellStyles, !canInteract && nonDayStyles, currentDate && cellDate && dateFns.isSameDay(currentDate, cellDate) && { fontWeight: 'bold' }, selectedDate && cellDate && dateFns.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.jsx("button", { type: "button", key: i, css: styles, onClick: onClick }, cellContent)) : (react.jsx("div", { key: i, css: styles }, cellContent));
+        cells.push(cell);
+    }
+    return (react.jsx("div", { id: p.id, className: "calendar" },
+        showTitle && ((_d = p.customTitle) !== null && _d !== void 0 ? _d : react.jsx(Text, { larger: true, align: "center" },
+            dateFns.format(monthStart, 'LLLL'),
+            p.yearInTitle && ` ${p.year}`)),
+        react.jsx("div", { css: calendarStyles },
+            ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => {
+                return (react.jsx(Text, { style: { paddingBottom: '0.25rem' }, key: day, smaller: p.smallHeader, noPad: true, align: "center" }, day));
+            }),
+            cells)));
+};
+
+/** @jsx jsx */
+const getCalendarDate = (date, min, max) => {
+    let calendarDate = date ? new Date(date) : new Date();
+    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
+    if (min && dateFns.isBefore(calendarDate, min)) {
+        calendarDate = new Date(min);
+    }
+    else if (max && dateFns.isAfter(calendarDate, max)) {
+        calendarDate = new Date(max);
+    }
+    return calendarDate;
+};
+const DatePicker = (p) => {
+    const [showCalendar, setShowCalendar] = React__namespace.useState(false);
+    const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(p.value, p.min, p.max));
+    // controls the one-time focus set on show
+    const needsFocus = React__namespace.useRef(false);
+    const popover = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        var _a;
+        setCalendarDate(getCalendarDate((_a = p.value) !== null && _a !== void 0 ? _a : 0, p.min, p.max));
+    }, [p.value]);
+    React__namespace.useLayoutEffect(() => {
+        var _a, _b;
+        if (needsFocus.current) {
+            (_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            needsFocus.current = false;
+        }
+    });
+    return (react.jsx(Popover, { reposition: p.reposition, isOpen: showCalendar, onClickOutside: () => {
+            needsFocus.current = false;
+            setShowCalendar(false);
+        }, parent: (react.jsx(Input, Object.assign({ onFocus: () => {
+                needsFocus.current = false;
+                setShowCalendar(false);
+            }, placeholder: 'MM/DD/YYYY' }, p, { type: "date", rightControl: !p.readOnly ? (react.jsx(Button, { variant: "icon", readonly: p.readOnly, disabled: p.disabled, small: true, style: {
+                    fontSize: '1rem'
+                }, onClick: () => {
+                    needsFocus.current = !showCalendar;
+                    setShowCalendar(!showCalendar);
+                } },
+                react.jsx(Icon, { id: "pickDate" }))) : undefined, onChange: v => {
+                p.onChange(v);
+            } }))), content: (react.jsx("div", { ref: popover, css: {
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                paddingBottom: '1rem',
+            } },
+            react.jsx(Calendar, { onClick: date => {
+                    p.onChange(date.valueOf());
+                    needsFocus.current = false;
+                    setShowCalendar(false);
+                }, customTitle: react.jsx("div", { css: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    } },
+                    react.jsx(Button, { disabled: !!p.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), p.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
+                        react.jsx(Icon, { id: "pagerLeft" })),
+                    react.jsx(Text, { align: "center" },
+                        dateFns.format(calendarDate, 'LLLL'),
+                        " ",
+                        calendarDate.getFullYear()),
+                    react.jsx(Button, { disabled: !!p.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), p.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
+                        react.jsx(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: p.value, cellSize: '2rem', min: p.min, max: p.max }))) }));
+};
+
+/** @jsx jsx */
+const TabHeader = (p) => {
+    var _a;
+    const [tabIndex, setTabIndex] = React__namespace.useState(0);
+    const theme = useThemeSafely();
+    const variant = (_a = p.variant) !== null && _a !== void 0 ? _a : 'tab';
+    const menuStyles = react.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.jsx("div", { className: "tabHeader" },
+        react.jsx("ul", { css: menuStyles }, p.tabs.map((tab, index) => {
+            var _a, _b;
+            const active = index === tabIndex;
+            let tabStyles;
+            let buttonStyles;
+            let buttonVariant;
+            if (variant === 'tab') {
+                tabStyles = react.css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    backgroundColor: theme.colors.bg,
+                    zIndex: 1,
+                }, active && {
+                    border: theme.controls.border,
+                    borderBottom: 'none',
+                    zIndex: 3,
+                }, active && p.rounded && {
+                    borderRadius: p.rounded && theme.controls.roundedRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0
+                });
+                buttonVariant = 'link';
+                buttonStyles = react.css({
+                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
+                    overflow: 'hidden'
+                });
+            }
+            else {
+                buttonVariant = active ? 'primary' : undefined;
+                buttonStyles = react.css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
+                    overflow: 'hidden',
+                });
+            }
+            return (react.jsx("li", { key: index, css: tabStyles },
+                react.jsx(Button, { css: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, rounded: p.rounded && variant === 'button', onClick: () => {
+                        setTabIndex(index);
+                        if (p.onTabChanged) {
+                            p.onTabChanged(index);
+                        }
+                    } }, tab.name)));
+        })),
+        variant === 'tab' && (react.jsx("div", { css: {
+                borderBottom: theme.controls.border,
+                marginTop: `calc(${theme.controls.borderWidth} * -1)`,
+                zIndex: 2,
+                position: 'relative'
+            } }))));
+};
+
+const GlobalStyles = (p) => {
+    const theme = useThemeSafely();
+    return (React__namespace.createElement(react.Global, { styles: react.css({
+            '*': {
+                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
+            }
+        }) }));
+};
+
+/** @jsx jsx */
+const DEFAULT_FAILURE_MESSAGE = 'Upload failed.';
+const FileUploader = (p) => {
+    var _a;
+    const [message, setMessage] = React.useState(undefined);
+    const [canUpload, setCanUpload] = React.useState(false);
+    const [uploading, setUploading] = React.useState(false);
+    const [files, setFiles] = React.useState(undefined);
+    const [fullFailureMessage, setFullFailureMessage] = React.useState(undefined);
+    const clearFilePickerHandler = React.useRef(() => {
+        // noop
+    });
+    const { buttonText, successMessage, failureMessage, buttonWidth, buttonVariant, onChange } = p, filePickerProps = __rest(p, ["buttonText", "successMessage", "failureMessage", "buttonWidth", "buttonVariant", "onChange"]);
+    const onClear = () => {
+        var _a;
+        (_a = clearFilePickerHandler.current) === null || _a === void 0 ? void 0 : _a.call(clearFilePickerHandler);
+        setMessage(undefined);
+    };
+    return (react.jsx(Form, { onSubmit: () => {
+            if (!files) {
+                return;
+            }
+            setUploading(true);
+            p.onUpload(files).then(() => {
+                setMessage('success');
+                if (p.clearOnUpload) {
+                    clearFilePickerHandler.current();
+                }
+            }).catch(err => {
+                setMessage('failure');
+                setFullFailureMessage(`${failureMessage !== null && failureMessage !== void 0 ? failureMessage : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
+            }).finally(() => {
+                setUploading(false);
+                setCanUpload(false);
+            });
+        } },
+        react.jsx(FilePicker, Object.assign({}, filePickerProps, { onChange: filesFromPicker => {
+                setFiles(filesFromPicker);
+                setCanUpload(!!(filesFromPicker === null || filesFromPicker === void 0 ? void 0 : filesFromPicker.length));
+                setMessage(undefined);
+                setFullFailureMessage(undefined);
+                if (onChange) {
+                    return onChange(filesFromPicker);
+                }
+                return false;
+            }, __passClearFilesHandle: func => clearFilePickerHandler.current = func })),
+        react.jsx("span", null,
+            react.jsx(Button, { css: { width: (_a = p.buttonWidth) !== null && _a !== void 0 ? _a : '10rem' }, disabled: !canUpload, waiting: uploading, type: "submit", variant: buttonVariant !== null && buttonVariant !== void 0 ? buttonVariant : 'primary', rightIcon: react.jsx(Icon, { id: "save" }) }, buttonText !== null && buttonText !== void 0 ? buttonText : 'Upload')),
+        message === 'success' && (react.jsx(UploadInfoPanel, { variant: "positive", message: successMessage !== null && successMessage !== void 0 ? successMessage : 'Upload successful.', onClear: onClear })),
+        message === 'failure' && (react.jsx(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: onClear }))));
+};
+const UploadInfoPanel = (p) => {
+    useThemeSafely();
+    return (react.jsx(InfoPanel, { variant: p.variant },
+        p.message,
+        react.jsx(Button, { block: true, className: css.css({
+                color: 'inherit',
+                marginTop: '1rem'
+            }), onClick: p.onClear, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+};
+
+const CopyButton = (props) => {
+    const [copied, setCopied] = React__namespace.useState(false);
+    return (React__namespace.createElement(Button, { title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: () => {
+            setCopied(false);
+        }, onClick: e => {
+            const button = e.currentTarget;
+            let copySuccess = false;
+            try {
+                const text = document.querySelector(props.selector);
+                text.select();
+                copySuccess = document.execCommand('copy');
+                // the input gets focus on select.  bring it back.
+                button.focus();
+            }
+            catch (err) {
+                // You done wrong. 
+            }
+            setCopied(copySuccess);
+        } },
+        React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
+};
+
+const TogglePasswordInput = (p) => {
+    const [show, setShow] = React__namespace.useState(false);
+    return (React__namespace.createElement(Input, Object.assign({}, p, { type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { variant: "icon", onClick: () => {
+                setShow(previous => !previous);
+            } },
+            React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
+};
+
+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 && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
+    return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+            React__namespace.createElement(Picker, { type: "select", value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { type: "select", value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+                    var _a;
+                    (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
+                } }))) : undefined, page: d => {
+            p.onPage(d);
+        } })));
+};
+
+/** @jsx jsx */
+const Slider = (p) => {
+    const theme = useThemeSafely();
+    const currentValue = React.useRef(p.value);
+    const height = p.showValue ? `calc(${theme.controls.height} + 1.5rem)` : theme.controls.height;
+    return (react.jsx("div", { css: {
+            width: '100%',
+            height,
+        } },
+        react.jsx(ReactSlider__default['default'], { 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) => {
+                return react.jsx("div", Object.assign({ css: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: theme.controls.height
+                    } }, props),
+                    react.jsx("div", { css: {
+                            backgroundColor: theme.colors.secondary,
+                            height: `calc(${theme.controls.height} / 4)`,
+                            borderRadius: theme.controls.roundRadius,
+                            width: '100%'
+                        } }));
+            }, renderThumb: (props, state) => {
+                return (react.jsx("div", Object.assign({ css: {
+                        width: theme.controls.height,
+                        height: theme.controls.height,
+                        borderRadius: theme.controls.roundRadius,
+                        backgroundColor: 'white',
+                        border: theme.controls.border,
+                        cursor: 'grab',
+                        boxShadow: theme.controls.boxShadow,
+                        transition: theme.controls.transition,
+                        '&:focus': {
+                            outline: 'none',
+                            boxShadow: theme.controls.focusOutlineShadow
+                        },
+                        '&:active': {
+                            boxShadow: 'none',
+                            cursor: 'grabbing'
+                        },
+                        '&:hover': {
+                            filter: theme.controls.hoverBrightness
+                        }
+                    } }, props), p.showValue && react.jsx(HandleText, { value: currentValue.current, index: state.index, renderValue: p.renderValue })));
+            } })));
+};
+const HandleText = (p) => {
+    var _a, _b, _c;
+    const theme = useThemeSafely();
+    const value = Array.isArray(p.value) ? p.value[(_a = p.index) !== null && _a !== void 0 ? _a : 0] : p.value;
+    const displayValue = (_c = (_b = p.renderValue) === null || _b === void 0 ? void 0 : _b.call(p, value)) !== null && _c !== void 0 ? _c : value;
+    return (react.jsx(Text, { css: {
+            //width: theme.controls.height,
+            width: `calc(${theme.controls.height} * 2)`,
+            left: `calc(${theme.controls.height} / 2 * -1)`,
+            bottom: '-1.5rem',
+            position: 'absolute',
+            overflow: 'hidden'
+        }, tag: "div", align: "center" }, displayValue));
+};
+
+exports.Backdrop = Backdrop;
+exports.BoundMemoryPager = BoundMemoryPager;
+exports.BoundStaticPager = BoundStaticPager;
+exports.Button = Button;
+exports.Calendar = Calendar;
+exports.Checkbox = Checkbox;
+exports.ConfirmModal = ConfirmModal;
+exports.CopyButton = CopyButton;
+exports.DatePicker = DatePicker;
+exports.Divider = Divider;
+exports.ErrorModal = ErrorModal;
+exports.FilePicker = FilePicker;
+exports.FileUploader = FileUploader;
+exports.Form = Form;
+exports.FormColumnRow = FormColumnRow;
+exports.FormFlexRow = FormFlexRow;
+exports.GlobalStyles = GlobalStyles;
+exports.Header = Header;
+exports.Highlight = Highlight;
+exports.ICONS = ICONS;
+exports.Icon = Icon;
+exports.Image = Image;
+exports.InfoPanel = InfoPanel;
+exports.InfoTip = InfoTip;
+exports.Input = Input;
+exports.ItemPager = ItemPager;
+exports.Label = Label;
+exports.List = List;
+exports.ListItem = ListItem;
+exports.Modal = Modal;
+exports.Nav = Nav;
+exports.OmniLink = OmniLink;
+exports.PagedResult = PagedResult;
+exports.Pager = Pager;
+exports.Picker = Picker;
+exports.Popover = Popover;
+exports.ProgressBar = ProgressBar;
+exports.SearchBox = SearchBox;
+exports.Slider = Slider;
+exports.TabHeader = TabHeader;
+exports.TabLocker = TabLocker;
+exports.Table = Table;
+exports.Td = Td;
+exports.TdCurrency = TdCurrency;
+exports.TdNumber = TdNumber;
+exports.Text = Text;
+exports.Th = Th;
+exports.ThSort = ThSort;
+exports.ToggleButton = ToggleButton;
+exports.ToggleButtonGroup = ToggleButtonGroup;
+exports.TogglePasswordInput = TogglePasswordInput;
+exports.Tr = Tr;
+exports.WaitingIndicator = WaitingIndicator;
+exports.calcDynamicThemeProps = calcDynamicThemeProps;
+exports.defaultTheme = defaultTheme;
+exports.getCurrencyDisplay = getCurrencyDisplay;
+exports.mergeClassNames = mergeClassNames;
+exports.useThemeSafely = useThemeSafely;
+//# sourceMappingURL=index.js.map