@mackin.com/styleguide 8.7.1 → 8.9.1

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;
@@ -658,7 +662,7 @@ declare type PickerOption<T> = T | {
     id: T;
     name?: string;
 };
-interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options'> {
+interface SelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'options' | 'string'> {
 }
 interface PickerProps<T extends PickerValue> extends SelectProps {
     value: T;
@@ -668,6 +672,12 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     round?: boolean;
     /** If true, bottom padding will be added to account for other inputs having space for error messages. */
     controlAlign?: boolean;
+    /** This will be applied to the select element. */
+    className?: string;
+    /** Applies to the outer wrapper which contains the select and other elements. */
+    wrapperClassName?: string;
+    /** Applies to the custom down arrow. */
+    iconClassName?: string;
 }
 declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
 
@@ -711,7 +721,6 @@ interface SearchBoxProps {
     id?: string;
     placeholder?: string;
     round?: boolean;
-    onSubmit?: () => Promise<void>;
     /** Defaults to 250ms */
     debounceMs?: number;
     autoFocus?: boolean;
@@ -719,6 +728,10 @@ interface SearchBoxProps {
     className?: string;
     buttonClassName?: string;
     inputClassName?: string;
+    /** This will be ignored if 'noForm' is true. */
+    onSubmit?: () => Promise<void>;
+    /** If true, the controls will not be wrapped in a Form component.  In addition, 'onSubmit' will be ignored. */
+    noForm?: boolean;
 }
 declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
 
@@ -733,7 +746,9 @@ interface MackinTheme {
         primary2: string;
         primary2Font: string;
         secondary: string;
+        /** @deprecated Bad name.  Use 'secondaryFont'. */
         secondary2Font: string;
+        secondaryFont: string;
         info: string;
         infoFont: string;
         warning: string;
@@ -786,7 +801,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;
@@ -864,6 +882,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;
 

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: '',
@@ -311,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"]);
@@ -375,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};
@@ -387,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;
@@ -503,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));
     }
@@ -1745,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();
@@ -1762,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();
@@ -1771,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({
@@ -2288,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%',
@@ -2354,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,
@@ -3004,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 `
@@ -3055,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;
@@ -3131,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;
@@ -3147,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;
@@ -3284,20 +3314,21 @@ const Picker = (props) => {
         }
         return React__namespace.createElement("option", { key: val, value: val }, label);
     })));
-    return (React__namespace.createElement("span", { className: css.css({
+    return (React__namespace.createElement("span", { className: css.cx(css.css({
             label: 'PickerWrapper',
             position: 'relative',
             display: 'inline-block',
             width: '100%',
             paddingBottom: props.controlAlign ? theme.controls.inputErrorMinHeight : undefined
-        }) },
+        }), props.wrapperClassName) },
         select,
-        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.css({
+        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.cx(css.css({
                 position: 'absolute',
                 right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
-                height: theme.controls.height,
-                pointerEvents: 'none'
-            }) }))));
+                height: '100%',
+                pointerEvents: 'none',
+                color: theme.colors.font
+            }), props.iconClassName) }))));
 };
 
 const Pager = (props) => {
@@ -3806,8 +3837,12 @@ const SearchBox = (props) => {
         }), 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, { 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 input = (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 wrapperClassName = css.cx('searchBox', props.className);
+    if (!props.noForm) {
+        return (React__namespace.createElement(Form, { role: "search", className: wrapperClassName, onSubmit: onSubmit }, input));
+    }
+    return (React__namespace.createElement("div", { className: wrapperClassName }, input));
 };
 
 const GlobalStyles = (p) => {
@@ -3843,10 +3878,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) => {
@@ -3859,15 +3895,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,
@@ -3888,7 +3931,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) => {
@@ -4178,6 +4221,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,

package/package.json

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