From e4211c60c25ac75f08e39b787684c34aa9f9d633 Mon Sep 17 00:00:00 2001
From: Sokolovskii Ivan <ivan3177@gmail.com>
Date: Mon, 15 Dec 2025 12:51:31 +0300
Subject: [PATCH 1/3] =?UTF-8?q?fix(input):=20=D0=B8=D1=81=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BB=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B8=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=8B=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D1=8F=20=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0=20?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=BD=D0=BE=D1=80=D0=B0=D0=B7=D0=BE=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BE=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Input/InputOtp/InputOtp.stories.ts        |    18 -
 .../Input/InputOtp/InputOtp.stories.tsx       |    38 +
 src/components/Input/InputOtp/InputOtp.tsx    |    17 +-
 .../InputOtp/__tests__/InputOtp.test.tsx      |    16 +-
 .../__snapshots__/InputOtp.test.tsx.snap      | 11734 +++++++++++++++-
 src/components/Input/index.ts                 |     1 +
 6 files changed, 11348 insertions(+), 476 deletions(-)
 delete mode 100644 src/components/Input/InputOtp/InputOtp.stories.ts
 create mode 100644 src/components/Input/InputOtp/InputOtp.stories.tsx

diff --git a/src/components/Input/InputOtp/InputOtp.stories.ts b/src/components/Input/InputOtp/InputOtp.stories.ts
deleted file mode 100644
index 94fd7cf..0000000
--- a/src/components/Input/InputOtp/InputOtp.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { InputOtp } from './InputOtp'
-
-const meta: Meta<typeof InputOtp> = {
-  title: 'Form/InputOtp',
-  component: InputOtp,
-  args: { disabled: false, error: false, length: 4 },
-  argTypes: { onComplete: { action: 'onComplete' } },
-}
-
-export default meta
-
-type Story = StoryObj<typeof InputOtp>
-
-const InputOtpStory: Story = {}
-
-export { InputOtpStory as InputOtp }
diff --git a/src/components/Input/InputOtp/InputOtp.stories.tsx b/src/components/Input/InputOtp/InputOtp.stories.tsx
new file mode 100644
index 0000000..c4cbcf2
--- /dev/null
+++ b/src/components/Input/InputOtp/InputOtp.stories.tsx
@@ -0,0 +1,38 @@
+import { useArgs } from '@storybook/preview-api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { InputOtp } from './InputOtp'
+
+const meta: Meta<typeof InputOtp> = {
+  title: 'Form/InputOtp',
+  component: InputOtp,
+  args: { disabled: false, error: false, length: 4, value: '' },
+  render: (args) => {
+    const [, updateArgs] = useArgs()
+    const [value, setValue] = useState(args.value)
+
+    const onChange = useCallback(
+      (nextValue: string) => {
+        setValue(nextValue)
+        updateArgs({ value: nextValue })
+      },
+      [updateArgs]
+    )
+
+    useEffect(() => {
+      setValue(args.value)
+    }, [args.value])
+
+    return <InputOtp {...args} value={value} onChange={onChange} />
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof InputOtp>
+
+const InputOtpStory: Story = {}
+
+export { InputOtpStory as InputOtp }
diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx
index f62dd15..ba2caca 100644
--- a/src/components/Input/InputOtp/InputOtp.tsx
+++ b/src/components/Input/InputOtp/InputOtp.tsx
@@ -15,8 +15,8 @@ import { InputOtpItem } from './InputOtpItem'
 export interface InputOtpProps
   extends Omit<
       TextInputProps,
-      | 'value'
       | 'onChangeText'
+      | 'onChange'
       | 'onFocus'
       | 'onBlur'
       | 'ref'
@@ -25,7 +25,7 @@ export interface InputOtpProps
     >,
     Pick<PressableProps, 'testOnly_pressed'> {
   length: number
-  onComplete?: (value: string) => void
+  onChange: (value: string) => void
   disabled?: boolean
   error?: boolean
 }
@@ -33,15 +33,15 @@ export interface InputOtpProps
 export const InputOtp = memo<InputOtpProps>(
   ({
     length,
-    onComplete,
+    onChange,
     disabled = false,
     error = false,
     testOnly_pressed,
     testID,
+    value = '',
     ...rest
   }) => {
     const styles = useStyles()
-    const [value, setValue] = useState('')
     const [isFocused, setIsFocused] = useState(false)
 
     const inputRef = useRef<TextInput>(null)
@@ -53,14 +53,9 @@ export const InputOtp = memo<InputOtpProps>(
     const handleChange = useCallback(
       (text: string) => {
         const sanitizedText = text.replace(/[^0-9]/g, '')
-        setValue(sanitizedText)
-
-        if (sanitizedText.length === length) {
-          onComplete?.(sanitizedText)
-          inputRef.current?.blur()
-        }
+        onChange(sanitizedText)
       },
-      [length, onComplete]
+      [onChange]
     )
 
     const handleFocus = useCallback(() => {
diff --git a/src/components/Input/InputOtp/__tests__/InputOtp.test.tsx b/src/components/Input/InputOtp/__tests__/InputOtp.test.tsx
index 3b023b5..32342d9 100644
--- a/src/components/Input/InputOtp/__tests__/InputOtp.test.tsx
+++ b/src/components/Input/InputOtp/__tests__/InputOtp.test.tsx
@@ -7,6 +7,8 @@ describe('InputOtp component tests', () => {
     disabled: [true, false],
     error: [true, false],
     testOnly_pressed: [true, false],
+    value: [undefined, '5', '55'],
+    onChange: [jest.fn()],
     length: [2, 4, 8],
   })
 
@@ -20,19 +22,25 @@ describe('InputOtp component tests', () => {
   )
 
   test('Handle input', async () => {
-    const mockedOnComplete = jest.fn()
+    const mockedOnChange = jest.fn()
 
     const { getByTestId } = render(
-      <InputOtp length={4} testID='InputOtp' onComplete={mockedOnComplete} />
+      <InputOtp length={4} testID='InputOtp' onChange={mockedOnChange} />
     )
     const hiddenInput = getByTestId('InputOtpHiddenInput')
 
+    expect(mockedOnChange).not.toHaveBeenCalled()
+
     fireEvent.changeText(hiddenInput, '55')
 
-    expect(mockedOnComplete).not.toHaveBeenCalled()
+    expect(mockedOnChange).toHaveBeenCalledWith('55')
 
     fireEvent.changeText(hiddenInput, '5543')
 
-    expect(mockedOnComplete).toHaveBeenCalledWith('5543')
+    expect(mockedOnChange).toHaveBeenCalledWith('5543')
+
+    fireEvent.changeText(hiddenInput, '55   ')
+
+    expect(mockedOnChange).toHaveBeenCalledWith('55')
   })
 })
diff --git a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap
index 7a1c09e..7590ddc 100644
--- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap
+++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - true 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - false 2`] = `
 <View
   accessibilityState={
     {
@@ -179,9 +179,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p
             "paddingVertical": 0,
           },
           false,
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -196,7 +194,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -212,9 +212,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p
             "paddingVertical": 0,
           },
           false,
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -247,18 +245,18 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - false 3`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -308,10 +306,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           },
           false,
           false,
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -325,7 +320,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -342,10 +339,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           },
           false,
           false,
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -359,7 +353,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
   </View>
   <TextInput
@@ -377,18 +373,18 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - true 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - true 1`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -440,10 +436,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -476,10 +469,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -516,7 +506,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - false 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - true 2`] = `
 <View
   accessibilityState={
     {
@@ -570,11 +560,11 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          false,
           {
-            "borderColor": "#db3424",
+            "borderColor": "#1dc831",
           },
           false,
-          false,
         ]
       }
     >
@@ -588,7 +578,9 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -603,11 +595,11 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          false,
           {
-            "borderColor": "#db3424",
+            "borderColor": "#1dc831",
           },
           false,
-          false,
         ]
       }
     >
@@ -639,12 +631,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - true 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - false, pressed - true 3`] = `
 <View
   accessibilityState={
     {
@@ -698,9 +690,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
+          false,
           {
             "borderColor": "#1dc831",
           },
@@ -718,7 +708,9 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -733,9 +725,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
+          false,
           {
             "borderColor": "#1dc831",
           },
@@ -753,7 +743,9 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
   </View>
   <TextInput
@@ -771,12 +763,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - false 1`] = `
 <View
   accessibilityState={
     {
@@ -830,9 +822,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
+          false,
           false,
           {
             "mixBlendMode": "luminosity",
@@ -866,9 +856,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
+          false,
           false,
           {
             "mixBlendMode": "luminosity",
@@ -910,7 +898,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
 </View>
 `;
 
-exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - true 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - false 2`] = `
 <View
   accessibilityState={
     {
@@ -964,12 +952,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -987,7 +971,9 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -1002,12 +988,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          {
-            "borderColor": "#db3424",
-          },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -1043,18 +1025,18 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - false 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - false 3`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -1104,38 +1086,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           },
           false,
           false,
-          false,
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#181a1f",
-            "fontFamily": "PT Sans",
-            "fontSize": 21,
-            "fontWeight": "400",
-          }
-        }
-        testID="undefinedItem"
-      />
-    </View>
-    <View
-      style={
-        [
           {
-            "alignItems": "center",
-            "borderBottomWidth": 1,
-            "borderColor": "#cecfd2",
-            "justifyContent": "center",
-            "minHeight": 35,
-            "minWidth": 35,
-            "paddingHorizontal": 10.5,
-            "paddingVertical": 0,
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
           },
-          false,
-          false,
-          false,
         ]
       }
     >
@@ -1149,7 +1103,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -1166,38 +1122,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           },
           false,
           false,
-          false,
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "#181a1f",
-            "fontFamily": "PT Sans",
-            "fontSize": 21,
-            "fontWeight": "400",
-          }
-        }
-        testID="undefinedItem"
-      />
-    </View>
-    <View
-      style={
-        [
           {
-            "alignItems": "center",
-            "borderBottomWidth": 1,
-            "borderColor": "#cecfd2",
-            "justifyContent": "center",
-            "minHeight": 35,
-            "minWidth": 35,
-            "paddingHorizontal": 10.5,
-            "paddingVertical": 0,
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
           },
-          false,
-          false,
-          false,
         ]
       }
     >
@@ -1211,12 +1139,14 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={2}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -1229,18 +1159,18 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - true 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - true 1`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -1292,7 +1222,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -1325,7 +1258,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -1341,6 +1277,68 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
         testID="undefinedItem"
       />
     </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
     <View
       style={
         [
@@ -1358,7 +1356,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -1372,7 +1373,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -1391,7 +1394,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -1410,7 +1416,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={2}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -1423,12 +1429,12 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 2, error - false, disabled - true, pressed - true 3`] = `
 <View
   accessibilityState={
     {
@@ -1483,7 +1489,10501 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingVertical": 0,
           },
           false,
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - false, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 2, error - true, disabled - true, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={2}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - false, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - false 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - false 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value=""
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - true 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="5"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - true 3`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -1503,6 +12003,134 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
         testID="undefinedItem"
       />
     </View>
+  </View>
+  <TextInput
+    keyboardType="number-pad"
+    maxLength={8}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    style={
+      {
+        "height": 1,
+        "opacity": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+    testID="undefinedHiddenInput"
+    value="55"
+  />
+</View>
+`;
+
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={{}}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "gap": 7,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
     <View
       style={
         [
@@ -1516,12 +12144,44 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
           false,
           false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1550,12 +12210,44 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
           false,
           false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1584,12 +12276,44 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
           false,
           false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1608,7 +12332,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={8}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -1626,13 +12350,13 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - false, disabled - true, pressed - true 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - false 2`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -1680,14 +12404,79 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      >
+        5
+      </Text>
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
+          },
+          {
+            "borderColor": "#db3424",
+          },
           false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "borderColor": "#1dc831",
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
           },
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1716,14 +12505,44 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
           false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "borderColor": "#1dc831",
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
           },
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1752,14 +12571,44 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
+          {
+            "borderColor": "#db3424",
+          },
           false,
+          false,
+        ]
+      }
+    >
+      <Text
+        style={
           {
-            "borderColor": "#1dc831",
+            "color": "#181a1f",
+            "fontFamily": "PT Sans",
+            "fontSize": 21,
+            "fontWeight": "400",
+          }
+        }
+        testID="undefinedItem"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderColor": "#cecfd2",
+            "justifyContent": "center",
+            "minHeight": 35,
+            "minWidth": 35,
+            "paddingHorizontal": 10.5,
+            "paddingVertical": 0,
           },
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1788,14 +12637,11 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          {
-            "borderColor": "#1dc831",
-          },
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#db3424",
           },
