@wavv/ui 2.7.3 → 2.8.0

package/build/components/ComboBox.d.ts

@@ -14,7 +14,7 @@ type Props = {
     formatCreateOption?: (inputText: string) => ReactNode;
     ref?: React.Ref<HTMLInputElement>;
 } & ComboBoxInputProps & OpenStateProps & ComboBoxProps;
-declare const _default: (({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, small, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled"> & {
         selectionMode?: import("react-aria-components").SelectionMode;
     }) => import("react/jsx-runtime").JSX.Element;

package/build/components/ComboBox.js

@@ -19,7 +19,7 @@ import ListRootStyles, { preventProps } from "./ListHelpers/ListRootStyles.js";
 import ListSection from "./ListHelpers/ListSection.js";
 import MotionPopover from "./MotionPopover.js";
 import Spinner from "./Spinner.js";
-const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props })=>{
+const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, small, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -62,6 +62,7 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
     };
     const hasValue = !!(currentValue || defaultValue || inputText);
     const hidePlaceholder = !!(!hasValue && label);
+    const iconSize = small ? 'small' : void 0;
     const showCreateOption = inputText.length > 0 && onCreate && !flatOptions.some((option)=>option.value === inputText || option.id === inputText);
     const handleCreateOption = ()=>{
         if (!onCreate) return;
@@ -111,10 +112,12 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
                 isInvalid: invalid,
                 iconLeft: !!iconLeft,
                 height: height,
+                small: small,
                 ...marginProps,
                 children: [
                     iconLeft && getIcon(iconLeft, {
-                        marginRight: 8
+                        marginRight: 8,
+                        size: iconSize
                     }),
                     leftElement,
                     /*#__PURE__*/ jsxs(Label, {
@@ -142,7 +145,8 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
                         disabled: disabled,
                         readOnly: readOnly,
                         children: /*#__PURE__*/ jsx(Icon, {
-                            name: isOpen ? 'caret-up' : 'caret-down'
+                            name: isOpen ? 'caret-up' : 'caret-down',
+                            size: iconSize
                         })
                     }),
                     /*#__PURE__*/ jsx(InputMessage, {

package/build/components/FilterableSelect.d.ts

@@ -22,5 +22,5 @@ type Props = {
     emptyFallback?: ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 } & BaseProps & OpenStateProps & SelectProps;
-declare const FilterableSelect: ({ backgroundColor, menuBackground, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, searchPlaceholder, itemHeight, sectionHeaderHeight, itemGap, emptyFallback, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FilterableSelect: ({ backgroundColor, menuBackground, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, small, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, searchPlaceholder, itemHeight, sectionHeaderHeight, itemGap, emptyFallback, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default FilterableSelect;

package/build/components/FilterableSelect.js

@@ -25,7 +25,7 @@ const getItemTextValue = (item)=>[
         item.body,
         item.searchText
     ].filter(Boolean).join(' ');
-const FilterableSelect = ({ backgroundColor, menuBackground, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight = DEFAULT_MAX_HEIGHT, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, searchPlaceholder = 'Search', itemHeight = DEFAULT_ITEM_HEIGHT, sectionHeaderHeight = DEFAULT_SECTION_HEIGHT, itemGap = DEFAULT_ITEM_GAP, emptyFallback, ref, ...props })=>{
+const FilterableSelect = ({ backgroundColor, menuBackground, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight = DEFAULT_MAX_HEIGHT, small, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, searchPlaceholder = 'Search', itemHeight = DEFAULT_ITEM_HEIGHT, sectionHeaderHeight = DEFAULT_SECTION_HEIGHT, itemGap = DEFAULT_ITEM_GAP, emptyFallback, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -62,9 +62,11 @@ const FilterableSelect = ({ backgroundColor, menuBackground, fontSize, fontWeigh
     };
     const hasValue = !!(currentValue || defaultValue);
     const hidePlaceholder = !hasValue && label;
+    const iconSize = small ? 'small' : void 0;
     const caret = hideCaret ? null : /*#__PURE__*/ jsx(Icon, {
         name: isOpen ? 'caret-up' : 'caret-down',
-        color: color
+        color: color,
+        size: iconSize
     });
     const layoutOptions = useMemo(()=>({
             rowHeight: itemHeight,
@@ -126,6 +128,7 @@ const FilterableSelect = ({ backgroundColor, menuBackground, fontSize, fontWeigh
                 isInvalid: invalid,
                 borderRadius: borderRadius,
                 height: height,
+                small: small,
                 pointer: true,
                 ref: ref,
                 iconLeft: !!iconLeft,
@@ -133,7 +136,8 @@ const FilterableSelect = ({ backgroundColor, menuBackground, fontSize, fontWeigh
                 ...marginProps,
                 children: [
                     iconLeft && getIcon(iconLeft, {
-                        marginRight: 8
+                        marginRight: 8,
+                        size: iconSize
                     }),
                     leftElement,
                     /*#__PURE__*/ jsx(Label, {

package/build/components/Inputs/DatePicker.d.ts

@@ -10,5 +10,5 @@ type Props = {
     className?: PickerProps['className'];
     style?: PickerProps['style'];
 } & DateInputProps & PickerProps;
-declare const DatePicker: ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const DatePicker: ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, small, onChange, afterShow, afterHide, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/build/components/Inputs/DatePicker.js

@@ -15,8 +15,9 @@ import InputMessage from "./helpers/InputMessage.js";
 import InputStyles, { preventProps } from "./helpers/InputStyles.js";
 import Label from "./helpers/Label.js";
 import PickerToggle from "./helpers/PickerToggle.js";
-const DatePicker_DatePicker = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props })=>{
+const DatePicker_DatePicker = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, small, onChange, afterShow, afterHide, ref, ...props })=>{
     const [selectedDate, setSelectedDate] = useState(value ? getObjFromDate(value) : void 0);
+    const iconSize = small ? 'small' : void 0;
     const containerRef = useRef(null);
     const { min, max } = useMinMax({
         past: preventPast,
@@ -55,10 +56,12 @@ const DatePicker_DatePicker = ({ value, label, iconLeft, iconRight, loading, fon
         onChange: handleDateChange,
         onOpenChange: handleOpenChange,
         ref: containerRef,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -84,7 +87,9 @@ const DatePicker_DatePicker = ({ value, label, iconLeft, iconRight, loading, fon
                     name: "calendar"
                 })
             }),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/DateRangePicker.d.ts

@@ -11,5 +11,5 @@ type Props = {
     className?: PickerProps['className'];
     style?: PickerProps['style'];
 } & DateInputProps & PickerProps;
-declare const DateRangePicker: ({ startValue, endValue, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const DateRangePicker: ({ startValue, endValue, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, small, onChange, afterShow, afterHide, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

package/build/components/Inputs/DateRangePicker.js

@@ -15,9 +15,10 @@ import InputMessage from "./helpers/InputMessage.js";
 import InputStyles, { preventProps } from "./helpers/InputStyles.js";
 import Label from "./helpers/Label.js";
 import PickerToggle from "./helpers/PickerToggle.js";
-const DateRangePicker_DateRangePicker = ({ startValue, endValue, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props })=>{
+const DateRangePicker_DateRangePicker = ({ startValue, endValue, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, small, onChange, afterShow, afterHide, ref, ...props })=>{
     const [selectedStart, setSelectedStart] = useState(startValue ? getObjFromDate(startValue) : void 0);
     const [selectedEnd, setSelectedEnd] = useState(endValue ? getObjFromDate(endValue) : void 0);
+    const iconSize = small ? 'small' : void 0;
     const containerRef = useRef(null);
     const { min, max } = useMinMax({
         past: preventPast,
@@ -72,10 +73,12 @@ const DateRangePicker_DateRangePicker = ({ startValue, endValue, label, iconLeft
         onChange: handleDateChange,
         onOpenChange: handleOpenChange,
         ref: containerRef,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -122,7 +125,9 @@ const DateRangePicker_DateRangePicker = ({ startValue, endValue, label, iconLeft
                     name: "calendar"
                 })
             }),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/InlineInput.d.ts

@@ -1,5 +1,5 @@
 import { type TextFieldProps } from 'react-aria-components';
 import type { InputProps, TextInputProps } from '../typeDefs/inputTypes';
 type Props = TextInputProps & Omit<InputProps, 'textOnly'> & Omit<TextFieldProps, 'isDisabled' | 'isReadOnly' | 'isInvalid' | 'isRequired'>;
-declare const InlineInput: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const InlineInput: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, small, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default InlineInput;

package/build/components/Inputs/InlineInput.js

@@ -10,13 +10,14 @@ import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import useDynamicWidth from "./helpers/useDynamicWidth.js";
-const InlineInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props })=>{
+const InlineInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, small, onChange, onInput, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     const [inputWidth, HiddenWidthEl] = useDynamicWidth({
         value: inputValue,
         placeholder,
         fontSize
     });
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
     }, [
@@ -42,10 +43,12 @@ const InlineInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
         onInput: onInput ? handleInput : void 0,
         onPaste: (event)=>handlePaste(event, handleChange, accepts),
         textOnly: true,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Input, {
                 ref: ref,
@@ -57,7 +60,9 @@ const InlineInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
                 width: inputWidth
             }),
             /*#__PURE__*/ jsx(HiddenWidthEl, {}),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/NumberInput.d.ts

@@ -6,5 +6,5 @@ type Props = {
     /** Display a comma separator for large numbers (default true) */
     separator?: boolean;
 } & InputProps & NumberFieldProps;
-declare const NumberInput: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, hideControls, separator, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, hideControls, separator, small, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/build/components/Inputs/NumberInput.js

@@ -10,8 +10,9 @@ import Input from "./helpers/Input.js";
 import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import Label from "./helpers/Label.js";
-const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, hideControls, separator = true, onChange, ref, ...props })=>{
+const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, hideControls, separator = true, small, onChange, ref, ...props })=>{
     const [inputValue, setInputValue] = useState(NaN);
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
     }, [
@@ -34,10 +35,12 @@ const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
         formatOptions: {
             useGrouping: separator
         },
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -53,7 +56,9 @@ const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
                     isDisabled: disabled
                 })
             }),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             !hideControls && /*#__PURE__*/ jsxs(ArrowContainer, {
                 children: [
@@ -61,7 +66,7 @@ const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
                         slot: "increment",
                         isDisabled: disabled || readOnly,
                         children: /*#__PURE__*/ jsx(Icon, {
-                            size: label ? 23.5 : 19.5,
+                            size: small ? 'small' : label ? 23.5 : 19.5,
                             name: "caret-up"
                         })
                     }),
@@ -70,7 +75,7 @@ const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading,
                         slot: "decrement",
                         isDisabled: disabled || readOnly,
                         children: /*#__PURE__*/ jsx(Icon, {
-                            size: label ? 23.5 : 19.5,
+                            size: small ? 'small' : label ? 23.5 : 19.5,
                             name: "caret-down"
                         })
                     })

package/build/components/Inputs/PhoneInput.d.ts

@@ -3,5 +3,5 @@ import type { TextFieldProps } from '../typeDefs/reactAriaTypes';
 type Props = {
     onChange?: (formatted: string, raw: string) => void;
 } & InputProps & Omit<TextFieldProps, 'onChange'>;
-declare const PhoneInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const PhoneInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, small, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default PhoneInput;

package/build/components/Inputs/PhoneInput.js

@@ -10,9 +10,10 @@ import Input from "./helpers/Input.js";
 import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import Label from "./helpers/Label.js";
-const PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
+const PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, small, onChange, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     const internalRef = useRef(null);
+    const iconSize = small ? 'small' : void 0;
     useImperativeHandle(ref, ()=>internalRef.current);
     useEffect(()=>{
         if (null != value && inputValue !== value) {
@@ -62,10 +63,12 @@ const PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElemen
         onChange: handleChange,
         onPaste: handlePaste,
         type: "tel",
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             leftElement,
             /*#__PURE__*/ jsx(Label, {
@@ -83,7 +86,9 @@ const PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElemen
                 })
             }),
             rightElement,
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps, TextInputProps } from '../typeDefs/inputTypes';
 import type { SearchFieldProps } from '../typeDefs/reactAriaTypes';
 type Props = TextInputProps & InputProps & SearchFieldProps;
-declare const SearchInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, small, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/build/components/Inputs/SearchInput.js

@@ -13,9 +13,10 @@ import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import Label from "./helpers/Label.js";
-const SearchInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props })=>{
+const SearchInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, small, onChange, onInput, ref, ...props })=>{
     const { color } = useTheme();
     const [inputValue, setInputValue] = useState('');
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
     }, [
@@ -40,15 +41,18 @@ const SearchInput = ({ value, label, placeholder, iconLeft, iconRight, leftEleme
         onChange: handleChange,
         onInput: onInput ? handleInput : void 0,
         onPaste: (event)=>handlePaste(event, handleChange, accepts),
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             leftElement,
             /*#__PURE__*/ jsx(Icon, {
                 name: "search",
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -65,12 +69,15 @@ const SearchInput = ({ value, label, placeholder, iconLeft, iconRight, leftEleme
                 })
             }),
             rightElement,
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             !!inputValue && !loading && /*#__PURE__*/ jsx(AriaButton, {
                 children: /*#__PURE__*/ jsx(Icon, {
                     name: "close-circle",
-                    color: color.brand
+                    color: color.brand,
+                    size: iconSize
                 })
             }),
             /*#__PURE__*/ jsx(InputMessage, {

package/build/components/Inputs/TextArea.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps, TextAreaProps } from '../typeDefs/inputTypes';
 import type { TextFieldProps } from '../typeDefs/reactAriaTypes';
 type Props = TextAreaProps & InputProps & TextFieldProps;
-declare const TextArea: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const TextArea: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, small, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/build/components/Inputs/TextArea.js

@@ -10,9 +10,10 @@ import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import Label from "./helpers/Label.js";
 import TextArea from "./helpers/TextArea.js";
-const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
+const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, small, height, maxHeight, onChange, onInput, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     const textAreaRef = useRef(null);
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
     }, [
@@ -66,10 +67,12 @@ const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loa
         asTrigger: asTrigger,
         height: height,
         maxHeight: maxHeight,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -86,7 +89,9 @@ const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loa
                     tabIndex: asTrigger ? -1 : void 0
                 })
             }),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps, TextInputProps } from '../typeDefs/inputTypes';
 import type { TextFieldProps } from '../typeDefs/reactAriaTypes';
 type Props = TextFieldProps & TextInputProps & InputProps;
-declare const TextInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, small, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

package/build/components/Inputs/TextInput.js

@@ -10,8 +10,9 @@ import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import Label from "./helpers/Label.js";
-const TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, onChange, onInput, ref, ...props })=>{
+const TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, small, onChange, onInput, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (null != value && inputValue !== value) setInputValue(value);
     }, [
@@ -37,10 +38,12 @@ const TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement
         onInput: onInput ? handleInput : void 0,
         onPaste: (event)=>handlePaste(event, handleChange, accepts),
         asTrigger: asTrigger,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             leftElement,
             /*#__PURE__*/ jsx(Label, {
@@ -59,7 +62,9 @@ const TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement
                 })
             }),
             rightElement,
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/TimeInput.d.ts

@@ -4,5 +4,5 @@ type Props = {
     value?: string;
     onChange: (time: string) => void;
 } & InputProps & TimeFieldProps;
-declare const TimeInput: ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const TimeInput: ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, small, onChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TimeInput;

package/build/components/Inputs/TimeInput.js

@@ -10,8 +10,9 @@ import InputContainerStyles from "./helpers/InputContainerStyles.js";
 import InputMessage from "./helpers/InputMessage.js";
 import InputStyles, { preventProps } from "./helpers/InputStyles.js";
 import Label from "./helpers/Label.js";
-const TimeInput = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
+const TimeInput = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, small, onChange, ref, ...props })=>{
     const [selectedTime, setSelectedTime] = useState(value ? parseTime(value) : null);
+    const iconSize = small ? 'small' : void 0;
     useEffect(()=>{
         if (value) {
             const selectedString = `${selectedTime?.hour}:${selectedTime?.minute}`;
@@ -36,10 +37,12 @@ const TimeInput = ({ value, label, iconLeft, iconRight, loading, fontSize, place
         isInvalid: invalid,
         isRequired: required,
         onChange: handleTimeChange,
+        small: small,
         ...props,
         children: [
             iconLeft && getIcon(iconLeft, {
-                marginRight: 8
+                marginRight: 8,
+                size: iconSize
             }),
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -58,7 +61,9 @@ const TimeInput = ({ value, label, iconLeft, iconRight, loading, fontSize, place
                         })
                 })
             }),
-            iconRight && getIcon(iconRight),
+            iconRight && getIcon(iconRight, {
+                size: iconSize
+            }),
             loading && /*#__PURE__*/ jsx(Spinner, {}),
             /*#__PURE__*/ jsx(InputMessage, {
                 description: description,

package/build/components/Inputs/helpers/InputContainerStyles.d.ts

@@ -10,5 +10,5 @@ type StateProps = {
 };
 export type ContainerProps = InputContainerStyleProps & StateProps & ThemeProp;
 type Props = ContainerProps & Required<ThemeProp>;
-declare const styles: (({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, isDisabled, isInvalid, isReadOnly, hasLabel, pointer, }: Props) => CSSObject)[];
+declare const styles: (({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, isDisabled, isInvalid, isReadOnly, hasLabel, pointer, small, }: Props) => CSSObject)[];
 export default styles;

package/build/components/Inputs/helpers/InputContainerStyles.js

@@ -1,12 +1,12 @@
 import { marginProps, paddingProps, widthHeightProps } from "../../helpers/styledProps.js";
-const baseStyles = ({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, isDisabled, isInvalid, isReadOnly, hasLabel, pointer })=>({
+const baseStyles = ({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, isDisabled, isInvalid, isReadOnly, hasLabel, pointer, small })=>({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         position: 'relative',
         width: '100%',
-        minHeight: hasLabel ? 48 : 40,
-        height: hasLabel ? 48 : 40,
+        minHeight: small ? 32 : hasLabel ? 48 : 40,
+        height: small ? 32 : hasLabel ? 48 : 40,
         padding: '5px 16px',
         boxSizing: 'border-box',
         color: isDisabled ? input.labelColor.disabled : input.labelColor.default,

package/build/components/Select.d.ts

@@ -4,7 +4,7 @@ import type { OpenStateProps, SelectInputProps } from './typeDefs/selectionTypes
 type Props = {
     ref?: React.Ref<HTMLButtonElement>;
 } & SelectInputProps & OpenStateProps & SelectProps;
-declare const _default: (({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, separators, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, small, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, separators, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled"> & {
         selectionMode?: SelectionMode;
     }) => import("react/jsx-runtime").JSX.Element;

package/build/components/Select.js

@@ -15,7 +15,7 @@ import ListRootStyles, { preventProps } from "./ListHelpers/ListRootStyles.js";
 import ListSection from "./ListHelpers/ListSection.js";
 import MotionPopover from "./MotionPopover.js";
 import Spinner from "./Spinner.js";
-const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, separators, ref, ...props })=>{
+const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, small, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, separators, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -74,9 +74,11 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
     };
     const hasValue = isMultiple ? (Array.isArray(currentValue) ? currentValue.length > 0 : false) || (Array.isArray(defaultValue) ? defaultValue.length > 0 : false) : !!(currentValue || defaultValue);
     const hidePlaceholder = !hasValue && label;
+    const iconSize = small ? 'small' : void 0;
     const caret = hideCaret ? null : /*#__PURE__*/ jsx(Icon, {
         name: isOpen ? 'caret-up' : 'caret-down',
-        color: color
+        color: color,
+        size: iconSize
     });
     return /*#__PURE__*/ jsxs(SelectRoot, {
         placeholder: placeholder,
@@ -102,6 +104,7 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
                 isInvalid: invalid,
                 borderRadius: borderRadius,
                 height: height,
+                small: small,
                 pointer: true,
                 ref: ref,
                 iconLeft: !!iconLeft,
@@ -109,7 +112,8 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
                 ...marginProps,
                 children: [
                     iconLeft && getIcon(iconLeft, {
-                        marginRight: 8
+                        marginRight: 8,
+                        size: iconSize
                     }),
                     leftElement,
                     /*#__PURE__*/ jsx(Label, {

package/build/components/typeDefs/inputTypes.d.ts

@@ -11,6 +11,8 @@ export type InputContainerStyleProps = {
     borderColor?: string;
     /** Removes the background and padding from the input */
     textOnly?: boolean;
+    /** Renders the input at 32px tall */
+    small?: boolean;
 } & Width & Height & MinHeight & MarginPadding;
 export type InputElementStyleProps = {
     /** Sets the input fontSize */

package/build/components/types.d.ts

@@ -125,6 +125,8 @@ export type InputContainerStyleProps = {
     borderColor?: string;
     /** Removes the background and padding from the input */
     textOnly?: boolean;
+    /** Renders the input at 32px tall */
+    small?: boolean;
 } & Width & Height & MinHeight & MarginPadding;
 export type InputElementStyleProps = {
     /** Sets the input fontSize */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.7.3",
+	"version": "2.8.0",
 	"type": "module",
 	"exports": {
 		".": {