@utilitywarehouse/hearth-react-native 0.27.2-test → 0.27.2-testid-fix-1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @utilitywarehouse/hearth-react-native@0.27.2-test build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.2-testid-fix-1 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
 > tsc
 

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.2
+
+### Patch Changes
+
+- [#1003](https://github.com/utilitywarehouse/hearth/pull/1003) [`cdb95ea`](https://github.com/utilitywarehouse/hearth/commit/cdb95eabb279adaf348487ae3fb4a20e600e039e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Correct `VerificationInput` focus progression after editing an empty slot
+
+  Fixed an issue where entering a value after selecting an empty verification slot could move focus to the wrong slot. Focus now moves to the slot immediately after the one that was actually updated.
+
+  **Components affected**:
+  - `VerificationInput`
+
+  **Developer changes**:
+
+  No changes required.
+
 ## 0.27.1
 
 ### Patch Changes

package/build/components/Button/ButtonRoot.js

@@ -108,6 +108,14 @@ 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/DatePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+export type Period = 'AM' | 'PM';
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import PeriodPicker from './time-picker/period-picker';
+import Wheel from './time-picker/wheel';
+import { formatNumber, getParsedDate } from './utils';
+const createNumberList = (num, numerals, startFrom = 0) => {
+    return Array.from({ length: num }, (_, i) => ({
+        value: i + startFrom,
+        text: i + startFrom < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+            : `${formatNumber(i + startFrom, numerals)}`,
+    }));
+};
+const TimePicker = () => {
+    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
+    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
+    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
+    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
+    const handleChangeHour = useCallback((value) => {
+        let hour24 = value;
+        if (use12Hours) {
+            if (period === 'AM' && value === 12) {
+                hour24 = 0;
+            }
+            else if (period === 'PM' && value < 12) {
+                hour24 = value + 12;
+            }
+            else {
+                hour24 = value;
+            }
+        }
+        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
+    const handleChangeMinute = useCallback((value) => {
+        const newDate = dayjs.tz(date, timeZone).minute(value);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone]);
+    const handlePeriodChange = useCallback((newPeriod) => {
+        let newHour = hour12;
+        if (newPeriod === 'PM' && hour12 < 12) {
+            newHour = hour12 + 12;
+        }
+        else if (newPeriod === 'AM' && hour12 === 12) {
+            newHour = 0;
+        }
+        else if (newPeriod === 'AM' && hour >= 12) {
+            newHour = hour12;
+        }
+        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
+        onSelectDate(newDate);
+    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
+    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    wheelContainer: {
+        flex: 1,
+    },
+    timePickerContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: CONTAINER_HEIGHT / 2,
+        height: CONTAINER_HEIGHT / 2,
+        flexDirection: 'row',
+    },
+    timeSeparator: {
+        marginHorizontal: 5,
+    },
+    periodContainer: {
+        marginLeft: 10,
+    },
+});
+export default TimePicker;

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -0,0 +1,4 @@
+import { Animated } from 'react-native';
+declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
+declare function normalize(animated: Animated.Animated): Animated.Animated;
+export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+const FACTORIAL_3 = 3 * 2;
+const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
+const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
+function sin(animated) {
+    const normalized = normalize(animated);
+    const square = Animated.multiply(normalized, normalized);
+    const pow3 = Animated.multiply(normalized, square);
+    const pow5 = Animated.multiply(pow3, square);
+    const pow7 = Animated.multiply(pow5, square);
+    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
+}
+function normalize(animated) {
+    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
+        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
+        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
+    });
+}
+export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import WheelPicker from './wheel-picker';
+const options = [
+    { value: 'AM', text: 'AM' },
+    { value: 'PM', text: 'PM' },
+];
+const PeriodNative = ({ value, setValue = () => { } }) => {
+    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
+        //containerStyle={defaultStyles.container}
+        itemHeight: 44, decelerationRate: "fast" }));
+};
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodNative, customComparator);

package/build/components/DatePicker/time-picker/period-picker.d.ts

