@utilitywarehouse/hearth-react-native 0.27.2-testid-fix-3 → 0.27.2

package/.turbo/turbo-build.log

@@ -1,5 +1,4 @@
-
-
-> @utilitywarehouse/hearth-react-native@0.27.2-testid-fix-3 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
-> tsc
-
+
+> @utilitywarehouse/hearth-react-native@0.27.2 build /home/runner/work/hearth/hearth/packages/react-native
+> tsc
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,69 @@
+
+> @utilitywarehouse/hearth-react-native@0.27.2 lint /home/runner/work/hearth/hearth/packages/react-native
+> TIMING=1 eslint .
+
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
+  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
+  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
+  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
+  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
+  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
+  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
+  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
+  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
+  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
+   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
+  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
+  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
+   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
+   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
+  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
+  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
+   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+✖ 24 problems (0 errors, 24 warnings)
+
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1502.050 |    59.5%
+react-hooks/exhaustive-deps               |   121.560 |     4.8%
+react-hooks/rules-of-hooks                |   110.933 |     4.4%
+no-global-assign                          |    82.813 |     3.3%
+@typescript-eslint/ban-ts-comment         |    53.232 |     2.1%
+@typescript-eslint/triple-slash-reference |    44.665 |     1.8%
+no-unexpected-multiline                   |    38.719 |     1.5%
+no-misleading-character-class             |    38.467 |     1.5%
+no-loss-of-precision                      |    30.881 |     1.2%
+no-useless-backreference                  |    26.745 |     1.1%

package/build/components/Button/ButtonRoot.js

@@ -108,14 +108,6 @@ const styles = StyleSheet.create(theme => ({
                     paddingHorizontal: 0,
                 },
             },
-            {
-                size: 'md',
-                paddingNone: true,
-                variant: 'ghost',
-                styles: {
-                    paddingHorizontal: 0,
-                },
-            },
             // Variant Color Schemes
             // Emphasis
             // Emphasis Yellow

package/build/components/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+    const { loading, disabled, container = 'none' } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle, } from 'react-native';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -120,12 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
     const InNavModalContainer = scrollable ? ScrollView : View;
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: {
-                        flex: stickyFooter ? 1 : 0,
-                        ...(scrollable ? { marginHorizontal: -1 } : {}),
-                    }, ...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {}), children: [children, !stickyFooter ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
-                    ? footer
-                    : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flex: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -134,7 +129,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { onLayout: e => {
+    return inNavModal ? (_jsxs(View, { onLayout: (e) => {
             setInNavModalHeight(e.nativeEvent.layout.height);
         }, style: {
             flex: 1,
@@ -245,7 +240,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
         variants: {
             background: {
                 primary: {},
@@ -255,22 +250,22 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
             fullscreen: {
                 true: {
-                    padding: theme.components.bottomSheet.padding,
+                    padding: theme.components.modal.padding,
                     paddingTop: rt.insets.top,
                 },
                 false: {
-                    padding: theme.components.bottomSheet.padding,
-                },
-            },
+                    padding: theme.components.modal.padding,
+                }
+            }
         },
     },
     inNavModalFooterContainer: {
-        paddingTop: theme.components.bottomSheet.padding,
+        paddingTop: theme.components.modal.padding,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.bottomSheet.padding,
-        paddingRight: theme.components.bottomSheet.padding,
+        paddingLeft: theme.components.modal.padding,
+        paddingRight: theme.components.modal.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {

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, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...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

@@ -11,7 +11,7 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 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', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...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;
@@ -64,10 +64,9 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
         setIsOpen(false);
         setSearch('');
     }, []);
-    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, testID: testID ? `${testID}-option-${item.label}` : undefined })), [testID] // ← added testID dependency
-    );
+    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: [_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, testID: testID, style: ({ pressed }) => [
+    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: (() => {
@@ -77,7 +76,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) })] }));
+                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

@@ -148,9 +148,5 @@ export interface SelectOptionProps {
      * Callback when this option is selected
      */
     onPress?: (value: string) => void;
-    /**
-     * Test ID for testing
-     */
-    testID?: string;
 }
 export default SelectProps;

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

@@ -1,6 +1,6 @@
 import { SelectOptionProps } from './Select.props';
 declare const SelectOption: {
-    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SelectOption;

package/build/components/Select/SelectOption.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useSelectContext } from './Select.context';
-const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }) => {
+const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
     styles.useVariants({ disabled });
@@ -22,7 +22,7 @@ const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: Right
             close();
         }
     };
