@mackin.com/styleguide 11.0.11 → 11.1.0

package/index.js

@@ -1260,6 +1260,128 @@ const styles = {
     }),
 };
 
+const defaultMinChars = 3;
+class AutocompleteController {
+    constructor(getOptions, config) {
+        var _a;
+        this._value = undefined;
+        this._options = [];
+        this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
+        if (config === null || config === void 0 ? void 0 : config.debounceMs) {
+            this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
+        }
+        else {
+            this.getOptions = getOptions;
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get options() {
+        return this._options;
+    }
+    async onChange(newValue) {
+        // don't make getOptions calls if the value hasn't changed.
+        if (newValue === this.value) {
+            return;
+        }
+        // nullish should not make the getOptions call and instead clear everything.
+        if (!newValue) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        // sub min chars should clear everything and not attempt the getOptions call.
+        if (newValue.length < this._minChars) {
+            this._value = newValue;
+            this._options = [];
+            return;
+        }
+        try {
+            this._value = newValue;
+            this._options = (await this.getOptions(newValue));
+        }
+        catch (err) {
+            // this method will throw errors on debounce rejections. that is to be expected.
+            // for actual getOptions exceptions, the owner of that function will need to handle errors.
+        }
+    }
+    onPick(newValue) {
+        this._value = newValue;
+        this._options = [];
+    }
+}
+const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
+    let timer;
+    let onCancel;
+    return (value) => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        if (onCancel) {
+            onCancel('Promise cancelled due to in-progress debounce call.');
+            onCancel = undefined;
+        }
+        return new Promise((res, rej) => {
+            onCancel = rej;
+            timer = setTimeout(() => {
+                originalFunction(value)
+                    .then(values => {
+                    res(values);
+                })
+                    .catch(err => {
+                    rej(err);
+                })
+                    .finally(() => {
+                    clearTimeout(timer);
+                });
+            }, trailingTimeoutMs);
+        });
+    };
+};
+
+/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
+class AutocompleteEntityController {
+    constructor(getOptions, config) {
+        this._options = [];
+        const getStringOptions = async (value) => {
+            this._options = await getOptions(value);
+            return this._options.map(o => o.name);
+        };
+        this._ctrl = new AutocompleteController(getStringOptions, config);
+    }
+    get entity() {
+        return this._pickedEntity;
+    }
+    get entities() {
+        return this._options;
+    }
+    get value() {
+        return this._ctrl.value;
+    }
+    get options() {
+        return this._options.map(o => o.name);
+    }
+    async onChange(newValue) {
+        const clearEntity = newValue !== this._ctrl.value;
+        await this._ctrl.onChange(newValue);
+        if (clearEntity) {
+            this._pickedEntity = undefined;
+        }
+        this.trySyncCtrlOptions();
+    }
+    onPick(newValue) {
+        this._ctrl.onPick(newValue);
+        this._pickedEntity = this._options.find(o => o.name === this._ctrl.value);
+        this.trySyncCtrlOptions();
+    }
+    trySyncCtrlOptions() {
+        if (!this._ctrl.options.length) {
+            this._options = [];
+        }
+    }
+}
+
 /** Returns a UID.  Use this instead of a direct call to a library. */
 function createUid() {
     return lodash.uniqueId();
@@ -1632,55 +1754,37 @@ const Checkbox = (props) => {
             finalCheckedColor = checkedColor;
         }
     }