@@ -0,0 +1,6 @@
+type PeriodProps = {
+    value: string;
+    setValue?: (value: any) => void;
+};
+declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-picker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import PeriodNative from './period-native';
+import PeriodWeb from './period-web';
+const PeriodPicker = (props) => {
+    const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(PeriodPicker);

package/build/components/DatePicker/time-picker/period-web.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-web.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const PeriodWeb = ({ value, setValue = () => { } }) => {
+    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
+};
+const styles = StyleSheet.create({
+    period: {
+        width: 65,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel-native.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+interface WheelProps {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-native.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import WheelPicker from './wheel-picker';
+const WheelNative = ({ value, setValue = () => { }, items }) => {
+    return (_jsx(WheelPicker, { value: value, options: items, onChange: setValue, containerStyle: styles.container, itemHeight: 44, decelerationRate: "fast" }));
+};
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        ...Platform.select({
+            web: {
+                userSelect: 'none',
+            },
+        }),
+    },
+});
+export default memo(WheelNative);

package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts

@@ -0,0 +1,2 @@
+import WheelPicker from './wheel-picker';
+export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/index.js

@@ -0,0 +1,2 @@
+import WheelPicker from './wheel-picker';
+export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+interface ItemProps {
+    style: StyleProp<ViewStyle>;
+    option: PickerOption | null;
+    height: number;
+    index: number;
+    currentScrollIndex: Animated.AnimatedAddition<number>;
+    visibleRest: number;
+    rotationFunction: (x: number) => number;
+    opacityFunction: (x: number) => number;
+    scaleFunction: (x: number) => number;
+}
+declare const _default: React.NamedExoticComponent<ItemProps>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Animated } from 'react-native';
+import { BodyText } from '../../../BodyText';
+import styles from './wheel-picker.style';
+const WheelPickerItem = ({ style, height, option, index, visibleRest, currentScrollIndex, opacityFunction, rotationFunction, scaleFunction, }) => {
+    const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
+    const translateY = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
+                for (let j = 1; j < i; j++) {
+                    y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
+                }
+                range.unshift(y);
+                range.push(-y);
+            }
+            return range;
+        })(),
+    });
+    const opacity = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [1];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = opacityFunction(x);
+                range.unshift(y);
+                range.push(y);
+            }
+            return range;
+        })(),
+    });
+    const scale = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = [1.0];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = scaleFunction(x);
+                range.unshift(y);
+                range.push(y);
+            }
+            return range;
+        })(),
+    });
+    const rotateX = relativeScrollIndex.interpolate({
+        inputRange: (() => {
+            const range = [0];
+            for (let i = 1; i <= visibleRest + 1; i++) {
+                range.unshift(-i);
+                range.push(i);
+            }
+            return range;
+        })(),
+        outputRange: (() => {
+            const range = ['0deg'];
+            for (let x = 1; x <= visibleRest + 1; x++) {
+                const y = rotationFunction(x);
+                range.unshift(`${y}deg`);
+                range.push(`${y}deg`);
+            }
+            return range;
+        })(),
+    });
+    return (_jsx(Animated.View, { style: [
+            styles.option,
+            style,
+            {
+                height,
+                opacity,
+                transform: [{ translateY }, { rotateX }, { scale }],
+            },
+        ], children: _jsx(BodyText, { children: option?.text }) }));
+};
+export default React.memo(WheelPickerItem);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FlatListProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+interface Props {
+    value: number | string;
+    options: PickerOption[];
+    onChange: (index: number | string) => void;
+    selectedIndicatorStyle?: StyleProp<ViewStyle>;
+    itemStyle?: ViewStyle;
+    itemHeight?: number;
+    containerStyle?: ViewStyle;
+    containerProps?: Omit<ViewProps, 'style'>;
+    scaleFunction?: (x: number) => number;
+    rotationFunction?: (x: number) => number;
+    opacityFunction?: (x: number) => number;
+    visibleRest?: number;
+    decelerationRate?: 'normal' | 'fast' | number;
+    flatListProps?: Omit<FlatListProps<PickerOption | null>, 'data' | 'renderItem'>;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Platform, View, } from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import styles from './wheel-picker.style';
+const WheelPicker = ({ value, options, onChange, selectedIndicatorStyle = {}, containerStyle = {}, itemStyle = {}, itemHeight = 40, scaleFunction = (x) => 1.0 ** x, rotationFunction = (x) => 1 - Math.pow(1 / 2, x), opacityFunction = (x) => Math.pow(1 / 3, x), visibleRest = 2, decelerationRate = 'normal', containerProps = {}, flatListProps = {}, }) => {
+    const momentumStarted = useRef(false);
+    const selectedIndex = options.findIndex(item => item.value === value);
+    const flatListRef = useRef(null);
+    const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+    const containerHeight = (1 + visibleRest * 2) * itemHeight;
+    const paddedOptions = useMemo(() => {
+        const array = [...options];
+        for (let i = 0; i < visibleRest; i++) {
+            array.unshift(null);
+            array.push(null);
+        }
+        return array;
+    }, [options, visibleRest]);
+    const offsets = useMemo(() => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight), [paddedOptions, itemHeight]);
+    const currentScrollIndex = useMemo(() => Animated.add(Animated.divide(scrollY, itemHeight), visibleRest), [visibleRest, scrollY, itemHeight]);
+    const handleScrollEnd = (event) => {
+        const offsetY = Math.min(itemHeight * (options.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0));
+        let index = Math.floor(offsetY / itemHeight);
+        const remainder = offsetY % itemHeight;
+        if (remainder > itemHeight / 2) {
+            index++;
+        }
+        if (index !== selectedIndex) {
+            onChange(options[index]?.value || 0);
+        }
+    };
+    const handleMomentumScrollBegin = () => {
+        momentumStarted.current = true;
+    };
+    const handleMomentumScrollEnd = (event) => {
+        momentumStarted.current = false;
+        handleScrollEnd(event);
+    };
+    const handleScrollEndDrag = (event) => {
+        // Capture the offset value immediately
+        const offsetY = event.nativeEvent.contentOffset?.y;
+        // We'll start a short timer to see if momentum scroll begins
+        setTimeout(() => {
+            // If momentum scroll hasn't started within the timeout,
+            // then it was a slow scroll that won't trigger momentum
+            if (!momentumStarted.current && offsetY !== undefined) {
+                // Create a synthetic event with just the data we need
+                const syntheticEvent = {
+                    nativeEvent: {
+                        contentOffset: { y: offsetY },
+                    },
+                };
+                handleScrollEnd(syntheticEvent);
+            }
+        }, 50);
+    };
+    useEffect(() => {
+        if (selectedIndex < 0 || selectedIndex >= options.length) {
+            throw new Error(`Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1}]`);
+        }
+    }, [selectedIndex, options]);
+    /**
+     * If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
+     * This ensures that what the user sees as selected in the picker always corresponds to the value state.
+     */
+    useEffect(() => {
+        flatListRef.current?.scrollToIndex({
+            index: selectedIndex,
+            animated: Platform.OS === 'ios',
+        });
+    }, [selectedIndex, itemHeight]);
+    return (_jsxs(View, { style: [styles.container, { height: containerHeight }, containerStyle], ...containerProps, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    selectedIndicatorStyle,
+                    {
+                        transform: [{ translateY: -itemHeight / 2 }],
+                        height: itemHeight,
+                    },
+                ] }), _jsx(Animated.FlatList, { ...flatListProps, ref: flatListRef, nestedScrollEnabled: true, style: styles.scrollView, showsVerticalScrollIndicator: false, onScroll: Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+                    useNativeDriver: true,
+                }), onScrollEndDrag: handleScrollEndDrag, onMomentumScrollBegin: handleMomentumScrollBegin, onMomentumScrollEnd: handleMomentumScrollEnd, snapToOffsets: offsets, decelerationRate: decelerationRate, initialScrollIndex: selectedIndex, getItemLayout: (_, index) => ({
+                    length: itemHeight,
+                    offset: itemHeight * index,
+                    index,
+                }), data: paddedOptions, keyExtractor: (item, index) => item ? `${item.value}-${item.text}-${index}` : `null-${index}`, renderItem: ({ item: option, index }) => (_jsx(WheelPickerItem, { index: index, option: option, style: itemStyle, height: itemHeight, currentScrollIndex: currentScrollIndex, scaleFunction: scaleFunction, rotationFunction: rotationFunction, opacityFunction: opacityFunction, visibleRest: visibleRest }, `option-${index}`)) })] }));
+};
+export default memo(WheelPicker);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    container: {
+        position: "relative";
+    };
+    selectedIndicator: {
+        position: "absolute";
+        width: "100%";
+        top: "50%";
+    };
+    scrollView: {
+        overflow: "hidden";
+        flex: number;
+    };
+    option: {
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+        zIndex: number;
+    };
+} & {
+    useVariants: (variants: never) => void;
+};
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+export default StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+    scrollView: {
+        overflow: 'hidden',
+        flex: 1,
+    },
+    option: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        zIndex: 100,
+    },
+});