-    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, testID: testID, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/VerificationInput/VerificationInput.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, testID, ...props }, ref) => {
+const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
     const length = 6;
     const inputRef = useRef(null);
     const latestValueRef = useRef(value);
@@ -160,7 +160,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                         latestSelectionRef.current = nextSelection;
                         setSelection(nextSelection);
                         setFocusedIndex(Math.min(nextSelection.start, length - 1));
-                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput, testID: testID }), slots.map(index => {
+                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput }), slots.map(index => {
                     const char = displayValue[index] || '';
                     const isActive = focusedIndex === index;
                     const displayChar = secureTextEntry && char ? '*' : char;
@@ -168,7 +168,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                             pendingFocusIndexRef.current = index;
                             inputRef.current?.focus();
                             setSelectionIndex(index);
-                        }, testID: testID ? `${testID}-${index}` : undefined }, index));
+                        } }, index));
                 })] }) }));
 });
 const styles = StyleSheet.create(theme => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.2-testid-fix-3",
+  "version": "0.27.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,11 +56,11 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-tokens": "^0.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0"
+    "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { AddSmallIcon, ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform } from 'react-native';
@@ -92,7 +92,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
+  render: ({ icon: _icon, children: _, ...args }) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return <Button {...args} icon={icon} />;
@@ -104,7 +104,7 @@ export const Variants: Story = {
     controls: { exclude: ['variant'] },
   },
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
+  render: ({ icon: _icon, children: _, ...args }) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
@@ -123,9 +123,11 @@ export const Variants: Story = {
           {args.colorScheme !== 'highlight' && (
             <>
               <VariantTitle title="Outline" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
                 <Button {...args} variant="outline" icon={icon} />
               </VariantTitle>
               <VariantTitle title="Ghost" invert={args.inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
                 <Button {...args} variant="ghost" icon={icon} />
               </VariantTitle>
             </>
@@ -136,44 +138,6 @@ export const Variants: Story = {
   },
 };
 
-export const PaddingNone: Story = {
-  parameters: {
-    controls: {
-      include: ['text', 'size', 'inverted', 'icon', 'iconPosition'],
-    },
-  },
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
-    // @ts-expect-error - This is a playground
-    const icon = _icon === 'none' ? undefined : Icons[_icon];
-
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default Padding" invert={args.inverted}>
-          <Flex direction="row" align="center" spacing="none">
-            <Box backgroundColor="brand" width="100" height="100" />
-            <Button
-              {...args}
-              colorScheme="functional"
-              variant="ghost"
-              icon={icon}
-              paddingNone={false}
-            />
-            <Box backgroundColor="brand" width="100" height="100" />
-          </Flex>
-        </VariantTitle>
-        <VariantTitle title="No Padding (paddingNone)" invert={args.inverted}>
-          <Flex direction="row" align="center" spacing="none">
-            <Box backgroundColor="brand" width="100" height="100" />
-            <Button {...args} colorScheme="functional" variant="ghost" icon={icon} paddingNone />
-            <Box backgroundColor="brand" width="100" height="100" />
-          </Flex>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
 type ColorScheme = ButtonProps['colorScheme'];
 type Variant = ButtonProps['variant'];
 
@@ -181,7 +145,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { include: ['text', 'size', 'inverted'] },
   },
-  render: ({ text, inverted, size }: StoryObj<typeof meta.args>) => {
+  render: ({ text, inverted, size }) => {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
@@ -210,7 +174,7 @@ export const KitchenSink: Story = {
               .map(variant => (
                 <Box key={variant} mb="100">
                   <Box mb="100">
-                    <DetailText size="lg" inverted={inverted}>
+                    <DetailText size="lg" color={inverted ? 'warmWhite50' : 'grey1000'}>
                       {scheme} - {variant}
                     </DetailText>
                   </Box>

package/src/components/Button/ButtonRoot.tsx

@@ -132,14 +132,6 @@ const styles = StyleSheet.create(theme => ({
           paddingHorizontal: 0,
         },
       },
-      {
-        size: 'md',
-        paddingNone: true,
-        variant: 'ghost',
-        styles: {
-          paddingHorizontal: 0,
-        },
-      },
       // Variant Color Schemes
       // Emphasis
       // Emphasis Yellow

package/src/components/List/List.tsx

@@ -14,8 +14,7 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
-
+  const { loading, disabled, container = 'none' } = props;
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -52,7 +51,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...rest} style={[styles.container, style]}>
+      <View {...props} style={[styles.container, props.style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -62,10 +61,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View testID={testID}>{children}</View>
+          <View>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
+            <Card {...containerToCard} noPadding style={styles.card}>
               <>{children}</>
             </Card>
           )

package/src/components/Modal/Modal.tsx

@@ -7,14 +7,7 @@ import {
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import {
-  AccessibilityInfo,
-  Dimensions,
-  Platform,
-  ScrollView,
-  View,
-  findNodeHandle,
-} from 'react-native';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -299,23 +292,13 @@ const Modal = ({
             </View>
           ) : null}
           {inNavModal && (
-            <InNavModalContainer
-              style={{
-                flex: stickyFooter ? 1 : 0,
-                ...(scrollable ? { marginHorizontal: -1 } : {}),
-              }}
-              {...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {})}
-            >
+            <InNavModalContainer style={{ flex: stickyFooter ? 1 : 0 }}>
               {children}
-              {!stickyFooter ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
-              ) : null}
+              {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
             </InNavModalContainer>
           )}
           {!inNavModal && children}
-          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
-            ? footer
-            : null}
+          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null}
         </View>
       )}
     </>
@@ -339,7 +322,7 @@ const Modal = ({
 
   return inNavModal ? (
     <View
-      onLayout={e => {
+      onLayout={(e) => {
         setInNavModalHeight(e.nativeEvent.layout.height);
       }}
       style={{
@@ -355,7 +338,9 @@ const Modal = ({
       <Animated.View
         style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.inNavModalContent}>{content}</View>
+        <View style={styles.inNavModalContent}>
+          {content}
+        </View>
       </Animated.View>
     </View>
   ) : (
@@ -486,7 +471,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     borderTopLeftRadius: theme.components.modal.borderRadius,
     borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     variants: {
       background: {
         primary: {},
@@ -496,22 +481,22 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
       fullscreen: {
         true: {
-          padding: theme.components.bottomSheet.padding,
+          padding: theme.components.modal.padding,
           paddingTop: rt.insets.top,
         },
         false: {
-          padding: theme.components.bottomSheet.padding,
-        },
-      },
+          padding: theme.components.modal.padding,
+        }
+      }
     },
   },
   inNavModalFooterContainer: {
-    paddingTop: theme.components.bottomSheet.padding,
+    paddingTop: theme.components.modal.padding,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.bottomSheet.padding,
-    paddingRight: theme.components.bottomSheet.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {

package/src/components/Select/Select.props.ts

@@ -152,10 +152,6 @@ export interface SelectOptionProps {
    * Callback when this option is selected
    */
   onPress?: (value: string) => void;
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
 }
 
 export default SelectProps;

package/src/components/Select/Select.tsx

@@ -40,7 +40,6 @@ const Select = ({
   listProps,
   searchable = false,
   searchPlaceholder = 'Search',
-  testID,
   ...rest
 }: SelectProps) => {
   const formFieldContext = useFormFieldContext();
@@ -110,10 +109,9 @@ const Select = ({
         disabled={item.disabled}
         leadingIcon={item.leadingIcon}
         trailingIcon={item.trailingIcon}
-        testID={testID ? `${testID}-option-${item.label}` : undefined} // ← restored
       />
     ),
-    [testID] // ← added testID dependency
+    []
   );
 
   const renderEmptyComponent = useCallback(
@@ -142,7 +140,6 @@ const Select = ({
         <Pressable
           onPress={openBottomSheet}
           disabled={isDisabled || isReadonly}
-          testID={testID}
           style={({ pressed }) => [
             styles.selectContainer,
             styles.pressedContainer(pressed || isOpen),
@@ -195,7 +192,6 @@ const Select = ({
                 inBottomSheet
                 onChangeText={setSearch}
                 type="search"
-                testID={testID ? `${testID}-search` : undefined}
               />
             </View>
           )}
@@ -208,7 +204,6 @@ const Select = ({
               keyExtractor={(option: any) => option.value}
               renderItem={renderSelectOption}
               ListEmptyComponent={renderEmptyComponent}
-              testID={testID ? `${testID}-options` : undefined}
               {...listProps}
             />
           )}