-    const checkboxStyles = css.css `
-		display: inline-block;
-		${!props.disabled && !readOnly && `
-			&:hover {
-				filter: ${theme.controls.hoverBrightness};
-			}
-		`}
-	`;
-    const labelStyles = css.css `
-		cursor: pointer;
-		user-select: none;
-		display: flex;
-		align-items: center;
-		${props.disabled && `
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-	`;
-    // had to reference a marker class ('checkboxIcon') here for the sibling selector to work.
-    // opacity: 0 required for firefox.  ignores the width of 0.
-    const nativeCheckboxStyles = css.css `
-		margin: 0;
-		padding: 0;
-		width: 0;
-		opacity: 0; 
-
-		${!readOnly && `
-			&:focus + .checkboxIcon {
-				box-shadow: ${theme.controls.focusOutlineShadow};
-			}
-		`}
-	`;
-    const iconStyles = css.css `
-		${!!label && !hideLabel && `
-			margin-right: 0.5rem;
-		`}
-		${props.disabled && `
-			background-color: ${theme.colors.disabled};
-			cursor: not-allowed;
-		`}
-		${readOnly && `
-			cursor: default;
-		`}
-		${props.checked && `
-			color: ${finalCheckedColor}
-		`}
-	`;
+    const checkboxStyles = css.css({
+        display: 'inline-block',
+        '&:hover': (!props.disabled && !readOnly) ? {
+            filter: theme.controls.hoverBrightness
+        } : undefined
+    });
+    const cursor = props.disabled ? 'not-allowed' : props.readOnly ? 'default' : 'pointer';
+    const labelStyles = css.css({
+        cursor,
+        userSelect: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+    });
+    const nativeCheckboxStyles = css.css({
+        margin: 0,
+        padding: 0,
+        inset: 0,
+        position: 'absolute',
+        opacity: 0,
+        cursor,
+        '&:focus + .checkboxIcon': !readOnly ? {
+            boxShadow: theme.controls.focusOutlineShadow
+        } : undefined
+    });
+    const iconStyles = css.css({
+        marginRight: (!!label && !hideLabel) ? '0.5rem' : undefined,
+        backgroundColor: props.disabled ? theme.colors.disabled : undefined,
+        cursor,
+        color: props.checked ? finalCheckedColor : uncheckedIcon
+    });
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
             React__namespace.createElement("input", Object.assign({}, inputProps, { "aria-label": hideLabel ? label : undefined, tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
@@ -2996,132 +3100,30 @@ const Label = (props) => {
     return (React__namespace.createElement("label", Object.assign({}, labelProps, { htmlFor: htmlFor, className: css.cx('label', labelStyles, outerClass) }), content));
 };
 
-const Nav = (props) => {
-    var _a, _b, _c, _d;
-    const nav = React__namespace.useRef(null);
-    const theme = useThemeSafely();
-    const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
-    const totalNavOffset = `calc(${navWidth} + 20px)`;
-    const backdrop = useBackdropContext();
-    const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
-    const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
-    const slideRight = css.keyframes `
-		0% {
-			transform: translateX(0);
-		}
-
-		100% {
-			transform: translateX(${totalNavOffset});
-		}
-	`;
-    const slideLeft = css.keyframes `
-		0% {
-			transform: translateX(${totalNavOffset});
-		}
-
-		100% {
-			transform: translateX(0px);
-		}
-	`;
-    const classNavShowing = css.css `
-		animation: ${slideRight} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	`;
-    const classNavNotShowing = css.css `
-		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	`;
-    const zIndex = theme.zIndexes.nav;
-    // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
-    const navStyles = css.css `
-		label: Nav;
-		position: fixed;
-		top: 0;
-		left: calc(${totalNavOffset} * -1);
-		bottom: 0;
-		background-color: ${theme.colors.nav};
-		color: ${theme.colors.navFont};
-		width: ${navWidth};
-		min-width: ${navWidth};
-		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
-		z-index: ${zIndex};
-		overflow-y: auto;
-		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
-			color: ${theme.colors.navFont};
-		}
-		padding-top:0;
-	`;
-    React__namespace.useEffect(() => {
-        if (!backdrop.showing) {
-            props.toggle(false);
-        }
-    }, [backdrop.showing]);
-    useBooleanChanged((current, previous) => {
-        var _a;
-        log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
-        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
-        if (!props.show && props.onCloseFocusId) {
-            const focusId = props.onCloseFocusId;
-            setTimeout(() => {
-                var _a;
-                (_a = document.getElementById(focusId)) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, props.show);
-    React__namespace.useLayoutEffect(() => {
-        if (nav && nav.current) {
-            if (props.show) {
-                if (!nav.current.classList.contains(classNavShowing)) {
-                    nav.current.classList.add(classNavShowing);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = document.getElementById(props.focusContentId)) === null || _a === void 0 ? void 0 : _a.focus();
-                    }, slideMs + 1);
-                }
-            }
-            else {
-                if (nav.current.classList.contains(classNavShowing)) {
-                    nav.current.classList.remove(classNavShowing);
-                    nav.current.classList.add(classNavNotShowing);
-                    setTimeout(() => {
-                        if (nav && nav.current) {
-                            nav.current.classList.remove(classNavNotShowing);
-                        }
-                    }, slideMs);
-                }
-            }
-        }
-    });
-    return (React__namespace.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: css.cx('nav', navStyles, props.className), onKeyDown: e => {
-            if (e.code === 'Escape') {
-                props.toggle(false);
-            }
-        } },
-        React__namespace.createElement(TabLocker, { className: css.css({ height: '100%' }) }, props.children)));
-};
-
-const LinkContent = (props) => {
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("span", null,
-            props.leftIcon && React__namespace.createElement("span", { className: css.css({
-                    label: 'LinkLeftIcon',
-                    marginRight: '1rem',
-                    display: 'inline-block',
-                    minWidth: '1.5rem',
-                    verticalAlign: 'middle'
-                }) }, props.leftIcon),
-            props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children),
-        props.rightIcon && React__namespace.createElement("span", { className: css.css({
-                label: 'LinkRightIcon',
-                marginLeft: '1rem',
-                verticalAlign: 'middle'
-            }) }, props.rightIcon)));
-};
-
-const generateLinkStyles = (props, theme) => {
-    const disabled = props.disabled || props.waiting;
-    let color = props.colorOverride;
-    if (!color) {
-        if (!props.variant) {
-            color = theme.colors.link;
+const LinkContent = (props) => {
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("span", null,
+            props.leftIcon && React__namespace.createElement("span", { className: css.css({
+                    label: 'LinkLeftIcon',
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                }) }, props.leftIcon),
+            props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children),
+        props.rightIcon && React__namespace.createElement("span", { className: css.css({
+                label: 'LinkRightIcon',
+                marginLeft: '1rem',
+                verticalAlign: 'middle'
+            }) }, props.rightIcon)));
+};
+
+const generateLinkStyles = (props, theme) => {
+    const disabled = props.disabled || props.waiting;
+    let color = props.colorOverride;
+    if (!color) {
+        if (!props.variant) {
+            color = theme.colors.link;
         }
         else {
             switch (props.variant) {
@@ -3355,6 +3357,29 @@ const generateLinkStyles = (props, theme) => {
     return linkStyles;
 };
 
+const Link = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, disabled, ref, waiting } = props, linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "disabled", "ref", "waiting"]);
+    const theme = useThemeSafely();
+    const linkStyles = generateLinkStyles(props, theme);
+    const mainClassName = css.cx('link', linkStyles, props.className);
+    if (variant === 'text') {
+        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
+    const isDisabled = props.disabled || props.waiting;
+    return (React__namespace.createElement("a", Object.assign({}, linkProps, { tabIndex: disabled ? -1 : undefined, target: props.target, className: mainClassName, onClick: e => {
+            var _a;
+            if (isDisabled) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            else {
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }),
+        React__namespace.createElement(LinkContent, Object.assign({}, props))));
+};
+
 const OmniLink = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { noRouter, rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref, waiting } = props, linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref", "waiting"]);
@@ -3381,11 +3406,113 @@ const OmniLink = (props) => {
         } }), content));
 };
 
+const Nav = (props) => {
+    var _a, _b, _c, _d;
+    const nav = React__namespace.useRef(null);
+    const theme = useThemeSafely();
+    const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
+    const totalNavOffset = `calc(${navWidth} + 20px)`;
+    const backdrop = useBackdropContext();
+    const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
+    const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
+    const slideRight = css.keyframes `
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(${totalNavOffset});
+		}
+	`;
+    const slideLeft = css.keyframes `
+		0% {
+			transform: translateX(${totalNavOffset});
+		}
+
+		100% {
+			transform: translateX(0px);
+		}
+	`;
+    const classNavShowing = css.css `
+		animation: ${slideRight} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const classNavNotShowing = css.css `
+		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const zIndex = theme.zIndexes.nav;
+    // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
+    const navStyles = css.css `
+		label: Nav;
+		position: fixed;
+		top: 0;
+		left: calc(${totalNavOffset} * -1);
+		bottom: 0;
+		background-color: ${theme.colors.nav};
+		color: ${theme.colors.navFont};
+		width: ${navWidth};
+		min-width: ${navWidth};
+		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
+		z-index: ${zIndex};
+		overflow-y: auto;
+		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
+			color: ${theme.colors.navFont};
+		}
+		padding-top:0;
+	`;
+    React__namespace.useEffect(() => {
+        if (!backdrop.showing) {
+            props.toggle(false);
+        }
+    }, [backdrop.showing]);
+    useBooleanChanged((current, previous) => {
+        var _a;
+        log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
+        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
+        if (!props.show && props.onCloseFocusId) {
+            const focusId = props.onCloseFocusId;
+            setTimeout(() => {
+                var _a;
+                (_a = document.getElementById(focusId)) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, props.show);
+    React__namespace.useLayoutEffect(() => {
+        if (nav && nav.current) {
+            if (props.show) {
+                if (!nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.add(classNavShowing);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = document.getElementById(props.focusContentId)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, slideMs + 1);
+                }
+            }
+            else {
+                if (nav.current.classList.contains(classNavShowing)) {
+                    nav.current.classList.remove(classNavShowing);
+                    nav.current.classList.add(classNavNotShowing);
+                    setTimeout(() => {
+                        if (nav && nav.current) {
+                            nav.current.classList.remove(classNavNotShowing);
+                        }
+                    }, slideMs);
+                }
+            }
+        }
+    });
+    return (React__namespace.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: css.cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React__namespace.createElement(TabLocker, { className: css.css({ height: '100%' }) }, props.children)));
+};
+
 const roundPxPadding = '4px';
 const Picker = (props) => {
-    const { value, options, onValueChange, readOnly, round, controlAlign, wrapperClassName, iconClassName, error } = props, selectProps = __rest(props
+    const { value, options, onValueChange, readOnly, round, controlAlign, wrapperClassName, iconClassName, error, optionClassName } = props, selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName", "error"]);
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName", "error", "optionClassName"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (options && options.length) {
@@ -3399,6 +3526,7 @@ const Picker = (props) => {
     }
     const theme = useThemeSafely();
     const selectStyles = css.css({
+        label: 'Picker',
         // fix the arrow so browser all look the same
         appearance: 'none',
         paddingLeft: theme.controls.padding,
@@ -3442,8 +3570,7 @@ const Picker = (props) => {
     const select = (React__namespace.createElement("select", Object.assign({}, selectProps, { tabIndex: readOnly ? -1 : selectProps.tabIndex, className: css.cx('picker', selectStyles, props.className), value: value, onKeyDown: e => {
             var _a;
             if (readOnly) {
-                if (e.keyCode === 9) {
-                    //TAB
+                if (e.code === 'Tab') {
                     return;
                 }
                 e.preventDefault();
@@ -3484,7 +3611,7 @@ const Picker = (props) => {
             val = o;
             label = o;
         }
-        return React__namespace.createElement("option", { key: val, value: val }, label);
+        return React__namespace.createElement("option", { key: val, value: val, className: optionClassName }, label);
     })));
     return (React__namespace.createElement("span", { className: css.cx(css.css({
             label: 'PickerWrapper',
@@ -3960,40 +4087,152 @@ class ItemPager {
     }
 }
 
-const ProgressBar = (props) => {
-    var _a;
-    const bar = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        const pct = cleanPct(props.pct);
-        if (bar.current) {
-            bar.current.style.width = `${pct}%`;
+const MultiPicker = (props) => {
+    const { value: values, options, onValueChange, readOnly, controlAlign, wrapperClassName, error, optionClassName } = props, selectProps = __rest(props
+    // if we put numbers in, we expect them out
+    , ["value", "options", "onValueChange", "readOnly", "controlAlign", "wrapperClassName", "error", "optionClassName"]);
+    // if we put numbers in, we expect them out
+    let isNumber = false;
+    if (options && options.length) {
+        const testOption = options[0];
+        if (typeof testOption === 'object') {
+            isNumber = typeof testOption.id === 'number';
         }
-    });
+        else {
+            isNumber = typeof testOption === 'number';
+        }
+    }
     const theme = useThemeSafely();
-    const barStyles = css.css `
-		width: 100%;
-		height: 1rem;
-		border: ${theme.controls.border};
-		background-color: ${theme.colors.progressBg};
-		${props.round && `
-			border-radius: 1rem;
-		`}
-	`;
-    const fillStyles = css.css `
-		transition: width 0.5s ease-in-out;
-		height: 100%;
-		background-color: ${theme.colors.progressFill};
-		${props.round && `
-			border-radius: 1rem;
-		`}
-	`;
-    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
-    const wrapStyles = css.css({
-        label: 'ProgressBar',
-        display: 'flex',
-        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
-        alignItems: showPctPosition === 'right' ? 'center' : undefined,
-        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    const selectStyles = css.css({
+        label: 'MultiPicker',
+        padding: theme.controls.padding,
+        minHeight: theme.controls.height,
+        backgroundColor: theme.colors.bg,
+        color: theme.colors.font,
+        fontSize: theme.controls.fontSize,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius || 0, /* safari fix */
+        transition: theme.controls.transition,
+        '&:disabled': {
+            color: theme.colors.font,
+            opacity: 1,
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        '&:focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        }
+    }, error && {
+        borderColor: theme.colors.required,
+        ':focus': {
+            boxShadow: theme.controls.focusOutlineRequiredShadow
+        }
+    }, readOnly && {
+        backgroundColor: 'transparent !important',
+        backgroundImage: 'unset',
+        border: 'none',
+        '&:focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    const select = (React__namespace.createElement("select", Object.assign({}, selectProps, { multiple: true, tabIndex: readOnly ? -1 : selectProps.tabIndex, className: css.cx(selectStyles, props.className), value: values.map(v => v.toString()), onKeyDown: e => {
+            var _a;
+            if (readOnly) {
+                if (e.code === 'Tab') {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                (_a = selectProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
+            }
+        }, onMouseDown: e => {
+            var _a;
+            if (readOnly) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                (_a = selectProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(selectProps, e);
+            }
+        }, onChange: e => {
+            var _a;
+            const values = Array.from(e.target.selectedOptions).map(o => {
+                let val = o.value;
+                if (isNumber) {
+                    val = parseInt(val, 10);
+                    if (isNaN(val)) {
+                        val = '';
+                    }
+                }
+                return val;
+            });
+            onValueChange(values);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (options || []).map(o => {
+        var _a;
+        let val;
+        let label;
+        if (typeof o === 'object') {
+            val = o.id;
+            label = (_a = o.name) !== null && _a !== void 0 ? _a : o.id;
+        }
+        else {
+            val = o;
+            label = o;
+        }
+        return React__namespace.createElement("option", { key: val, value: val, className: optionClassName }, label);
+    })));
+    return (React__namespace.createElement("span", { className: css.cx(css.css({
+            label: 'MultiPickerWrapper',
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+        }), wrapperClassName) },
+        React__namespace.createElement("div", { className: css.css({
+                position: 'relative'
+            }) }, select),
+        (error || controlAlign) && React__namespace.createElement(InputErrorDisplay, { error: error })));
+};
+
+const ProgressBar = (props) => {
+    var _a;
+    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 = css.css `
+		width: 100%;
+		height: 1rem;
+		border: ${theme.controls.border};
+		background-color: ${theme.colors.progressBg};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const fillStyles = css.css `
+		transition: width 0.5s ease-in-out;
+		height: 100%;
+		background-color: ${theme.colors.progressFill};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css.css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
     });
     const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css.css({
         width: '3rem'
@@ -4088,6 +4327,29 @@ const SearchBox = React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("div", { className: searchBoxWrapperStyles }, input));
 });
 
+/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
+const enumToEntities = (enumObj) => {
+    const entities = [];
+    for (const key in enumObj) {
+        if (isNaN(parseInt(key, 10))) {
+            entities.push({
+                id: enumObj[key],
+                name: key
+            });
+        }
+    }
+    return entities;
+};
+
+/** Displays the value in American dollars. */
+const getCurrencyDisplay = (value, isCents, denomination = '$') => {
+    let actualValue = value || 0;
+    if (isCents) {
+        actualValue /= 100;
+    }
+    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+
 const GlobalStyles = () => {
     const theme = useThemeSafely();
     css.injectGlobal({
@@ -4116,698 +4378,37 @@ const GlobalStyles = () => {
     return null;
 };
 
-/*
-    From https://fireship.io/snippets/use-media-query-hook/.
-    Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
-*/
-/** React wrapper around window resizing and window.matchMedia.
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
- */
-const useMediaQuery = (query) => {
-    const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
-    React.useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        window.addEventListener("resize", listener);
-        return () => window.removeEventListener("resize", listener);
-    }, [matches, query]);
-    return matches;
-};
+var decimal=["decimal","décimale"];var place=["lugar","lieu"];var places=["lugares","lieux"];var file=["archivo","fichier"];var selected=["seleccionado","choisi"];var Upload=["Subir","Télécharger"];var Clear=["Cerrar","Fermer"];var Showing=["Mostrando","Affichage de"];var of=["de","sur"];var results=["resultados","résultats"];var Page=["Página","Page"];var Limit=["Límite","Limite"];var Sort=["Ordenar","Trier"];var January=["Enero","Janvier"];var February=["Febrero","Février"];var March=["Marzo","Mars"];var April=["Abril","Avril"];var May=["Mayo","Mai"];var June=["Junio","Juin"];var July=["Julio","Juillet"];var August=["Agosto","Août"];var September=["Septiembre","Septembre"];var October=["Octubre","Octobre"];var November=["Noviembre","Novembre"];var December=["Diciembre","Décembre"];var Sun=["Dom","Dim"];var Mon=["Lun","Lun"];var Tue=["Mar","Mar"];var Wed=["Mié","Mer"];var Thu=["Jue","Jeu"];var Fri=["Vie","Ven"];var Sat=["Sáb","Sam"];var OK=["Aceptar","Accepter"];var Cancel=["Cancelar","Annuler"];var strings = {"Required.":["Requerido.","Requis."],"Must be at least":["Debe ser al menos","Doit être au moins"],"characters in length.":["caracteres de longitud.","caractères de longueur."],"Must be an integer.":["Debe ser un número entero.","Doit être un entier."],"Limited to":["Limitado a","Limité à"],decimal:decimal,place:place,places:places,"Must be greater than or equal to":["Debe ser mayor o igual a","Doit être supérieur ou égal à"],"Must be less than or equal to":["Debe ser menor o igual a","Doit être inférieur ou égal à"],"Invalid email.":["Correo electrónico no válido.","Email invalide."],"Invalid URL.":["URL no válida.","URL non valide."],"Click or drag and drop files.":["Haga clic o arrastre y suelte archivos.","Cliquez ou faites glisser et déposez les fichiers."],file:file,selected:selected,"Upload failed.":["Error en la carga.","Le téléchargement a échoué."],Upload:Upload,"Upload successful.":["Carga exitosa","Téléchargement réussi."],"Invalid files":["Archivos no válidos","Fichiers invalides"],"Max file size exceeded":["Se ha excedido el tamaño máximo de archivo","La taille maximale du fichier a été dépassée"],"Error":["Error","Erreur"],Clear:Clear,Showing:Showing,of:of,results:results,"No Results":["No Hay Resultados","Aucun Résultat"],Page:Page,Limit:Limit,Sort:Sort,January:January,February:February,March:March,April:April,May:May,June:June,July:July,August:August,September:September,October:October,November:November,December:December,Sun:Sun,Mon:Mon,Tue:Tue,Wed:Wed,Thu:Thu,Fri:Fri,Sat:Sat,OK:OK,Cancel:Cancel,"Copied!":["¡Copiado!","Copié!"],"Copy to clipboard":["Copiar al portapapeles","Copier dans le presse-papier"]};
 
-const Slider = (p) => {
+const LocalizationProvider = (p) => {
     var _a;
-    const theme = useThemeSafely();
-    const sliderContainer = React.useRef(null);
-    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
-    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
-    // we're keeping this value in a ref vs. state so the constant updates don't cause re-render.
-    // we will have to respond to outside value changes after the fact however...
-    const currentValue = React.useRef(p.value);
-    const [, forceUpdate] = React.useState(Date.now());
-    React.useEffect(() => {
-        if (p.value !== currentValue.current) {
-            currentValue.current = p.value;
-            forceUpdate(Date.now());
-        }
-    }, [p.value]);
-    return (React.createElement("div", { ref: sliderContainer, className: css.cx(css.css({
-            label: 'Slider',
-            width: '100%',
-            height,
-        }), p.className) },
-        React.createElement(ReactSlider, { ariaLabel: p.ariaLabel, step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
-                p.onChange(value);
-            }, onChange: p.onUpdate || p.showValue ? (value) => {
-                var _a;
-                currentValue.current = value;
-                (_a = p.onUpdate) === null || _a === void 0 ? void 0 : _a.call(p, value);
-            } : undefined, renderTrack: (props) => {
-                const { className } = props, rest = __rest(props, ["className"]);
-                return (React.createElement("div", Object.assign({ className: css.cx(className, p.trackClassName, css.css({
-                        display: 'flex',
-                        alignItems: 'center',
-                        height: sliderHandleSize
-                    })) }, rest),
-                    React.createElement("div", { className: css.css({
-                            backgroundColor: theme.colors.secondary,
-                            height: `calc(${sliderHandleSize} / 4)`,
-                            borderRadius: theme.controls.roundRadius,
-                            width: '100%'
-                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
-            }, renderThumb: (props, state) => {
-                const { className } = props, rest = __rest(props, ["className"]);
-                let specificThumbStyles;
-                if (p.handle1ClassName && props.key === 'thumb-0') {
-                    specificThumbStyles = p.handle1ClassName;
+    const log = useLogger('LocalizationProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    const stringsDb = strings;
+    return (React.createElement(LocalizationContext.Provider, { value: {
+            language: p.language,
+            getText: (text) => {
+                if (!text) {
+                    return '';
                 }
-                else if (p.handle2ClassName && props.key === 'thumb-1') {
-                    specificThumbStyles = p.handle2ClassName;
+                if (!isNaN(parseInt(text))) {
+                    return text;
                 }
-                return (React.createElement("div", Object.assign({ className: css.cx(className, css.css({
-                        borderRadius: theme.controls.roundRadius,
-                        backgroundColor: 'white',
-                        border: theme.controls.border,
-                        cursor: 'grab',
-                        boxShadow: theme.controls.buttonBoxShadow,
-                        transition: theme.controls.transition,
-                        '&:focus': {
-                            outline: 'none',
-                            boxShadow: theme.controls.focusOutlineShadow
-                        },
-                        '&:active': {
-                            boxShadow: 'none',
-                            cursor: 'grabbing'
-                        },
-                        '&:hover': {
-                            filter: theme.controls.hoverBrightness
-                        }
-                    }), specificThumbStyles, p.handleClassName, css.css({
-                        width: sliderHandleSize,
-                        height: sliderHandleSize,
-                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
-            } })));
-};
-const rectsCollideX = (r1, r2) => {
-    if (r1.left >= r2.left && r1.left <= r2.right) {
-        return true;
-    }
-    if (r1.right >= r2.left && r1.right <= r2.right) {
-        return true;
-    }
-    return false;
-};
-const HandleText = (p) => {
-    var _a, _b, _c;
-    const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
-    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
-    const renderValueLeft = React.useMemo(() => {
-        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth, p.sliderHandleSize]);
-    const [flipText, setFlipText] = React.useState(false);
-    const offset = '2px';
-    React.useEffect(() => {
-        // this needs to fire on every render due to the other handle also moving.
-        var _a, _b;
-        if (p.index === 1) {
-            // only do this for the max/right-most handle
-            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
-            if (r1 && r2) {
-                setFlipText(rectsCollideX(r1, r2));
+                const wordArray = stringsDb[text];
+                if (!wordArray) {
+                    log(`No localization data exists for "${text}".`);
+                }
+                if (p.language === exports.StyleGuideLanguage.English) {
+                    return text;
+                }
+                const languageIndex = p.language - 1;
+                const translation = wordArray === null || wordArray === void 0 ? void 0 : wordArray[languageIndex];
+                if (translation) {
+                    return translation;
+                }
+                log(`No ${exports.StyleGuideLanguage[p.language]} translations exist for "${text}".`);
+                return text;
             }
-        }
-    });
-    return (React.createElement(Text, { ellipsis: true, className: css.cx('slider-handle', css.css({
-            width: renderValueWidth,
-            left: renderValueLeft,
-            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
-            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
-            position: 'absolute',
-            overflow: 'hidden',
-        }), p.className), tag: "div", align: "center" }, displayValue));
-};
-
-const TabHeader = (p) => {
-    var _a, _b;
-    const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
-    const [tabsChanging, setTabsChanging] = React__namespace.useState(false);
-    const theme = useThemeSafely();
-    const variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'tab';
-    const menuStyles = css.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'
-    });
-    function onTabSelect(index, tabId, focusAfter) {
-        const onChange = () => {
-            var _a;
-            setTabIndex(index);
-            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
-            if (focusAfter) {
-                setTimeout(() => {
-                    var _a;
-                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
-                }, 0);
-            }
-        };
-        if (p.onBeforeTabChanged) {
-            setTabsChanging(true);
-            p.onBeforeTabChanged(index)
-                .then(() => {
-                onChange();
-            })
-                .catch(() => {
-                /* do nothing */
-            })
-                .finally(() => {
-                setTabsChanging(false);
-            });
-        }
-        else {
-            onChange();
-        }
-    }
-    return (React__namespace.createElement("div", { className: "tabHeader" },
-        React__namespace.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
-            var _a, _b;
-            const active = index === tabIndex;
-            let tabStyles;
-            let buttonStyles;
-            let buttonVariant;
-            if (variant === 'tab') {
-                tabStyles = css.css({
-                    paddingLeft: '1rem',
-                    paddingRight: '1rem',
-                    backgroundColor: theme.colors.bg,
-                    zIndex: 1,
-                }, active && {
-                    border: theme.controls.border,
-                    borderRadius: theme.controls.borderRadius,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    borderBottom: 'none',
-                    zIndex: 3,
-                });
-                buttonVariant = 'link';
-                buttonStyles = css.css({
-                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
-                    overflow: 'hidden'
-                });
-            }
-            else {
-                buttonVariant = active ? 'primary' : undefined;
-                buttonStyles = css.css({
-                    paddingLeft: '1rem',
-                    paddingRight: '1rem',
-                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
-                    overflow: 'hidden',
-                });
-            }
-            let title = tab.title;
-            let buttonContent;
-            if (typeof tab.name === 'string') {
-                title !== null && title !== void 0 ? title : (title = tab.name);
-                buttonContent = React__namespace.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
-            }
-            else {
-                buttonContent = tab.name;
-            }
-            const tabId = getTabHeaderTabId(p.id, index);
-            return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
-                        onTabSelect(index, tabId, false);
-                    }, onKeyDown: e => {
-                        e.stopPropagation();
-                        let newIndex = index;
-                        if (e.code === 'ArrowLeft') {
-                            if (index === 0) {
-                                newIndex = p.tabs.length - 1;
-                            }
-                            else {
-                                newIndex = index - 1;
-                            }
-                        }
-                        else if (e.code === 'ArrowRight') {
-                            if (index === p.tabs.length - 1) {
-                                newIndex = 0;
-                            }
-                            else {
-                                newIndex = index + 1;
-                            }
-                        }
-                        if (newIndex !== index) {
-                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
-                        }
-                    } }, buttonContent)));
-        })),
-        variant === 'tab' && (React__namespace.createElement("div", { className: css.cx(css.css({
-                label: 'TabHeaderDivider',
-                borderBottom: theme.controls.border,
-                marginTop: `calc(${theme.controls.borderWidth} * -1)`,
-                zIndex: 2,
-                position: 'relative'
-            }), p.tabHeaderDividerClassName) }))));
-};
-function getTabHeaderTabId(tabHeaderId, tabIndex) {
-    return `${tabHeaderId}_tab_${tabIndex}`;
-}
-
-const Table = (props) => {
-    const theme = useThemeSafely();
-    const tableStyles = css.css `
-		label: Table;
-		width: 100%;
-		border-collapse: collapse;
-		${props.noCellBorder && `
-			.table__td {
-				border-left: none;
-				border-right: none;
-			}
-		`}
-		${props.altRows && `
-			.table__tr:nth-of-type(even) {
-				background-color: ${theme.colors.lightBg};
-			}
-		`}
-	`;
-    const wrapperStyles = css.css `
-		label: TableScrollWrapper;
-		width:100%;
-        overflow-y: auto;
-        padding:0 1px;  //fixes always showing of the table scroller
-	`;
-    return (React__namespace.createElement("div", { className: css.cx(wrapperStyles, props.wrapperClassName) },
-        React__namespace.createElement("table", { className: css.cx(tableStyles, props.className) },
-            props.caption && React__namespace.createElement("caption", { className: css.css({
-                    fontWeight: 'bold',
-                    padding: theme.controls.padding
-                }) }, props.caption),
-            props.children)));
-};
-const Tr = (props) => {
-    return (React__namespace.createElement("tr", { className: css.cx('table__tr', props.className) }, props.children));
-};
-const Th = (props) => {
-    var _a;
-    let style = props.style;
-    if (props.width) {
-        if (style) {
-            style = Object.assign(Object.assign({}, style), { width: props.width, minWidth: props.width });
-        }
-        else {
-            style = { width: props.width, minWidth: props.width };
-        }
-    }
-    const theme = useThemeSafely();
-    const thStyles = css.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__namespace.createElement("th", { className: css.cx(thStyles, props.className), style: style }, props.children));
-};
-const Td = (props) => {
-    var _a;
-    const theme = useThemeSafely();
-    const tdStyles = css.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__namespace.createElement("td", { colSpan: props.colSpan, style: props.style, className: css.cx('table__td', tdStyles, props.className) }, props.children));
-};
-
-const TdCurrency = (props) => {
-    let actualValue = props.value || 0;
-    if (props.cents) {
-        actualValue = actualValue / 100;
-    }
-    const displayValue = actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    return (React__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 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__namespace.createElement(Th, { align: props.align, style: props.style, width: props.width },
-        React__namespace.createElement("div", { className: props.rightContent && css.css({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: rightContentSpecialJustify,
-                gap: '0.5rem'
-            }) },
-            React__namespace.createElement(Button, { onClick: props.onClick, variant: "link" },
-                props.text,
-                iconId && React__namespace.createElement(Icon, { className: css.css({
-                        marginLeft: '0.5rem'
-                    }), id: iconId })),
-            props.rightContent)));
-};
-
-const defaultMaxLength = 200;
-const defaultRows = 10;
-const TextArea = React__namespace.forwardRef((props, ref) => {
-    var _a, _b;
-    const [localValue, setLocalValue] = React__namespace.useState(props.value);
-    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { onValueChange, customError, reportValueOnError, showErrorDisplay, allowUpdateOnFocus } = props, nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError", "showErrorDisplay", "allowUpdateOnFocus"]);
-    const theme = useThemeSafely();
-    React__namespace.useEffect(() => {
-        updateErrorMessage();
-    }, []);
-    useIgnoreMount(() => {
-        var _a;
-        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            onValueChange(localValue);
-        }
-        else {
-            if (reportValueOnError) {
-                onValueChange(localValue);
-            }
-            else {
-                onValueChange(undefined);
-            }
-        }
-        updateErrorMessage();
-    }, [localValue]);
-    useIgnoreMount(() => {
-        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
-            setLocalValue(props.value);
-        }
-        updateErrorMessage();
-    }, [props.value]);
-    const styles = css.css({
-        backgroundColor: theme.colors.bg,
-        maxWidth: '100%',
-        minHeight: theme.controls.height,
-        fontFamily: theme.fonts.family,
-        fontSize: theme.fonts.size,
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: theme.controls.borderRadius,
-        color: theme.colors.font,
-        paddingTop: '0.75rem',
-        paddingLeft: theme.controls.padding,
-        paddingRight: theme.controls.padding,
-        height: 'auto',
-        transition: theme.controls.transition,
-        ':focus': {
-            outline: 'none',
-            boxShadow: theme.controls.focusOutlineShadow
-        },
-        ':disabled': {
-            backgroundColor: theme.colors.disabled,
-            cursor: 'not-allowed'
-        },
-        ':invalid': {
-            borderColor: theme.colors.required,
-            ':focus': {
-                boxShadow: theme.controls.focusOutlineRequiredShadow
-            }
-        },
-    }, props.readOnly && {
-        backgroundColor: 'transparent',
-        cursor: 'default',
-        border: 'none',
-        ':focus': {
-            outline: 'none',
-            boxShadow: 'none'
-        }
-    });
-    return (React__namespace.createElement("span", { className: css.css({
-            display: 'inline-block',
-            width: '100%'
-        }) },
-        React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
-                var _a;
-                setLocalValue(e.target.value || undefined);
-                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            }, onBlur: e => {
-                var _a;
-                if (!props.noTrim) {
-                    setLocalValue(currentValue => {
-                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
-                    });
-                }
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            } })),
-        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React__namespace.createElement(InputErrorDisplay, { error: validationError })));
-});
-
-const ToggleButton = React__namespace.forwardRef((props, ref) => {
-    const { checked, checkedChildren, uncheckedChildren, checkedVariant, checkedClassName, checkedStyle, checkedIcon, uncheckedIcon } = props, buttonProps = __rest(props, ["checked", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
-    let children;
-    if (checked) {
-        children = checkedChildren;
-    }
-    else {
-        children = uncheckedChildren;
-    }
-    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: css.cx('toggleButton', checked && 'toggleButton--checked', props.className, checked && checkedClassName), rightIcon: checked ? checkedIcon : uncheckedIcon, variant: checked ? checkedVariant : props.variant, style: checked ? checkedStyle : props.style }), children));
-});
-
-const ToggleButtonGroup = (props) => {
-    const theme = useThemeSafely();
-    const groupStyles = css.css `
-		display: flex;
-		box-shadow: ${theme.controls.buttonBoxShadow};
-		border-radius: ${theme.controls.borderRadius};
-		${props.round && `
-			border-radius: ${theme.controls.roundRadius};
-		`}
-	`;
-    const buttonStyles = css.css `
-		flex-grow:1;
-		box-shadow: none;
-		&:nth-of-type(1n+2){
-			margin-left: -1px;
-		}
-		border-radius: 0;
-		&:first-of-type{
-			border-top-left-radius: ${theme.controls.borderRadius};
-			border-bottom-left-radius: ${theme.controls.borderRadius};
-		}
-		&:last-child {
-			border-top-right-radius: ${theme.controls.borderRadius};
-			border-bottom-right-radius: ${theme.controls.borderRadius};
-		}
-		${props.round && `
-			&:first-of-type{
-				border-top-left-radius: ${theme.controls.roundRadius};
-				border-bottom-left-radius: ${theme.controls.roundRadius};
-				padding-left: 1rem;
-			}
-			&:last-child {
-				border-top-right-radius: ${theme.controls.roundRadius};
-				border-bottom-right-radius: ${theme.controls.roundRadius};
-				padding-right: 1rem;
-			}
-		`}
-	`;
-    return (React__namespace.createElement("div", { className: css.cx('toggleButtonGroup', groupStyles, props.className) }, props.options.map(o => {
-        const active = o.id === props.value;
-        return React__namespace.createElement(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, className: css.cx(css.css `
-					${buttonStyles}
-					${active && `
-						background-color: ${theme.colors.font};
-						color: ${theme.colors.bg};
-						cursor: default;
-						&:hover:not(:disabled) {
-							filter: none;
-						}
-						&:focus {
-							outline: none;
-							box-shadow: none;
-						}
-					`}
-				`, active ? o.activeClass : undefined), disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
-                if (active) {
-                    return;
-                }
-                props.onChange(o.id);
-            } }, o.name);
-    })));
-};
-
-const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
-    const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
-    const [show, setShow] = React__namespace.useState(false);
-    useIgnoreMount(() => {
-        onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
-    }, [show]);
-    return (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
-                // small button is required here due to the icon pushing outside the boundries of the
-                // parent textbox.  increasing the font size here to fill the small button.
-                fontSize: '1rem'
-            }, variant: "icon", onClick: () => {
-                setShow(previous => !previous);
-            } },
-            React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
-});
-
-let clearTimerId = undefined;
-/** Allows for status notificaiton methods for screen readers.
- * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
-function useAriaLiveRegion() {
-    const id = 'MknAriaLiveRegion';
-    if (!document.getElementById(id)) {
-        const div = document.createElement('div');
-        div.id = id;
-        // different sources cannot decide if this is needed.
-        // "Can work for status messages, but aria-live="polite" + text is usually simpler and more reliable for loading."
-        div.role = 'status';
-        div.ariaLive = 'polite';
-        div.ariaAtomic = 'true';
-        div.style.position = 'absolute';
-        div.style.width = '1px';
-        div.style.height = '1px';
-        div.style.padding = '0px';
-        div.style.margin = '-1px';
-        div.style.overflow = 'hidden';
-        div.style.whiteSpace = 'nowrap';
-        document.body.prepend(div);
-    }
-    const clearNotification = () => {
-        if (clearTimerId) {
-            clearTimeout(clearTimerId);
-        }
-        const element = document.getElementById(id);
-        if (!element) {
-            return;
-        }
-        element.textContent = '';
-    };
-    return {
-        /**
-         * @param message - The text to be read by the screen reader.
-         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
-         */
-        notify: (message, clearTimoutMs) => {
-            if (clearTimerId) {
-                clearTimeout(clearTimerId);
-            }
-            const element = document.getElementById(id);
-            if (!element) {
-                return;
-            }
-            element.textContent = message;
-            clearTimerId = setTimeout(() => {
-                // this is considered a good practice.  if you leave text here, some screen readers will read it out randomly as you navigate around the page.
-                clearNotification();
-            }, clearTimoutMs !== null && clearTimoutMs !== void 0 ? clearTimoutMs : 2000);
-        },
-        clearNotification
-    };
-}
-
-const WaitingIndicator = (p) => {
-    var _a, _b, _c;
-    const [show, setShow] = React.useState(p.show);
-    const hideTimer = React.useRef(0);
-    const lastShowStatus = React.useRef(false);
-    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
-    const { notify, clearNotification } = useAriaLiveRegion();
-    if (p.__debug) {
-        React.useEffect(() => {
-            log('mounted');
-            return () => {
-                log('unmounted');
-            };
-        }, []);
-    }
-    React.useEffect(() => {
-        log('show changed', p.show);
-        // we need to store the 'last props' since props.show will be captured locally and the incorrect
-        // value will display in the timeout below.
-        log('storing lastShowStatus', p.show);
-        lastShowStatus.current = p.show;
-        if (p.show) {
-            log('setShow', true);
-            setShow(true);
-            if (p.minShowTimeMs) {
-                log('staring hideTimer', 'timout in ms:', p.minShowTimeMs);
-                hideTimer.current = window.setTimeout(() => {
-                    log('hideTimer complete', 'clearing hideTimer');
-                    window.clearTimeout(hideTimer.current);
-                    hideTimer.current = 0;
-                    // this check is necessary since the show status may have updated again to true.
-                    // if so, ignore this timeout since we're already past the min time and we're still
-                    // showing the component.
-                    if (!lastShowStatus.current) {
-                        log('setShow', false);
-                        setShow(false);
-                    }
-                    else {
-                        log('ignoring hideTimer handler due to hideTimer ticking');
-                    }
-                }, p.minShowTimeMs);
-            }
-        }
-        else {
-            // ignore hiding the component since the min timer is running.
-            if (!hideTimer.current) {
-                log('setShow', false);
-                setShow(false);
-            }
-            else {
-                log('ignoring show change due to hideTimer ticking');
-            }
-        }
-        if (p.show) {
-            // set to a very long time so the hiding of the waiting indicator clears it.
-            notify('Loading content.', 60000);
-        }
-        else {
-            clearNotification();
-        }
-    }, [p.show]);
-    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'MknWaitingIndicator';
-    return (React.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
-            /* noop */
-        }, className: "waitingIndicator", show: show },
-        React.createElement("div", { className: css.css({
-                color: 'white',
-                fontSize: '3rem',
-                padding: '0.7rem'
-            }) },
-            React.createElement(Icon, { id: "waiting", spin: true }))));
+        } }, p.children));
 };
 
 /*
@@ -5106,283 +4707,777 @@ summary {
 `;
     return null;
 };