+          false,
+          false,
         ]
       }
     >
@@ -1814,7 +12660,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={8}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -1827,12 +12673,12 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - false 3`] = `
 <View
   accessibilityState={
     {
@@ -1904,7 +12750,9 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -1937,7 +12785,9 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -2005,68 +12855,6 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
         testID="undefinedItem"
       />
     </View>
-  </View>
-  <TextInput
-    keyboardType="number-pad"
-    maxLength={4}
-    onBlur={[Function]}
-    onChangeText={[Function]}
-    onFocus={[Function]}
-    style={
-      {
-        "height": 1,
-        "opacity": 0,
-        "position": "absolute",
-        "width": 1,
-      }
-    }
-    testID="undefinedHiddenInput"
-    value=""
-  />
-</View>
-`;
-
-exports[`InputOtp component tests length - 4, error - true, disabled - false, pressed - true 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={{}}
->
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "gap": 7,
-      }
-    }
-  >
     <View
       style={
         [
@@ -2083,9 +12871,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           {
             "borderColor": "#db3424",
           },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -2118,9 +12904,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           {
             "borderColor": "#db3424",
           },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -2153,9 +12937,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           {
             "borderColor": "#db3424",
           },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -2188,9 +12970,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
           {
             "borderColor": "#db3424",
           },
-          {
-            "borderColor": "#1dc831",
-          },
+          false,
           false,
         ]
       }
