@mackin.com/styleguide 8.6.2 → 8.8.0

package/index.d.ts

@@ -212,15 +212,19 @@ interface FormProps extends BaseProps$3 {
     inline?: boolean;
     /** If true, preventDefault and stopPropagation will be applied prior to onSubmit being called.  Defaults to true. */
     ajax?: boolean;
+    /** Removes the opinionated flex styling.  'inline' will be ignored. */
+    unstyled?: boolean;
 }
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
-declare const Form: React.ForwardRefExoticComponent<Pick<FormProps, "inline" | "ajax" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLFormElement>>;
+declare const Form: React.ForwardRefExoticComponent<Pick<FormProps, "inline" | "ajax" | "unstyled" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLFormElement>>;
+/** @deprecated Just style normally using flex, grid, etc. */
 declare const FormFlexRow: (props: {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start";
 }) => JSX.Element;
+/** @deprecated Just style normally using flex, grid, etc. */
 declare const FormColumnRow: (props: {
     children: React.ReactNode;
     cols: number;
@@ -461,6 +465,8 @@ interface ModalProps {
     __debug?: boolean;
     onClick?: () => void;
 }
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+declare const modalScrollFixClassName = "modal-scroll-fix";
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 
 declare const Nav: (props: {
@@ -709,11 +715,14 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    className?: string;
     onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
     autoFocus?: boolean;
+    /** This will be applied to the containing element (Form). */
+    className?: string;
+    buttonClassName?: string;
+    inputClassName?: string;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 
@@ -728,7 +737,9 @@ interface MackinTheme {
         primary2: string;
         primary2Font: string;
         secondary: string;
+        /** @deprecated Bad name.  Use 'secondaryFont'. */
         secondary2Font: string;
+        secondaryFont: string;
         info: string;
         infoFont: string;
         warning: string;
@@ -781,7 +792,10 @@ interface MackinTheme {
         height: string;
         heightSmall: string;
         boxShadow: string;
+        /** For controls with a background color. */
         hoverBrightness: string;
+        /** For controls without a background color. */
+        hoverBackground: string;
         transitionDuration: string;
         transitionEasing: string;
         transition: string;
@@ -859,6 +873,18 @@ interface SliderProps<T extends SliderValue> {
     renderValue?: (value: number) => string;
     /** Used with renderValue for the custom element width. Defaults to theme.controls.height * 2. */
     renderValueWidth?: string;
+    /** Styles of the overall slider. */
+    className?: string;
+    /** Styles for the slider handles. */
+    handleClassName?: string;
+    /** Styles for the first handle. */
+    handle1ClassName?: string;
+    /** Styles for the second handle.  Ignored if the value is not an array. */
+    handle2ClassName?: string;
+    /** Styles of the track. */
+    trackClassName?: string;
+    /** Styles applied to the track between two handlers.  Ignored if the value is not an array. */
+    innerTrackClassName?: string;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 
@@ -1104,4 +1130,4 @@ interface TabContainerProps {
 }
 declare const TabContainer: (p: TabContainerProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabContainer, TabContainerProps, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, modalScrollFixClassName, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -128,6 +128,7 @@ const defaultTheme = {
         primary2: '#007bff',
         primary2Font: 'rgba(255, 255, 255, 0.9)',
         secondary: '#9e9e9e',
+        secondaryFont: 'rgba(255, 255, 255, 0.9)',
         secondary2Font: 'rgba(255, 255, 255, 0.9)',
         info: '#7851a9',
         infoFont: 'rgba(255, 255, 255, 0.9)',
@@ -182,7 +183,8 @@ const defaultTheme = {
         boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
         headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
         buttonBoxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
-        hoverBrightness: 'brightness(0.75)',
+        hoverBrightness: 'brightness(0.8)',
+        hoverBackground: 'rgba(0, 0, 0, 0.1)',
         transitionDuration: '0.25s',
         transitionEasing: 'ease-in-out',
         transition: '',
@@ -282,6 +284,13 @@ const Text = (props) => {
     if (props.leftPad) {
         style.paddingLeft = props.leftPad;
     }
+    let fontWeight;
+    if (props.bold) {
+        fontWeight = 'bold';
+    }
+    else if (props.bold === false) {
+        fontWeight = 'normal';
+    }
     const styles = css.css(getTagStyles(theme, tagChoice), {
         userSelect: 'text',
         label: 'Text',
@@ -295,7 +304,7 @@ const Text = (props) => {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         display: '-webkit-box'
-    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+    }, props.spacedOut && { lineHeight: '1.5rem' }, { fontWeight }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
         fontFamily: theme.fonts.headerFamily
     });
     return React__namespace.createElement(tagChoice, {
@@ -304,6 +313,7 @@ const Text = (props) => {
     }, props.children);
 };
 
+//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
     const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -368,6 +378,9 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			justify-content: center;
 			align-items: center;
 			background-color: transparent;
+			&:hover:not(:disabled) {
+				background-color: ${theme.controls.hoverBackground};
+			}
 			${props.small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
@@ -380,6 +393,9 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			box-shadow: none;
 			border: none;
 			background-color: transparent;
+			&:hover:not(:disabled) {
+				background-color: ${theme.controls.hoverBackground};
+			}
 		`}
 		${(props.variant === 'text') && `
 			background-color: transparent;
@@ -496,7 +512,6 @@ const Button = React__namespace.forwardRef((props, ref) => {
     if (props.controlAlign) {
         return (React__namespace.createElement("span", { className: css.css({
                 display: 'inline-block',
-                width: '100%',
                 paddingBottom: theme.controls.inputErrorMinHeight
             }) }, content));
     }
@@ -1154,6 +1169,240 @@ const Backdrop$1 = (props) => {
         }, ref: backdrop, className: css.cx('backdrop', styles, props.className) }, props.children));
 };
 
+/** useEffect but it will only fire when the actual truthiness of the value changes.
+ * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
+*/
+const useBooleanChanged = (effect, dep) => {
+    /*
+        Why?
+        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
+        Components like Modal need to communicate when their show status changes.
+        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
+        This is what we want regardless of mount status:
+        true > false = Change
+        false > true = Change
+        true > true = No Change
+        false > false = No Change
+        undefined > false = No Change
+        undefined > true = Change
+    */
+    const lastValue = React.useRef(undefined);
+    React.useEffect(() => {
+        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
+        if (!!lastValue.current !== !!dep) {
+            const previous = lastValue.current;
+            lastValue.current = dep;
+            effect(!!lastValue.current, !!previous);
+            //console.log('[useBooleanChanged] change called')
+        }
+    }, [dep]);
+};
+
+const useLogger = (componentName, enabled) => {
+    return (...messages) => {
+        if (enabled) {
+            // tslint:disable-next-line
+            console.log(`[${componentName}]`, ...messages);
+        }
+    };
+};
+
+// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
+const canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+let size;
+/** Tells you actual width of the scroll bar.  This can vary by browser. */
+const useScrollbarSize = (recalc) => {
+    if ((!size && size !== 0) || recalc) {
+        if (canUseDom) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.style.position = 'absolute';
+            scrollDiv.style.top = '-9999px';
+            scrollDiv.style.width = '50px';
+            scrollDiv.style.height = '50px';
+            scrollDiv.style.overflow = 'scroll';
+            document.body.appendChild(scrollDiv);
+            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
+        }
+    }
+    return size;
+};
+
+/** Add to fixed positioned elements so their contents do not jump around when scrolling is disabled. */
+const modalScrollFixClassName = 'modal-scroll-fix';
+const Modal = (p) => {
+    var _a, _b, _c, _d;
+    const backdrop = React.useContext(BackdropContext);
+    const mouseDownElement = React.useRef(undefined);
+    const theme = useThemeSafely();
+    const hasHeader = p.closeButton || p.heading;
+    const contentRef = React__default['default'].useRef(null);
+    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
+    const showing = React.useRef(p.show);
+    const bodyStyles = React.useRef('');
+    const fixedElementStyles = React.useRef('');
+    const addScrollStyles = () => {
+        var _a, _b, _c, _d;
+        if (!bodyStyles.current) {
+            bodyStyles.current = css.css({
+                label: 'ModalBodyOverrides_' + ((_b = (_a = p.id) === null || _a === void 0 ? void 0 : _a.replace(/\s+/, '')) !== null && _b !== void 0 ? _b : nanoid.nanoid()),
+                overflow: 'hidden',
+                paddingRight: `${useScrollbarSize()}px`
+            });
+            log('creating singleton bodyStyles', bodyStyles.current);
+        }
+        if (!fixedElementStyles.current) {
+            fixedElementStyles.current = css.css({
+                label: 'ModalElementOverrides_' + ((_d = (_c = p.id) === null || _c === void 0 ? void 0 : _c.replace(/\s+/, '')) !== null && _d !== void 0 ? _d : nanoid.nanoid()),
+                paddingRight: `${useScrollbarSize()}px`
+            });
+        }
+        document.body.classList.add(bodyStyles.current);
+        Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+            e.classList.add(fixedElementStyles.current);
+        });
+    };
+    const tryRemoveScrollStyles = () => {
+        if (bodyStyles.current) {
+            log('removing singleton', bodyStyles.current);
+            document.body.classList.remove(bodyStyles.current);
+        }
+        if (fixedElementStyles.current) {
+            Array.from(document.querySelectorAll(`.${modalScrollFixClassName}`)).forEach(e => {
+                e.classList.remove(fixedElementStyles.current);
+            });
+        }
+    };
+    React.useEffect(() => {
+        log('mounted');
+        return () => {
+            var _a;
+            if (showing.current) {
+                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
+                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                log('backdrop.setShow', false);
+                tryRemoveScrollStyles();
+            }
+            else {
+                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
+            }
+            log('un-mounted');
+        };
+    }, []);
+    useBooleanChanged((show, previousShow) => {
+        var _a;
+        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
+        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        showing.current = show;
+        log('backdrop.setShow', show);
+        if (show) {
+            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
+            addScrollStyles();
+        }
+        else {
+            log('this modal is hiding. try removing singleton bodyStyles');
+            tryRemoveScrollStyles();
+        }
+    }, p.show);
+    React__default['default'].useLayoutEffect(() => {
+        var _a;
+        if (p.show === true) {
+            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
+            // still need to wait for the next tick so the children are all rendered.
+            setTimeout(() => {
+                var _a;
+                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
+                element === null || element === void 0 ? void 0 : element.focus();
+                log('set focus', focusSelector);
+            });
+        }
+    }, [p.show]);
+    const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
+        zIndex: theme.zIndexes.modal,
+        cursor: 'default',
+        margin: '1rem',
+        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
+        border: p.noBackground ? undefined : theme.controls.border,
+        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
+        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
+        opacity: p.show ? 1 : 0,
+        fontSize: theme.fonts.size,
+        fontFamily: theme.fonts.family,
+        fontWeight: 'normal',
+        '&:focus': {
+            outline: 'none'
+        }
+    });
+    const modalHeaderStyles = css.cx(css.css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colors.header,
+        padding: '1rem',
+        color: theme.colors.headerFont
+    }), p.headerClassName);
+    const modalContainerStyles = css.css([{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            backgroundColor: "transparent",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: p.onClick ? 'pointer' : 'default'
+        }, p.scrollable && {
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            alignItems: 'flex-start'
+        }]);
+    if (p.show) {
+        const backdropContainer = document.getElementById(backdrop.portalId);
+        if (backdropContainer) {
+            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
+                    e.stopPropagation();
+                    if (!mouseDownElement.current) {
+                        if (p.onClick) {
+                            log('backdropContainer onClick');
+                            p.onClick();
+                        }
+                    }
+                    mouseDownElement.current = undefined;
+                }, className: css.cx('modalContainer', modalContainerStyles) },
+                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                        mouseDownElement.current = e.target;
+                        e.stopPropagation();
+                    }, onMouseUp: e => {
+                        mouseDownElement.current = undefined;
+                        /*
+                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
+                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
+                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
+                        */
+                        // e.stopPropagation()
+                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
+                    React__default['default'].createElement(TabLocker, null,
+                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
+                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
+                                    margin: 0,
+                                    flexGrow: 1
+                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
+                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                                    color: theme.colors.headerFont,
+                                    marginLeft: '1rem',
+                                    backgroundColor: 'transparent'
+                                })), variant: "icon", onClick: p.onClick },
+                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
+                        p.children)))), backdropContainer);
+        }
+    }
+    return null;
+};
+
 /** useEffect but ignores the first call on component mount. */
 const useIgnoreMount = (effect, deps) => {
     const mounted = React__default['default'].useRef(false);
@@ -1167,15 +1416,6 @@ const useIgnoreMount = (effect, deps) => {
     }, deps);
 };
 