-
-/** Displays the value in American dollars. */
-const getCurrencyDisplay = (value, isCents, denomination = '$') => {
-    let actualValue = value || 0;
-    if (isCents) {
-        actualValue /= 100;
+
+const Table = (props) => {
+    const theme = useThemeSafely();
+    const tableStyles = css.css `
+		label: Table;
+		width: 100%;
+		border-collapse: collapse;
+		${props.noCellBorder && `
+			.table__td {
+				border-left: none;
+				border-right: none;
+			}
+		`}
+		${props.altRows && `
+			.table__tr:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+	`;
+    const wrapperStyles = css.css `
+		label: TableScrollWrapper;
+		width:100%;
+        overflow-y: auto;
+        padding:0 1px;  //fixes always showing of the table scroller
+	`;
+    return (React__namespace.createElement("div", { className: css.cx(wrapperStyles, props.wrapperClassName) },
+        React__namespace.createElement("table", { className: css.cx(tableStyles, props.className) },
+            props.caption && React__namespace.createElement("caption", { className: css.css({
+                    fontWeight: 'bold',
+                    padding: theme.controls.padding
+                }) }, props.caption),
+            props.children)));
+};
+const Tr = (props) => {
+    return (React__namespace.createElement("tr", { className: css.cx('table__tr', props.className) }, props.children));
+};
+const Th = (props) => {
+    var _a;
+    let style = props.style;
+    if (props.width) {
+        if (style) {
+            style = Object.assign(Object.assign({}, style), { width: props.width, minWidth: props.width });
+        }
+        else {
+            style = { width: props.width, minWidth: props.width };
+        }
+    }
+    const theme = useThemeSafely();
+    const thStyles = css.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__namespace.createElement("th", { className: css.cx(thStyles, props.className), style: style }, props.children));
+};
+const Td = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    const tdStyles = css.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__namespace.createElement("td", { colSpan: props.colSpan, style: props.style, className: css.cx('table__td', tdStyles, props.className) }, props.children));
+};
+
+/* eslint @typescript-eslint/no-explicit-any: 0 */
+const ThemeRenderer = (p) => {
+    const { backgroundColor, color } = p, theme = __rest(p, ["backgroundColor", "color"]);
+    const flatTheme = flatten(theme);
+    const entries = lodash.orderBy(Object.entries(flatTheme), x => x[0]);
+    return (React__namespace.createElement(Table, { caption: (React__namespace.createElement("div", null,
+            React__namespace.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
+            React__namespace.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css.css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
+            color: color !== null && color !== void 0 ? color : 'black'
+        }) },
+        React__namespace.createElement("thead", null,
+            React__namespace.createElement(Tr, null,
+                React__namespace.createElement(Th, { align: "left" }, "Property"),
+                React__namespace.createElement(Th, { align: "left" }, "Value"))),
+        React__namespace.createElement("tbody", null, entries.map(([key, value]) => {
+            let colorBox;
+            if (/color/i.test(key)) {
+                colorBox = (React__namespace.createElement("span", { className: css.css({
+                        display: 'block',
+                        border: '1px solid black',
+                        width: '100%',
+                        height: 24,
+                        background: value
+                    }) }));
+            }
+            return (React__namespace.createElement(Tr, { key: key },
+                React__namespace.createElement(Td, { align: "left" }, key),
+                React__namespace.createElement(Td, { align: "left" },
+                    React__namespace.createElement("div", { className: css.css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem'
+                        }) },
+                        React__namespace.createElement("span", { className: css.css({ flexShrink: 1 }) }, value),
+                        " ",
+                        colorBox))));
+        }))));
+};
+const flatten = (obj, parent, path = 'theme') => {
+    const flatObj = parent !== null && parent !== void 0 ? parent : {};
+    for (const prop in obj) {
+        const value = obj[prop];
+        const fullPath = `${path}.${prop}`;
+        if (typeof value !== 'object') {
+            flatObj[fullPath] = value;
+        }
+        else {
+            flatten(value, flatObj, fullPath);
+        }
+    }
+    return flatObj;
+};
+
+let clearTimerId = undefined;
+/** Allows for status notificaiton methods for screen readers.
+ * This hook does not have any dependencies, so it can be used in projects that don't important anything else from the style_guide. */
+function useAriaLiveRegion() {
+    const id = 'MknAriaLiveRegion';
+    if (!document.getElementById(id)) {
+        const div = document.createElement('div');
+        div.id = id;
+        // different sources cannot decide if this is needed.
+        // "Can work for status messages, but aria-live="polite" + text is usually simpler and more reliable for loading."
+        div.role = 'status';
+        div.ariaLive = 'polite';
+        div.ariaAtomic = 'true';
+        div.style.position = 'absolute';
+        div.style.width = '1px';
+        div.style.height = '1px';
+        div.style.padding = '0px';
+        div.style.margin = '-1px';
+        div.style.overflow = 'hidden';
+        div.style.whiteSpace = 'nowrap';
+        document.body.prepend(div);
+    }
+    const clearNotification = () => {
+        if (clearTimerId) {
+            clearTimeout(clearTimerId);
+        }
+        const element = document.getElementById(id);
+        if (!element) {
+            return;
+        }
+        element.textContent = '';
+    };
+    return {
+        /**
+         * @param message - The text to be read by the screen reader.
+         * @param clearTimeoutMs - Milliseconds to wait before the message is cleared.  Defaults to `2000`.
+         */
+        notify: (message, clearTimoutMs) => {
+            if (clearTimerId) {
+                clearTimeout(clearTimerId);
+            }
+            const element = document.getElementById(id);
+            if (!element) {
+                return;
+            }
+            element.textContent = message;
+            clearTimerId = setTimeout(() => {
+                // this is considered a good practice.  if you leave text here, some screen readers will read it out randomly as you navigate around the page.
+                clearNotification();
+            }, clearTimoutMs !== null && clearTimoutMs !== void 0 ? clearTimoutMs : 2000);
+        },
+        clearNotification
+    };
+}
+
+/*
+    From https://fireship.io/snippets/use-media-query-hook/.
+    Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
+*/
+/** React wrapper around window resizing and window.matchMedia.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
+    React.useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        window.addEventListener("resize", listener);
+        return () => window.removeEventListener("resize", listener);
+    }, [matches, query]);
+    return matches;
+};
+
+const Slider = (p) => {
+    var _a;
+    const theme = useThemeSafely();
+    const sliderContainer = React.useRef(null);
+    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
+    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
+    // we're keeping this value in a ref vs. state so the constant updates don't cause re-render.
+    // we will have to respond to outside value changes after the fact however...
+    const currentValue = React.useRef(p.value);
+    const [, forceUpdate] = React.useState(Date.now());
+    React.useEffect(() => {
+        if (p.value !== currentValue.current) {
+            currentValue.current = p.value;
+            forceUpdate(Date.now());
+        }
+    }, [p.value]);
+    return (React.createElement("div", { ref: sliderContainer, className: css.cx(css.css({
+            label: 'Slider',
+            width: '100%',
+            height,
+        }), p.className) },
+        React.createElement(ReactSlider, { ariaLabel: p.ariaLabel, step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
+                p.onChange(value);
+            }, onChange: p.onUpdate || p.showValue ? (value) => {
+                var _a;
+                currentValue.current = value;
+                (_a = p.onUpdate) === null || _a === void 0 ? void 0 : _a.call(p, value);
+            } : undefined, renderTrack: (props) => {
+                const { className } = props, rest = __rest(props, ["className"]);
+                return (React.createElement("div", Object.assign({ className: css.cx(className, p.trackClassName, css.css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: sliderHandleSize
+                    })) }, rest),
+                    React.createElement("div", { className: css.css({
+                            backgroundColor: theme.colors.secondary,
+                            height: `calc(${sliderHandleSize} / 4)`,
+                            borderRadius: theme.controls.roundRadius,
+                            width: '100%'
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
+            }, renderThumb: (props, state) => {
+                var _a;
+                const { className } = props, rest = __rest(props, ["className"]);
+                let specificThumbStyles;
+                if (p.handle1ClassName && props.key === 'thumb-0') {
+                    specificThumbStyles = p.handle1ClassName;
+                }
+                else if (p.handle2ClassName && props.key === 'thumb-1') {
+                    specificThumbStyles = p.handle2ClassName;
+                }
+                return (React.createElement("div", Object.assign({ className: css.cx(className, css.css({
+                        borderRadius: theme.controls.roundRadius,
+                        backgroundColor: 'white',
+                        border: theme.controls.border,
+                        cursor: 'grab',
+                        boxShadow: theme.controls.buttonBoxShadow,
+                        transition: theme.controls.transition,
+                        '&:focus': {
+                            outline: 'none',
+                            boxShadow: theme.controls.focusOutlineShadow
+                        },
+                        '&:active': {
+                            boxShadow: 'none',
+                            cursor: 'grabbing'
+                        },
+                        '&:hover': {
+                            filter: theme.controls.hoverBrightness
+                        }
+                    }), specificThumbStyles, p.handleClassName, css.css({
+                        width: sliderHandleSize,
+                        height: sliderHandleSize,
+                    })) }, rest, { tabIndex: (_a = p.tabIndex) !== null && _a !== void 0 ? _a : 0 }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+            } })));
+};
+const rectsCollideX = (r1, r2) => {
+    if (r1.left >= r2.left && r1.left <= r2.right) {
+        return true;
     }
-    return `${denomination}${actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+    if (r1.right >= r2.left && r1.right <= r2.right) {
+        return true;
+    }
+    return false;
+};
+const HandleText = (p) => {
+    var _a, _b, _c;
+    const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
+    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
+    const renderValueLeft = React.useMemo(() => {
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
+    }, [p.renderValueWidth, p.sliderHandleSize]);
+    const [flipText, setFlipText] = React.useState(false);
+    const offset = '2px';
+    React.useEffect(() => {
+        // this needs to fire on every render due to the other handle also moving.
+        var _a, _b;
+        if (p.index === 1) {
+            // only do this for the max/right-most handle
+            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
+            if (r1 && r2) {
+                setFlipText(rectsCollideX(r1, r2));
+            }
+        }
+    });
+    return (React.createElement(Text, { ellipsis: true, className: css.cx('slider-handle', css.css({
+            width: renderValueWidth,
+            left: renderValueLeft,
+            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
+            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
+            position: 'absolute',
+            overflow: 'hidden',
+        }), p.className), tag: "div", align: "center" }, displayValue));
 };
 
-/** Converts an enum to an array of entities with id and name.  The enum can be an integer or string enum.*/
-const enumToEntities = (enumObj) => {
-    const entities = [];
-    for (const key in enumObj) {
-        if (isNaN(parseInt(key, 10))) {
-            entities.push({
-                id: enumObj[key],
-                name: key
+const TabHeader = (p) => {
+    var _a, _b;
+    const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const [tabsChanging, setTabsChanging] = React__namespace.useState(false);
+    const theme = useThemeSafely();
+    const variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'tab';
+    const menuStyles = css.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'
+    });
+    function onTabSelect(index, tabId, focusAfter) {
+        const onChange = () => {
+            var _a;
+            setTabIndex(index);
+            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+            if (focusAfter) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        };
+        if (p.onBeforeTabChanged) {
+            setTabsChanging(true);
+            p.onBeforeTabChanged(index)
+                .then(() => {
+                onChange();
+            })
+                .catch(() => {
+                /* do nothing */
+            })
+                .finally(() => {
+                setTabsChanging(false);
             });
         }
+        else {
+            onChange();
+        }
+    }
+    return (React__namespace.createElement("div", { className: "tabHeader" },
+        React__namespace.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+            var _a, _b;
+            const active = index === tabIndex;
+            let tabStyles;
+            let buttonStyles;
+            let buttonVariant;
+            if (variant === 'tab') {
+                tabStyles = css.css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    backgroundColor: theme.colors.bg,
+                    zIndex: 1,
+                }, active && {
+                    border: theme.controls.border,
+                    borderRadius: theme.controls.borderRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    borderBottom: 'none',
+                    zIndex: 3,
+                });
+                buttonVariant = 'link';
+                buttonStyles = css.css({
+                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
+                    overflow: 'hidden'
+                });
+            }
+            else {
+                buttonVariant = active ? 'primary' : undefined;
+                buttonStyles = css.css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
+                    overflow: 'hidden',
+                });
+            }
+            let title = tab.title;
+            let buttonContent;
+            if (typeof tab.name === 'string') {
+                title !== null && title !== void 0 ? title : (title = tab.name);
+                buttonContent = React__namespace.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
+            }
+            else {
+                buttonContent = tab.name;
+            }
+            const tabId = getTabHeaderTabId(p.id, index);
+            return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
+                React__namespace.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        onTabSelect(index, tabId, false);
+                    }, onKeyDown: e => {
+                        e.stopPropagation();
+                        let newIndex = index;
+                        if (e.code === 'ArrowLeft') {
+                            if (index === 0) {
+                                newIndex = p.tabs.length - 1;
+                            }
+                            else {
+                                newIndex = index - 1;
+                            }
+                        }
+                        else if (e.code === 'ArrowRight') {
+                            if (index === p.tabs.length - 1) {
+                                newIndex = 0;
+                            }
+                            else {
+                                newIndex = index + 1;
+                            }
+                        }
+                        if (newIndex !== index) {
+                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
+                        }
+                    } }, buttonContent)));
+        })),
+        variant === 'tab' && (React__namespace.createElement("div", { className: css.cx(css.css({
+                label: 'TabHeaderDivider',
+                borderBottom: theme.controls.border,
+                marginTop: `calc(${theme.controls.borderWidth} * -1)`,
+                zIndex: 2,
+                position: 'relative'
+            }), p.tabHeaderDividerClassName) }))));
+};
+function getTabHeaderTabId(tabHeaderId, tabIndex) {
+    return `${tabHeaderId}_tab_${tabIndex}`;
+}
+
+const TabContainer = (p) => {
+    var _a;
+    const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const theme = useThemeSafely();
+    const tabPanelId = `${p.id}_tabpanel`;
+    const tabHeaderId = `${p.id}_TabHeader`;
+    return (React__namespace.createElement("div", { className: css.css({
+            label: 'TabContainer'
+        }) },
+        React__namespace.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
+                var _a;
+                setTabIndex(newIndex);
+                (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
+            } }),
+        React__namespace.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: css.cx(css.css({
+                label: 'TabContainerContent',
+                padding: '1rem',
+                borderLeft: theme.controls.border,
+                borderRight: theme.controls.border,
+                borderBottom: theme.controls.border,
+            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
+};
+
+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 ThSort = (props) => {
+    let iconId = '';
+    if (props.direction) {
+        if (props.direction === 'asc') {
+            iconId = 'sortAsc';
+        }
+        else {
+            iconId = 'sortDesc';
+        }
     }
-    return entities;
+    let rightContentSpecialJustify = 'center';
+    switch (props.align) {
+        case 'left':
+            rightContentSpecialJustify = 'flex-start';
+            break;
+        case 'right':
+            rightContentSpecialJustify = 'flex-end';
+            break;
+    }
+    return (React__namespace.createElement(Th, { align: props.align, style: props.style, width: props.width },
+        React__namespace.createElement("div", { className: props.rightContent && css.css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: rightContentSpecialJustify,
+                gap: '0.5rem'
+            }) },
+            React__namespace.createElement(Button, { onClick: props.onClick, variant: "link" },
+                props.text,
+                iconId && React__namespace.createElement(Icon, { className: css.css({
+                        marginLeft: '0.5rem'
+                    }), id: iconId })),
+            props.rightContent)));
 };
 
-const Link = (props) => {
+const defaultMaxLength = 200;
+const defaultRows = 10;
+const TextArea = React__namespace.forwardRef((props, ref) => {
+    var _a, _b;
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, disabled, ref, waiting } = props, linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "disabled", "ref", "waiting"]);
+    const { onValueChange, customError, reportValueOnError, showErrorDisplay, allowUpdateOnFocus } = props, nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError", "showErrorDisplay", "allowUpdateOnFocus"]);
     const theme = useThemeSafely();
-    const linkStyles = generateLinkStyles(props, theme);
-    const mainClassName = css.cx('link', linkStyles, props.className);
-    if (variant === 'text') {
-        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
-    }
-    const isDisabled = props.disabled || props.waiting;
-    return (React__namespace.createElement("a", Object.assign({}, linkProps, { tabIndex: disabled ? -1 : undefined, target: props.target, className: mainClassName, onClick: e => {
-            var _a;
-            if (isDisabled) {
-                e.stopPropagation();
-                e.preventDefault();
+    React__namespace.useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            onValueChange(localValue);
+        }
+        else {
+            if (reportValueOnError) {
+                onValueChange(localValue);
             }
             else {
-                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            }
-        } }),
-        React__namespace.createElement(LinkContent, Object.assign({}, props))));
-};
-
-/* eslint @typescript-eslint/no-explicit-any: 0 */
-const ThemeRenderer = (p) => {
-    const { backgroundColor, color } = p, theme = __rest(p, ["backgroundColor", "color"]);
-    const flatTheme = flatten(theme);
-    const entries = lodash.orderBy(Object.entries(flatTheme), x => x[0]);
-    return (React__namespace.createElement(Table, { caption: (React__namespace.createElement("div", null,
-            React__namespace.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
-            React__namespace.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css.css({
-            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
-            color: color !== null && color !== void 0 ? color : 'black'
-        }) },
-        React__namespace.createElement("thead", null,
-            React__namespace.createElement(Tr, null,
-                React__namespace.createElement(Th, { align: "left" }, "Property"),
-                React__namespace.createElement(Th, { align: "left" }, "Value"))),
-        React__namespace.createElement("tbody", null, entries.map(([key, value]) => {
-            let colorBox;
-            if (/color/i.test(key)) {
-                colorBox = (React__namespace.createElement("span", { className: css.css({
-                        display: 'block',
-                        border: '1px solid black',
-                        width: '100%',
-                        height: 24,
-                        background: value
-                    }) }));
+                onValueChange(undefined);
             }
-            return (React__namespace.createElement(Tr, { key: key },
-                React__namespace.createElement(Td, { align: "left" }, key),
-                React__namespace.createElement(Td, { align: "left" },
-                    React__namespace.createElement("div", { className: css.css({
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '1rem'
-                        }) },
-                        React__namespace.createElement("span", { className: css.css({ flexShrink: 1 }) }, value),
-                        " ",
-                        colorBox))));
-        }))));
-};
-const flatten = (obj, parent, path = 'theme') => {
-    const flatObj = parent !== null && parent !== void 0 ? parent : {};
-    for (const prop in obj) {
-        const value = obj[prop];
-        const fullPath = `${path}.${prop}`;
-        if (typeof value !== 'object') {
-            flatObj[fullPath] = value;
         }
-        else {
-            flatten(value, flatObj, fullPath);
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
         }
+        updateErrorMessage();
+    }, [props.value]);
+    const styles = css.css({
+        backgroundColor: theme.colors.bg,
+        maxWidth: '100%',
+        minHeight: theme.controls.height,
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
+        color: theme.colors.font,
+        paddingTop: '0.75rem',
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        height: 'auto',
+        transition: theme.controls.transition,
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        },
+        ':disabled': {
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        ':invalid': {
+            borderColor: theme.colors.required,
+            ':focus': {
+                boxShadow: theme.controls.focusOutlineRequiredShadow
+            }
+        },
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    return (React__namespace.createElement("span", { className: css.css({
+            display: 'inline-block',
+            width: '100%'
+        }) },
+        React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+                var _a;
+                setLocalValue(e.target.value || undefined);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: e => {
+                var _a;
+                if (!props.noTrim) {
+                    setLocalValue(currentValue => {
+                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                    });
+                }
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })),
+        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React__namespace.createElement(InputErrorDisplay, { error: validationError })));
+});
+
+const ToggleButton = React__namespace.forwardRef((props, ref) => {
+    const { checked, checkedChildren, uncheckedChildren, checkedVariant, checkedClassName, checkedStyle, checkedIcon, uncheckedIcon } = props, buttonProps = __rest(props, ["checked", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
+    let children;
+    if (checked) {
+        children = checkedChildren;
     }
-    return flatObj;
+    else {
+        children = uncheckedChildren;
+    }
+    return (React__namespace.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: css.cx('toggleButton', checked && 'toggleButton--checked', props.className, checked && checkedClassName), rightIcon: checked ? checkedIcon : uncheckedIcon, variant: checked ? checkedVariant : props.variant, style: checked ? checkedStyle : props.style }), children));
+});
+
+const ToggleButtonGroup = (props) => {
+    const theme = useThemeSafely();
+    const groupStyles = css.css `
+		display: flex;
+		box-shadow: ${theme.controls.buttonBoxShadow};
+		border-radius: ${theme.controls.borderRadius};
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+	`;
+    const buttonStyles = css.css `
+		flex-grow:1;
+		box-shadow: none;
+		&:nth-of-type(1n+2){
+			margin-left: -1px;
+		}
+		border-radius: 0;
+		&:first-of-type{
+			border-top-left-radius: ${theme.controls.borderRadius};
+			border-bottom-left-radius: ${theme.controls.borderRadius};
+		}
+		&:last-child {
+			border-top-right-radius: ${theme.controls.borderRadius};
+			border-bottom-right-radius: ${theme.controls.borderRadius};
+		}
+		${props.round && `
+			&:first-of-type{
+				border-top-left-radius: ${theme.controls.roundRadius};
+				border-bottom-left-radius: ${theme.controls.roundRadius};
+				padding-left: 1rem;
+			}
+			&:last-child {
+				border-top-right-radius: ${theme.controls.roundRadius};
+				border-bottom-right-radius: ${theme.controls.roundRadius};
+				padding-right: 1rem;
+			}
+		`}
+	`;
+    return (React__namespace.createElement("div", { className: css.cx('toggleButtonGroup', groupStyles, props.className) }, props.options.map(o => {
+        const active = o.id === props.value;
+        return React__namespace.createElement(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, className: css.cx(css.css `
+					${buttonStyles}
+					${active && `
+						background-color: ${theme.colors.font};
+						color: ${theme.colors.bg};
+						cursor: default;
+						&:hover:not(:disabled) {
+							filter: none;
+						}
+						&:focus {
+							outline: none;
+							box-shadow: none;
+						}
+					`}
+				`, active ? o.activeClass : undefined), disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
+                if (active) {
+                    return;
+                }
+                props.onChange(o.id);
+            } }, o.name);
+    })));
 };
 