@@ -2210,7 +12990,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={8}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -2223,18 +13003,18 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - true 1`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -2285,11 +13065,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#1dc831",
           },
+          false,
         ]
       }
     >
@@ -2321,11 +13100,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#1dc831",
           },
+          false,
         ]
       }
     >
@@ -2357,11 +13135,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#1dc831",
           },
+          false,
         ]
       }
     >
@@ -2393,11 +13170,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
           {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
+            "borderColor": "#1dc831",
           },
+          false,
         ]
       }
     >
@@ -2413,68 +13189,6 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
         testID="undefinedItem"
       />
     </View>
-  </View>
-  <TextInput
-    keyboardType="number-pad"
-    maxLength={4}
-    onBlur={[Function]}
-    onChangeText={[Function]}
-    onFocus={[Function]}
-    style={
-      {
-        "height": 1,
-        "opacity": 0,
-        "position": "absolute",
-        "width": 1,
-      }
-    }
-    testID="undefinedHiddenInput"
-    value=""
-  />
-</View>
-`;
-
-exports[`InputOtp component tests length - 4, error - true, disabled - true, pressed - true 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={{}}
->
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "gap": 7,
-      }
-    }
-  >
     <View
       style={
         [
@@ -2494,10 +13208,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -2532,10 +13243,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -2570,10 +13278,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -2608,10 +13313,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
           {
             "borderColor": "#1dc831",
           },
-          {
-            "mixBlendMode": "luminosity",
-            "opacity": 0.6,
-          },
+          false,
         ]
       }
     >
@@ -2630,7 +13332,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
   </View>
   <TextInput
     keyboardType="number-pad"
-    maxLength={4}
+    maxLength={8}
     onBlur={[Function]}
     onChangeText={[Function]}
     onFocus={[Function]}
@@ -2648,7 +13350,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - true 2`] = `
 <View
   accessibilityState={
     {
@@ -2702,8 +13404,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2718,7 +13424,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -2733,8 +13441,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2764,8 +13476,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2795,8 +13511,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2826,8 +13546,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2857,8 +13581,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2888,8 +13616,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2919,8 +13651,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
-          false,
+          {
+            "borderColor": "#db3424",
+          },
+          {
+            "borderColor": "#1dc831",
+          },
           false,
         ]
       }
@@ -2953,12 +13689,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - false, disabled - false, pressed - true 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - true 3`] = `
 <View
   accessibilityState={
     {
@@ -3012,7 +13748,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3030,7 +13768,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -3045,7 +13785,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3063,7 +13805,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -3078,7 +13822,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3111,7 +13857,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3144,7 +13892,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3177,7 +13927,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3210,7 +13962,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3243,7 +13997,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           {
             "borderColor": "#1dc831",
           },
@@ -3279,12 +14035,12 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - false 1`] = `
 <View
   accessibilityState={
     {
@@ -3338,7 +14094,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3372,7 +14130,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3406,7 +14166,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3440,7 +14202,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3474,7 +14238,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3508,7 +14274,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3542,7 +14310,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3576,7 +14346,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
+          {
+            "borderColor": "#db3424",
+          },
           false,
           {
             "mixBlendMode": "luminosity",
@@ -3618,7 +14390,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - false, disabled - true, pressed - true 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - false 2`] = `
 <View
   accessibilityState={
     {
@@ -3672,10 +14444,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3693,7 +14465,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -3708,10 +14482,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3744,10 +14518,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3780,10 +14554,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3816,10 +14590,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3852,10 +14626,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3888,10 +14662,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3924,10 +14698,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
             "paddingHorizontal": 10.5,
             "paddingVertical": 0,
           },
-          false,
           {
-            "borderColor": "#1dc831",
+            "borderColor": "#db3424",
           },
+          false,
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -3963,18 +14737,18 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - false 3`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -4026,7 +14800,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4040,7 +14817,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -4059,7 +14838,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4073,7 +14855,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -4092,7 +14876,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4125,7 +14912,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4158,7 +14948,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4191,7 +14984,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4224,7 +15020,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4257,7 +15056,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
             "borderColor": "#db3424",
           },
           false,
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4289,18 +15091,18 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - true, disabled - false, pressed - true 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - true 1`] = `
 <View
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": true,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -4354,7 +15156,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4389,7 +15194,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4424,7 +15232,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4459,7 +15270,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4494,7 +15308,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4529,7 +15346,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4564,7 +15384,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4599,7 +15422,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
           {
             "borderColor": "#1dc831",
           },