-const useLogger = (componentName, enabled) => {
-    return (...messages) => {
-        if (enabled) {
-            // tslint:disable-next-line
-            console.log(`[${componentName}]`, ...messages);
-        }
-    };
-};
-
 const portalId = 'backdrop';
 const BackdropContext = React__default['default'].createContext({
     showing: false,
@@ -1222,7 +1462,7 @@ const BackdropContextProvider = (p) => {
             }
         } },
         p.children,
-        p.__debug && (React__default['default'].createElement("p", { className: css.css({
+        p.__debug && (React__default['default'].createElement("p", { className: css.cx(modalScrollFixClassName, css.css({
                 position: 'fixed',
                 top: 0, right: 0,
                 backgroundColor: '#ff00004f',
@@ -1230,7 +1470,7 @@ const BackdropContextProvider = (p) => {
                 padding: '0.5rem',
                 margin: 0,
                 zIndex: 9999
-            }) },
+            })) },
             "Backdrop showCount: ",
             showCount))));
 };
@@ -1445,210 +1685,6 @@ const Checkbox = (props) => {
             props.children)));
 };
 
-/** useEffect but it will only fire when the actual truthiness of the value changes.
- * Use for comparing previous states to next states without all the bullshit around useEffect and component mounting.
-*/
-const useBooleanChanged = (effect, dep) => {
-    /*
-        Why?
-        useEffect with a dependency array will fire once on mount even though the dependency list doesn't change.
-        Components like Modal need to communicate when their show status changes.
-        useIgnoreMount is not enough because it only ignores the first render and is therefore a kludge.
-        This is what we want regardless of mount status:
-        true > false = Change
-        false > true = Change
-        true > true = No Change
-        false > false = No Change
-        undefined > false = No Change
-        undefined > true = Change
-    */
-    const lastValue = React.useRef(undefined);
-    React.useEffect(() => {
-        //console.log('[useBooleanChanged] useEffect called with', dep, 'was', lastValue.current ?? 'undefined')
-        if (!!lastValue.current !== !!dep) {
-            const previous = lastValue.current;
-            lastValue.current = dep;
-            effect(!!lastValue.current, !!previous);
-            //console.log('[useBooleanChanged] change called')
-        }
-    }, [dep]);
-};
-
-// Taken from: https://github.com/react-bootstrap/dom-helpers/blob/master/src/scrollbarSize.ts
-const canUseDom = !!(typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement);
-let size;
-/** Tells you actual width of the scroll bar.  This can vary by browser. */
-const useScrollbarSize = (recalc) => {
-    if ((!size && size !== 0) || recalc) {
-        if (canUseDom) {
-            const scrollDiv = document.createElement('div');
-            scrollDiv.style.position = 'absolute';
-            scrollDiv.style.top = '-9999px';
-            scrollDiv.style.width = '50px';
-            scrollDiv.style.height = '50px';
-            scrollDiv.style.overflow = 'scroll';
-            document.body.appendChild(scrollDiv);
-            size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-            document.body.removeChild(scrollDiv);
-        }
-    }
-    return size;
-};
-
-const Modal = (p) => {
-    var _a, _b, _c, _d;
-    const backdrop = React.useContext(BackdropContext);
-    const mouseDownElement = React.useRef(undefined);
-    const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
-    const contentRef = React__default['default'].useRef(null);
-    const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
-    const showing = React.useRef(p.show);
-    const bodyStyles = React.useRef('');
-    const tryRemoveBodyStyles = () => {
-        if (bodyStyles.current) {
-            log('removing singleton', bodyStyles.current);
-            document.body.classList.remove(bodyStyles.current);
-        }
-    };
-    React.useEffect(() => {
-        log('mounted');
-        return () => {
-            var _a;
-            if (showing.current) {
-                log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
-                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-                log('backdrop.setShow', false);
-                tryRemoveBodyStyles();
-            }
-            else {
-                log(`un-mount in progress but this modal is not showing.  do nothing with the backdrop.`);
-            }
-            log('un-mounted');
-        };
-    }, []);
-    useBooleanChanged((show, previousShow) => {
-        var _a, _b, _c;
-        log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
-        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
-        showing.current = show;
-        log('backdrop.setShow', show);
-        if (!bodyStyles.current) {
-            bodyStyles.current = css.css({
-                label: 'ModalBodyOverrides_' + ((_c = (_b = p.id) === null || _b === void 0 ? void 0 : _b.replace(/\s+/, '')) !== null && _c !== void 0 ? _c : nanoid.nanoid()),
-                overflow: 'hidden',
-                paddingRight: `${useScrollbarSize()}px`
-            });
-            log('creating singleton bodyStyles', bodyStyles.current);
-        }
-        if (show) {
-            log('this modal is showing. adding singleton bodyStyles', bodyStyles.current);
-            document.body.classList.add(bodyStyles.current);
-        }
-        else {
-            log('this modal is hiding. try removing singleton bodyStyles');
-            tryRemoveBodyStyles();
-        }
-    }, p.show);
-    React__default['default'].useLayoutEffect(() => {
-        var _a;
-        if (p.show === true) {
-            const focusSelector = (_a = p.focusSelector) !== null && _a !== void 0 ? _a : '.modalCloseButton';
-            // still need to wait for the next tick so the children are all rendered.
-            setTimeout(() => {
-                var _a;
-                const element = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusSelector);
-                element === null || element === void 0 ? void 0 : element.focus();
-                log('set focus', focusSelector);
-            });
-        }
-    }, [p.show]);
-    const modalBodyStyles = css.css({
-        maxHeight: p.scrollable ? undefined : '99vh',
-        overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
-        cursor: 'default',
-        margin: '1rem',
-        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
-        border: p.noBackground ? undefined : theme.controls.border,
-        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
-        maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
-        minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
-        opacity: p.show ? 1 : 0,
-        fontSize: theme.fonts.size,
-        fontFamily: theme.fonts.family,
-        fontWeight: 'normal',
-        '&:focus': {
-            outline: 'none'
-        }
-    });
-    const modalHeaderStyles = css.cx(css.css({
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: theme.colors.header,
-        padding: '1rem',
-        color: theme.colors.headerFont
-    }), p.headerClassName);
-    const modalContainerStyles = css.css([{
-            position: 'fixed',
-            height: '100%',
-            width: '100%',
-            backgroundColor: "transparent",
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
-        }, p.scrollable && {
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            alignItems: 'flex-start'
-        }]);
-    if (p.show) {
-        const backdropContainer = document.getElementById(backdrop.portalId);
-        if (backdropContainer) {
-            return reactDom.createPortal((React__default['default'].createElement("div", { onClick: e => {
-                    e.stopPropagation();
-                    if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
-                    }
-                    mouseDownElement.current = undefined;
-                }, className: css.cx('modalContainer', modalContainerStyles) },
-                React__default['default'].createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
-                        mouseDownElement.current = e.target;
-                        e.stopPropagation();
-                    }, onMouseUp: e => {
-                        mouseDownElement.current = undefined;
-                        /*
-                            MouseDown and MouseUp stopPropagation was added to fix bugs while clicking within the modal.
-                            At least in the case of MouseUp, this breaks sliders and the handle grab logic appears to live on window.
-                            Turning this off now.  Should not cause any issues for MouseUp unlike MouseDown.
-                        */
-                        // e.stopPropagation()
-                    }, className: css.cx('modalBody', modalBodyStyles, p.className) },
-                    React__default['default'].createElement(TabLocker, null,
-                        hasHeader && (React__default['default'].createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React__default['default'].createElement(Text, { className: css.css({
-                                    margin: 0,
-                                    flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React__default['default'].createElement("span", null),
-                            p.closeButton && p.onClick ? React__default['default'].createElement(Button, { className: css.cx('modalCloseButton', css.css({
-                                    color: theme.colors.headerFont,
-                                    marginLeft: '1rem',
-                                    backgroundColor: 'transparent'
-                                })), variant: "icon", onClick: p.onClick },
-                                React__default['default'].createElement(Icon, { id: "close" })) : React__default['default'].createElement("span", null))),
-                        p.children)))), backdropContainer);
-        }
-    }
-    return null;
-};
-
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
     const modalStyle = css.css `
@@ -1717,14 +1753,19 @@ 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__namespace.forwardRef((props, ref) => {
-    const { inline, children, onSubmit, className, ajax } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax"]);
+    const { inline, children, onSubmit, className, ajax, unstyled } = props, rest = __rest(props, ["inline", "children", "onSubmit", "className", "ajax", "unstyled"]);
     const theme = useThemeSafely();
-    return (React__namespace.createElement("form", Object.assign({}, rest, { ref: ref, className: css.cx('form', css.css({
+    let defaultStyle;
+    if (!props.unstyled) {
+        defaultStyle = css.css({
+            label: 'Form',
             display: 'flex',
             flexDirection: props.inline ? 'row' : 'column',
             alignItems: props.inline ? 'flex-end' : 'normal',
             gap: theme.controls.gap
-        }), props.className), onSubmit: e => {
+        });
+    }
+    return (React__namespace.createElement("form", Object.assign({}, rest, { ref: ref, className: css.cx('form', defaultStyle, props.className), onSubmit: e => {
             if (ajax !== false) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -1734,6 +1775,7 @@ const Form = React__namespace.forwardRef((props, ref) => {
             }
         } }), children));
 });
+/** @deprecated Just style normally using flex, grid, etc. */
 const FormFlexRow = (props) => {
     var _a;
     const theme = useThemeSafely();
@@ -1743,6 +1785,7 @@ const FormFlexRow = (props) => {
             justifyContent: (_a = props.justifyContent) !== null && _a !== void 0 ? _a : 'normal'
         }), props.className) }, props.children));
 };
+/** @deprecated Just style normally using flex, grid, etc. */
 const FormColumnRow = (props) => {
     const theme = useThemeSafely();
     return (React__namespace.createElement("div", { style: props.style, className: css.cx('formColumnRow', css.css({
@@ -2260,6 +2303,7 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
     const theme = useThemeSafely();
     const { rightControl, round, wrapperClassName, showErrorDisplay } = props, nativeProps = __rest(props, ["rightControl", "round", "wrapperClassName", "showErrorDisplay"]);
     const inputStyles = css.css({
+        backgroundColor: theme.colors.bg,
         fontFamily: theme.fonts.family,
         fontSize: theme.fonts.size,
         width: '100%',
@@ -2326,7 +2370,8 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
 		`}
 	`;
     return (React__namespace.createElement("div", { className: css.css({
-            width: '100%'
+            width: '100%',
+            label: 'BaseInput'
         }) },
         React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
             inputElement,
@@ -2840,7 +2885,7 @@ const Label = (props) => {
  * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  */
 const useMediaQuery = (query) => {
-    const [matches, setMatches] = React.useState(false);
+    const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
     React.useEffect(() => {
         const media = window.matchMedia(query);
         if (media.matches !== matches) {
@@ -2976,6 +3021,7 @@ const LinkContent = (props) => {
             }) }, props.rightIcon)));
 };
 
+//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const generateLinkStyles = (props, theme) => {
     var _a, _b, _c, _d, _e;
     const linkStyles = css.css `