-const TabContainer = (p) => {
-    var _a;
-    const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
-    const theme = useThemeSafely();
-    const tabPanelId = `${p.id}_tabpanel`;
-    const tabHeaderId = `${p.id}_TabHeader`;
-    return (React__namespace.createElement("div", { className: css.css({
-            label: 'TabContainer'
-        }) },
-        React__namespace.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
-                var _a;
-                setTabIndex(newIndex);
-                (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
-            } }),
-        React__namespace.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: css.cx(css.css({
-                label: 'TabContainerContent',
-                padding: '1rem',
-                borderLeft: theme.controls.border,
-                borderRight: theme.controls.border,
-                borderBottom: theme.controls.border,
-            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
-};
+const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
+    const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
+    const [show, setShow] = React__namespace.useState(false);
+    useIgnoreMount(() => {
+        onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
+    }, [show]);
+    return (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
+                // small button is required here due to the icon pushing outside the boundries of the
+                // parent textbox.  increasing the font size here to fill the small button.
+                fontSize: '1rem'
+            }, variant: "icon", onClick: () => {
+                setShow(previous => !previous);
+            } },
+            React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
+});
 
-const defaultMinChars = 3;
-class AutocompleteController {
-    constructor(getOptions, config) {
-        var _a;
-        this._value = undefined;
-        this._options = [];
-        this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
-        if (config === null || config === void 0 ? void 0 : config.debounceMs) {
-            this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
-        }
-        else {
-            this.getOptions = getOptions;
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    get options() {
-        return this._options;
-    }
-    async onChange(newValue) {
-        // don't make getOptions calls if the value hasn't changed.
-        if (newValue === this.value) {
-            return;
-        }
-        // nullish should not make the getOptions call and instead clear everything.
-        if (!newValue) {
-            this._value = newValue;
-            this._options = [];
-            return;
-        }
-        // sub min chars should clear everything and not attempt the getOptions call.
-        if (newValue.length < this._minChars) {
-            this._value = newValue;
-            this._options = [];
-            return;
-        }
-        try {
-            this._value = newValue;
-            this._options = (await this.getOptions(newValue));
-        }
-        catch (err) {
-            // this method will throw errors on debounce rejections. that is to be expected.
-            // for actual getOptions exceptions, the owner of that function will need to handle errors.
-        }
-    }
-    onPick(newValue) {
-        this._value = newValue;
-        this._options = [];
+const WaitingIndicator = (p) => {
+    var _a, _b, _c;
+    const [show, setShow] = React.useState(p.show);
+    const hideTimer = React.useRef(0);
+    const lastShowStatus = React.useRef(false);
+    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const { notify, clearNotification } = useAriaLiveRegion();
+    if (p.__debug) {
+        React.useEffect(() => {
+            log('mounted');
+            return () => {
+                log('unmounted');
+            };
+        }, []);
     }
-}
-const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
-    let timer;
-    let onCancel;
-    return (value) => {
-        if (timer) {
-            clearTimeout(timer);
+    React.useEffect(() => {
+        log('show changed', p.show);
+        // we need to store the 'last props' since props.show will be captured locally and the incorrect
+        // value will display in the timeout below.
+        log('storing lastShowStatus', p.show);
+        lastShowStatus.current = p.show;
+        if (p.show) {
+            log('setShow', true);
+            setShow(true);
+            if (p.minShowTimeMs) {
+                log('staring hideTimer', 'timout in ms:', p.minShowTimeMs);
+                hideTimer.current = window.setTimeout(() => {
+                    log('hideTimer complete', 'clearing hideTimer');
+                    window.clearTimeout(hideTimer.current);
+                    hideTimer.current = 0;
+                    // this check is necessary since the show status may have updated again to true.
+                    // if so, ignore this timeout since we're already past the min time and we're still
+                    // showing the component.
+                    if (!lastShowStatus.current) {
+                        log('setShow', false);
+                        setShow(false);
+                    }
+                    else {
+                        log('ignoring hideTimer handler due to hideTimer ticking');
+                    }
+                }, p.minShowTimeMs);
+            }
         }
-        if (onCancel) {
-            onCancel('Promise cancelled due to in-progress debounce call.');
-            onCancel = undefined;
+        else {
+            // ignore hiding the component since the min timer is running.
+            if (!hideTimer.current) {
+                log('setShow', false);
+                setShow(false);
+            }
+            else {
+                log('ignoring show change due to hideTimer ticking');
+            }
         }
-        return new Promise((res, rej) => {
-            onCancel = rej;
-            timer = setTimeout(() => {
-                originalFunction(value)
-                    .then(values => {
-                    res(values);
-                })
-                    .catch(err => {
-                    rej(err);
-                })
-                    .finally(() => {
-                    clearTimeout(timer);
-                });
-            }, trailingTimeoutMs);
-        });
-    };
-};
-
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
-class AutocompleteEntityController {
-    constructor(getOptions, config) {
-        this._options = [];
-        const getStringOptions = async (value) => {
-            this._options = await getOptions(value);
-            return this._options.map(o => o.name);
-        };
-        this._ctrl = new AutocompleteController(getStringOptions, config);
-    }
-    get entity() {
-        return this._pickedEntity;
-    }
-    get entities() {
-        return this._options;
-    }
-    get value() {
-        return this._ctrl.value;
-    }
-    get options() {
-        return this._options.map(o => o.name);
-    }
-    async onChange(newValue) {
-        const clearEntity = newValue !== this._ctrl.value;
-        await this._ctrl.onChange(newValue);
-        if (clearEntity) {
-            this._pickedEntity = undefined;
+        if (p.show) {
+            // set to a very long time so the hiding of the waiting indicator clears it.
+            notify('Loading content.', 60000);
         }
-        this.trySyncCtrlOptions();
-    }
-    onPick(newValue) {
-        this._ctrl.onPick(newValue);
-        this._pickedEntity = this._options.find(o => o.name === this._ctrl.value);
-        this.trySyncCtrlOptions();
-    }
-    trySyncCtrlOptions() {
-        if (!this._ctrl.options.length) {
-            this._options = [];
+        else {
+            clearNotification();
         }
-    }
-}
-
-var decimal=["decimal","décimale"];var place=["lugar","lieu"];var places=["lugares","lieux"];var file=["archivo","fichier"];var selected=["seleccionado","choisi"];var Upload=["Subir","Télécharger"];var Clear=["Cerrar","Fermer"];var Showing=["Mostrando","Affichage de"];var of=["de","sur"];var results=["resultados","résultats"];var Page=["Página","Page"];var Limit=["Límite","Limite"];var Sort=["Ordenar","Trier"];var January=["Enero","Janvier"];var February=["Febrero","Février"];var March=["Marzo","Mars"];var April=["Abril","Avril"];var May=["Mayo","Mai"];var June=["Junio","Juin"];var July=["Julio","Juillet"];var August=["Agosto","Août"];var September=["Septiembre","Septembre"];var October=["Octubre","Octobre"];var November=["Noviembre","Novembre"];var December=["Diciembre","Décembre"];var Sun=["Dom","Dim"];var Mon=["Lun","Lun"];var Tue=["Mar","Mar"];var Wed=["Mié","Mer"];var Thu=["Jue","Jeu"];var Fri=["Vie","Ven"];var Sat=["Sáb","Sam"];var OK=["Aceptar","Accepter"];var Cancel=["Cancelar","Annuler"];var strings = {"Required.":["Requerido.","Requis."],"Must be at least":["Debe ser al menos","Doit être au moins"],"characters in length.":["caracteres de longitud.","caractères de longueur."],"Must be an integer.":["Debe ser un número entero.","Doit être un entier."],"Limited to":["Limitado a","Limité à"],decimal:decimal,place:place,places:places,"Must be greater than or equal to":["Debe ser mayor o igual a","Doit être supérieur ou égal à"],"Must be less than or equal to":["Debe ser menor o igual a","Doit être inférieur ou égal à"],"Invalid email.":["Correo electrónico no válido.","Email invalide."],"Invalid URL.":["URL no válida.","URL non valide."],"Click or drag and drop files.":["Haga clic o arrastre y suelte archivos.","Cliquez ou faites glisser et déposez les fichiers."],file:file,selected:selected,"Upload failed.":["Error en la carga.","Le téléchargement a échoué."],Upload:Upload,"Upload successful.":["Carga exitosa","Téléchargement réussi."],"Invalid files":["Archivos no válidos","Fichiers invalides"],"Max file size exceeded":["Se ha excedido el tamaño máximo de archivo","La taille maximale du fichier a été dépassée"],"Error":["Error","Erreur"],Clear:Clear,Showing:Showing,of:of,results:results,"No Results":["No Hay Resultados","Aucun Résultat"],Page:Page,Limit:Limit,Sort:Sort,January:January,February:February,March:March,April:April,May:May,June:June,July:July,August:August,September:September,October:October,November:November,December:December,Sun:Sun,Mon:Mon,Tue:Tue,Wed:Wed,Thu:Thu,Fri:Fri,Sat:Sat,OK:OK,Cancel:Cancel,"Copied!":["¡Copiado!","Copié!"],"Copy to clipboard":["Copiar al portapapeles","Copier dans le presse-papier"]};
-
-const LocalizationProvider = (p) => {
-    var _a;
-    const log = useLogger('LocalizationProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
-    const stringsDb = strings;
-    return (React.createElement(LocalizationContext.Provider, { value: {
-            language: p.language,
-            getText: (text) => {
-                if (!text) {
-                    return '';
-                }
-                if (!isNaN(parseInt(text))) {
-                    return text;
-                }
-                const wordArray = stringsDb[text];
-                if (!wordArray) {
-                    log(`No localization data exists for "${text}".`);
-                }
-                if (p.language === exports.StyleGuideLanguage.English) {
-                    return text;
-                }
-                const languageIndex = p.language - 1;
-                const translation = wordArray === null || wordArray === void 0 ? void 0 : wordArray[languageIndex];
-                if (translation) {
-                    return translation;
-                }
-                log(`No ${exports.StyleGuideLanguage[p.language]} translations exist for "${text}".`);
-                return text;
-            }
-        } }, p.children));
+    }, [p.show]);
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'MknWaitingIndicator';
+    return (React.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
+        React.createElement("div", { className: css.css({
+                color: 'white',
+                fontSize: '3rem',
+                padding: '0.7rem'
+            }) },
+            React.createElement(Icon, { id: "waiting", spin: true }))));
 };
 
 exports.Accordion = Accordion;
@@ -5421,6 +5516,7 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.LocalizationProvider = LocalizationProvider;
 exports.Modal = Modal;
+exports.MultiPicker = MultiPicker;
 exports.Nav = Nav;
 exports.NormalizeCss = NormalizeCss;
 exports.NumberInput = NumberInput;