@mackin.com/styleguide 7.9.0 → 8.0.0-beta.10

package/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var css = require('@emotion/css');
+var lodash = require('lodash');
 var React = require('react');
 var nanoid = require('nanoid');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
@@ -8,7 +9,6 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var dateFns = require('date-fns');
-var lodash = require('lodash');
 var reactDom = require('react-dom');
 var reactTinyPopover = require('react-tiny-popover');
 var reactRouterDom = require('react-router-dom');
@@ -47,6 +47,7 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
+    theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
 };
 const defaultTheme = {
     colors: {
@@ -110,14 +111,13 @@ const defaultTheme = {
         focusOutlineShadow: '',
         focusOutlineRequiredShadow: '',
         roundRadius: '3rem',
-        /** @deprecated Use theme.controls.borderRadius (global) or style the components individually. */
-        roundedRadius: '0.5rem',
         disabledOpacity: '0.5',
         formButtonMinWidth: '7rem',
         gap: '1rem',
         dividerMargin: '1rem',
         dividerBorder: '',
-        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)'
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        inputErrorMinHeight: ''
     },
     zIndexes: {
         header: 50,
@@ -341,7 +341,7 @@ const Icon = (props) => {
 
 const Button = (props) => {
     var _a, _b;
-    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rounded", "rightIcon", "leftIcon", "iconBlock", "small", "readonly", "waiting", "enforceMinWidth"]);
+    const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -477,7 +477,7 @@ const Button = (props) => {
 		${props.enforceMinWidth && `
 			min-width: ${theme.controls.formButtonMinWidth};
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 			box-shadow: none;
 			pointer-events:none;
@@ -497,9 +497,6 @@ const Button = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 		${props.block && `
 			width: 100%;
 		`}
@@ -589,8 +586,6 @@ const Input = React__namespace.forwardRef((props, ref) => {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} * 2)`,
         paddingRight: `calc(${theme.controls.padding} * 2)`
-    }, props.rounded && {
-        borderRadius: theme.controls.roundedRadius
     }, props.readOnly && {
         backgroundColor: 'transparent',
         cursor: 'default',
@@ -875,8 +870,9 @@ const getAutocompleteValueId = (v) => {
     }
     return v.id;
 };
-//TB: will need to use the new input
+//TB: FUTURE will need to use the new input
 const Autocomplete = (p) => {
+    var _a;
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
@@ -886,6 +882,19 @@ const Autocomplete = (p) => {
         var _a;
         return values.slice(0, (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : DEFAULT_MAX_SHOWN_VALUES);
     }, [values]);
+    const onChangeForOptions = React__namespace.useRef(lodash.debounce((value) => {
+        if (!p.minChars || value.length >= p.minChars) {
+            p.getOptions(value)
+                .then(vals => {
+                setValues(vals);
+            }).catch(err => {
+                // ignore it
+            });
+        }
+        else {
+            setValues([]);
+        }
+    }, (_a = p.getOptionsDebounceMs) !== null && _a !== void 0 ? _a : 0, { leading: true, trailing: true }));
     const theme = useThemeSafely();
     const baseClass = css.css `
 		label: Autocomplete;
@@ -893,7 +902,7 @@ const Autocomplete = (p) => {
 		width: 100%;
 	`;
     let listBorderRadius = '';
-    if (p.round || p.rounded || theme.controls.borderRadius) {
+    if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
     const listClass = css.css({
@@ -946,20 +955,10 @@ const Autocomplete = (p) => {
     return (React__namespace.createElement("div", { ref: element, className: css.cx(baseClass, 'autocomplete') },
         React__namespace.createElement(Backdrop$1, { onClick: () => setValues([]), show: showValues, allowScroll: true, transparent: true }),
         React__namespace.createElement(TabLocker, { disabled: !showValues, style: { position: 'relative' } },
-            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rounded: p.rounded, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
+            React__namespace.createElement(Input, { inputAriaAttributes: p.inputAriaAttributes, ref: input, debounceMs: 0, type: "text", value: getAutocompleteValueText(p.value), round: p.round, rightControl: p.rightControl, placeholder: p.placeholder, id: p.id, disabled: p.disabled, className: p.className, inputClassName: css.cx(inputClass, p.inputClassName), maxLength: p.maxLength, required: p.required, onChange: v => {
                     const value = v;
                     p.onChange(value);
-                    if (!p.minChars || value.length >= p.minChars) {
-                        p.getOptions(value)
-                            .then(vals => {
-                            setValues(vals);
-                        }).catch(err => {
-                            // ignore it
-                        });
-                    }
-                    else {
-                        setValues([]);
-                    }
+                    onChangeForOptions.current(value);
                 }, onKeyDown: e => {
                     var _a, _b;
                     if (showValues) {
@@ -1220,7 +1219,7 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
-    const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readonly"]);
+    const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
     const selected = props.checkedIcon || 'selected';
     const unselected = props.uncheckedIcon || 'unselected';
     const theme = useThemeSafely();
@@ -1235,7 +1234,7 @@ const Checkbox = (props) => {
     }
     const checkboxStyles = css.css `
 		display: inline-block;
-		${!props.disabled && !props.readonly && `
+		${!props.disabled && !props.readOnly && `
 			&:hover {
 				filter: ${theme.controls.hoverBrightness};
 			}
@@ -1249,7 +1248,7 @@ const Checkbox = (props) => {
 		${props.disabled && `
 			cursor: not-allowed;
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 		`}
 	`;
@@ -1261,7 +1260,7 @@ const Checkbox = (props) => {
 		width: 0;
 		opacity: 0; 
 
-		${!props.readonly && `
+		${!props.readOnly && `
 			&:focus + .checkboxIcon {
 				box-shadow: ${theme.controls.focusOutlineShadow};
 			}
@@ -1275,7 +1274,7 @@ const Checkbox = (props) => {
 			background-color: ${theme.colors.disabled};
 			cursor: not-allowed;
 		`}
-		${props.readonly && `
+		${props.readOnly && `
 			cursor: default;
 		`}
 		${props.checked && `
@@ -1284,8 +1283,8 @@ const Checkbox = (props) => {
 	`;
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
-            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readonly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
-                    if (props.readonly) {
+            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+                    if (props.readOnly) {
                         e.preventDefault();
                         return;
                     }
@@ -1492,93 +1491,6 @@ const CopyButton = (props) => {
         React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
 };
 
-const Popover = (p) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
-    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
-            zIndex: theme.zIndexes.tooltip
-        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
-            var _a, _b, _c, _d;
-            return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
-                React__namespace.createElement(TabLocker, null,
-                    React__namespace.createElement("div", { className: css.css({
-                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
-                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
-                            boxShadow: theme.controls.boxShadow,
-                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
-                        }) }, p.content))));
-        } },
-        React__namespace.createElement("span", null, p.parent)));
-};
-
-const getCalendarDate = (date, min, max) => {
-    let calendarDate = date ? new Date(date) : new Date();
-    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
-    if (min && dateFns.isBefore(calendarDate, min)) {
-        calendarDate = new Date(min);
-    }
-    else if (max && dateFns.isAfter(calendarDate, max)) {
-        calendarDate = new Date(max);
-    }
-    return calendarDate;
-};
-const DatePicker = (p) => {
-    const [showCalendar, setShowCalendar] = React__namespace.useState(false);
-    const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(p.value, p.min, p.max));
-    // controls the one-time focus set on show
-    const needsFocus = React__namespace.useRef(false);
-    const popover = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        var _a;
-        setCalendarDate(getCalendarDate((_a = p.value) !== null && _a !== void 0 ? _a : 0, p.min, p.max));
-    }, [p.value]);
-    React__namespace.useLayoutEffect(() => {
-        var _a, _b;
-        if (needsFocus.current) {
-            (_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-            needsFocus.current = false;
-        }
-    });
-    //TB: replace with new inputs
-    return (React__namespace.createElement(Popover, { reposition: p.reposition, isOpen: showCalendar, onClickOutside: () => {
-            needsFocus.current = false;
-            setShowCalendar(false);
-        }, parent: (React__namespace.createElement(Input, Object.assign({ onFocus: () => {
-                needsFocus.current = false;
-                setShowCalendar(false);
-            }, placeholder: 'MM/DD/YYYY' }, p, { type: "date", rightControl: !p.readOnly ? (React__namespace.createElement(Button, { variant: "icon", readonly: p.readOnly, disabled: p.disabled, small: true, style: {
-                    fontSize: '1rem'
-                }, onClick: () => {
-                    needsFocus.current = !showCalendar;
-                    setShowCalendar(!showCalendar);
-                } },
-                React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: v => {
-                p.onChange(v);
-            } }))), content: (React__namespace.createElement("div", { ref: popover, className: css.css({
-                paddingLeft: '1rem',
-                paddingRight: '1rem',
-                paddingBottom: '1rem'
-            }) },
-            React__namespace.createElement(Calendar, { onClick: date => {
-                    p.onChange(date.valueOf());
-                    needsFocus.current = false;
-                    setShowCalendar(false);
-                }, customTitle: React__namespace.createElement("div", { className: css.css({
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center'
-                    }) },
-                    React__namespace.createElement(Button, { disabled: !!p.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), p.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
-                        React__namespace.createElement(Icon, { id: "pagerLeft" })),
-                    React__namespace.createElement(Text, { align: "center" },
-                        dateFns.format(calendarDate, 'LLLL'),
-                        " ",
-                        calendarDate.getFullYear()),
-                    React__namespace.createElement(Button, { disabled: !!p.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), p.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
-                        React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: p.value, cellSize: '2rem', min: p.min, max: p.max }))) }));
-};
-
 const Divider = () => {
     const theme = useThemeSafely();
     return (React__namespace.createElement("hr", { className: css.cx("divider", css.css({
@@ -1894,13 +1806,6 @@ const getSizeString = (size) => {
     }
 };
 
-/** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
-const mergeClassNames = (...classes) => {
-    if (!classes) {
-        return undefined;
-    }
-    return classes.filter(c => c).map(c => c).join(' ');
-};
 const getCurrencyDisplay = (value, isCents, denomination = '$') => {
     let actualValue = value || 0;
     if (isCents) {
@@ -2033,6 +1938,26 @@ const Image = (props) => {
         }), props.className), src: props.src }));
 };
 
+const Popover = (p) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
+    return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
+            zIndex: theme.zIndexes.tooltip
+        }), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
+            var _a, _b, _c, _d;
+            return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
+                React__namespace.createElement(TabLocker, null,
+                    React__namespace.createElement("div", { className: css.css({
+                            border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
+                            borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
+                            boxShadow: theme.controls.boxShadow,
+                            backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
+                        }) }, p.content))));
+        } },
+        React__namespace.createElement("span", null, p.parent)));
+};
+
 const InfoTip = (props) => {
     var _a, _b;
     const [showTip, setShowTip] = React__namespace.useState(false);
@@ -2110,6 +2035,15 @@ const InfoTip = (props) => {
     }
 };
 
+const InputErrorDisplay = (props) => {
+    const theme = useThemeSafely();
+    return (React__namespace.createElement(Text, { className: css.css({
+            minHeight: theme.controls.inputErrorMinHeight,
+            lineHeight: theme.controls.inputErrorMinHeight,
+            color: theme.colors.negative
+        }), smaller: true, noPad: true }, props.error));
+};
+
 const defaultMaxLength$1 = 100;
 const BaseInput = React__namespace.forwardRef((props, ref) => {
     var _a;
@@ -2173,178 +2107,417 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
 			right: calc(${theme.controls.padding} * 2);
 		`}
 	`;
-    return (React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
-        inputElement,
-        props.rightControl && React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl)));
+    return (React__namespace.createElement("div", null,
+        React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
+            inputElement,
+            props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
+        React__namespace.createElement(InputErrorDisplay, { error: props.error })));
 });
 
-const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
-const datePattern = dateRegex.source;
-const outOfRangeValidityMessage = 'Out of range';
-const isOutOfRange = (value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
-    if (typeof value === 'number') {
-        return value < min || value > max;
+const tryClampRange = (value, min, max) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    if (min !== undefined && value < min) {
+        return min;
+    }
+    if (max !== undefined && value > max) {
+        return max;
+    }
+    return value;
+};
+const isOutOfRange = (value, min, max) => {
+    if (min !== undefined && value < min) {
+        return true;
+    }
+    if (max !== undefined && value > max) {
+        return true;
     }
     return false;
 };
-const parseDateMs = (rawValue, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
-    let value;
-    let outOfRange = false;
+const getStepDecimalPlaces = (step) => {
+    var _a, _b;
+    if (!step) {
+        return 0;
+    }
+    const strStep = typeof step === 'number' ? step.toString() : step;
+    return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+};
+const tryClampDecimals = (value, step = 0) => {
+    if (value === undefined) {
+        return value;
+    }
+    if (isNaN(value)) {
+        return undefined;
+    }
+    const decimals = getStepDecimalPlaces(step);
+    if (decimals === 0) {
+        return Math.floor(value);
+    }
+    return parseFloat(value.toFixed(decimals));
+};
+
+/** useEffect but ignores the first call on component mount. */
+const useIgnoreMount = (effect, deps) => {
+    const mounted = React__default['default'].useRef(false);
+    React__default['default'].useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+        }
+        else {
+            effect();
+        }
+    }, deps);
+};
+
+/** Common state handling for displaying validation messages with inputs. */
+const useInputValidationMessage = (ref, props) => {
+    const [validationError, setValidationError] = React__default['default'].useState('');
+    const updateErrorMessage = (customErrorOverride) => {
+        var _a;
+        const customError = customErrorOverride || props.customError || '';
+        // set it OR clear it.  either way, update it.
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
+        setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
+    };
+    React__default['default'].useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    return [validationError, updateErrorMessage];
+};
+const getValidationMessage = (element, patternErrorMessage) => {
+    var _a;
+    if (!element) {
+        return '';
+    }
+    const validity = element.validity;
+    if (validity.valid) {
+        return '';
+    }
+    if (validity.customError) {
+        return element.validationMessage;
+    }
+    if (validity.typeMismatch) {
+        switch (element.type) {
+            case 'url':
+                return `Invalid URL.`;
+            case 'email':
+                return `Invalid email.`;
+            default:
+                return element.validationMessage;
+        }
+    }
+    if (element instanceof HTMLInputElement) {
+        if (validity.rangeOverflow) {
+            return `Must be less than or equal to ${element.max}.`;
+        }
+        if (validity.rangeUnderflow) {
+            return `Must be greater than or equal to ${element.min}.`;
+        }
+        if (validity.stepMismatch) {
+            const decimalPlaces = getStepDecimalPlaces(element.step);
+            if (decimalPlaces > 0) {
+                const place = decimalPlaces === 1 ? 'place' : 'places';
+                return `Limited to ${getStepDecimalPlaces(element.step)} decimal ${place}.`;
+            }
+            else {
+                /*
+                    step is buggy!
+                    
+                    at least in Chrome, setting step=5 will cause the browser to mark the field as invalid if the number is not divisible
+                    by 5.  55 is ok.  50 is ok.  59 is not ok.
+                    
+                    to make things worse, if you enter an invalid number like 59 with step=5 and then clear the input, Chrome will tell
+                    you the number 5 is now invalid and should be 4 or 9.
+                */
+                return `Must be an integer.`;
+            }
+        }
+    }
+    if (validity.tooShort) {
+        return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
+    }
+    if (validity.valueMissing) {
+        return 'Required.';
+    }
+    if (validity.patternMismatch && patternErrorMessage) {
+        return patternErrorMessage;
+    }
+    // unhandled.  let the browser decide.
+    return element.validationMessage;
+};
+
+const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
+const datePattern = dateRegex.source;
+const invalidDateMessage = 'Invalid date.';
+const DateInput = React__namespace.forwardRef((props, ref) => {
+    var _a;
+    const [dateValue, setDateValue] = React__namespace.useState(props.value);
+    const [textValue, setTextValue] = React__namespace.useState(parseDateString(props.value));
+    const updateValues = React__namespace.useCallback((value) => {
+        let newDateValue;
+        let newTextValue;
+        if (typeof value === 'number') {
+            newDateValue = value;
+            newTextValue = parseDateString(value);
+        }
+        else if (typeof value === 'string') {
+            newDateValue = parseDateNumber(value);
+            newTextValue = value;
+        }
+        setDateValue(newDateValue);
+        setTextValue(newTextValue);
+    }, []);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
+    const updateDateErrorMessages = React__namespace.useCallback(() => {
+        let dateError = '';
+        if (dateValue === undefined) {
+            if (!!textValue) {
+                // the text pattern is a valid date format, but the numbers are wrong.  example: 05/35/2000.
+                dateError = invalidDateMessage;
+            }
+        }
+        else if (isOutOfRange(dateValue, props.min, props.max)) {
+            // out of range
+            if (props.min !== undefined && props.max !== undefined) {
+                dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
+            }
+            else if (props.min !== undefined) {
+                dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
+            }
+            else {
+                dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
+            }
+        }
+        updateErrorMessage(dateError);
+    }, [dateValue, textValue]);
+    const [showCalendar, setShowCalendar] = React__namespace.useState(false);
+    const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(props.value, props.min, props.max));
+    // controls the one-time focus set on show
+    const needsFocus = React__namespace.useRef(false);
+    const toggleCalendar = React__namespace.useCallback((show) => {
+        var _a;
+        if (show === showCalendar) {
+            return;
+        }
+        needsFocus.current = show;
+        setShowCalendar(show);
+        if (show) {
+            setCalendarDate(getCalendarDate(dateValue, props.min, props.max));
+        }
+        else {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [dateValue, showCalendar]);
+    const popover = React__namespace.useRef(null);
+    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(dateValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateDateErrorMessages();
+    }, [dateValue]);
+    useIgnoreMount(() => {
+        updateDateErrorMessages();
+    }, [textValue]);
+    useIgnoreMount(() => {
+        var _a;
+        if (document.activeElement !== inputRef.current) {
+            updateValues(props.value);
+            setCalendarDate(getCalendarDate((_a = props.value) !== null && _a !== void 0 ? _a : 0, props.min, props.max));
+        }
+        updateDateErrorMessages();
+    }, [props.value]);
+    React__namespace.useLayoutEffect(() => {
+        var _a, _b;
+        if (needsFocus.current) {
+            (_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            needsFocus.current = false;
+        }
+    });
+    const input = (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "text", ref: inputRef, value: textValue !== null && textValue !== void 0 ? textValue : '', maxLength: 10, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY', pattern: datePattern, rightControl: (!props.readOnly && !props.disabled) ? (React__namespace.createElement(Button, { variant: "icon", readOnly: props.readOnly, disabled: props.disabled, small: true, style: {
+                fontSize: '1rem'
+            }, onClick: () => {
+                toggleCalendar(!showCalendar);
+            } },
+            React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: e => {
+            var _a;
+            updateValues(e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onFocus: e => {
+            var _a;
+            toggleCalendar(false);
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a, _b;
+            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
+                if (dateValue !== undefined) {
+                    if (isOutOfRange(dateValue, props.min, props.max)) {
+                        // try and fix the range
+                        updateValues(tryClampRange(dateValue, props.min, props.max));
+                    }
+                }
+                else {
+                    // just wipe it all
+                    updateValues(undefined);
+                }
+            }
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
+        } })));
+    return (React__namespace.createElement(Popover, { reposition: props.reposition, isOpen: showCalendar, onClickOutside: () => {
+            toggleCalendar(false);
+        }, parent: input, content: (React__namespace.createElement("div", { ref: popover, className: css.css({
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+                paddingBottom: '1rem'
+            }) },
+            React__namespace.createElement(Calendar, { onClick: date => {
+                    updateValues(date.valueOf());
+                    toggleCalendar(false);
+                }, customTitle: React__namespace.createElement("div", { className: css.css({
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    }) },
+                    React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
+                        React__namespace.createElement(Icon, { id: "pagerLeft" })),
+                    React__namespace.createElement(Text, { align: "center" },
+                        dateFns.format(calendarDate, 'LLLL'),
+                        " ",
+                        calendarDate.getFullYear()),
+                    React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
+                        React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
+});
+const parseDateNumber = (rawValue) => {
+    if (!rawValue) {
+        return undefined;
+    }
+    let dateMs;
     const dateParts = dateRegex.exec(rawValue);
     if (dateParts) {
-        const month = parseInt(dateParts[1], 10);
+        const month = parseInt(dateParts[1], 10) - 1;
         const day = parseInt(dateParts[2], 10);
         const year = parseInt(dateParts[3], 10);
         if (dateFns.isExists(year, month, day)) {
-            value = new Date(year, month - 1, day).valueOf();
-            outOfRange = isOutOfRange(value, min, max);
-            if (outOfRange) {
-                value = Math.max(Math.min(value, max), min);
-            }
+            dateMs = new Date(year, month, day).valueOf();
         }
     }
-    return {
-        value,
-        outOfRange
-    };
+    return dateMs;
 };
-const formatOuterValue = (value) => {
-    if (typeof value === 'number') {
-        return dateFns.format(value, 'MM/dd/yyyy');
+const parseDateString = (dateMs) => {
+    if (typeof dateMs === 'number') {
+        return dateFns.format(dateMs, 'MM/dd/yyyy');
     }
-    return '';
+    return undefined;
 };
-const DateInput = React__namespace.forwardRef((props, ref) => {
-    const [localValue, setLocalValue] = React__namespace.useState('');
-    const hasFocus = React__namespace.useRef(false);
+const getCalendarDate = (date, min, max) => {
+    let calendarDate = date ? new Date(date) : new Date();
+    // if there is a min/max we don't want the calendar to open to the current date if it's out of range
+    if (min && dateFns.isBefore(calendarDate, min)) {
+        calendarDate = new Date(min);
+    }
+    else if (max && dateFns.isAfter(calendarDate, max)) {
+        calendarDate = new Date(max);
+    }
+    return calendarDate;
+};
+
+const NumberInput = React__namespace.forwardRef((props, ref) => {
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
-    const { value, onChange } = props, otherProps = __rest(props, ["value", "onChange"]);
-    React__namespace.useEffect(() => {
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["customError", "onValueChange"]);
+    useIgnoreMount(() => {
         var _a;
-        // prevent the outer value from influencing the inner value while you're typing.
-        if (!hasFocus.current) {
-            // sync the outer value to the local value if it changed.
-            setLocalValue(formatOuterValue(value));
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity((isOutOfRange(value, props.min, props.max) ? outOfRangeValidityMessage : ''));
-        }
-    }, [value]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, otherProps, { pattern: datePattern, maxLength: 10, ref: inputRef, type: "text", value: localValue, onChange: e => {
-            setLocalValue(e.target.value);
-            const { value: v, outOfRange } = parseDateMs(e.target.value, props.min, props.max);
-            // need to force invalid due to our using a 'text' input rather than a 'number' or 'date'.
-            e.target.setCustomValidity(outOfRange ? outOfRangeValidityMessage : '');
-            onChange(v, e);
-        }, onFocus: e => {
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "number", ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', maxLength: 20, onChange: e => {
             var _a;
-            hasFocus.current = true;
-            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            const newLocalValue = parseNumber(e.target.value);
+            setLocalValue(newLocalValue);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, onBlur: e => {
-            var _a;
-            hasFocus.current = false;
-            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            // min/max constraints won't be reflected in the local input value.  fix that now.
-            // handling min/max while typing would be difficult and frustrating to the user.
-            setLocalValue(formatOuterValue(value));
-            e.target.setCustomValidity(isOutOfRange(value, props.min, props.max) ? outOfRangeValidityMessage : '');
+            var _a, _b;
+            let adjustedValue = localValue;
+            if (e.target.validity.customError) {
+                // if we're invalid due to a custom error, just wipe everything
+                adjustedValue = undefined;
+            }
+            else {
+                // try and fix the value
+                adjustedValue = tryClampRange(adjustedValue, props.min, props.max);
+                adjustedValue = tryClampDecimals(adjustedValue, props.step);
+            }
+            setLocalValue(adjustedValue);
+            // makes our displayed value always matches the adjusted value
+            // examples of failures are 'e', '-', and 5.0 in an integer (step=0) field.
+            e.target.value = (_a = adjustedValue === null || adjustedValue === void 0 ? void 0 : adjustedValue.toString()) !== null && _a !== void 0 ? _a : '';
+            (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
-});
-
-const parseNumber = (rawValue, step = 0, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, applyMinMax) => {
-    var _a;
-    const decimals = step === 0 ? 0 : (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
+});
+const parseNumber = (rawValue) => {
     let value;
     if (rawValue) {
         value = parseFloat(rawValue);
         if (isNaN(value)) {
-            value = undefined;
-        }
-        else {
-            if (decimals === 0) {
-                value = Math.floor(value);
-            }
-            else {
-                value = parseFloat(value.toFixed(decimals));
-            }
-            if (applyMinMax) {
-                value = Math.max(Math.min(value, max), min);
-            }
+            return undefined;
         }
     }
-    return [value, value === null || value === void 0 ? void 0 : value.toString()];
-};
-const NumberInput = React__namespace.forwardRef((props, ref) => {
-    var _a, _b;
-    const { value, onChange, constrainOnInput } = props, otherProps = __rest(props, ["value", "onChange", "constrainOnInput"]);
-    const applyInputConstraints = (_a = props.constrainOnInput) !== null && _a !== void 0 ? _a : true;
-    return (React__namespace.createElement(BaseInput, Object.assign({}, otherProps, { ref: ref, maxLength: (_b = props.maxLength) !== null && _b !== void 0 ? _b : 50, type: "number", value: value !== null && value !== void 0 ? value : '', onChange: e => {
-            const [v, displayValue] = parseNumber(e.target.value, props.step, props.min, props.max, applyInputConstraints);
-            // make sure the displayed value always matches our parsed value.
-            e.target.value = displayValue !== null && displayValue !== void 0 ? displayValue : '';
-            onChange(v, e);
-        }, onBlur: e => {
-            if (applyInputConstraints) {
-                // catch all for things we missed.  
-                // onChange would have been called with undefined, but something strange might remain.
-                if (!e.target.checkValidity()) {
-                    e.target.value = '';
-                }
-            }
-        } })));
-});
-
-const defaultMaxLength = 200;
-const defaultRows = 10;
-const TextArea = React__namespace.forwardRef((props, ref) => {
-    var _a, _b;
-    const { className, value, onChange } = props, otherProps = __rest(props, ["className", "value", "onChange"]);
-    const theme = useThemeSafely();
-    const styles = css.css({
-        maxWidth: '100%',
-        minHeight: theme.controls.height,
-        fontFamily: theme.fonts.family,
-        fontSize: theme.fonts.size,
-        width: '100%',
-        border: theme.controls.border,
-        borderRadius: theme.controls.borderRadius,
-        color: theme.colors.font,
-        paddingTop: '0.75rem',
-        paddingLeft: theme.controls.padding,
-        paddingRight: theme.controls.padding,
-        height: 'auto',
-        transition: theme.controls.transition,
-        ':focus': {
-            outline: 'none',
-            boxShadow: theme.controls.focusOutlineShadow
-        },
-        ':disabled': {
-            backgroundColor: theme.colors.disabled,
-            cursor: 'not-allowed'
-        },
-        ':invalid': {
-            borderColor: theme.colors.required,
-            ':focus': {
-                boxShadow: theme.controls.focusOutlineRequiredShadow
-            }
-        },
-    }, props.readOnly && {
-        backgroundColor: 'transparent',
-        cursor: 'default',
-        border: 'none',
-        ':focus': {
-            outline: 'none',
-            boxShadow: 'none'
-        }
-    });
-    return (React__namespace.createElement("textarea", Object.assign({}, otherProps, { className: css.cx(styles, className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: ref, value: value !== null && value !== void 0 ? value : '', onChange: e => {
-            onChange(e.target.value || undefined, e);
-        } })));
-});
+    return value;
+};
 
 const TextInput = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const { value, onChange } = props, otherProps = __rest(props, ["value", "onChange"]);
-    return (React__namespace.createElement(BaseInput, Object.assign({}, otherProps, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: ref, value: value !== null && value !== void 0 ? value : '', onChange: e => {
-            onChange(e.target.value || undefined, e);
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
+    const nativeProps = __rest(props, ["onValueChange", "customError", "patternErrorMessage"]);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+            var _a;
+            setLocalValue(e.target.value || undefined);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: e => {
+            var _a;
+            if (!e.target.checkValidity()) {
+                setLocalValue(undefined);
+            }
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } })));
 });
 
@@ -2700,9 +2873,6 @@ const OmniLink = (props) => {
 		${props.round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 		${props.small && `
 			font-size: 0.8rem;
 			height: ${theme.controls.heightSmall};
@@ -2732,7 +2902,7 @@ const OmniLink = (props) => {
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onChange", "type", "rounded", "round", "readonly"]);
+    , ["value", "options", "onChange", "readOnly", "round", "controlAlign"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -2765,13 +2935,10 @@ const Picker = (props) => {
 				outline: none;
 				box-shadow: ${theme.controls.focusOutlineShadow};
 			}
-			${props.rounded && `
-				border-radius: ${theme.controls.roundedRadius};
-			`}
 			${props.round && `
 				border-radius: ${theme.controls.roundRadius};
 			`}
-			${props.readonly && `
+			${props.readOnly && `
 				background-color: transparent !important;
 				border: none;
 				-webkit-appearance: none;
@@ -2782,9 +2949,9 @@ const Picker = (props) => {
 				}
 			`}
 		`;
-    return (React__namespace.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readonly ? -1 : selectProps.tabIndex, className: css.cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
+    const select = (React__namespace.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readOnly ? -1 : selectProps.tabIndex, className: css.cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
             var _a;
-            if (props.readonly) {
+            if (props.readOnly) {
                 if (e.keyCode === 9) {
                     //TAB
                     return;
@@ -2797,7 +2964,7 @@ const Picker = (props) => {
             }
         }, onMouseDown: e => {
             var _a;
-            if (props.readonly) {
+            if (props.readOnly) {
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -2827,6 +2994,14 @@ const Picker = (props) => {
         }
         return React__namespace.createElement("option", { key: val, value: val }, label);
     })));
+    if (props.controlAlign) {
+        return (React__namespace.createElement("span", { className: css.css({
+                display: 'inline-block',
+                width: '100%',
+                paddingBottom: theme.controls.inputErrorMinHeight
+            }) }, select));
+    }
+    return select;
 };
 
 const Pager = (props) => {
@@ -2857,9 +3032,6 @@ const Pager = (props) => {
 		@media(min-width: ${theme.breakpoints.tablet}) {
 			grid-template-columns: ${theme.controls.height} 1fr 1fr 1fr ${theme.controls.height};
 		}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
 	`;
     const controlStyles = css.css `
 		display: none;
@@ -2894,8 +3066,8 @@ const BoundMemoryPager = (p) => {
     var _a, _b, _c;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { type: "select", value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { type: "select", value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
+            React__namespace.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React__namespace.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
         } })));
 };
@@ -2906,8 +3078,8 @@ const BoundStaticPager = (p) => {
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
     return (React__namespace.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React__namespace.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
-            React__namespace.createElement(Picker, { type: "select", value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
-            React__namespace.createElement(Picker, { type: "select", value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
+            React__namespace.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React__namespace.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
+            React__namespace.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onChange: v => {
                     var _a;
                     (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v);
                 } }))) : undefined, page: d => {
@@ -3334,14 +3506,14 @@ const SearchBox = (props) => {
         return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
     });
     const theme = useThemeSafely();
-    const submitButton = (React__namespace.createElement(Button, { disabled: waiting, readonly: !props.onSubmit, type: "submit", className: css.css({
+    const submitButton = (React__namespace.createElement(Button, { disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
             color: `${theme.colors.font} !important;`,
             fontSize: '1rem'
         }), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
-    //TB: replace with new inputs
+    //TB: FUTURE replace with new inputs
     return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
-        React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, rounded: props.rounded, onChange: props.onChange, rightControl: submitButton })));
+        React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
 };
 
 const GlobalStyles = () => {
@@ -3500,10 +3672,6 @@ const TabHeader = (p) => {
                     borderBottomRightRadius: 0,
                     borderBottom: 'none',
                     zIndex: 3,
-                }, active && p.rounded && {
-                    borderRadius: p.rounded && theme.controls.roundedRadius,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
                 });
                 buttonVariant = 'link';
                 buttonStyles = css.css({
@@ -3521,7 +3689,7 @@ const TabHeader = (p) => {
                 });
             }
             return (React__namespace.createElement("li", { key: index, className: tabStyles },
-                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readonly: active, rounded: p.rounded && variant === 'button', onClick: () => {
+                React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readOnly: active, onClick: () => {
                         setTabIndex(index);
                         if (p.onTabChanged) {
                             p.onTabChanged(index);
@@ -3653,6 +3821,86 @@ const ThSort = (props) => {
             props.rightContent)));
 };
 
+const defaultMaxLength = 200;
+const defaultRows = 10;
+const TextArea = React__namespace.forwardRef((props, ref) => {
+    var _a, _b;
+    const [localValue, setLocalValue] = React__namespace.useState(props.value);
+    const [validationError, setValidationError] = React__namespace.useState('');
+    const updateErrorMessage = React__namespace.useCallback(() => {
+        setValidationError(getValidationMessage(inputRef.current));
+    }, []);
+    const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
+    const nativeProps = __rest(props, ["onValueChange"]);
+    const theme = useThemeSafely();
+    React__namespace.useEffect(() => {
+        updateErrorMessage();
+    }, []);
+    useIgnoreMount(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
+            props.onValueChange(localValue);
+        }
+        else {
+            props.onValueChange(undefined);
+        }
+        updateErrorMessage();
+    }, [localValue]);
+    useIgnoreMount(() => {
+        if (document.activeElement !== inputRef.current) {
+            setLocalValue(props.value);
+        }
+        updateErrorMessage();
+    }, [props.value]);
+    const styles = css.css({
+        maxWidth: '100%',
+        minHeight: theme.controls.height,
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        width: '100%',
+        border: theme.controls.border,
+        borderRadius: theme.controls.borderRadius,
+        color: theme.colors.font,
+        paddingTop: '0.75rem',
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        height: 'auto',
+        transition: theme.controls.transition,
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        },
+        ':disabled': {
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        ':invalid': {
+            borderColor: theme.colors.required,
+            ':focus': {
+                boxShadow: theme.controls.focusOutlineRequiredShadow
+            }
+        },
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    });
+    return (React__namespace.createElement("span", { className: css.css({
+            display: 'inline-block',
+            width: '100%'
+        }) },
+        React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
+                var _a;
+                setLocalValue(e.target.value || undefined);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })),
+        React__namespace.createElement(InputErrorDisplay, { error: validationError })));
+});
+
 const ToggleButton = (props) => {
     return (React__namespace.createElement(Button, { type: "button", className: css.cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, disabled: props.disabled, enforceMinWidth: props.enforceMinWidth, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style, onClick: props.onClick }, props.checked ? props.checkedText : props.uncheckedText));
 };
@@ -3720,10 +3968,9 @@ const ToggleButtonGroup = (props) => {
     })));
 };
 
-const TogglePasswordInput = (p) => {
+const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
     const [show, setShow] = React__namespace.useState(false);
-    //TB: replace with new inputs
-    return (React__namespace.createElement(Input, Object.assign({}, p, { type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
+    return (React__namespace.createElement(TextInput, Object.assign({}, props, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
                 // small button is required here due to the icon pushing outside the boundries of the
                 // parent textbox.  increasing the font size here to fill the small button.
                 fontSize: '1rem'
@@ -3731,7 +3978,7 @@ const TogglePasswordInput = (p) => {
                 setShow(previous => !previous);
             } },
             React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
-};
+});
 
 const WaitingIndicator = (p) => {
     var _a, _b;
@@ -3808,7 +4055,6 @@ exports.Checkbox = Checkbox;
 exports.ConfirmModal = ConfirmModal;
 exports.CopyButton = CopyButton;
 exports.DateInput = DateInput;
-exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.ErrorModal = ErrorModal;
 exports.FileUploader = FileUploader;
@@ -3859,7 +4105,6 @@ exports.WaitingIndicator = WaitingIndicator;
 exports.calcDynamicThemeProps = calcDynamicThemeProps;
 exports.defaultTheme = defaultTheme;
 exports.getCurrencyDisplay = getCurrencyDisplay;
-exports.mergeClassNames = mergeClassNames;
 exports.useMediaQuery = useMediaQuery;
 exports.useThemeSafely = useThemeSafely;
 //# sourceMappingURL=index.js.map