@@ -3027,9 +3073,15 @@ const generateLinkStyles = (props, theme) => {
 	`}
 	${props.variant === 'button' && `
 		text-align: center;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
 	`}
 	${props.variant === 'circle' && `
 		text-align: center;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
 		width: ${theme.controls.height};
 		border-radius: 100%;
 		display: flex;
@@ -3103,6 +3155,9 @@ const generateLinkStyles = (props, theme) => {
 	${props.variant === 'label' && `
 		box-shadow: none;
 		border: none;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
 	`}
 	${props.variant === 'text' && `
 		font-weight: normal;
@@ -3119,6 +3174,9 @@ const generateLinkStyles = (props, theme) => {
 		font-size: 1.6rem;
 		padding-left: 0;
 		padding-right: 0;
+		&:hover {
+			background-color: ${theme.controls.hoverBackground};
+		}
 	`}
 	${props.block && `
 		display: block;
@@ -3267,7 +3325,7 @@ const Picker = (props) => {
         !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.css({
                 position: 'absolute',
                 right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
-                height: theme.controls.height,
+                height: '100%',
                 pointerEvents: 'none'
             }) }))));
 };
@@ -3772,14 +3830,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, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
+    const submitButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.cx(css.css({
             color: `${theme.colors.font} !important;`,
             fontSize: '1rem'
-        }), variant: "icon", small: true },
+        }), props.buttonClassName), variant: "icon", small: true },
         React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
     //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, { autoFocus: props.autoFocus, id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
+        React__namespace.createElement(Input, { inputClassName: props.inputClassName, autoFocus: props.autoFocus, 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 = (p) => {
@@ -3815,10 +3873,11 @@ const Slider = (p) => {
     const currentValue = React.useRef(p.value);
     const sliderContainer = React.useRef(null);
     const height = p.showValue ? `calc(${theme.controls.height} + 1.5rem)` : theme.controls.height;
-    return (React__default['default'].createElement("div", { ref: sliderContainer, className: css.css({
+    return (React__default['default'].createElement("div", { ref: sliderContainer, className: css.cx(css.css({
+            label: 'Slider',
             width: '100%',
             height,
-        }) },
+        }), p.className) },
         React__default['default'].createElement(ReactSlider__default['default'], { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value, index) => {
                 p.onChange(value);
             }, onChange: p.onUpdate || p.showValue ? (value, index) => {
@@ -3831,15 +3890,22 @@ const Slider = (p) => {
                         display: 'flex',
                         alignItems: 'center',
                         height: theme.controls.height
-                    })) }, rest),
+                    }), p.trackClassName) }, rest),
                     React__default['default'].createElement("div", { className: css.css({
                             backgroundColor: theme.colors.secondary,
                             height: `calc(${theme.controls.height} / 4)`,
                             borderRadius: theme.controls.roundRadius,
                             width: '100%'
-                        }) }));
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) }));
             }, renderThumb: (props, state) => {
                 const { className } = props, rest = __rest(props, ["className"]);
+                let specificThumbStyles;
+                if (p.handle1ClassName && props.key === 'thumb-0') {
+                    specificThumbStyles = p.handle1ClassName;
+                }
+                else if (p.handle2ClassName && props.key === 'thumb-1') {
+                    specificThumbStyles = p.handle2ClassName;
+                }
                 return (React__default['default'].createElement("div", Object.assign({ className: css.cx(className, css.css({
                         width: theme.controls.height,
                         height: theme.controls.height,
@@ -3860,7 +3926,7 @@ const Slider = (p) => {
                         '&:hover': {
                             filter: theme.controls.hoverBrightness
                         }
-                    })) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    }), specificThumbStyles, p.handleClassName) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {
@@ -4150,6 +4216,7 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
         updateErrorMessage();
     }, [props.value]);
     const styles = css.css({
+        backgroundColor: theme.colors.bg,
         maxWidth: '100%',
         minHeight: theme.controls.height,
         fontFamily: theme.fonts.family,
@@ -4830,6 +4897,7 @@ exports.defaultTheme = defaultTheme;
 exports.enumToEntities = enumToEntities;
 exports.getCurrencyDisplay = getCurrencyDisplay;
 exports.getFileSizeDisplay = getFileSizeDisplay;
+exports.modalScrollFixClassName = modalScrollFixClassName;
 exports.useAccordianState = useAccordianState;
 exports.useBooleanChanged = useBooleanChanged;
 exports.useIgnoreMount = useIgnoreMount;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "8.6.2",
+    "version": "8.8.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",