@utilitywarehouse/hearth-react-native 0.19.1 → 0.21.0

package/build/components/Container/Container.props.d.ts

@@ -1,76 +1,6 @@
 import type { ViewProps } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
-interface ContainerProps extends ViewProps {
-    /**
-     * The padding of the container.
-     */
-    padding?: SpaceValue;
-    /**
-     * The horizontal padding of the container.
-     */
-    paddingHorizontal?: SpaceValue;
-    /**
-     * The vertical padding of the container.
-     */
-    paddingVertical?: SpaceValue;
-    /**
-     * The top padding of the container.
-     */
-    paddingTop?: SpaceValue;
-    /**
-     * The bottom padding of the container.
-     */
-    paddingBottom?: SpaceValue;
-    /**
-     * The left padding of the container.
-     */
-    paddingLeft?: SpaceValue;
-    /**
-     * The right padding of the container.
-     */
-    paddingRight?: SpaceValue;
-    /**
-     * The margin of the container.
-     */
-    margin?: SpaceValue;
-    /**
-     * The horizontal margin of the container.
-     */
-    marginHorizontal?: SpaceValue;
-    /**
-     * The vertical margin of the container.
-     */
-    marginVertical?: SpaceValue;
-    /**
-     * The top margin of the container.
-     */
-    marginTop?: SpaceValue;
-    /**
-     * The bottom margin of the container.
-     */
-    marginBottom?: SpaceValue;
-    /**
-     * The left margin of the container.
-     */
-    marginLeft?: SpaceValue;
-    /**
-     * The right margin of the container.
-     */
-    marginRight?: SpaceValue;
-    p?: SpaceValue;
-    px?: SpaceValue;
-    py?: SpaceValue;
-    pt?: SpaceValue;
-    pb?: SpaceValue;
-    pl?: SpaceValue;
-    pr?: SpaceValue;
-    m?: SpaceValue;
-    mx?: SpaceValue;
-    my?: SpaceValue;
-    mt?: SpaceValue;
-    mb?: SpaceValue;
-    ml?: SpaceValue;
-    mr?: SpaceValue;
+import type { BackgroundColorProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
+interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps {
     /**
      * The spacing between child elements (gap).
      */
@@ -80,11 +10,5 @@ interface ContainerProps extends ViewProps {
      * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
      */
     space?: SpacingValues;
-    /**
-     * The space between child elements.
-     */
-    gap?: SpaceValue;
-    backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
-    bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
 }
 export default ContainerProps;

package/build/components/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputProps } from './DateInput.props';
 declare const DateInput: {
-    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import DateInputSegment from './DateInputSegment';
-const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
-    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, dayRef, monthRef, yearRef, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, inputLabelStyle, inputContainerStyle, inputStyle, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, inputRef: dayRef, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, inputRef: monthRef, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, inputRef: yearRef, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year", inputContainerStyle: inputContainerStyle, inputStyle: inputStyle, inputLabelStyle: inputLabelStyle }))] }) }));
 };
 DateInput.displayName = 'DateInput';
 const styles = StyleSheet.create(theme => ({

package/build/components/DateInput/DateInput.props.d.ts

@@ -1,4 +1,5 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
 import LabelProps from '../Label/Label.props';
 export interface DateInputProps extends FormFieldBaseProps {
@@ -41,6 +42,18 @@ export interface DateInputProps extends FormFieldBaseProps {
      * The controlled value for the year segment. Must be used with an `onYearChange` handler.
      */
     yearValue?: string;
+    /**
+     * Ref for the day segment input.
+     */
+    dayRef?: Ref<TextInput>;
+    /**
+     * Ref for the month segment input.
+     */
+    monthRef?: Ref<TextInput>;
+    /**
+     * Ref for the year segment input.
+     */
+    yearRef?: Ref<TextInput>;
     /**
      * Callback fired when the day value changes.
      */
@@ -85,6 +98,7 @@ export interface DateInputSegmentProps {
     label: string;
     placeholder?: string;
     value?: string;
+    inputRef?: Ref<TextInput>;
     onChange?: (text: string) => void;
     onFocus?: DateInputProps['onDayFocus'];
     onBlur?: DateInputProps['onDayBlur'];

package/build/components/DateInput/DateInputSegment.d.ts

@@ -1,6 +1,6 @@
 import type { DateInputSegmentProps } from './DateInput.props';
 declare const DateInputSegment: {
-    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -3,9 +3,9 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
+const DateInputSegment = ({ label, placeholder, value, inputRef, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, inputContainerStyle, inputStyle, inputLabelStyle, }) => {
     styles.useVariants({ disabled });
-    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
+    return (_jsxs(View, { style: [styles.container, inputContainerStyle], children: [_jsx(BodyText, { size: "md", style: [styles.label, inputLabelStyle], children: label }), _jsx(Input, { ref: inputRef, value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: inputStyle })] }));
 };
 DateInputSegment.displayName = 'DateInputSegment';
 const styles = StyleSheet.create(theme => ({

package/build/components/DetailText/DetailText.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const DetailText = ({ children, color, size = 'md', truncated, underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
-    const { color: themeColor, colorMode } = useTheme();
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
@@ -13,29 +12,23 @@ const DetailText = ({ children, color, size = 'md', truncated, underline, strike
         italic,
         inverted,
     });
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue && { color: colorValue }),
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
                 ...(textAlignVertical && { textAlignVertical }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -111,5 +104,13 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? { color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color) }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default DetailText;

package/build/components/DetailText/DetailText.props.d.ts

@@ -1,19 +1,6 @@
-import type { TextProps as RNTextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface TextProps extends RNTextProps {
+import type { CommonTextProps } from '../../types';
+interface DetailTextProps extends CommonTextProps {
+    /** Text size variant. */
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    italic?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
 }
-export default TextProps;
+export default DetailTextProps;

package/build/components/Flex/Flex.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
 const Flex = ({ style, children, direction = 'column', align = 'flex-start', justify = 'flex-start', wrap = 'nowrap', spacing = 'md', space, ...rest }) => {
     const propStyle = {
         flexDirection: direction,
@@ -8,8 +9,9 @@ const Flex = ({ style, children, direction = 'column', align = 'flex-start', jus
         justifyContent: justify,
         flexWrap: wrap,
     };
+    const { computedStyles, remainingProps } = useStyleProps(rest);
     styles.useVariants({ spacing: space ?? spacing });
-    return (_jsx(View, { style: [propStyle, styles.flex, style], ...rest, children: children }));
+    return (_jsx(View, { style: [propStyle, styles.flex, computedStyles, style], ...remainingProps, children: children }));
 };
 Flex.displayName = 'Flex';
 const styles = StyleSheet.create(theme => ({

package/build/components/Flex/Flex.props.d.ts

@@ -1,6 +1,6 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { SpacingValues } from '../../types';
-interface FlexProps extends ViewProps {
+import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
+interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];

package/build/components/Heading/Heading.js

@@ -1,40 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThrough, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
+    // Extract margin utility props from remaining props
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         underline,
         strikeThrough,
         inverted,
     });
-    const { color: themeColor, colorMode } = useTheme();
-    const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]);
-    const decorationColor = useMemo(() => getFlattenedColorValue(textDecorationColor, themeColor), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]);
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
+            utilityStyles,
             {
-                ...(colorValue ? { color: colorValue } : {}),
                 ...(textTransform ? { textTransform } : {}),
                 ...(textAlign ? { textAlign } : {}),
                 ...(textAlignVertical ? { textAlignVertical } : {}),
-                ...(decorationColor && { textDecorationColor: decorationColor }),
                 ...(textDecorationLine && { textDecorationLine }),
                 ...(textDecorationStyle && { textDecorationStyle }),
                 ...(userSelect && { userSelect }),
             },
+            styles.getColours(color, textDecorationColor),
             props.style,
         ], children: children }));
 };
@@ -115,6 +109,23 @@ const styles = StyleSheet.create(theme => ({
                         lg: theme.typography.desktop.heading.xl.lineHeight,
                     },
                 },
+                '2xl': {
+                    fontSize: {
+                        base: theme.typography.mobile.heading['2xl'].fontSize,
+                        md: theme.typography.tablet.heading['2xl'].fontSize,
+                        lg: theme.typography.desktop.heading['2xl'].fontSize,
+                    },
+                    fontWeight: {
+                        base: theme.typography.mobile.heading['2xl'].fontWeight,
+                        md: theme.typography.tablet.heading['2xl'].fontWeight,
+                        lg: theme.typography.desktop.heading['2xl'].fontWeight,
+                    },
+                    lineHeight: {
+                        base: theme.typography.mobile.heading['2xl'].lineHeight,
+                        md: theme.typography.tablet.heading['2xl'].lineHeight,
+                        lg: theme.typography.desktop.heading['2xl'].lineHeight,
+                    },
+                },
             },
             underline: {
                 true: {
@@ -133,5 +144,15 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    getColours: (color, textDecorationColor) => ({
+        ...(color
+            ? {
+                color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color),
+            }
+            : {}),
+        ...(textDecorationColor
+            ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+            : {}),
+    }),
 }));
 export default Heading;

package/build/components/Heading/Heading.props.d.ts

@@ -1,20 +1,6 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface HeadingProps extends TextProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
-    ref?: Ref<Text>;
+import type { CommonTextProps } from '../../types';
+interface HeadingProps extends CommonTextProps {
+    /** Heading size variant. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 export default HeadingProps;

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -6,13 +6,12 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { BottomSheetFlatList, BottomSheetModal, BottomSheetScrollView, BottomSheetView, } from '../BottomSheet';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -67,13 +66,13 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
     }, []);
     const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [!!label && (_jsx(View, { children: _jsxs(Label, { variant: labelVariant, children: [label, !isRequired && _jsx(Label, { variant: labelVariant, children: " (Optional)" })] }) })), _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
-                    styles.selectContainer,
-                    styles.pressedContainer(pressed || isOpen),
-                ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
-                            const IconAny = Icon;
-                            return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
-                        })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+                        styles.selectContainer,
+                        styles.pressedContainer(pressed || isOpen),
+                    ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
+                                const IconAny = Icon;
+                                return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
+                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,

package/build/components/Select/Select.props.d.ts

@@ -50,6 +50,22 @@ interface SelectProps extends ViewProps {
      * @default 'body'.
      */
     labelVariant?: 'heading' | 'body';
+    /**
+     * Helper text to show below the select
+     */
+    helperText?: string;
+    /**
+     * Optional icon to display alongside the helper text
+     */
+    helperIcon?: React.ComponentType;
+    /**
+     *  Text to display when validationStatus is 'invalid'
+     */
+    invalidText?: string;
+    /**
+     * Text to display when validationStatus is 'valid'
+     */
+    validText?: string;
     /**
      * Placeholder text to show when no value is selected
      */