package/build/components/DatePicker/time-picker/wheel-web.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+interface WheelProps {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-web.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from 'react';
+import { Animated, PanResponder, Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../../utils';
+import { BodyText } from '../../BodyText';
+import { CONTAINER_HEIGHT } from '../enums';
+import { sin } from './animated-math';
+const ITEM_HEIGHT = 44;
+const WheelWeb = ({ value, setValue = () => { }, items }) => {
+    const displayCount = 5;
+    const translateY = useRef(new Animated.Value(0)).current;
+    const renderCount = displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
+    const circular = items.length >= displayCount;
+    const height = 140;
+    const radius = height / 2;
+    const valueIndex = useMemo(() => {
+        return Math.max(0, items.findIndex(item => item.value === value));
+    }, [items, value]);
+    const panResponder = useMemo(() => {
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: () => {
+                translateY.setValue(0);
+            },
+            onPanResponderMove: (evt, gestureState) => {
+                translateY.setValue(gestureState.dy);
+                evt.stopPropagation();
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                translateY.extractOffset();
+                let newValueIndex = valueIndex - Math.round(gestureState.dy / ((radius * 2) / displayCount));
+                if (circular) {
+                    newValueIndex = (newValueIndex + items.length) % items.length;
+                }
+                else {
+                    if (newValueIndex < 0) {
+                        newValueIndex = 0;
+                    }
+                    else if (newValueIndex >= items.length) {
+                        newValueIndex = items.length - 1;
+                    }
+                }
+                const newValue = items[newValueIndex];
+                if (newValue?.value === value) {
+                    translateY.setOffset(0);
+                    translateY.setValue(0);
+                }
+                else if (newValue?.value) {
+                    setValue(newValue.value);
+                }
+                else if (items[0]?.value) {
+                    setValue(items[0].value);
+                }
+            },
+        });
+    }, [circular, displayCount, radius, setValue, value, valueIndex, items, translateY]);
+    const displayValues = useMemo(() => {
+        const centerIndex = Math.floor(renderCount / 2);
+        return Array.from({ length: renderCount }, (_, index) => {
+            let targetIndex = valueIndex + index - centerIndex;
+            if (circular) {
+                targetIndex = ((targetIndex % items.length) + items.length) % items.length;
+            }
+            else {
+                targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+            }
+            return items[targetIndex] || items[0];
+        });
+    }, [renderCount, valueIndex, items, circular]);
+    const animatedAngles = useMemo(() => {
+        //translateY.setValue(0);
+        translateY.setOffset(0);
+        const currentIndex = displayValues.findIndex(item => item?.value === value);
+        return displayValues && displayValues.length > 0
+            ? displayValues.map((_, index) => translateY
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [
+                    -radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                    radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                ],
+                extrapolate: 'extend',
+            })
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [-Math.PI / 2, Math.PI / 2],
+                extrapolate: 'clamp',
+            }))
+            : [];
+    }, [displayValues, radius, value, displayCount, translateY]);
+    return (_jsxs(View, { style: [styles.container], ...panResponder.panHandlers, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    {
+                        transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+                        height: ITEM_HEIGHT,
+                    },
+                ] }), displayValues?.map((displayValue, index) => {
+                const animatedAngle = animatedAngles[index];
+                return (_jsx(Animated.View, { style: {
+                        position: 'absolute',
+                        height: ITEM_HEIGHT - 10,
+                        transform: animatedAngle
+                            ? [
+                                {
+                                    translateY: Animated.multiply(radius, sin(animatedAngle)),
+                                },
+                                {
+                                    rotateX: animatedAngle.interpolate({
+                                        inputRange: [-Math.PI / 2, Math.PI / 2],
+                                        outputRange: ['-89deg', '89deg'],
+                                        extrapolate: 'clamp',
+                                    }),
+                                },
+                            ]
+                            : [],
+                        opacity: displayValue?.value !== value ? 0.3 : 1,
+                    }, children: _jsx(BodyText, { children: displayValue?.text }) }, `${displayValue?.text}-${index}`));
+            })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        minWidth: 30,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: CONTAINER_HEIGHT / 2,
+        ...Platform.select({
+            web: {
+                cursor: 'pointer',
+                userSelect: 'none',
+            },
+        }),
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+    return areEqual;
+};
+export default memo(WheelWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+type WheelProps = {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+};
+declare const _default: import("react").MemoExoticComponent<(props: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import WheelNative from './wheel-native';
+import WheelWeb from './wheel-web';
+const Wheel = (props) => {
+    const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(Wheel);

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,7 +120,12 @@ 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 }, 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,
+                        ...(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 renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -129,7 +134,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,
@@ -240,7 +245,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.modal.padding + rt.insets.bottom,
+        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
         variants: {
             background: {
                 primary: {},
@@ -250,22 +255,22 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
             fullscreen: {
                 true: {
-                    padding: theme.components.modal.padding,
+                    padding: theme.components.bottomSheet.padding,
                     paddingTop: rt.insets.top,
                 },
                 false: {
-                    padding: theme.components.modal.padding,
-                }
-            }
+                    padding: theme.components.bottomSheet.padding,
+                },
+            },
         },
     },
     inNavModalFooterContainer: {
-        paddingTop: theme.components.modal.padding,
+        paddingTop: theme.components.bottomSheet.padding,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.modal.padding,
-        paddingRight: theme.components.modal.padding,
+        paddingLeft: theme.components.bottomSheet.padding,
+        paddingRight: theme.components.bottomSheet.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {

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, ...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, testID, ...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 }), 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, testID: testID }), slots.map(index => {
                     const char = displayValue[index] || '';
                     const isActive = focusedIndex === index;
                     const displayChar = secureTextEntry && char ? '*' : char;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.2-test",
+  "version": "0.27.2-testid-fix-1",
   "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-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-tokens": "^0.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3"
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 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 }) => {
+  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.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 }) => {
+  render: ({ icon: _icon, children: _, ...args }: StoryObj<typeof meta.args>) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
@@ -123,11 +123,9 @@ 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>
             </>
@@ -138,6 +136,44 @@ 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'];
 
@@ -145,7 +181,7 @@ export const KitchenSink: Story = {
   parameters: {
     controls: { include: ['text', 'size', 'inverted'] },
   },
-  render: ({ text, inverted, size }) => {
+  render: ({ text, inverted, size }: StoryObj<typeof meta.args>) => {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
@@ -174,7 +210,7 @@ export const KitchenSink: Story = {
               .map(variant => (
                 <Box key={variant} mb="100">
                   <Box mb="100">
-                    <DetailText size="lg" color={inverted ? 'warmWhite50' : 'grey1000'}>
+                    <DetailText size="lg" inverted={inverted}>
                       {scheme} - {variant}
                     </DetailText>
                   </Box>

package/src/components/Button/ButtonRoot.tsx

@@ -132,6 +132,14 @@ 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/Modal/Modal.tsx

@@ -7,7 +7,14 @@ 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,
@@ -292,13 +299,23 @@ const Modal = ({
             </View>
           ) : null}
           {inNavModal && (
-            <InNavModalContainer style={{ flex: stickyFooter ? 1 : 0 }}>
+            <InNavModalContainer
+              style={{
+                flex: stickyFooter ? 1 : 0,
+                ...(scrollable ? { marginHorizontal: -1 } : {}),
+              }}
+              {...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {})}
+            >
               {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>
       )}
     </>
@@ -322,7 +339,7 @@ const Modal = ({
 
   return inNavModal ? (
     <View
-      onLayout={(e) => {
+      onLayout={e => {
         setInNavModalHeight(e.nativeEvent.layout.height);
       }}
       style={{
@@ -338,9 +355,7 @@ 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>
   ) : (
@@ -471,7 +486,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.modal.padding + rt.insets.bottom,
+    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
     variants: {
       background: {
         primary: {},
@@ -481,22 +496,22 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
       fullscreen: {
         true: {
-          padding: theme.components.modal.padding,
+          padding: theme.components.bottomSheet.padding,
           paddingTop: rt.insets.top,
         },
         false: {
-          padding: theme.components.modal.padding,
-        }
-      }
+          padding: theme.components.bottomSheet.padding,
+        },
+      },
     },
   },
   inNavModalFooterContainer: {
-    paddingTop: theme.components.modal.padding,
+    paddingTop: theme.components.bottomSheet.padding,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.modal.padding,
-    paddingRight: theme.components.modal.padding,
+    paddingLeft: theme.components.bottomSheet.padding,
+    paddingRight: theme.components.bottomSheet.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {

package/src/components/VerificationInput/VerificationInput.tsx

@@ -23,6 +23,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       secureTextEntry = false,
       autoFocus = false,
       style,
+      testID,
       ...props
     },
     ref
@@ -239,6 +240,7 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
+            testID={testID}
           />
           {slots.map(index => {
             const char = displayValue[index] || '';