@mackin.com/styleguide 11.0.11 → 11.1.0

package/index.esm.js

@@ -1242,6 +1242,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 uniqueId();
@@ -1614,55 +1736,37 @@ const Checkbox = (props) => {
             finalCheckedColor = checkedColor;
         }
     }
-    const checkboxStyles = css `
-		display: inline-block;
-		${!props.disabled && !readOnly && `
-			&:hover {
-				filter: ${theme.controls.hoverBrightness};
-			}
-		`}
-	`;
-    const labelStyles = 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 `
-		margin: 0;
-		padding: 0;
-		width: 0;
-		opacity: 0; 
-
-		${!readOnly && `
-			&:focus + .checkboxIcon {
-				box-shadow: ${theme.controls.focusOutlineShadow};
-			}
-		`}
-	`;
-    const iconStyles = 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({
+        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({
+        cursor,
+        userSelect: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+    });
+    const nativeCheckboxStyles = css({
+        margin: 0,
+        padding: 0,
+        inset: 0,
+        position: 'absolute',
+        opacity: 0,
+        cursor,
+        '&:focus + .checkboxIcon': !readOnly ? {
+            boxShadow: theme.controls.focusOutlineShadow
+        } : undefined
+    });
+    const iconStyles = css({
+        marginRight: (!!label && !hideLabel) ? '0.5rem' : undefined,
+        backgroundColor: props.disabled ? theme.colors.disabled : undefined,
+        cursor,
+        color: props.checked ? finalCheckedColor : uncheckedIcon
+    });
     return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
         React.createElement("label", { className: labelStyles },
             React.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 => {
@@ -2978,132 +3082,30 @@ const Label = (props) => {
     return (React.createElement("label", Object.assign({}, labelProps, { htmlFor: htmlFor, className: cx('label', labelStyles, outerClass) }), content));
 };
 
-const Nav = (props) => {
-    var _a, _b, _c, _d;
-    const nav = React.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 = keyframes `
-		0% {
-			transform: translateX(0);
-		}
-
-		100% {
-			transform: translateX(${totalNavOffset});
-		}
-	`;
-    const slideLeft = keyframes `
-		0% {
-			transform: translateX(${totalNavOffset});
-		}
-
-		100% {
-			transform: translateX(0px);
-		}
-	`;
-    const classNavShowing = css `
-		animation: ${slideRight} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	`;
-    const classNavNotShowing = css `
-		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	`;
-    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 `
-		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.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.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.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: cx('nav', navStyles, props.className), onKeyDown: e => {
-            if (e.code === 'Escape') {
-                props.toggle(false);
-            }
-        } },
-        React.createElement(TabLocker, { className: css({ height: '100%' }) }, props.children)));
-};
-
-const LinkContent = (props) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", null,
-            props.leftIcon && React.createElement("span", { className: css({
-                    label: 'LinkLeftIcon',
-                    marginRight: '1rem',
-                    display: 'inline-block',
-                    minWidth: '1.5rem',
-                    verticalAlign: 'middle'
-                }) }, props.leftIcon),
-            props.waiting ? React.createElement(Icon, { id: "waiting", spin: true }) : props.children),
-        props.rightIcon && React.createElement("span", { className: 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.createElement(React.Fragment, null,
+        React.createElement("span", null,
+            props.leftIcon && React.createElement("span", { className: css({
+                    label: 'LinkLeftIcon',
+                    marginRight: '1rem',
+                    display: 'inline-block',
+                    minWidth: '1.5rem',
+                    verticalAlign: 'middle'
+                }) }, props.leftIcon),
+            props.waiting ? React.createElement(Icon, { id: "waiting", spin: true }) : props.children),
+        props.rightIcon && React.createElement("span", { className: 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) {
@@ -3337,6 +3339,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 = cx('link', linkStyles, props.className);
+    if (variant === 'text') {
+        return React.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
+    const isDisabled = props.disabled || props.waiting;
+    return (React.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.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"]);
@@ -3363,11 +3388,113 @@ const OmniLink = (props) => {
         } }), content));
 };
 
+const Nav = (props) => {
+    var _a, _b, _c, _d;
+    const nav = React.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 = keyframes `
+		0% {
+			transform: translateX(0);
+		}
+
+		100% {
+			transform: translateX(${totalNavOffset});
+		}
+	`;
+    const slideLeft = keyframes `
+		0% {
+			transform: translateX(${totalNavOffset});
+		}
+
+		100% {
+			transform: translateX(0px);
+		}
+	`;
+    const classNavShowing = css `
+		animation: ${slideRight} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    const classNavNotShowing = css `
+		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	`;
+    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 `
+		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.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.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.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React.createElement(TabLocker, { className: 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) {
@@ -3381,6 +3508,7 @@ const Picker = (props) => {
     }
     const theme = useThemeSafely();
     const selectStyles = css({
+        label: 'Picker',
         // fix the arrow so browser all look the same
         appearance: 'none',
         paddingLeft: theme.controls.padding,
@@ -3424,8 +3552,7 @@ const Picker = (props) => {
     const select = (React.createElement("select", Object.assign({}, selectProps, { tabIndex: readOnly ? -1 : selectProps.tabIndex, className: 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();
@@ -3466,7 +3593,7 @@ const Picker = (props) => {
             val = o;
             label = o;
         }
-        return React.createElement("option", { key: val, value: val }, label);
+        return React.createElement("option", { key: val, value: val, className: optionClassName }, label);
     })));
     return (React.createElement("span", { className: cx(css({
             label: 'PickerWrapper',
@@ -3942,40 +4069,152 @@ class ItemPager {
     }
 }
 
-const ProgressBar = (props) => {
-    var _a;
-    const bar = React.useRef(null);
-    React.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 `
-		width: 100%;
-		height: 1rem;
-		border: ${theme.controls.border};
-		background-color: ${theme.colors.progressBg};
-		${props.round && `
-			border-radius: 1rem;
-		`}
-	`;
-    const fillStyles = css `
-		transition: width 0.5s ease-in-out;
-		height: 100%;
-		background-color: ${theme.colors.progressFill};
-		${props.round && `
-			border-radius: 1rem;
-		`}
-	`;
-    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
-    const wrapStyles = css({
-        label: 'ProgressBar',
-        display: 'flex',
-        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
-        alignItems: showPctPosition === 'right' ? 'center' : undefined,
-        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    const selectStyles = 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.createElement("select", Object.assign({}, selectProps, { multiple: true, tabIndex: readOnly ? -1 : selectProps.tabIndex, className: 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.createElement("option", { key: val, value: val, className: optionClassName }, label);
+    })));
+    return (React.createElement("span", { className: cx(css({
+            label: 'MultiPickerWrapper',
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+        }), wrapperClassName) },
+        React.createElement("div", { className: css({
+                position: 'relative'
+            }) }, select),
+        (error || controlAlign) && React.createElement(InputErrorDisplay, { error: error })));
+};
+
+const ProgressBar = (props) => {
+    var _a;
+    const bar = React.useRef(null);
+    React.useEffect(() => {
+        const pct = cleanPct(props.pct);
+        if (bar.current) {
+            bar.current.style.width = `${pct}%`;
+        }
+    });
+    const theme = useThemeSafely();
+    const barStyles = css `
+		width: 100%;
+		height: 1rem;
+		border: ${theme.controls.border};
+		background-color: ${theme.colors.progressBg};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const fillStyles = css `
+		transition: width 0.5s ease-in-out;
+		height: 100%;
+		background-color: ${theme.colors.progressFill};
+		${props.round && `
+			border-radius: 1rem;
+		`}
+	`;
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = 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({
         width: '3rem'
@@ -4070,6 +4309,29 @@ const SearchBox = React.forwardRef((props, ref) => {
     return (React.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();
     injectGlobal({
@@ -4098,698 +4360,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] = useState(window.matchMedia(query).matches);
-    useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        window.addEventListener("resize", listener);
-        return () => window.removeEventListener("resize", listener);
-    }, [matches, query]);
-    return matches;
-};
+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 = 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 = useRef(p.value);
-    const [, forceUpdate] = useState(Date.now());
-    useEffect(() => {
-        if (p.value !== currentValue.current) {
-            currentValue.current = p.value;
-            forceUpdate(Date.now());
-        }
-    }, [p.value]);
-    return (React__default.createElement("div", { ref: sliderContainer, className: cx(css({
-            label: 'Slider',
-            width: '100%',
-            height,
-        }), p.className) },
-        React__default.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__default.createElement("div", Object.assign({ className: cx(className, p.trackClassName, css({
-                        display: 'flex',
-                        alignItems: 'center',
-                        height: sliderHandleSize
-                    })) }, rest),
-                    React__default.createElement("div", { className: css({
-                            backgroundColor: theme.colors.secondary,
-                            height: `calc(${sliderHandleSize} / 4)`,
-                            borderRadius: theme.controls.roundRadius,
-                            width: '100%'
-                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
-            }, renderThumb: (props, state) => {
-                const { className } = props, rest = __rest(props, ["className"]);
-                let specificThumbStyles;
-                if (p.handle1ClassName && props.key === 'thumb-0') {
-                    specificThumbStyles = p.handle1ClassName;
+    const log = useLogger('LocalizationProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
+    const stringsDb = strings;
+    return (React__default.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__default.createElement("div", Object.assign({ className: cx(className, css({
-                        borderRadius: theme.controls.roundRadius,
-                        backgroundColor: 'white',
-                        border: theme.controls.border,
-                        cursor: 'grab',
-                        boxShadow: theme.controls.buttonBoxShadow,
-                        transition: theme.controls.transition,
-                        '&:focus': {
-                            outline: 'none',
-                            boxShadow: theme.controls.focusOutlineShadow
-                        },
-                        '&:active': {
-                            boxShadow: 'none',
-                            cursor: 'grabbing'
-                        },
-                        '&:hover': {
-                            filter: theme.controls.hoverBrightness
-                        }
-                    }), specificThumbStyles, p.handleClassName, css({
-                        width: sliderHandleSize,
-                        height: sliderHandleSize,
-                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
-            } })));
-};
-const rectsCollideX = (r1, r2) => {
-    if (r1.left >= r2.left && r1.left <= r2.right) {
-        return true;
-    }
-    if (r1.right >= r2.left && r1.right <= r2.right) {
-        return true;
-    }
-    return false;
-};
-const HandleText = (p) => {
-    var _a, _b, _c;
-    const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
-    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
-    const renderValueLeft = useMemo(() => {
-        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
-    }, [p.renderValueWidth, p.sliderHandleSize]);
-    const [flipText, setFlipText] = useState(false);
-    const offset = '2px';
-    useEffect(() => {
-        // this needs to fire on every render due to the other handle also moving.
-        var _a, _b;
-        if (p.index === 1) {
-            // only do this for the max/right-most handle
-            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
-            if (r1 && r2) {
-                setFlipText(rectsCollideX(r1, r2));
+                const wordArray = stringsDb[text];
+                if (!wordArray) {
+                    log(`No localization data exists for "${text}".`);
+                }
+                if (p.language === 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 ${StyleGuideLanguage[p.language]} translations exist for "${text}".`);
+                return text;
             }
-        }
-    });
-    return (React__default.createElement(Text, { ellipsis: true, className: cx('slider-handle', css({
-            width: renderValueWidth,
-            left: renderValueLeft,
-            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
-            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
-            position: 'absolute',
-            overflow: 'hidden',
-        }), p.className), tag: "div", align: "center" }, displayValue));
-};
-
-const TabHeader = (p) => {
-    var _a, _b;
-    const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
-    const [tabsChanging, setTabsChanging] = React.useState(false);
-    const theme = useThemeSafely();
-    const variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'tab';
-    const menuStyles = css({
-        display: 'flex',
-        gap: theme.controls.gap,
-        listStyleType: 'none',
-        margin: 0,
-        padding: 0,
-        flexWrap: variant === 'button' ? 'wrap' : 'nowrap'
-    }, variant === 'button' && {
-        borderBottom: theme.controls.border,
-        paddingBottom: '1rem'
-    });
-    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.createElement("div", { className: "tabHeader" },
-        React.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
-            var _a, _b;
-            const active = index === tabIndex;
-            let tabStyles;
-            let buttonStyles;
-            let buttonVariant;
-            if (variant === 'tab') {
-                tabStyles = css({
-                    paddingLeft: '1rem',
-                    paddingRight: '1rem',
-                    backgroundColor: theme.colors.bg,
-                    zIndex: 1,
-                }, active && {
-                    border: theme.controls.border,
-                    borderRadius: theme.controls.borderRadius,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    borderBottom: 'none',
-                    zIndex: 3,
-                });
-                buttonVariant = 'link';
-                buttonStyles = css({
-                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
-                    overflow: 'hidden'
-                });
-            }
-            else {
-                buttonVariant = active ? 'primary' : undefined;
-                buttonStyles = css({
-                    paddingLeft: '1rem',
-                    paddingRight: '1rem',
-                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
-                    overflow: 'hidden',
-                });
-            }
-            let title = tab.title;
-            let buttonContent;
-            if (typeof tab.name === 'string') {
-                title !== null && title !== void 0 ? title : (title = tab.name);
-                buttonContent = React.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
-            }
-            else {
-                buttonContent = tab.name;
-            }
-            const tabId = getTabHeaderTabId(p.id, index);
-            return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                React.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.createElement("div", { className: cx(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 `
-		label: Table;
-		width: 100%;
-		border-collapse: collapse;
-		${props.noCellBorder && `
-			.table__td {
-				border-left: none;
-				border-right: none;
-			}
-		`}
-		${props.altRows && `
-			.table__tr:nth-of-type(even) {
-				background-color: ${theme.colors.lightBg};
-			}
-		`}
-	`;
-    const wrapperStyles = css `
-		label: TableScrollWrapper;
-		width:100%;
-        overflow-y: auto;
-        padding:0 1px;  //fixes always showing of the table scroller
-	`;
-    return (React.createElement("div", { className: cx(wrapperStyles, props.wrapperClassName) },
-        React.createElement("table", { className: cx(tableStyles, props.className) },
-            props.caption && React.createElement("caption", { className: css({
-                    fontWeight: 'bold',
-                    padding: theme.controls.padding
-                }) }, props.caption),
-            props.children)));
-};
-const Tr = (props) => {
-    return (React.createElement("tr", { className: cx('table__tr', props.className) }, props.children));
-};
-const Th = (props) => {
-    var _a;
-    let style = props.style;
-    if (props.width) {
-        if (style) {
-            style = Object.assign(Object.assign({}, style), { width: props.width, minWidth: props.width });
-        }
-        else {
-            style = { width: props.width, minWidth: props.width };
-        }
-    }
-    const theme = useThemeSafely();
-    const thStyles = css `
-		border-bottom: ${theme.controls.border};
-		padding: ${theme.controls.padding};
-		font-weight: bold;
-		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
-		> .button {
-            font-weight: bold;
-        }
-	`;
-    return (React.createElement("th", { className: cx(thStyles, props.className), style: style }, props.children));
-};
-const Td = (props) => {
-    var _a;
-    const theme = useThemeSafely();
-    const tdStyles = css `
-		border: ${theme.controls.border};
-		padding: ${theme.controls.padding};
-		vertical-align: middle;
-		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
-	`;
-    return (React.createElement("td", { colSpan: props.colSpan, style: props.style, className: cx('table__td', tdStyles, props.className) }, props.children));
-};
-
-const TdCurrency = (props) => {
-    let actualValue = props.value || 0;
-    if (props.cents) {
-        actualValue = actualValue / 100;
-    }
-    const displayValue = actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    return (React.createElement(Td, { align: "right" },
-        "$",
-        displayValue));
-};
-
-const TdNumber = (props) => {
-    return React.createElement(Td, { align: "right" }, props.value || props.value === 0 ? props.value.toLocaleString() : '');
-};
-
-const ThSort = (props) => {
-    let iconId = '';
-    if (props.direction) {
-        if (props.direction === 'asc') {
-            iconId = 'sortAsc';
-        }
-        else {
-            iconId = 'sortDesc';
-        }
-    }
-    let rightContentSpecialJustify = 'center';
-    switch (props.align) {
-        case 'left':
-            rightContentSpecialJustify = 'flex-start';
-            break;
-        case 'right':
-            rightContentSpecialJustify = 'flex-end';
-            break;
-    }
-    return (React.createElement(Th, { align: props.align, style: props.style, width: props.width },
-        React.createElement("div", { className: props.rightContent && css({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: rightContentSpecialJustify,
-                gap: '0.5rem'
-            }) },
-            React.createElement(Button, { onClick: props.onClick, variant: "link" },
-                props.text,
-                iconId && React.createElement(Icon, { className: css({
-                        marginLeft: '0.5rem'
-                    }), id: iconId })),
-            props.rightContent)));
-};
-
-const defaultMaxLength = 200;
-const defaultRows = 10;
-const TextArea = React.forwardRef((props, ref) => {
-    var _a, _b;
-    const [localValue, setLocalValue] = React.useState(props.value);
-    const inputRef = (ref !== null && ref !== void 0 ? ref : React.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.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({
-        backgroundColor: theme.colors.bg,
-        maxWidth: '100%',
-        minHeight: theme.controls.height,
-        fontFamily: theme.fonts.family,
-        fontSize: theme.fonts.size,
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: theme.controls.borderRadius,
-        color: theme.colors.font,
-        paddingTop: '0.75rem',
-        paddingLeft: theme.controls.padding,
-        paddingRight: theme.controls.padding,
-        height: 'auto',
-        transition: theme.controls.transition,
-        ':focus': {
-            outline: 'none',
-            boxShadow: theme.controls.focusOutlineShadow
-        },
-        ':disabled': {
-            backgroundColor: theme.colors.disabled,
-            cursor: 'not-allowed'
-        },
-        ':invalid': {
-            borderColor: theme.colors.required,
-            ':focus': {
-                boxShadow: theme.controls.focusOutlineRequiredShadow
-            }
-        },
-    }, props.readOnly && {
-        backgroundColor: 'transparent',
-        cursor: 'default',
-        border: 'none',
-        ':focus': {
-            outline: 'none',
-            boxShadow: 'none'
-        }
-    });
-    return (React.createElement("span", { className: css({
-            display: 'inline-block',
-            width: '100%'
-        }) },
-        React.createElement("textarea", Object.assign({}, nativeProps, { className: cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
-                var _a;
-                setLocalValue(e.target.value || undefined);
-                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            }, onBlur: e => {
-                var _a;
-                if (!props.noTrim) {
-                    setLocalValue(currentValue => {
-                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
-                    });
-                }
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            } })),
-        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React.createElement(InputErrorDisplay, { error: validationError })));
-});
-
-const ToggleButton = React.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.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: 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 `
-		display: flex;
-		box-shadow: ${theme.controls.buttonBoxShadow};
-		border-radius: ${theme.controls.borderRadius};
-		${props.round && `
-			border-radius: ${theme.controls.roundRadius};
-		`}
-	`;
-    const buttonStyles = css `
-		flex-grow:1;
-		box-shadow: none;
-		&:nth-of-type(1n+2){
-			margin-left: -1px;
-		}
-		border-radius: 0;
-		&:first-of-type{
-			border-top-left-radius: ${theme.controls.borderRadius};
-			border-bottom-left-radius: ${theme.controls.borderRadius};
-		}
-		&:last-child {
-			border-top-right-radius: ${theme.controls.borderRadius};
-			border-bottom-right-radius: ${theme.controls.borderRadius};
-		}
-		${props.round && `
-			&:first-of-type{
-				border-top-left-radius: ${theme.controls.roundRadius};
-				border-bottom-left-radius: ${theme.controls.roundRadius};
-				padding-left: 1rem;
-			}
-			&:last-child {
-				border-top-right-radius: ${theme.controls.roundRadius};
-				border-bottom-right-radius: ${theme.controls.roundRadius};
-				padding-right: 1rem;
-			}
-		`}
-	`;
-    return (React.createElement("div", { className: cx('toggleButtonGroup', groupStyles, props.className) }, props.options.map(o => {
-        const active = o.id === props.value;
-        return React.createElement(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, className: cx(css `
-					${buttonStyles}
-					${active && `
-						background-color: ${theme.colors.font};
-						color: ${theme.colors.bg};
-						cursor: default;
-						&:hover:not(:disabled) {
-							filter: none;
-						}
-						&:focus {
-							outline: none;
-							box-shadow: none;
-						}
-					`}
-				`, active ? o.activeClass : undefined), disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
-                if (active) {
-                    return;
-                }
-                props.onChange(o.id);
-            } }, o.name);
-    })));
-};
-
-const TogglePasswordInput = React.forwardRef((props, ref) => {
-    const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
-    const [show, setShow] = React.useState(false);
-    useIgnoreMount(() => {
-        onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
-    }, [show]);
-    return (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React.createElement(Button, { small: true, style: {
-                // small button is required here due to the icon pushing outside the boundries of the
-                // parent textbox.  increasing the font size here to fill the small button.
-                fontSize: '1rem'
-            }, variant: "icon", onClick: () => {
-                setShow(previous => !previous);
-            } },
-            React.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
-});
-
-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] = useState(p.show);
-    const hideTimer = useRef(0);
-    const lastShowStatus = useRef(false);
-    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
-    const { notify, clearNotification } = useAriaLiveRegion();
-    if (p.__debug) {
-        useEffect(() => {
-            log('mounted');
-            return () => {
-                log('unmounted');
-            };
-        }, []);
-    }
-    useEffect(() => {
-        log('show changed', p.show);
-        // we need to store the 'last props' since props.show will be captured locally and the incorrect
-        // value will display in the timeout below.
-        log('storing lastShowStatus', p.show);
-        lastShowStatus.current = p.show;
-        if (p.show) {
-            log('setShow', true);
-            setShow(true);
-            if (p.minShowTimeMs) {
-                log('staring hideTimer', 'timout in ms:', p.minShowTimeMs);
-                hideTimer.current = window.setTimeout(() => {
-                    log('hideTimer complete', 'clearing hideTimer');
-                    window.clearTimeout(hideTimer.current);
-                    hideTimer.current = 0;
-                    // this check is necessary since the show status may have updated again to true.
-                    // if so, ignore this timeout since we're already past the min time and we're still
-                    // showing the component.
-                    if (!lastShowStatus.current) {
-                        log('setShow', false);
-                        setShow(false);
-                    }
-                    else {
-                        log('ignoring hideTimer handler due to hideTimer ticking');
-                    }
-                }, p.minShowTimeMs);
-            }
-        }
-        else {
-            // ignore hiding the component since the min timer is running.
-            if (!hideTimer.current) {
-                log('setShow', false);
-                setShow(false);
-            }
-            else {
-                log('ignoring show change due to hideTimer ticking');
-            }
-        }
-        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__default.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
-            /* noop */
-        }, className: "waitingIndicator", show: show },
-        React__default.createElement("div", { className: css({
-                color: 'white',
-                fontSize: '3rem',
-                padding: '0.7rem'
-            }) },
-            React__default.createElement(Icon, { id: "waiting", spin: true }))));
+        } }, p.children));
 };
 
 /*
@@ -5088,284 +4689,778 @@ 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 `
+		label: Table;
+		width: 100%;
+		border-collapse: collapse;
+		${props.noCellBorder && `
+			.table__td {
+				border-left: none;
+				border-right: none;
+			}
+		`}
+		${props.altRows && `
+			.table__tr:nth-of-type(even) {
+				background-color: ${theme.colors.lightBg};
+			}
+		`}
+	`;
+    const wrapperStyles = css `
+		label: TableScrollWrapper;
+		width:100%;
+        overflow-y: auto;
+        padding:0 1px;  //fixes always showing of the table scroller
+	`;
+    return (React.createElement("div", { className: cx(wrapperStyles, props.wrapperClassName) },
+        React.createElement("table", { className: cx(tableStyles, props.className) },
+            props.caption && React.createElement("caption", { className: css({
+                    fontWeight: 'bold',
+                    padding: theme.controls.padding
+                }) }, props.caption),
+            props.children)));
+};
+const Tr = (props) => {
+    return (React.createElement("tr", { className: cx('table__tr', props.className) }, props.children));
+};
+const Th = (props) => {
+    var _a;
+    let style = props.style;
+    if (props.width) {
+        if (style) {
+            style = Object.assign(Object.assign({}, style), { width: props.width, minWidth: props.width });
+        }
+        else {
+            style = { width: props.width, minWidth: props.width };
+        }
+    }
+    const theme = useThemeSafely();
+    const thStyles = css `
+		border-bottom: ${theme.controls.border};
+		padding: ${theme.controls.padding};
+		font-weight: bold;
+		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
+		> .button {
+            font-weight: bold;
+        }
+	`;
+    return (React.createElement("th", { className: cx(thStyles, props.className), style: style }, props.children));
+};
+const Td = (props) => {
+    var _a;
+    const theme = useThemeSafely();
+    const tdStyles = css `
+		border: ${theme.controls.border};
+		padding: ${theme.controls.padding};
+		vertical-align: middle;
+		text-align: ${(_a = props.align) !== null && _a !== void 0 ? _a : 'center'};
+	`;
+    return (React.createElement("td", { colSpan: props.colSpan, style: props.style, className: cx('table__td', tdStyles, props.className) }, props.children));
+};
+
+/* 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 = orderBy(Object.entries(flatTheme), x => x[0]);
+    return (React.createElement(Table, { caption: (React.createElement("div", null,
+            React.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
+            React.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
+            color: color !== null && color !== void 0 ? color : 'black'
+        }) },
+        React.createElement("thead", null,
+            React.createElement(Tr, null,
+                React.createElement(Th, { align: "left" }, "Property"),
+                React.createElement(Th, { align: "left" }, "Value"))),
+        React.createElement("tbody", null, entries.map(([key, value]) => {
+            let colorBox;
+            if (/color/i.test(key)) {
+                colorBox = (React.createElement("span", { className: css({
+                        display: 'block',
+                        border: '1px solid black',
+                        width: '100%',
+                        height: 24,
+                        background: value
+                    }) }));
+            }
+            return (React.createElement(Tr, { key: key },
+                React.createElement(Td, { align: "left" }, key),
+                React.createElement(Td, { align: "left" },
+                    React.createElement("div", { className: css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem'
+                        }) },
+                        React.createElement("span", { className: css({ flexShrink: 1 }) }, value),
+                        " ",
+                        colorBox))));
+        }))));
+};
+const flatten = (obj, parent, path = 'theme') => {
+    const flatObj = parent !== null && parent !== void 0 ? parent : {};
+    for (const prop in obj) {
+        const value = obj[prop];
+        const fullPath = `${path}.${prop}`;
+        if (typeof value !== 'object') {
+            flatObj[fullPath] = value;
+        }
+        else {
+            flatten(value, flatObj, fullPath);
+        }
+    }
+    return flatObj;
+};
+
+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] = useState(window.matchMedia(query).matches);
+    useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        window.addEventListener("resize", listener);
+        return () => window.removeEventListener("resize", listener);
+    }, [matches, query]);
+    return matches;
+};
+
+const Slider = (p) => {
+    var _a;
+    const theme = useThemeSafely();
+    const sliderContainer = useRef(null);
+    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
+    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
+    // 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 = useRef(p.value);
+    const [, forceUpdate] = useState(Date.now());
+    useEffect(() => {
+        if (p.value !== currentValue.current) {
+            currentValue.current = p.value;
+            forceUpdate(Date.now());
+        }
+    }, [p.value]);
+    return (React__default.createElement("div", { ref: sliderContainer, className: cx(css({
+            label: 'Slider',
+            width: '100%',
+            height,
+        }), p.className) },
+        React__default.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__default.createElement("div", Object.assign({ className: cx(className, p.trackClassName, css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: sliderHandleSize
+                    })) }, rest),
+                    React__default.createElement("div", { className: css({
+                            backgroundColor: theme.colors.secondary,
+                            height: `calc(${sliderHandleSize} / 4)`,
+                            borderRadius: theme.controls.roundRadius,
+                            width: '100%'
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
+            }, renderThumb: (props, state) => {
+                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__default.createElement("div", Object.assign({ className: cx(className, css({
+                        borderRadius: theme.controls.roundRadius,
+                        backgroundColor: 'white',
+                        border: theme.controls.border,
+                        cursor: 'grab',
+                        boxShadow: theme.controls.buttonBoxShadow,
+                        transition: theme.controls.transition,
+                        '&:focus': {
+                            outline: 'none',
+                            boxShadow: theme.controls.focusOutlineShadow
+                        },
+                        '&:active': {
+                            boxShadow: 'none',
+                            cursor: 'grabbing'
+                        },
+                        '&:hover': {
+                            filter: theme.controls.hoverBrightness
+                        }
+                    }), specificThumbStyles, p.handleClassName, css({
+                        width: sliderHandleSize,
+                        height: sliderHandleSize,
+                    })) }, rest, { tabIndex: (_a = p.tabIndex) !== null && _a !== void 0 ? _a : 0 }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+            } })));
+};
+const rectsCollideX = (r1, r2) => {
+    if (r1.left >= r2.left && r1.left <= r2.right) {
+        return true;
     }
-    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 = useMemo(() => {
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
+    }, [p.renderValueWidth, p.sliderHandleSize]);
+    const [flipText, setFlipText] = useState(false);
+    const offset = '2px';
+    useEffect(() => {
+        // this needs to fire on every render due to the other handle also moving.
+        var _a, _b;
+        if (p.index === 1) {
+            // only do this for the max/right-most handle
+            const [r1, r2] = Array.from((_b = (_a = p.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.slider-handle').values()) !== null && _b !== void 0 ? _b : []).map(e => e.getBoundingClientRect());
+            if (r1 && r2) {
+                setFlipText(rectsCollideX(r1, r2));
+            }
+        }
+    });
+    return (React__default.createElement(Text, { ellipsis: true, className: cx('slider-handle', css({
+            width: renderValueWidth,
+            left: renderValueLeft,
+            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
+            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
+            position: 'absolute',
+            overflow: 'hidden',
+        }), p.className), tag: "div", align: "center" }, displayValue));
 };
 
-/** 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.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
+    const [tabsChanging, setTabsChanging] = React.useState(false);
+    const theme = useThemeSafely();
+    const variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'tab';
+    const menuStyles = css({
+        display: 'flex',
+        gap: theme.controls.gap,
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0,
+        flexWrap: variant === 'button' ? 'wrap' : 'nowrap'
+    }, variant === 'button' && {
+        borderBottom: theme.controls.border,
+        paddingBottom: '1rem'
+    });
+    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.createElement("div", { className: "tabHeader" },
+        React.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+            var _a, _b;
+            const active = index === tabIndex;
+            let tabStyles;
+            let buttonStyles;
+            let buttonVariant;
+            if (variant === 'tab') {
+                tabStyles = css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    backgroundColor: theme.colors.bg,
+                    zIndex: 1,
+                }, active && {
+                    border: theme.controls.border,
+                    borderRadius: theme.controls.borderRadius,
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    borderBottom: 'none',
+                    zIndex: 3,
+                });
+                buttonVariant = 'link';
+                buttonStyles = css({
+                    maxWidth: (_a = p.maxTabWidth) !== null && _a !== void 0 ? _a : '10rem',
+                    overflow: 'hidden'
+                });
+            }
+            else {
+                buttonVariant = active ? 'primary' : undefined;
+                buttonStyles = css({
+                    paddingLeft: '1rem',
+                    paddingRight: '1rem',
+                    maxWidth: (_b = p.maxTabWidth) !== null && _b !== void 0 ? _b : '10rem',
+                    overflow: 'hidden',
+                });
+            }
+            let title = tab.title;
+            let buttonContent;
+            if (typeof tab.name === 'string') {
+                title !== null && title !== void 0 ? title : (title = tab.name);
+                buttonContent = React.createElement(Text, { tag: "div", align: "center", ellipsis: true }, tab.name);
+            }
+            else {
+                buttonContent = tab.name;
+            }
+            const tabId = getTabHeaderTabId(p.id, index);
+            return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
+                React.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.createElement("div", { className: cx(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.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.createElement("div", { className: css({
+            label: 'TabContainer'
+        }) },
+        React.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.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: cx(css({
+                label: 'TabContainerContent',
+                padding: '1rem',
+                borderLeft: theme.controls.border,
+                borderRight: theme.controls.border,
+                borderBottom: theme.controls.border,
+            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
+};
+
+const TdCurrency = (props) => {
+    let actualValue = props.value || 0;
+    if (props.cents) {
+        actualValue = actualValue / 100;
+    }
+    const displayValue = actualValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    return (React.createElement(Td, { align: "right" },
+        "$",
+        displayValue));
+};
+
+const TdNumber = (props) => {
+    return React.createElement(Td, { align: "right" }, props.value || props.value === 0 ? props.value.toLocaleString() : '');
+};
+
+const ThSort = (props) => {
+    let iconId = '';
+    if (props.direction) {
+        if (props.direction === 'asc') {
+            iconId = 'sortAsc';
+        }
+        else {
+            iconId = 'sortDesc';
+        }
     }
-    return entities;
+    let rightContentSpecialJustify = 'center';
+    switch (props.align) {
+        case 'left':
+            rightContentSpecialJustify = 'flex-start';
+            break;
+        case 'right':
+            rightContentSpecialJustify = 'flex-end';
+            break;
+    }
+    return (React.createElement(Th, { align: props.align, style: props.style, width: props.width },
+        React.createElement("div", { className: props.rightContent && css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: rightContentSpecialJustify,
+                gap: '0.5rem'
+            }) },
+            React.createElement(Button, { onClick: props.onClick, variant: "link" },
+                props.text,
+                iconId && React.createElement(Icon, { className: css({
+                        marginLeft: '0.5rem'
+                    }), id: iconId })),
+            props.rightContent)));
 };
 
-const Link = (props) => {
+const defaultMaxLength = 200;
+const defaultRows = 10;
+const TextArea = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const [localValue, setLocalValue] = React.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React.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 = cx('link', linkStyles, props.className);
-    if (variant === 'text') {
-        return React.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
-    }
-    const isDisabled = props.disabled || props.waiting;
-    return (React.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.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.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 = orderBy(Object.entries(flatTheme), x => x[0]);
-    return (React.createElement(Table, { caption: (React.createElement("div", null,
-            React.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
-            React.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css({
-            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
-            color: color !== null && color !== void 0 ? color : 'black'
-        }) },
-        React.createElement("thead", null,
-            React.createElement(Tr, null,
-                React.createElement(Th, { align: "left" }, "Property"),
-                React.createElement(Th, { align: "left" }, "Value"))),
-        React.createElement("tbody", null, entries.map(([key, value]) => {
-            let colorBox;
-            if (/color/i.test(key)) {
-                colorBox = (React.createElement("span", { className: css({
-                        display: 'block',
-                        border: '1px solid black',
-                        width: '100%',
-                        height: 24,
-                        background: value
-                    }) }));
+                onValueChange(undefined);
             }
-            return (React.createElement(Tr, { key: key },
-                React.createElement(Td, { align: "left" }, key),
-                React.createElement(Td, { align: "left" },
-                    React.createElement("div", { className: css({
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '1rem'
-                        }) },
-                        React.createElement("span", { className: css({ flexShrink: 1 }) }, value),
-                        " ",
-                        colorBox))));
-        }))));
-};
-const flatten = (obj, parent, path = 'theme') => {
-    const flatObj = parent !== null && parent !== void 0 ? parent : {};
-    for (const prop in obj) {
-        const value = obj[prop];
-        const fullPath = `${path}.${prop}`;
-        if (typeof value !== 'object') {
-            flatObj[fullPath] = value;
         }
-        else {
-            flatten(value, flatObj, fullPath);
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
         }
+        updateErrorMessage();
+    }, [props.value]);
+    const styles = css({
+        backgroundColor: theme.colors.bg,
+        maxWidth: '100%',
+        minHeight: theme.controls.height,
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
+        color: theme.colors.font,
+        paddingTop: '0.75rem',
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        height: 'auto',
+        transition: theme.controls.transition,
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        },
+        ':disabled': {
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        ':invalid': {
+            borderColor: theme.colors.required,
+            ':focus': {
+                boxShadow: theme.controls.focusOutlineRequiredShadow
+            }
+        },
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    return (React.createElement("span", { className: css({
+            display: 'inline-block',
+            width: '100%'
+        }) },
+        React.createElement("textarea", Object.assign({}, nativeProps, { className: cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+                var _a;
+                setLocalValue(e.target.value || undefined);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: e => {
+                var _a;
+                if (!props.noTrim) {
+                    setLocalValue(currentValue => {
+                        return currentValue === null || currentValue === void 0 ? void 0 : currentValue.trim();
+                    });
+                }
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })),
+        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React.createElement(InputErrorDisplay, { error: validationError })));
+});
+
+const ToggleButton = React.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.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: 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 `
+		display: flex;
+		box-shadow: ${theme.controls.buttonBoxShadow};
+		border-radius: ${theme.controls.borderRadius};
+		${props.round && `
+			border-radius: ${theme.controls.roundRadius};
+		`}
+	`;
+    const buttonStyles = css `
+		flex-grow:1;
+		box-shadow: none;
+		&:nth-of-type(1n+2){
+			margin-left: -1px;
+		}
+		border-radius: 0;
+		&:first-of-type{
+			border-top-left-radius: ${theme.controls.borderRadius};
+			border-bottom-left-radius: ${theme.controls.borderRadius};
+		}
+		&:last-child {
+			border-top-right-radius: ${theme.controls.borderRadius};
+			border-bottom-right-radius: ${theme.controls.borderRadius};
+		}
+		${props.round && `
+			&:first-of-type{
+				border-top-left-radius: ${theme.controls.roundRadius};
+				border-bottom-left-radius: ${theme.controls.roundRadius};
+				padding-left: 1rem;
+			}
+			&:last-child {
+				border-top-right-radius: ${theme.controls.roundRadius};
+				border-bottom-right-radius: ${theme.controls.roundRadius};
+				padding-right: 1rem;
+			}
+		`}
+	`;
+    return (React.createElement("div", { className: cx('toggleButtonGroup', groupStyles, props.className) }, props.options.map(o => {
+        const active = o.id === props.value;
+        return React.createElement(Button, { style: props.width ? { width: props.width } : undefined, small: props.small, rightIcon: o.rightIcon, key: o.id, tabIndex: active ? -1 : 0, className: cx(css `
+					${buttonStyles}
+					${active && `
+						background-color: ${theme.colors.font};
+						color: ${theme.colors.bg};
+						cursor: default;
+						&:hover:not(:disabled) {
+							filter: none;
+						}
+						&:focus {
+							outline: none;
+							box-shadow: none;
+						}
+					`}
+				`, active ? o.activeClass : undefined), disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, onClick: () => {
+                if (active) {
+                    return;
+                }
+                props.onChange(o.id);
+            } }, o.name);
+    })));
 };
 
-const TabContainer = (p) => {
-    var _a;
-    const [tabIndex, setTabIndex] = React.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.createElement("div", { className: css({
-            label: 'TabContainer'
-        }) },
-        React.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.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: cx(css({
-                label: 'TabContainerContent',
-                padding: '1rem',
-                borderLeft: theme.controls.border,
-                borderRight: theme.controls.border,
-                borderBottom: theme.controls.border,
-            }), p.contentClassName) }, p.tabs[tabIndex].getContent())));
-};
+const TogglePasswordInput = React.forwardRef((props, ref) => {
+    const { onVisibilityChanged } = props, inputProps = __rest(props, ["onVisibilityChanged"]);
+    const [show, setShow] = React.useState(false);
+    useIgnoreMount(() => {
+        onVisibilityChanged === null || onVisibilityChanged === void 0 ? void 0 : onVisibilityChanged(show);
+    }, [show]);
+    return (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, type: show ? 'text' : 'password', rightControl: (React.createElement(Button, { small: true, style: {
+                // small button is required here due to the icon pushing outside the boundries of the
+                // parent textbox.  increasing the font size here to fill the small button.
+                fontSize: '1rem'
+            }, variant: "icon", onClick: () => {
+                setShow(previous => !previous);
+            } },
+            React.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
+});
 
-const 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] = useState(p.show);
+    const hideTimer = useRef(0);
+    const lastShowStatus = useRef(false);
+    const log = useLogger(`WaitingIndicator ${(_a = p.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const { notify, clearNotification } = useAriaLiveRegion();
+    if (p.__debug) {
+        useEffect(() => {
+            log('mounted');
+            return () => {
+                log('unmounted');
+            };
+        }, []);
     }
-}
-const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
-    let timer;
-    let onCancel;
-    return (value) => {
-        if (timer) {
-            clearTimeout(timer);
+    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__default.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 === 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 ${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__default.createElement(Modal, { id: id, __debug: p.__debug, __asWaitingIndicator: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
+        React__default.createElement("div", { className: css({
+                color: 'white',
+                fontSize: '3rem',
+                padding: '0.7rem'
+            }) },
+            React__default.createElement(Icon, { id: "waiting", spin: true }))));
 };
 
-export { Accordion, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, DialogPopover, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, LocalizationProvider, Modal, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, ProgressBar, SearchBox, Slider, StyleGuideLanguage, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, TooltipPopover, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordion, Autocomplete, AutocompleteController, AutocompleteEntityController, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, Calendar, Checkbox, ConfirmModal, CopyButton, DateInput, DialogPopover, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, ItemPager, Label, Link, List, ListItem, LocalizationProvider, Modal, MultiPicker, Nav, NormalizeCss, NumberInput, OmniLink, PagedResult, Pager, Picker, ProgressBar, SearchBox, Slider, StyleGuideLanguage, TabContainer, TabHeader, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextInput, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, TogglePasswordInput, TooltipPopover, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordionState, useAriaLiveRegion, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
 //# sourceMappingURL=index.esm.js.map