@mackin.com/styleguide 10.0.0 → 10.0.2

package/index.esm.js

@@ -335,18 +335,18 @@ const Button = React.forwardRef((props, ref) => {
 	`;
     const styles = css `
 		${buttonStyles}
-		${props.variant === 'circle' && `
+		${variant === 'circle' && `
 			width: ${theme.controls.height};
 			border-radius: 100%;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			${props.small && `
+			${small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
 			`}
 		`}
-		${props.variant === 'icon' && `
+		${variant === 'icon' && `
 			width: ${theme.controls.height};
 			border-radius: 100%;
 			padding: 0;
@@ -360,13 +360,13 @@ const Button = React.forwardRef((props, ref) => {
 			&:hover:not(:disabled) {
 				background-color: ${theme.controls.hoverBackground};
 			}
-			${props.small && `
+			${small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
 				font-size: 1.3rem;
 			`}
 		`}
-		${(props.variant === 'label') && `
+		${(variant === 'label') && `
 			display: inline-block;
 			width: auto;
 			box-shadow: none;
@@ -376,7 +376,7 @@ const Button = React.forwardRef((props, ref) => {
 				background-color: ${theme.controls.hoverBackground};
 			}
 		`}
-		${(props.variant === 'text') && `
+		${(variant === 'text') && `
 			background-color: transparent;
 			font-weight: normal;
 			cursor: auto;
@@ -389,7 +389,7 @@ const Button = React.forwardRef((props, ref) => {
 				filter: none;
 			}
 		`}
-		${props.variant === 'link' && `
+		${variant === 'link' && `
 			padding: 0;
 			display: inline-block;
 			width: auto;
@@ -406,7 +406,7 @@ const Button = React.forwardRef((props, ref) => {
 				text-decoration: underline;
 			}
 		`}
-		${props.variant === 'inlineLink' && `
+		${variant === 'inlineLink' && `
 			padding: 0;
 			display: inline-block;
 			width: auto;
@@ -424,34 +424,34 @@ const Button = React.forwardRef((props, ref) => {
 				text-decoration: underline;
 			}
 		`}
-		${props.variant === 'primary' && `
+		${variant === 'primary' && `
 			background-color: ${theme.colors.primary};
 			color: ${theme.colors.primaryFont};
 		`}
-		${props.variant === 'primary2' && `
+		${variant === 'primary2' && `
 			background-color: ${theme.colors.primary2};
 			color: ${theme.colors.primary2Font};
 		`}
-		${props.variant === 'secondary' && `
+		${variant === 'secondary' && `
 			background-color: ${theme.colors.secondary};
 			color: ${theme.colors.secondary2Font};
 		`}
-		${props.variant === 'omg' && `
+		${variant === 'omg' && `
 			background-color: ${theme.colors.omg};
 			color: ${theme.colors.omgFont};
 		`}
-		${props.variant === 'positive' && `
+		${variant === 'positive' && `
 			background-color: ${theme.colors.positive};
 			color: ${theme.colors.positiveFont};
 		`}
-		${props.variant === 'negative' && `
+		${variant === 'negative' && `
 			background-color: ${theme.colors.negative};
 			color: ${theme.colors.negativeFont};
 		`}
-		${props.enforceMinWidth && `
+		${enforceMinWidth && `
 			min-width: ${theme.controls.formButtonMinWidth};
 		`}
-		${props.readOnly && `
+		${readOnly && `
 			cursor: default;
 			box-shadow: none;
 			pointer-events:none;
@@ -464,31 +464,31 @@ const Button = React.forwardRef((props, ref) => {
 				box-shadow: none;
 			}
 		`}
-		${props.small && `
+		${small && `
 			font-size: 0.8rem;
 			height:${theme.controls.heightSmall};
 		`}
-		${props.round && `
+		${round && `
 			border-radius: ${theme.controls.roundRadius};
 		`}
-		${props.iconBlock && `
+		${iconBlock && `
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 		`}
 	`;
-    const disabled = props.disabled || props.waiting;
+    const disabled = props.disabled || waiting;
     let content;
     if (variant === 'text') {
         content = React.createElement(Text, { className: cx(styles, props.className), tag: "div" }, props.children);
     }
     else {
         content = (React.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
-            props.leftIcon && React.createElement("span", { className: css({ marginRight: '0.5rem' }) }, props.leftIcon),
-            props.waiting ? React.createElement(Icon, { id: "waiting", spin: true }) : props.children,
-            props.rightIcon && React.createElement("span", { className: css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+            leftIcon && React.createElement("span", { className: css({ marginRight: '0.5rem' }) }, leftIcon),
+            waiting ? React.createElement(Icon, { id: "waiting", spin: true }) : props.children,
+            rightIcon && React.createElement("span", { className: css({ marginLeft: '0.5rem' }) }, rightIcon)));
     }
-    if (props.controlAlign) {
+    if (controlAlign) {
         return (React.createElement("span", { className: css({
                 display: 'inline-block',
                 paddingBottom: theme.controls.inputErrorMinHeight
@@ -592,7 +592,7 @@ const InputErrorDisplay = (props) => {
 
 const defaultMaxLength$1 = 100;
 const BaseInput = React.forwardRef((props, ref) => {
-    var _a, _b;
+    var _a;
     const theme = useThemeSafely();
     const { rightControl, round, wrapperClassName, showErrorDisplay } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName", "showErrorDisplay"]);
     const inputStyles = css({
@@ -621,7 +621,7 @@ const BaseInput = React.forwardRef((props, ref) => {
                 boxShadow: theme.controls.focusOutlineRequiredShadow
             }
         },
-    }, props.round && {
+    }, round && {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} * 2)`,
         paddingRight: `calc(${theme.controls.padding} * 2)`
@@ -641,24 +641,24 @@ const BaseInput = React.forwardRef((props, ref) => {
         '::-webkit-inner-spin-button': {
             appearance: 'none'
         }
-    }, props.rightControl && {
+    }, rightControl && {
         paddingRight: theme.controls.height
     });
     const inputElement = React.createElement("input", Object.assign({}, nativeProps, { ref: ref, autoComplete: (_a = nativeProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: nativeProps.readOnly ? -1 : nativeProps.tabIndex, maxLength: nativeProps.maxLength || defaultMaxLength$1, className: cx(inputStyles, props.className) }));
     const inputWrapperStyles = css `
 		width:100%;
-		${props.rightControl && `
+		${rightControl && `
 			position: relative;
 		`}
 	`;
-    const rightControlStyles = props.rightControl && css `
+    const rightControlStyles = rightControl && css `
 		position: absolute;
 		right: ${theme.controls.padding};
 		top: 0;
 		bottom: 0;
 		display: flex;
 		align-items: center;
-		${props.round && `
+		${round && `
 			right: calc(${theme.controls.padding} * 2);
 		`}
 	`;
@@ -668,8 +668,8 @@ const BaseInput = React.forwardRef((props, ref) => {
         }) },
         React.createElement("div", { className: cx('input', inputWrapperStyles, wrapperClassName) },
             inputElement,
-            props.rightControl && (React.createElement("div", { className: rightControlStyles }, props.rightControl))),
-        ((_b = props.showErrorDisplay) !== null && _b !== void 0 ? _b : true) && React.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
+            rightControl && (React.createElement("div", { className: rightControlStyles }, rightControl))),
+        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React.createElement(InputErrorDisplay, { error: props.readOnly ? undefined : props.error })));
 });
 
 /** useEffect but ignores the first call on component mount. */
@@ -816,26 +816,27 @@ const TextInput = React.forwardRef((props, ref) => {
     const [localValue, setLocalValue] = React.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
     const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
-    const nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage", "allowUpdateOnFocus"]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { emptyString, onValueChange, customError, patternErrorMessage, allowUpdateOnFocus } = props, nativeProps = __rest(props, ["emptyString", "onValueChange", "customError", "patternErrorMessage", "allowUpdateOnFocus"]);
     useIgnoreMount(() => {
         var _a;
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            props.onValueChange(localValue);
+            onValueChange(localValue);
         }
         else {
-            props.onValueChange(undefined);
+            onValueChange(undefined);
         }
         updateErrorMessage();
     }, [localValue]);
     useIgnoreMount(() => {
-        if (props.allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
             setLocalValue(props.value);
         }
         updateErrorMessage();
     }, [props.value]);
     return (React.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
             var _a;
-            setLocalValue(props.emptyString ? e.target.value : e.target.value || undefined);
+            setLocalValue(emptyString ? e.target.value : e.target.value || undefined);
             (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, onBlur: e => {
             var _a, _b;
@@ -852,19 +853,19 @@ const TextInput = React.forwardRef((props, ref) => {
 });
 
 const List = React.forwardRef((props, ref) => {
-    const children = props.items ? props.items.map((item, i) => React.createElement(ListItem, { key: i }, item)) : props.children;
+    const { altRowColor, noLines, items } = props, listProps = __rest(props, ["altRowColor", "noLines", "items"]);
+    const children = items ? items.map((item, i) => React.createElement(ListItem, { key: i }, item)) : props.children;
     const theme = useThemeSafely();
-    const listProps = __rest(props, ["altRowColor", "noLines", "items"]);
     const listStyles = css `
 		margin: 0;
 		padding: 0;
 		list-style-type: none;
-		${props.altRowColor && `
+		${altRowColor && `
 			> .listItem:nth-of-type(even) {
 				background-color: ${theme.colors.lightBg};
 			}
 		`}
-		${props.noLines && `
+		${noLines && `
 			> .listItem {
 				border-bottom: none;
 			}
@@ -873,7 +874,7 @@ const List = React.forwardRef((props, ref) => {
     return (React.createElement("ul", Object.assign({}, listProps, { ref: ref, className: cx('list', listStyles, props.className) }), children));
 });
 const ListItem = (props) => {
-    const liProps = __rest(props, ["variant", "noContentStyling"]);
+    const { variant, noContentStyling } = props, liProps = __rest(props, ["variant", "noContentStyling"]);
     const theme = useThemeSafely();
     const itemStyles = css `
 		border-bottom: ${theme.controls.border};
@@ -883,9 +884,9 @@ const ListItem = (props) => {
 	`;
     const contentStyle = css({
         padding: `calc(${theme.controls.padding} * 1.5)`
-    }, props.variant === 'full' && {
+    }, variant === 'full' && {
         padding: 0
-    }, !props.noContentStyling && {
+    }, !noContentStyling && {
         '>.button': {
             padding: `calc(${theme.controls.padding} * 1.5)`,
             width: '100%',
@@ -945,6 +946,7 @@ const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
     var _a;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React.useRef(null);
@@ -1235,7 +1237,7 @@ const BackdropContext = React__default.createContext({
     showing: false,
     showCount: 0,
     portalId: portalId,
-    setShow: (s, f) => {
+    setShow: () => {
         /* empty */
     }
 });
@@ -1423,22 +1425,22 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
-    const inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
-    const selected = props.checkedIcon || 'selected';
-    const unselected = props.uncheckedIcon || 'unselected';
+    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
+    const selected = checkedIcon || 'selected';
+    const unselected = uncheckedIcon || 'unselected';
     const theme = useThemeSafely();
     let finalCheckedColor;
     if (props.checked) {
-        if (props.checkedThemeColor) {
-            finalCheckedColor = theme.colors[props.checkedThemeColor];
+        if (checkedThemeColor) {
+            finalCheckedColor = theme.colors[checkedThemeColor];
         }
         else {
-            finalCheckedColor = props.checkedColor;
+            finalCheckedColor = checkedColor;
         }
     }
     const checkboxStyles = css `
 		display: inline-block;
-		${!props.disabled && !props.readOnly && `
+		${!props.disabled && !readOnly && `
 			&:hover {
 				filter: ${theme.controls.hoverBrightness};
 			}
@@ -1452,7 +1454,7 @@ const Checkbox = (props) => {
 		${props.disabled && `
 			cursor: not-allowed;
 		`}
-		${props.readOnly && `
+		${readOnly && `
 			cursor: default;
 		`}
 	`;
@@ -1464,21 +1466,21 @@ const Checkbox = (props) => {
 		width: 0;
 		opacity: 0; 
 
-		${!props.readOnly && `
+		${!readOnly && `
 			&:focus + .checkboxIcon {
 				box-shadow: ${theme.controls.focusOutlineShadow};
 			}
 		`}
 	`;
     const iconStyles = css `
-		${!!props.label && `
+		${!!label && `
 			margin-right: 0.5rem;
 		`}
 		${props.disabled && `
 			background-color: ${theme.colors.disabled};
 			cursor: not-allowed;
 		`}
-		${props.readOnly && `
+		${readOnly && `
 			cursor: default;
 		`}
 		${props.checked && `
@@ -1487,15 +1489,15 @@ const Checkbox = (props) => {
 	`;
     return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
         React.createElement("label", { className: labelStyles },
-            React.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
-                    if (props.readOnly) {
+            React.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+                    if (readOnly) {
                         e.preventDefault();
                         return;
                     }
-                    return props.onChange(e.currentTarget.checked, e);
+                    return onChange(e.currentTarget.checked, e);
                 } })),
             React.createElement(Icon, { className: cx('checkboxIcon', iconStyles), id: props.checked ? selected : unselected }),
-            props.label,
+            label,
             props.children)));
 };
 
@@ -1693,7 +1695,7 @@ const Modal = (p) => {
                 React__default.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
                         mouseDownElement.current = e.target;
                         e.stopPropagation();
-                    }, onMouseUp: e => {
+                    }, onMouseUp: () => {
                         mouseDownElement.current = undefined;
                         /*
                             MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
@@ -1739,7 +1741,7 @@ const ConfirmModal = (props) => {
 };
 
 const CopyButton = React.forwardRef((props, ref) => {
-    const buttonProps = __rest(props, ["selector"]);
+    const { selector } = props, buttonProps = __rest(props, ["selector"]);
     const [copied, setCopied] = React.useState(false);
     return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, title: copied ? 'Copied!' : (props.title || 'Copy to clipboard'), variant: "icon", onBlur: e => {
             var _a;
@@ -1750,7 +1752,7 @@ const CopyButton = React.forwardRef((props, ref) => {
             const button = e.currentTarget;
             let copySuccess = false;
             try {
-                const text = document.querySelector(props.selector);
+                const text = document.querySelector(selector);
                 text.select();
                 copySuccess = document.execCommand('copy');
                 // the input gets focus on select.  bring it back.
@@ -1793,15 +1795,16 @@ const ErrorModal = (props) => {
 
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
 const Form = React.forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { inline, children, onSubmit, className, ajax, unstyled } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax", "unstyled"]);
     const theme = useThemeSafely();
     let defaultStyle;
-    if (!props.unstyled) {
+    if (!unstyled) {
         defaultStyle = css({
             label: 'Form',
             display: 'flex',
-            flexDirection: props.inline ? 'row' : 'column',
-            alignItems: props.inline ? 'flex-end' : 'normal',
+            flexDirection: inline ? 'row' : 'column',
+            alignItems: inline ? 'flex-end' : 'normal',
             gap: theme.controls.gap
         });
     }
@@ -1988,7 +1991,7 @@ const FileUploader = (p) => {
             if (!((_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.contains(hoverClass))) {
                 (_b = form.current) === null || _b === void 0 ? void 0 : _b.classList.add(hoverClass);
             }
-        }, onDragLeave: e => {
+        }, onDragLeave: () => {
             var _a;
             (_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.remove(hoverClass);
         }, onDrop: e => {
@@ -2001,7 +2004,7 @@ const FileUploader = (p) => {
                 return;
             }
             onFilesChange(e.dataTransfer.files);
-        }, onSubmit: e => {
+        }, onSubmit: () => {
             if (!files) {
                 return;
             }
@@ -2048,7 +2051,7 @@ const FileUploader = (p) => {
                 flexDirection: 'column',
                 gap: '1rem',
                 alignItems: 'center',
-                zIndex: !!(files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
+                zIndex: (files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
             }) },
             !(files === null || files === void 0 ? void 0 : files.length) && React__default.createElement(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
             React__default.createElement(Text, { align: "center", noPad: true, spacedOut: true, className: css({
@@ -2179,14 +2182,6 @@ const Header = (props) => {
         gridAutoFlow: 'column',
         alignItems: 'center'
     });
-    const centerElementsStyles = props.centerOffsetElements && css `
-		position: absolute;
-		display: flex;
-		justify-content: center;
-		left: 0;
-		right: 0;
-		bottom: calc(${theme.layout.headerHeight} / 2 * -1);
-	`;
     let title;
     if (props.title) {
         if (typeof props.title === 'string') {
@@ -2206,9 +2201,7 @@ const Header = (props) => {
             React.createElement(Icon, { id: "menu" }))),
         props.leftElements && React.createElement("div", { className: leftElementStyles }, props.leftElements),
         title,
-        props.rightElements && React.createElement("div", { className: rightElementStyles }, props.rightElements),
-        props.centerOffsetElements && (React.createElement("div", { className: centerElementsStyles },
-            React.createElement("div", null, props.centerOffsetElements)))));
+        props.rightElements && React.createElement("div", { className: rightElementStyles }, props.rightElements)));
 };
 
 const Highlight = (props) => {
@@ -2277,7 +2270,7 @@ const InfoTip = (props) => {
         if (props.loadOnHover) {
             props.loadOnHover().then(() => {
                 openTip();
-            }).catch(err => {
+            }).catch(() => {
                 /* Not my responsiblity. */
             });
         }
@@ -2359,7 +2352,7 @@ const DateInput = React.forwardRef((props, ref) => {
     const updateDateErrorMessages = React.useCallback(() => {
         let dateError = '';
         if (dateValue === undefined) {
-            if (!!textValue) {
+            if (textValue) {
                 // the text pattern is a valid date format, but the numbers are wrong.  example: 05/35/2000.
                 dateError = invalidDateMessage;
             }
@@ -2397,7 +2390,8 @@ const DateInput = React.forwardRef((props, ref) => {
         }
     }, [dateValue, showCalendar]);
     const popover = React.useRef(null);
-    const nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus", "pageYear"]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customError, reposition, onValueChange, allowUpdateOnFocus, pageYear: showYearControls } = props, nativeProps = __rest(props, ["customError", "reposition", "onValueChange", "allowUpdateOnFocus", "pageYear"]);
     useIgnoreMount(() => {
         var _a;
         /*
@@ -2406,10 +2400,10 @@ const DateInput = React.forwardRef((props, ref) => {
         */
         updateDateErrorMessages();
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            props.onValueChange(dateValue);
+            onValueChange(dateValue);
         }
         else {
-            props.onValueChange(undefined);
+            onValueChange(undefined);
         }
     }, [dateValue]);
     useIgnoreMount(() => {
@@ -2417,7 +2411,7 @@ const DateInput = React.forwardRef((props, ref) => {
     }, [textValue]);
     useIgnoreMount(() => {
         var _a;
-        if (props.allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
             updateValues(props.value);
             setCalendarDate(getCalendarDate((_a = props.value) !== null && _a !== void 0 ? _a : 0, props.min, props.max));
         }
@@ -2459,7 +2453,7 @@ const DateInput = React.forwardRef((props, ref) => {
             }
             (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
         } })));
-    return (React.createElement(Popover, { reposition: props.reposition, isOpen: showCalendar, onClickOutside: () => {
+    return (React.createElement(Popover, { reposition: reposition, isOpen: showCalendar, onClickOutside: () => {
             toggleCalendar(false);
         }, parent: input, content: (React.createElement("div", { ref: popover, className: css({
                 paddingLeft: '1rem',
@@ -2525,19 +2519,20 @@ const NumberInput = React.forwardRef((props, ref) => {
     const [localValue, setLocalValue] = React.useState(props.value);
     const inputRef = (ref !== null && ref !== void 0 ? ref : React.useRef(null));
     const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
-    const nativeProps = __rest(props, ["customError", "onValueChange", "allowUpdateOnFocus"]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customError, onValueChange, allowUpdateOnFocus } = props, nativeProps = __rest(props, ["customError", "onValueChange", "allowUpdateOnFocus"]);
     useIgnoreMount(() => {
         var _a;
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            props.onValueChange(localValue);
+            onValueChange(localValue);
         }
         else {
-            props.onValueChange(undefined);
+            onValueChange(undefined);
         }
         updateErrorMessage();
     }, [localValue]);
     useIgnoreMount(() => {
-        if (props.allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
             setLocalValue(props.value);
         }
         updateErrorMessage();
@@ -2578,11 +2573,11 @@ const parseNumber = (rawValue) => {
 };
 
 const Label = (props) => {
-    var _a, _b, _c;
-    const labelProps = __rest(props, ["text", "static", "orientation", "align", "noWrap", "subText", "optional", "controlAlign"]);
+    var _a;
+    const { text, static: propsStatic, orientation, align, noWrap, subText, optional, controlAlign } = props, labelProps = __rest(props, ["text", "static", "orientation", "align", "noWrap", "subText", "optional", "controlAlign"]);
     const theme = useThemeSafely();
-    const orientationChoice = (_a = props.orientation) !== null && _a !== void 0 ? _a : 'vertical';
-    const alignChoice = (_b = props.align) !== null && _b !== void 0 ? _b : 'left';
+    const orientationChoice = orientation !== null && orientation !== void 0 ? orientation : 'vertical';
+    const alignChoice = align !== null && align !== void 0 ? align : 'left';
     const padding = '0.25rem';
     const labelStyles = css `
 		label: Label;
@@ -2609,14 +2604,14 @@ const Label = (props) => {
 		${orientationChoice === 'horizontal' && `
 			flex-direction: row;
 			margin-right:${padding};
-			${props.static && `
+			${propsStatic && `
 				margin-right:0.5rem;
 			`}
 		`}
 		${orientationChoice === 'horizontalReverse' && `
 			margin-left:${padding};
 		`}
-		${(props.subText || props.optional) && `
+		${(subText || optional) && `
 			margin-right: 0.5rem;
 		`}
 	`;
@@ -2624,23 +2619,23 @@ const Label = (props) => {
 		label: LabelContent;
 		display:inline-block;
 		width:100%;
-		${props.controlAlign && `
+		${controlAlign && `
 			height:${theme.controls.height};
 			line-height:${theme.controls.height};
 		`}
 	`;
     const outerClass = props.className;
-    let labelText = React.createElement(Text, { align: alignChoice, className: labelTextStyles, tag: "div", bold: true }, props.text);
+    let labelText = React.createElement(Text, { align: alignChoice, className: labelTextStyles, tag: "div", bold: true }, text);
     let subTextChoice;
-    if (props.subText) {
-        if (typeof props.subText === 'string') {
-            subTextChoice = React.createElement(Text, { tag: "div" }, props.subText);
+    if (subText) {
+        if (typeof subText === 'string') {
+            subTextChoice = React.createElement(Text, { tag: "div" }, subText);
         }
         else {
-            subTextChoice = props.subText;
+            subTextChoice = subText;
         }
     }
-    else if (props.optional) {
+    else if (optional) {
         subTextChoice = React.createElement(Text, { tag: "div" },
             React.createElement("em", null, "(optional)"));
     }
@@ -2652,7 +2647,7 @@ const Label = (props) => {
                     marginBottom: padding
                 }) }, subTextChoice));
     }
-    if (props.noWrap) {
+    if (noWrap) {
         return (React.createElement("span", { className: cx(labelStyles, outerClass) },
             React.createElement("label", { htmlFor: props.htmlFor, className: outerClass }, labelText),
             props.children));
@@ -2660,36 +2655,15 @@ const Label = (props) => {
     const content = React.createElement(React.Fragment, null,
         labelText,
         React.createElement("span", { className: css(labelContentStyles) }, props.children));
-    if (props.static) {
+    if (propsStatic) {
         return (React.createElement("span", { className: cx(labelStyles, outerClass) }, content));
     }
     // labels without htmlFor can cause focus, hover, and click issues when wrapping other elements.
     // this fixes the issues.
-    const htmlFor = (_c = props.htmlFor) !== null && _c !== void 0 ? _c : `labelAutoId_${createUid()}`;
+    const htmlFor = (_a = props.htmlFor) !== null && _a !== void 0 ? _a : `labelAutoId_${createUid()}`;
     return (React.createElement("label", Object.assign({}, labelProps, { htmlFor: htmlFor, className: cx('label', labelStyles, outerClass) }), content));
 };
 
-/*
-    From https://fireship.io/snippets/use-media-query-hook/.
-    Tried using https://www.npmjs.com/package/react-media, but it cause Webpack build issues.
-*/
-/** React wrapper around window resizing and window.matchMedia.
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
- */
-const useMediaQuery = (query) => {
-    const [matches, setMatches] = useState(window.matchMedia(query).matches);
-    useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        window.addEventListener("resize", listener);
-        return () => window.removeEventListener("resize", listener);
-    }, [matches, query]);
-    return matches;
-};
-
 const Nav = (props) => {
     var _a, _b, _c, _d;
     const nav = React.useRef(null);
@@ -2697,7 +2671,6 @@ const Nav = (props) => {
     const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
     const totalNavOffset = `calc(${navWidth} + 20px)`;
     const backdrop = React.useContext(BackdropContext);
-    const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
     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 `
@@ -2742,19 +2715,6 @@ const Nav = (props) => {
 			color: ${theme.colors.navFont};
 		}
 		padding-top:0;
-		${props.responsive && `
-			@media(min-width:${theme.breakpoints.desktop}) {
-				position: relative;
-				left: 0;
-				box-shadow: none;
-				z-index: 1;
-				animation: none !important;
-				margin-right: 1rem;
-				overflow-y: visible;
-				margin-top:-2rem;
-				padding-top: 1rem;
-			}
-		`}
 	`;
     React.useEffect(() => {
         if (!backdrop.showing) {
@@ -2786,13 +2746,6 @@ const Nav = (props) => {
             }
         }
     });
-    if (props.responsive) {
-        React.useEffect(() => {
-            if (backdrop.showing) {
-                props.toggle(false);
-            }
-        }, [isLargeScreen]);
-    }
     return (React.createElement("nav", { ref: nav, className: cx('nav', navStyles, props.className) }, props.children));
 };
 
@@ -3055,18 +3008,19 @@ const generateLinkStyles = (props, theme) => {
 };
 
 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"]);
     const theme = useThemeSafely();
     const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = cx('omniLink', linkStyles, props.className);
     if (variant === 'text') {
-        return React.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+        return React.createElement(Text, { className: mainClassName, tag: "div" }, children);
     }
     const content = React.createElement(LinkContent, Object.assign({}, props));
-    if (props.noRouter) {
+    if (noRouter) {
         return (React.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
     }
-    const isDisabled = props.disabled || props.waiting;
+    const isDisabled = props.disabled || waiting;
     return (React.createElement(Link$1, Object.assign({}, linkProps, { className: mainClassName, to: props.href, onClick: e => {
             var _a;
             if (isDisabled) {
@@ -3081,13 +3035,13 @@ const OmniLink = (props) => {
 
 const roundPxPadding = '4px';
 const Picker = (props) => {
-    const selectProps = __rest(props
+    const { value, options, onValueChange, readOnly, round, controlAlign, wrapperClassName, iconClassName, error } = props, selectProps = __rest(props
     // if we put numbers in, we expect them out
     , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName", "error"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
-    if (props.options && props.options.length) {
-        const testOption = props.options[0];
+    if (options && options.length) {
+        const testOption = options[0];
         if (typeof testOption === 'object') {
             isNumber = typeof testOption.id === 'number';
         }
@@ -3119,16 +3073,16 @@ const Picker = (props) => {
             outline: 'none',
             boxShadow: theme.controls.focusOutlineShadow
         }
-    }, props.round && {
+    }, round && {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} + ${roundPxPadding})`,
         paddingRight: `calc(${theme.controls.padding} + 1rem + ${roundPxPadding})`,
-    }, props.error && {
+    }, error && {
         borderColor: theme.colors.required,
         ':focus': {
             boxShadow: theme.controls.focusOutlineRequiredShadow
         }
-    }, props.readOnly && {
+    }, readOnly && {
         backgroundColor: 'transparent !important',
         backgroundImage: 'unset',
         border: 'none',
@@ -3137,9 +3091,9 @@ const Picker = (props) => {
             boxShadow: 'none'
         }
     });
-    const select = (React.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readOnly ? -1 : selectProps.tabIndex, className: cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
+    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 (props.readOnly) {
+            if (readOnly) {
                 if (e.keyCode === 9) {
                     //TAB
                     return;
@@ -3152,7 +3106,7 @@ const Picker = (props) => {
             }
         }, onMouseDown: e => {
             var _a;
-            if (props.readOnly) {
+            if (readOnly) {
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -3168,9 +3122,9 @@ const Picker = (props) => {
                     val = '';
                 }
             }
-            props.onValueChange(val);
+            onValueChange(val);
             (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }), (props.options || []).map(o => {
+        } }), (options || []).map(o => {
         var _a;
         let val;
         let label;
@@ -3189,19 +3143,19 @@ const Picker = (props) => {
             position: 'relative',
             display: 'inline-block',
             width: '100%',
-        }), props.wrapperClassName) },
+        }), wrapperClassName) },
         React.createElement("div", { className: css({
                 position: 'relative'
             }) },
             select,
-            !props.readOnly && (React.createElement(Icon, { id: "sortDesc", className: cx(css({
+            !readOnly && (React.createElement(Icon, { id: "sortDesc", className: cx(css({
                     position: 'absolute',
-                    right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
+                    right: `calc(${theme.controls.padding} + ${round ? roundPxPadding : '0px'})`,
                     height: '100%',
                     pointerEvents: 'none',
                     color: theme.colors.font
-                }), props.iconClassName) }))),
-        (props.error || props.controlAlign) && React.createElement(InputErrorDisplay, { error: props.error })));
+                }), iconClassName) }))),
+        (error || controlAlign) && React.createElement(InputErrorDisplay, { error: error })));
 };
 
 const Pager = (props) => {
@@ -3265,7 +3219,7 @@ const Pager = (props) => {
 const BoundMemoryPager = (p) => {
     var _a, _b, _c;
     const { pager, showPageText } = p, rest = __rest(p, ["pager", "showPageText"]);
-    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? pager.page : undefined, totalPages: p.showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? pager.page : undefined, totalPages: showPageText ? pager.totalPages : undefined, canGoNext: pager.hasNext, canGoPrevious: pager.hasPrevious, minItem: pager.minItemIndex + 1, maxItem: pager.maxItemIndex + 1, totalItems: pager.totalItems, leftControls: pager.limitOptions.length > 1 && p.onLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
             React.createElement(Picker, { value: pager.limit, options: pager.limitOptions, onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: pager.sortOptions.length > 1 && p.onSort ? (React.createElement(Label, { text: (_b = p.sortText) !== null && _b !== void 0 ? _b : 'Sort', orientation: "horizontalReverse" },
             React.createElement(Picker, { value: (_c = pager.sort) !== null && _c !== void 0 ? _c : '', options: pager.sortOptions, onValueChange: v => { var _a; return (_a = p.onSort) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, page: d => {
             p.onPage(d);
@@ -3277,7 +3231,7 @@ const BoundStaticPager = (p) => {
     const { result, showPageText } = p, rest = __rest(p, ["result", "showPageText"]);
     const showLimit = !!(result.limit && p.limitOptions && p.limitOptions.length > 1 && p.onLimit);
     const showSort = !!(p.sort !== undefined && p.sortOptions && p.sortOptions.length > 1 && p.onSort);
-    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: p.showPageText ? result.page : undefined, totalPages: p.showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
+    return (React.createElement(Pager, Object.assign({}, rest, { pageIndex: showPageText ? result.page : undefined, totalPages: showPageText ? result.totalPages : undefined, canGoNext: result.hasNext, canGoPrevious: result.hasPrevious, minItem: result.minPageItemIndex + 1, maxItem: result.maxPageItemIndex + 1, totalItems: result.total, leftControls: showLimit ? (React.createElement(Label, { text: (_a = p.limitText) !== null && _a !== void 0 ? _a : 'Limit', orientation: "horizontal" },
             React.createElement(Picker, { value: (_b = result.limit) !== null && _b !== void 0 ? _b : 1, options: (_c = p.limitOptions) !== null && _c !== void 0 ? _c : [1], onValueChange: v => { var _a; return (_a = p.onLimit) === null || _a === void 0 ? void 0 : _a.call(p, v); } }))) : undefined, rightControls: showSort ? (React.createElement(Label, { text: (_d = p.sortText) !== null && _d !== void 0 ? _d : 'Sort', orientation: "horizontalReverse" },
             React.createElement(Picker, { value: (_e = p.sort) !== null && _e !== void 0 ? _e : '', options: (_f = p.sortOptions) !== null && _f !== void 0 ? _f : [], onValueChange: v => {
                     var _a;
@@ -3295,10 +3249,6 @@ class PagedResult {
         this.limit = limit;
         this.total = total;
     }
-    /** @deprecated Use fromPagedResultDto going forward. */
-    static fromDto(dto) {
-        return new PagedResult(dto.items, dto.total, dto.page, dto.limit);
-    }
     static fromPagedResultDto(dto, convert) {
         const items = convert ? dto.items.map(convert) : dto.items;
         return new PagedResult(items, dto.total, dto.page, dto.limit);
@@ -3410,6 +3360,7 @@ class PagedResult {
             items: this.items.map(item => {
                 if (!!item && typeof item === 'object') {
                     if ('toJSON' in item) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         return item.toJSON();
                     }
                 }
@@ -3708,33 +3659,33 @@ const useWaiting = (func) => {
 };
 
 const SearchBox = React.forwardRef((props, ref) => {
-    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty: onSubmitWhenEmpty, onClear } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear"]);
+    const { wrapperClassName, buttonClassName, inputWrapperClassName, inputClassName, onSubmit, noForm, noSubmitWhenEmpty, onClear } = props, inputProps = __rest(props, ["wrapperClassName", "buttonClassName", "inputWrapperClassName", "inputClassName", "onSubmit", "noForm", "noSubmitWhenEmpty", "onClear"]);
     const [waiting, handleSubmit] = useWaiting(async () => {
-        var _a, _b, _c;
+        var _a, _b;
         if (noForm) {
             return;
         }
-        if (!props.onSubmit) {
+        if (!onSubmit) {
             return;
         }
-        if (((_a = props.noSubmitWhenEmpty) !== null && _a !== void 0 ? _a : true) && !props.value) {
+        if ((noSubmitWhenEmpty !== null && noSubmitWhenEmpty !== void 0 ? noSubmitWhenEmpty : true) && !props.value) {
             return;
         }
         // the active element will be the input. if the submit action changes props.value it will
         // be ignored due to Inputs focused handling.
         if (document.activeElement) {
-            (_c = (_b = document.activeElement).blur) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_b = (_a = document.activeElement).blur) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
-        return props.onSubmit();
+        return onSubmit();
     });
     const theme = useThemeSafely();
     const buttonStyles = cx(css({
         color: `${theme.colors.font} !important;`,
         fontSize: '1rem'
-    }), props.buttonClassName);
+    }), buttonClassName);
     let clearButton;
-    if (props.onClear && !!props.value) {
-        clearButton = (React.createElement(Button, { onClick: props.onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
+    if (onClear && !!props.value) {
+        clearButton = (React.createElement(Button, { onClick: onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
             React.createElement(Icon, { id: "clear" })));
     }
     const saveButton = (React.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
@@ -3743,22 +3694,22 @@ const SearchBox = React.forwardRef((props, ref) => {
         clearButton,
         saveButton) : saveButton;
     let clearButtonInputStyles;
-    if (!!props.onClear) {
+    if (onClear) {
         clearButtonInputStyles = css({
             paddingRight: `calc(${theme.controls.height} + ${theme.controls.heightSmall})`
         });
     }
-    const input = (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: props.inputWrapperClassName, className: cx(clearButtonInputStyles, props.inputClassName), rightControl: rightControls })));
+    const input = (React.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: inputWrapperClassName, className: cx(clearButtonInputStyles, inputClassName), rightControl: rightControls })));
     const searchBoxWrapperStyles = cx(css({
         label: 'SearchBox'
-    }), props.wrapperClassName);
-    if (!props.noForm) {
+    }), wrapperClassName);
+    if (!noForm) {
         return (React.createElement(Form, { role: "search", className: searchBoxWrapperStyles, onSubmit: handleSubmit }, input));
     }
     return (React.createElement("div", { className: searchBoxWrapperStyles }, input));
 });
 
-const GlobalStyles = (p) => {
+const GlobalStyles = () => {
     const theme = useThemeSafely();
     injectGlobal({
         '*': {
@@ -3786,6 +3737,27 @@ const GlobalStyles = (p) => {
     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;
+};
+
 const Slider = (p) => {
     var _a;
     const theme = useThemeSafely();
@@ -3807,13 +3779,13 @@ const Slider = (p) => {
             width: '100%',
             height,
         }), p.className) },
-        React__default.createElement(ReactSlider, { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value, index) => {
+        React__default.createElement(ReactSlider, { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
                 p.onChange(value);
-            }, onChange: p.onUpdate || p.showValue ? (value, index) => {
+            }, 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, state) => {
+            } : 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',
@@ -3973,7 +3945,7 @@ const TabHeader = (p) => {
                                 .then(() => {
                                 onChange();
                             })
-                                .catch(err => {
+                                .catch(() => {
                                 /* do nothing */
                             })
                                 .finally(() => {
@@ -4116,11 +4088,12 @@ const ThSort = (props) => {
 const defaultMaxLength = 200;
 const defaultRows = 10;
 const TextArea = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
+    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);
-    const nativeProps = __rest(props, ["onValueChange", "customError", "reportValueOnError", "showErrorDisplay", "allowUpdateOnFocus"]);
+    // 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();
@@ -4128,21 +4101,21 @@ const TextArea = React.forwardRef((props, ref) => {
     useIgnoreMount(() => {
         var _a;
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
-            props.onValueChange(localValue);
+            onValueChange(localValue);
         }
         else {
-            if (props.reportValueOnError) {
+            if (reportValueOnError) {
                 //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
-                props.onValueChange(localValue);
+                onValueChange(localValue);
             }
             else {
-                props.onValueChange(undefined);
+                onValueChange(undefined);
             }
         }
         updateErrorMessage();
     }, [localValue]);
     useIgnoreMount(() => {
-        if (props.allowUpdateOnFocus || document.activeElement !== inputRef.current) {
+        if (allowUpdateOnFocus || document.activeElement !== inputRef.current) {
             setLocalValue(props.value);
         }
         updateErrorMessage();
@@ -4202,20 +4175,19 @@ const TextArea = React.forwardRef((props, ref) => {
                 }
                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
             } })),
-        ((_c = props.showErrorDisplay) !== null && _c !== void 0 ? _c : true) && React.createElement(InputErrorDisplay, { error: validationError })));
+        (showErrorDisplay !== null && showErrorDisplay !== void 0 ? showErrorDisplay : true) && React.createElement(InputErrorDisplay, { error: validationError })));
 });
 
 const ToggleButton = React.forwardRef((props, ref) => {
-    var _a, _b;
-    const buttonProps = __rest(props, ["checked", "checkedText", "uncheckedText", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
+    const { checked, checkedChildren, uncheckedChildren, checkedVariant, checkedClassName, checkedStyle, checkedIcon, uncheckedIcon } = props, buttonProps = __rest(props, ["checked", "checkedChildren", "uncheckedChildren", "checkedVariant", "checkedClassName", "checkedStyle", "checkedIcon", "uncheckedIcon"]);
     let children;
-    if (props.checked) {
-        children = (_a = props.checkedChildren) !== null && _a !== void 0 ? _a : props.checkedText;
+    if (checked) {
+        children = checkedChildren;
     }
     else {
-        children = (_b = props.uncheckedChildren) !== null && _b !== void 0 ? _b : props.uncheckedText;
+        children = uncheckedChildren;
     }
-    return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: cx('toggleButton', props.checked && 'toggleButton--checked', props.className, props.checked && props.checkedClassName), rightIcon: props.checked ? props.checkedIcon : props.uncheckedIcon, variant: props.checked ? props.checkedVariant : props.variant, style: props.checked ? props.checkedStyle : props.style }), children));
+    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) => {
@@ -4364,7 +4336,7 @@ const WaitingIndicator = (p) => {
     the IE-specific fixes have been removed.
 */
 /** Resets certain styles so there is more consistancy between browsers. */
-const NormalizeCss = (p) => {
+const NormalizeCss = () => {
     /* tslint:disable:no-unused-expression */
     injectGlobal `
 	/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -4680,6 +4652,7 @@ const enumToEntities = (enumObj) => {
 };
 
 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);
@@ -4701,6 +4674,7 @@ const Link = (props) => {
         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);