-          false,
+          {
+            "mixBlendMode": "luminosity",
+            "opacity": 0.6,
+          },
         ]
       }
     >
@@ -4636,7 +15462,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - false 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - true 2`] = `
 <View
   accessibilityState={
     {
@@ -4693,7 +15519,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4711,7 +15539,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -4729,7 +15559,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4765,7 +15597,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4801,7 +15635,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4837,7 +15673,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4873,7 +15711,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4909,7 +15749,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4945,7 +15787,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           {
             "borderColor": "#db3424",
           },
-          false,
+          {
+            "borderColor": "#1dc831",
+          },
           {
             "mixBlendMode": "luminosity",
             "opacity": 0.6,
@@ -4981,12 +15825,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="5"
   />
 </View>
 `;
 
-exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - true 1`] = `
+exports[`InputOtp component tests length - 8, error - true, disabled - true, pressed - true 3`] = `
 <View
   accessibilityState={
     {
@@ -5063,7 +15907,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -5101,7 +15947,9 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
           }
         }
         testID="undefinedItem"
-      />
+      >
+        5
+      </Text>
     </View>
     <View
       style={
@@ -5347,7 +16195,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre
       }
     }
     testID="undefinedHiddenInput"
-    value=""
+    value="55"
   />
 </View>
 `;
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index de401d6..0616675 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -3,3 +3,4 @@ export { InputText } from './InputText'
 export { FloatLabel } from './FloatLabel'
 export { InputSwitch } from './InputSwitch'
 export type { InputTextBaseProps } from './InputTextBase/types'
+export { InputOtp } from './InputOtp/InputOtp'

From 4b6ee439d5ea2292cd81b16d8922894325fe4f30 Mon Sep 17 00:00:00 2001
From: Sokolovskii Ivan <ivan3177@gmail.com>
Date: Mon, 15 Dec 2025 12:58:01 +0300
Subject: [PATCH 2/3] =?UTF-8?q?fix(input):=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82?=
 =?UTF-8?q?=D0=B8=D1=8F=20onFocus=20=D0=B8=20onBlur=20=D0=B2=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=B5=20=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=BD=D0=BE=D1=80=D0=B0=D0=B7=D0=BE=D0=B2=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/InputOtp/InputOtp.tsx | 32 +++++++++++++---------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx
index ba2caca..3ced897 100644
--- a/src/components/Input/InputOtp/InputOtp.tsx
+++ b/src/components/Input/InputOtp/InputOtp.tsx
@@ -6,6 +6,8 @@ import {
   TextInput,
   type TextInputProps,
   type PressableProps,
+  type TextInputFocusEventData,
+  type NativeSyntheticEvent,
 } from 'react-native'
 
 import { makeStyles } from '../../../utils/makeStyles'
@@ -15,13 +17,7 @@ import { InputOtpItem } from './InputOtpItem'
 export interface InputOtpProps
   extends Omit<
       TextInputProps,
-      | 'onChangeText'
-      | 'onChange'
-      | 'onFocus'
-      | 'onBlur'
-      | 'ref'
-      | 'keyboardType'
-      | 'style'
+      'onChangeText' | 'onChange' | 'ref' | 'keyboardType' | 'style'
     >,
     Pick<PressableProps, 'testOnly_pressed'> {
   length: number
@@ -39,6 +35,8 @@ export const InputOtp = memo<InputOtpProps>(
     testOnly_pressed,
     testID,
     value = '',
+    onFocus,
+    onBlur,
     ...rest
   }) => {
     const styles = useStyles()
@@ -58,13 +56,21 @@ export const InputOtp = memo<InputOtpProps>(
       [onChange]
     )
 
-    const handleFocus = useCallback(() => {
-      setIsFocused(true)
-    }, [])
+    const handleFocus = useCallback(
+      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(true)
+        onFocus?.(e)
+      },
+      [onFocus]
+    )
 
-    const handleBlur = useCallback(() => {
-      setIsFocused(false)
-    }, [])
+    const handleBlur = useCallback(
+      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(false)
+        onBlur?.(e)
+      },
+      [onBlur]
+    )
 
     const activeIndex = useMemo(
       () => Math.min(value.length, length - 1),

From 6097a5eca96967e39af3a5b673505e4447b0b10f Mon Sep 17 00:00:00 2001
From: Sokolovskii Ivan <ivan3177@gmail.com>
Date: Mon, 15 Dec 2025 13:03:24 +0300
Subject: [PATCH 3/3] =?UTF-8?q?fix(input):=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D1=80=D0=BE=D0=B1=D1=80=D0=BE?=
 =?UTF-8?q?=D1=81=20ref=20=D0=BA=20=D0=BF=D0=BE=D0=BB=D1=8E=20=D0=B2=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=20=D0=BE=D0=B4=D0=BD=D0=BE=D1=80=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/InputOtp/InputOtp.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx
index 3ced897..1e5f7ae 100644
--- a/src/components/Input/InputOtp/InputOtp.tsx
+++ b/src/components/Input/InputOtp/InputOtp.tsx
@@ -1,4 +1,12 @@
-import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import {
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type Ref,
+} from 'react'
 
 import {
   Pressable,
@@ -24,6 +32,7 @@ export interface InputOtpProps
   onChange: (value: string) => void
   disabled?: boolean
   error?: boolean
+  inputRef?: Ref<TextInput | null>
 }
 
 export const InputOtp = memo<InputOtpProps>(
@@ -33,6 +42,7 @@ export const InputOtp = memo<InputOtpProps>(
     disabled = false,
     error = false,
     testOnly_pressed,
+    inputRef: propsInputRef,
     testID,
     value = '',
     onFocus,
@@ -44,6 +54,8 @@ export const InputOtp = memo<InputOtpProps>(
 
     const inputRef = useRef<TextInput>(null)
 
+    useImperativeHandle(propsInputRef, () => inputRef.current as TextInput)
+
     const handlePress = useCallback(() => {
       inputRef.current?.focus()
     }, [])