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

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.3 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.3 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
+   93: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
+  330: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         |  1647.829 |    61.5%
+react-hooks/exhaustive-deps               |   126.846 |     4.7%
+no-global-assign                          |    85.087 |     3.2%
+react-hooks/rules-of-hooks                |    75.260 |     2.8%
+no-misleading-character-class             |    68.283 |     2.6%
+no-unexpected-multiline                   |    54.599 |     2.0%
+@typescript-eslint/ban-ts-comment         |    52.506 |     2.0%
+no-useless-escape                         |    31.809 |     1.2%
+no-loss-of-precision                      |    30.517 |     1.1%
+@typescript-eslint/triple-slash-reference |    29.522 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.3
+
+### Patch Changes
+
+- [#1006](https://github.com/utilitywarehouse/hearth/pull/1006) [`1996112`](https://github.com/utilitywarehouse/hearth/commit/1996112864146e86972ef6b9b07a8be5a72b552f) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Make `paddingNone` remove horizontal padding for ghost buttons in `md` size
+
+  Fixed an issue where setting `paddingNone` on a ghost button did not remove horizontal padding when using `md` size. The prop now removes horizontal padding for both `sm` and `md` ghost buttons.
+
+  **Components affected**:
+  - `Button`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1012](https://github.com/utilitywarehouse/hearth/pull/1012) [`4fda116`](https://github.com/utilitywarehouse/hearth/commit/4fda116c2a1bec383df7e630180ab57166ab9da4) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Prevent outlines from being clipped for scrollable children in `Modal`
+
+  Fixed an issue in in-nav modals where child components with outlines could be visually clipped at the horizontal edges when content was scrollable.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1012](https://github.com/utilitywarehouse/hearth/pull/1012) [`4fda116`](https://github.com/utilitywarehouse/hearth/commit/4fda116c2a1bec383df7e630180ab57166ab9da4) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Update horizontal padding values for scrollable in-nav `Modal` content
+
+  Adjusted horizontal padding behaviour in scrollable in-nav modals to preserve child outlines while keeping visual spacing consistent.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1009](https://github.com/utilitywarehouse/hearth/pull/1009) [`3d65ef2`](https://github.com/utilitywarehouse/hearth/commit/3d65ef2f8f7701b128a9c679f1910cd3d0f5c0c3) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: testID for `List` component
+
 ## 0.27.2
 
 ### Patch Changes

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.3",
   "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/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}
             />
           )}

package/src/components/Select/SelectOption.tsx

@@ -14,7 +14,6 @@ const SelectOption = ({
   selected,
   disabled,
   onPress,
-  testID,
 }: SelectOptionProps) => {
   const { selectedValue, onValueChange, close } = useSelectContext();
   const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -39,7 +38,6 @@ const SelectOption = ({
     <Pressable
       onPress={handlePress}
       disabled={disabled}
-      testID={testID}
       style={({ pressed }) => [styles.container, pressed && styles.pressed]}
     >
       {!!LeftIcon && (

package/src/components/VerificationInput/VerificationInput.tsx

@@ -23,7 +23,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       secureTextEntry = false,
       autoFocus = false,
       style,
-      testID,
       ...props
     },
     ref
@@ -240,7 +239,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
-            testID={testID}
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -262,7 +260,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
                   inputRef.current?.focus();
                   setSelectionIndex(index);
                 }}
-                testID={testID ? `${testID}-${index}` : undefined}
               />
             );
           })}

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

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

package/build/components/DatePicker/TimePicker.js

@@ -1,84 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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);