npm - @pagopa/io-app-design-system - Versions diffs - 1.43.0 → 1.45.0 - Mend

@pagopa/io-app-design-system 1.43.0 → 1.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/lib/commonjs/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap CHANGED Viewed

@@ -10,931 +10,795 @@ exports[`NumberPad Should match the snapshot 1`] = `
 >
   <View
     style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        },
-        {
-          "alignItems": "center",
-          "flexGrow": 1,
-          "justifyContent": "space-between",
-        },
-      ]
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "rowGap": 16,
+      }
     }
   >
     <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+      style={
+        [
+          {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "space-between",
+          },
+        ]
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
     >
       <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
-                {
-                  "scale": undefined,
-                },
-              ],
-            },
-          ]
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "borderRadius": 100,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          1
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
                 {
-                  "scale": undefined,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
             }
+            weight="Semibold"
+          >
+            1
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "borderRadius": 100,
+              },
+              {
+                "height": 56,
+                "width": 56,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          2
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
                 {
-                  "scale": undefined,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
             }
+            weight="Semibold"
+          >
+            2
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "borderRadius": 100,
+              },
+              {
+                "height": 56,
+                "width": 56,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          3
-        </Text>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "height": 16,
-      }
-    }
-  />
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        },
-        {
-          "alignItems": "center",
-          "flexGrow": 1,
-          "justifyContent": "space-between",
-        },
-      ]
-    }
-  >
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
+                {
+                  "fontSize": 22,
+                  "lineHeight": 33,
+                },
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
+            }
+            weight="Semibold"
+          >
+            3
+          </Text>
+        </View>
+      </View>
+    </View>
     <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+      style={
+        [
+          {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "space-between",
+          },
+        ]
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
     >
       <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
-                {
-                  "scale": undefined,
-                },
-              ],
-            },
-          ]
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "borderRadius": 100,
+              },
+              {
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          4
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
                 {
-                  "scale": undefined,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
             }
+            weight="Semibold"
+          >
+            4
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "borderRadius": 100,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          5
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
                 {
-                  "scale": undefined,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
             }
+            weight="Semibold"
+          >
+            5
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        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]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "borderRadius": 100,
+              },
+              {
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          6
-        </Text>
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
+                {
+                  "fontSize": 22,
+                  "lineHeight": 33,
+                },
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
+            }
+            weight="Semibold"
+          >
+            6
+          </Text>
+        </View>
       </View>
     </View>
-  </View>
-  <View
-    style={
-      {
-        "height": 16,
-      }
-    }
-  />
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        },
-        {
-          "alignItems": "center",
-          "flexGrow": 1,
-          "justifyContent": "space-between",
-        },
-      ]
-    }
-  >
     <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+      style={
+        [
+          {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "space-between",
+          },
+        ]
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
     >
       <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
-                {
-                  "scale": undefined,
-                },
-              ],
-            },
-          ]
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "borderRadius": 100,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          7
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
                 {
-                  "scale": undefined,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
             }
+            weight="Semibold"
+          >
+            7
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          maxFontSizeMultiplier={1.25}
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <View
           style={
             [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "borderRadius": 100,
               },
-            ]
-          }
-          weight="Semibold"
-        >
-          8
-        </Text>
-      </View>
-    </View>
-    <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-    >
-      <View
-        style={
-          [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
-            {
-              "height": 56,
-              "width": 56,
-            },
-            {
-              "backgroundColor": undefined,
-              "transform": [
-                {
-                  "scale": undefined,
-                },
-              ],
-            },
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
-          maxFontSizeMultiplier={1.25}
-          style={
-            [
               {
-                "fontSize": 22,
-                "lineHeight": 33,
+                "height": 56,
+                "width": 56,
               },
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
+                "backgroundColor": undefined,
+                "transform": [
+                  {
+                    "scale": undefined,
+                  },
+                ],
               },
             ]
           }
-          weight="Semibold"
         >
-          9
-        </Text>
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
+              {
+                "fontSize": 22,
+                "lineHeight": 33,
+              }
+            }
+            maxFontSizeMultiplier={1.25}
+            style={
+              [
+                {
+                  "fontSize": 22,
+                  "lineHeight": 33,
+                },
+                {
+                  "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
+                },
+              ]
+            }
+            weight="Semibold"
+          >
+            8
+          </Text>
+        </View>
       </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "height": 16,
-      }
-    }
-  />
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        },
-        {
-          "alignItems": "center",
-          "flexGrow": 1,
-          "justifyContent": "space-between",
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "height": 56,
-            "width": 56,
-          },
-          {
-            "alignItems": "center",
-          },
-          {
-            "justifyContent": "center",
-          },
-        ]
-      }
-    >
       <View
-        accessibilityLabel="touch id trigger"
         accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
             "checked": undefined,
-            "disabled": false,
+            "disabled": undefined,
             "expanded": undefined,
             "selected": undefined,
           }
@@ -950,7 +814,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         accessible={true}
         collapsable={false}
         focusable={true}
-        hitSlop={8}
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -965,16 +828,18 @@ exports[`NumberPad Should match the snapshot 1`] = `
           style={
             [
               {
-                "height": 24,
-                "width": 24,
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "alignItems": "center",
+                "borderRadius": 100,
               },
               {
-                "justifyContent": "center",
+                "height": 56,
+                "width": 56,
               },
               {
+                "backgroundColor": undefined,
                 "transform": [
                   {
                     "scale": undefined,
@@ -984,189 +849,204 @@ exports[`NumberPad Should match the snapshot 1`] = `
             ]
           }
         >
-          <RNSVGSvgView
-            accessibilityElementsHidden={true}
-            accessibilityLabel=""
-            accessible={false}
-            align="xMidYMid"
-            animatedProps={
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
               {
-                "color": undefined,
+                "fontSize": 22,
+                "lineHeight": 33,
               }
             }
-            bbHeight={24}
-            bbWidth={24}
-            focusable={false}
-            height={24}
-            importantForAccessibility="no-hide-descendants"
-            meetOrSlice={0}
-            minX={0}
-            minY={0}
+            maxFontSizeMultiplier={1.25}
             style={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "borderWidth": 0,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
                 {
                   "color": "#FFFFFF",
-                },
-                {
-                  "flex": 0,
-                  "height": 24,
-                  "width": 24,
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
                 },
               ]
             }
-            tintColor="#FFFFFF"
-            vbHeight={24}
-            vbWidth={24}
-            width={24}
+            weight="Semibold"
           >
-            <RNSVGGroup
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-            >
-              <RNSVGPath
-                clipRule={0}
-                d="M5.3669 22.0799C5.54087 22.2122 5.75341 22.2839 5.972 22.284C6.15303 22.284 6.33068 22.2349 6.486 22.142C11 19.433 11 13.946 11 10.999C11 10.7337 11.1054 10.4794 11.2929 10.2918C11.4804 10.1043 11.7348 9.99895 12 9.99895C12.2652 9.99895 12.5196 10.1043 12.7071 10.2918C12.8946 10.4794 13 10.7337 13 10.999C13 11.2642 13.1054 11.5185 13.2929 11.7061C13.4804 11.8936 13.7348 11.999 14 11.999C14.2652 11.999 14.5196 11.8936 14.7071 11.7061C14.8946 11.5185 15 11.2642 15 10.999C15 10.2033 14.6839 9.44024 14.1213 8.87763C13.5587 8.31502 12.7956 7.99895 12 7.99895C11.2044 7.99895 10.4413 8.31502 9.87868 8.87763C9.31607 9.44024 9 10.2033 9 10.999C9 13.729 9 18.299 5.457 20.427C5.26967 20.5396 5.12441 20.7105 5.04345 20.9135C4.96248 21.1166 4.95027 21.3406 5.00869 21.5512C5.0671 21.7618 5.19292 21.9475 5.3669 22.0799ZM14.896 14.084C14.55 18.171 13.217 21.405 10.935 23.705V23.701C10.748 23.8891 10.494 23.9953 10.2287 23.9962C9.96341 23.997 9.70867 23.8924 9.5205 23.7055C9.33233 23.5185 9.22614 23.2644 9.2253 22.9991C9.22445 22.7339 9.32902 22.4791 9.516 22.291C11.485 20.31 12.593 17.567 12.904 13.91C12.913 13.7783 12.9483 13.6499 13.008 13.5322C13.0677 13.4146 13.1504 13.3102 13.2513 13.2252C13.3521 13.1401 13.4691 13.0763 13.5951 13.0375C13.7212 12.9986 13.8538 12.9855 13.985 12.999C14.1161 13.0102 14.2438 13.0471 14.3606 13.1078C14.4774 13.1684 14.5811 13.2515 14.6658 13.3523C14.7504 13.4531 14.8143 13.5696 14.8538 13.6952C14.8933 13.8207 14.9077 13.9529 14.896 14.084ZM17.643 20.338C17.2467 21.4455 16.7416 22.5111 16.135 23.519C16.0668 23.6313 15.9772 23.7291 15.8713 23.8068C15.7653 23.8845 15.6451 23.9406 15.5174 23.9719C15.2597 24.035 14.9874 23.9931 14.7605 23.8555C14.6482 23.7873 14.5503 23.6977 14.4726 23.5917C14.3949 23.4858 14.3388 23.3655 14.3076 23.2379C14.2763 23.1103 14.2705 22.9777 14.2905 22.8478C14.3105 22.718 14.3558 22.5933 14.424 22.481C14.9617 21.5869 15.4099 20.642 15.762 19.66C15.8562 19.4164 16.0421 19.2193 16.2797 19.1109C16.5174 19.0026 16.788 18.9915 17.0337 19.08C17.2794 19.1686 17.4808 19.3498 17.5946 19.5849C17.7085 19.82 17.7258 20.0902 17.643 20.338ZM19 10.999C19.038 13.0741 18.8705 15.1478 18.5 17.19C18.4558 17.4173 18.334 17.6223 18.1554 17.7698C17.9769 17.9174 17.7526 17.9984 17.521 17.999C17.4562 17.999 17.3915 17.9927 17.328 17.98C17.0679 17.9292 16.8386 17.7772 16.6905 17.5574C16.5423 17.3377 16.4875 17.0681 16.538 16.808C16.8821 14.8915 17.0369 12.9458 17 10.999C16.9993 9.98698 16.6916 8.99903 16.1174 8.16568C15.5433 7.33234 14.7298 6.69282 13.7845 6.33166C12.8391 5.97049 11.8064 5.90468 10.8229 6.14292C9.83937 6.38116 8.95128 6.91223 8.276 7.66595C8.18966 7.7681 8.08371 7.85189 7.96441 7.91236C7.84512 7.97284 7.7149 8.00877 7.58148 8.01802C7.44805 8.02728 7.31412 8.00968 7.18762 7.96626C7.06111 7.92283 6.94461 7.85448 6.84499 7.76523C6.74537 7.67598 6.66467 7.56766 6.60766 7.44667C6.55065 7.32568 6.51849 7.19449 6.51308 7.06085C6.50768 6.92721 6.52913 6.79384 6.57618 6.66864C6.62323 6.54345 6.69492 6.42896 6.787 6.33195C7.73248 5.27691 8.97584 4.53359 10.3528 4.20021C11.7297 3.86683 13.1753 3.95909 14.4987 4.46479C15.8221 4.9705 16.9609 5.86585 17.7646 7.03251C18.5683 8.19918 18.9991 9.58225 19 10.999ZM7.069 10.166C7.02279 10.4412 6.99971 10.7198 7 10.999C7 16.774 4.88732 19.9713 1.0499 19.9988C1.03337 19.9996 1.01673 20 1 20C0.447715 20 0 19.5523 0 19C0 18.9998 4.50013e-08 18.9997 1.34992e-07 18.9995C4.49994e-08 18.9993 0 18.9991 0 18.999C0 18.7337 0.105357 18.4794 0.292893 18.2918C0.48043 18.1043 0.734784 17.999 1 17.999C3.654 17.999 5 15.644 5 10.999C5.00054 10.6078 5.03399 10.2175 5.1 9.83195C5.11551 9.69701 5.15835 9.56664 5.2259 9.44879C5.29346 9.33095 5.38431 9.2281 5.49293 9.14653C5.60154 9.06496 5.72563 9.00637 5.85763 8.97433C5.98963 8.9423 6.12678 8.9375 6.2607 8.96021C6.39462 8.98293 6.52251 9.03269 6.63657 9.10646C6.75062 9.18024 6.84845 9.27647 6.92409 9.3893C6.99972 9.50212 7.05158 9.62918 7.0765 9.76271C7.10141 9.89624 7.09886 10.0334 7.069 10.166ZM23 10.999C23.13 15.2538 22.3457 19.4871 20.7 23.413C20.6208 23.587 20.4934 23.7348 20.3328 23.8386C20.1722 23.9425 19.9852 23.9981 19.794 23.999C19.6514 23.9992 19.5105 23.9685 19.381 23.909C19.2612 23.8549 19.1532 23.7778 19.0632 23.682C18.9732 23.5862 18.9029 23.4736 18.8565 23.3506C18.8101 23.2276 18.7883 23.0967 18.7925 22.9653C18.7967 22.834 18.8268 22.7047 18.881 22.585C20.4035 18.9177 21.1259 14.9677 21 10.999C21.0029 9.64107 20.695 8.30052 20.1 7.07995C20.0425 6.96176 20.0089 6.83342 20.0011 6.70224C19.9932 6.57106 20.0113 6.43961 20.0542 6.31542C20.0972 6.19122 20.1642 6.07669 20.2514 5.97839C20.3386 5.88008 20.4443 5.79991 20.5625 5.74245C20.6807 5.685 20.809 5.65139 20.9402 5.64354C21.0714 5.63569 21.2028 5.65375 21.327 5.6967C21.4512 5.73965 21.5658 5.80663 21.6641 5.89384C21.7624 5.98105 21.8425 6.08676 21.9 6.20495C22.6283 7.69786 23.0046 9.33788 23 10.999ZM3 10.999V13.999C3 14.2642 2.89464 14.5185 2.70711 14.7061C2.51957 14.8936 2.26522 14.999 2 14.999C1.73478 14.999 1.48043 14.8936 1.29289 14.7061C1.10536 14.5185 1 14.2642 1 13.999V10.999C1.00344 8.08263 2.16347 5.28673 4.22563 3.22458C6.28778 1.16242 9.08367 0.00239289 12 -0.00104758C14.3812 -0.00833344 16.6994 0.764374 18.6 2.19895C18.8122 2.35808 18.9524 2.59498 18.99 2.85753C19.0275 3.12008 18.9591 3.38678 18.8 3.59895C18.6409 3.81113 18.404 3.9514 18.1414 3.9889C17.8789 4.02641 17.6122 3.95808 17.4 3.79895C15.8452 2.62473 13.9484 1.99246 12 1.99895C9.61386 2.0016 7.32622 2.95066 5.63896 4.63792C3.95171 6.32517 3.00265 8.61282 3 10.999Z"
-                fill={
-                  {
-                    "type": 2,
-                  }
-                }
-                fillRule={0}
-                propList={
-                  [
-                    "fill",
-                    "fillRule",
-                  ]
-                }
-              />
-            </RNSVGGroup>
-          </RNSVGSvgView>
+            9
+          </Text>
         </View>
       </View>
     </View>
     <View
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+      style={
+        [
+          {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "space-between",
+          },
+        ]
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
     >
       <View
         style={
           [
-            {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            {
-              "borderRadius": 100,
-            },
             {
               "height": 56,
               "width": 56,
             },
             {
-              "backgroundColor": undefined,
-              "transform": [
-                {
-                  "scale": undefined,
-                },
-              ],
+              "alignItems": "center",
+            },
+            {
+              "justifyContent": "center",
             },
           ]
         }
       >
-        <Text
-          allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
-          dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
+        <View
+          accessibilityLabel="touch id trigger"
+          accessibilityRole="button"
+          accessibilityState={
             {
-              "fontSize": 22,
-              "lineHeight": 33,
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          maxFontSizeMultiplier={1.25}
-          style={
-            [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
-              {
-                "color": "#FFFFFF",
-                "fontFamily": "Titillium Sans Pro",
-                "fontStyle": "normal",
-                "fontWeight": "600",
-              },
-            ]
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
           }
-          weight="Semibold"
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={8}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
         >
-          0
-        </Text>
+          <View
+            style={
+              [
+                {
+                  "height": 24,
+                  "width": 24,
+                },
+                {
+                  "alignItems": "center",
+                },
+                {
+                  "justifyContent": "center",
+                },
+                {
+                  "transform": [
+                    {
+                      "scale": undefined,
+                    },
+                  ],
+                },
+              ]
+            }
+          >
+            <RNSVGSvgView
+              accessibilityElementsHidden={true}
+              accessibilityLabel=""
+              accessible={false}
+              align="xMidYMid"
+              animatedProps={
+                {
+                  "color": undefined,
+                }
+              }
+              bbHeight={24}
+              bbWidth={24}
+              focusable={false}
+              height={24}
+              importantForAccessibility="no-hide-descendants"
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "color": "#FFFFFF",
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              tintColor="#FFFFFF"
+              vbHeight={24}
+              vbWidth={24}
+              width={24}
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <RNSVGPath
+                  clipRule={0}
+                  d="M5.3669 22.0799C5.54087 22.2122 5.75341 22.2839 5.972 22.284C6.15303 22.284 6.33068 22.2349 6.486 22.142C11 19.433 11 13.946 11 10.999C11 10.7337 11.1054 10.4794 11.2929 10.2918C11.4804 10.1043 11.7348 9.99895 12 9.99895C12.2652 9.99895 12.5196 10.1043 12.7071 10.2918C12.8946 10.4794 13 10.7337 13 10.999C13 11.2642 13.1054 11.5185 13.2929 11.7061C13.4804 11.8936 13.7348 11.999 14 11.999C14.2652 11.999 14.5196 11.8936 14.7071 11.7061C14.8946 11.5185 15 11.2642 15 10.999C15 10.2033 14.6839 9.44024 14.1213 8.87763C13.5587 8.31502 12.7956 7.99895 12 7.99895C11.2044 7.99895 10.4413 8.31502 9.87868 8.87763C9.31607 9.44024 9 10.2033 9 10.999C9 13.729 9 18.299 5.457 20.427C5.26967 20.5396 5.12441 20.7105 5.04345 20.9135C4.96248 21.1166 4.95027 21.3406 5.00869 21.5512C5.0671 21.7618 5.19292 21.9475 5.3669 22.0799ZM14.896 14.084C14.55 18.171 13.217 21.405 10.935 23.705V23.701C10.748 23.8891 10.494 23.9953 10.2287 23.9962C9.96341 23.997 9.70867 23.8924 9.5205 23.7055C9.33233 23.5185 9.22614 23.2644 9.2253 22.9991C9.22445 22.7339 9.32902 22.4791 9.516 22.291C11.485 20.31 12.593 17.567 12.904 13.91C12.913 13.7783 12.9483 13.6499 13.008 13.5322C13.0677 13.4146 13.1504 13.3102 13.2513 13.2252C13.3521 13.1401 13.4691 13.0763 13.5951 13.0375C13.7212 12.9986 13.8538 12.9855 13.985 12.999C14.1161 13.0102 14.2438 13.0471 14.3606 13.1078C14.4774 13.1684 14.5811 13.2515 14.6658 13.3523C14.7504 13.4531 14.8143 13.5696 14.8538 13.6952C14.8933 13.8207 14.9077 13.9529 14.896 14.084ZM17.643 20.338C17.2467 21.4455 16.7416 22.5111 16.135 23.519C16.0668 23.6313 15.9772 23.7291 15.8713 23.8068C15.7653 23.8845 15.6451 23.9406 15.5174 23.9719C15.2597 24.035 14.9874 23.9931 14.7605 23.8555C14.6482 23.7873 14.5503 23.6977 14.4726 23.5917C14.3949 23.4858 14.3388 23.3655 14.3076 23.2379C14.2763 23.1103 14.2705 22.9777 14.2905 22.8478C14.3105 22.718 14.3558 22.5933 14.424 22.481C14.9617 21.5869 15.4099 20.642 15.762 19.66C15.8562 19.4164 16.0421 19.2193 16.2797 19.1109C16.5174 19.0026 16.788 18.9915 17.0337 19.08C17.2794 19.1686 17.4808 19.3498 17.5946 19.5849C17.7085 19.82 17.7258 20.0902 17.643 20.338ZM19 10.999C19.038 13.0741 18.8705 15.1478 18.5 17.19C18.4558 17.4173 18.334 17.6223 18.1554 17.7698C17.9769 17.9174 17.7526 17.9984 17.521 17.999C17.4562 17.999 17.3915 17.9927 17.328 17.98C17.0679 17.9292 16.8386 17.7772 16.6905 17.5574C16.5423 17.3377 16.4875 17.0681 16.538 16.808C16.8821 14.8915 17.0369 12.9458 17 10.999C16.9993 9.98698 16.6916 8.99903 16.1174 8.16568C15.5433 7.33234 14.7298 6.69282 13.7845 6.33166C12.8391 5.97049 11.8064 5.90468 10.8229 6.14292C9.83937 6.38116 8.95128 6.91223 8.276 7.66595C8.18966 7.7681 8.08371 7.85189 7.96441 7.91236C7.84512 7.97284 7.7149 8.00877 7.58148 8.01802C7.44805 8.02728 7.31412 8.00968 7.18762 7.96626C7.06111 7.92283 6.94461 7.85448 6.84499 7.76523C6.74537 7.67598 6.66467 7.56766 6.60766 7.44667C6.55065 7.32568 6.51849 7.19449 6.51308 7.06085C6.50768 6.92721 6.52913 6.79384 6.57618 6.66864C6.62323 6.54345 6.69492 6.42896 6.787 6.33195C7.73248 5.27691 8.97584 4.53359 10.3528 4.20021C11.7297 3.86683 13.1753 3.95909 14.4987 4.46479C15.8221 4.9705 16.9609 5.86585 17.7646 7.03251C18.5683 8.19918 18.9991 9.58225 19 10.999ZM7.069 10.166C7.02279 10.4412 6.99971 10.7198 7 10.999C7 16.774 4.88732 19.9713 1.0499 19.9988C1.03337 19.9996 1.01673 20 1 20C0.447715 20 0 19.5523 0 19C0 18.9998 4.50013e-08 18.9997 1.34992e-07 18.9995C4.49994e-08 18.9993 0 18.9991 0 18.999C0 18.7337 0.105357 18.4794 0.292893 18.2918C0.48043 18.1043 0.734784 17.999 1 17.999C3.654 17.999 5 15.644 5 10.999C5.00054 10.6078 5.03399 10.2175 5.1 9.83195C5.11551 9.69701 5.15835 9.56664 5.2259 9.44879C5.29346 9.33095 5.38431 9.2281 5.49293 9.14653C5.60154 9.06496 5.72563 9.00637 5.85763 8.97433C5.98963 8.9423 6.12678 8.9375 6.2607 8.96021C6.39462 8.98293 6.52251 9.03269 6.63657 9.10646C6.75062 9.18024 6.84845 9.27647 6.92409 9.3893C6.99972 9.50212 7.05158 9.62918 7.0765 9.76271C7.10141 9.89624 7.09886 10.0334 7.069 10.166ZM23 10.999C23.13 15.2538 22.3457 19.4871 20.7 23.413C20.6208 23.587 20.4934 23.7348 20.3328 23.8386C20.1722 23.9425 19.9852 23.9981 19.794 23.999C19.6514 23.9992 19.5105 23.9685 19.381 23.909C19.2612 23.8549 19.1532 23.7778 19.0632 23.682C18.9732 23.5862 18.9029 23.4736 18.8565 23.3506C18.8101 23.2276 18.7883 23.0967 18.7925 22.9653C18.7967 22.834 18.8268 22.7047 18.881 22.585C20.4035 18.9177 21.1259 14.9677 21 10.999C21.0029 9.64107 20.695 8.30052 20.1 7.07995C20.0425 6.96176 20.0089 6.83342 20.0011 6.70224C19.9932 6.57106 20.0113 6.43961 20.0542 6.31542C20.0972 6.19122 20.1642 6.07669 20.2514 5.97839C20.3386 5.88008 20.4443 5.79991 20.5625 5.74245C20.6807 5.685 20.809 5.65139 20.9402 5.64354C21.0714 5.63569 21.2028 5.65375 21.327 5.6967C21.4512 5.73965 21.5658 5.80663 21.6641 5.89384C21.7624 5.98105 21.8425 6.08676 21.9 6.20495C22.6283 7.69786 23.0046 9.33788 23 10.999ZM3 10.999V13.999C3 14.2642 2.89464 14.5185 2.70711 14.7061C2.51957 14.8936 2.26522 14.999 2 14.999C1.73478 14.999 1.48043 14.8936 1.29289 14.7061C1.10536 14.5185 1 14.2642 1 13.999V10.999C1.00344 8.08263 2.16347 5.28673 4.22563 3.22458C6.28778 1.16242 9.08367 0.00239289 12 -0.00104758C14.3812 -0.00833344 16.6994 0.764374 18.6 2.19895C18.8122 2.35808 18.9524 2.59498 18.99 2.85753C19.0275 3.12008 18.9591 3.38678 18.8 3.59895C18.6409 3.81113 18.404 3.9514 18.1414 3.9889C17.8789 4.02641 17.6122 3.95808 17.4 3.79895C15.8452 2.62473 13.9484 1.99246 12 1.99895C9.61386 2.0016 7.32622 2.95066 5.63896 4.63792C3.95171 6.32517 3.00265 8.61282 3 10.999Z"
+                  fill={
+                    {
+                      "type": 2,
+                    }
+                  }
+                  fillRule={0}
+                  propList={
+                    [
+                      "fill",
+                      "fillRule",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 56,
-            "width": 56,
-          },
-          {
-            "alignItems": "center",
-          },
-          {
-            "justifyContent": "center",
-          },
-        ]
-      }
-    >
       <View
-        accessibilityLabel="delete"
         accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
             "checked": undefined,
-            "disabled": false,
+            "disabled": undefined,
             "expanded": undefined,
             "selected": undefined,
           }
@@ -1182,7 +1062,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         accessible={true}
         collapsable={false}
         focusable={true}
-        hitSlop={8}
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1197,16 +1076,18 @@ exports[`NumberPad Should match the snapshot 1`] = `
           style={
             [
               {
-                "height": 24,
-                "width": 24,
+                "alignItems": "center",
+                "justifyContent": "center",
               },
               {
-                "alignItems": "center",
+                "borderRadius": 100,
               },
               {
-                "justifyContent": "center",
+                "height": 56,
+                "width": 56,
               },
               {
+                "backgroundColor": undefined,
                 "transform": [
                   {
                     "scale": undefined,
@@ -1216,68 +1097,176 @@ exports[`NumberPad Should match the snapshot 1`] = `
             ]
           }
         >
-          <RNSVGSvgView
-            accessibilityElementsHidden={true}
-            accessibilityLabel=""
-            accessible={false}
-            align="xMidYMid"
-            animatedProps={
+          <Text
+            allowFontScaling={false}
+            color="white"
+            defaultColor="bluegreyDark"
+            defaultWeight="Semibold"
+            dynamicTypeRamp="title2"
+            font="TitilliumSansPro"
+            fontStyle={
               {
-                "color": undefined,
+                "fontSize": 22,
+                "lineHeight": 33,
               }
             }
-            bbHeight={24}
-            bbWidth={24}
-            focusable={false}
-            height={24}
-            importantForAccessibility="no-hide-descendants"
-            meetOrSlice={0}
-            minX={0}
-            minY={0}
+            maxFontSizeMultiplier={1.25}
             style={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "borderWidth": 0,
+                  "fontSize": 22,
+                  "lineHeight": 33,
                 },
                 {
                   "color": "#FFFFFF",
+                  "fontFamily": "Titillium Sans Pro",
+                  "fontStyle": "normal",
+                  "fontWeight": "600",
                 },
+              ]
+            }
+            weight="Semibold"
+          >
+            0
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "height": 56,
+              "width": 56,
+            },
+            {
+              "alignItems": "center",
+            },
+            {
+              "justifyContent": "center",
+            },
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="delete"
+          accessibilityRole="button"
+          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}
+          hitSlop={8}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+        >
+          <View
+            style={
+              [
                 {
-                  "flex": 0,
                   "height": 24,
                   "width": 24,
                 },
+                {
+                  "alignItems": "center",
+                },
+                {
+                  "justifyContent": "center",
+                },
+                {
+                  "transform": [
+                    {
+                      "scale": undefined,
+                    },
+                  ],
+                },
               ]
             }
-            tintColor="#FFFFFF"
-            vbHeight={24}
-            vbWidth={24}
-            width={24}
           >
-            <RNSVGGroup
-              fill={
+            <RNSVGSvgView
+              accessibilityElementsHidden={true}
+              accessibilityLabel=""
+              accessible={false}
+              align="xMidYMid"
+              animatedProps={
                 {
-                  "payload": 4278190080,
-                  "type": 0,
+                  "color": undefined,
                 }
               }
+              bbHeight={24}
+              bbWidth={24}
+              focusable={false}
+              height={24}
+              importantForAccessibility="no-hide-descendants"
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "color": "#FFFFFF",
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              tintColor="#FFFFFF"
+              vbHeight={24}
+              vbWidth={24}
+              width={24}
             >
-              <RNSVGPath
-                d="M9.85825 3a5.00004 5.00004 0 0 0-3.53536 1.46429L.90808 9.87858c-1.17171 1.17162-1.17171 3.07122 0 4.24282l5.41481 5.4143A4.99992 4.99992 0 0 0 9.85825 21h9.14245c2.7615 0 5-2.2386 5-5V8c0-2.76142-2.2385-5-5-5H9.85825ZM7.73704 5.87858A2.99997 2.99997 0 0 1 9.85825 5h9.14245c1.6569 0 3 1.34315 3 3v8c0 1.6569-1.3431 3-3 3H9.85825c-.7956 0-1.55861-.316-2.12121-.8786l-5.41482-5.4143c-.39057-.3905-.39057-1.0237 0-1.4142l5.41482-5.41432Zm9.55586 2.41431c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02369 0 1.41422L16.4142 12l2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0L15 13.4142l-2.2929 2.2929c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L13.5858 12l-2.2929-2.29289c-.3905-.39053-.3905-1.02369 0-1.41422.3905-.39052 1.0237-.39052 1.4142 0L15 10.5858l2.2929-2.29291Z"
+              <RNSVGGroup
                 fill={
                   {
-                    "type": 2,
+                    "payload": 4278190080,
+                    "type": 0,
                   }
                 }
-                propList={
-                  [
-                    "fill",
-                  ]
-                }
-              />
-            </RNSVGGroup>
-          </RNSVGSvgView>
+              >
+                <RNSVGPath
+                  d="M9.85825 3a5.00004 5.00004 0 0 0-3.53536 1.46429L.90808 9.87858c-1.17171 1.17162-1.17171 3.07122 0 4.24282l5.41481 5.4143A4.99992 4.99992 0 0 0 9.85825 21h9.14245c2.7615 0 5-2.2386 5-5V8c0-2.76142-2.2385-5-5-5H9.85825ZM7.73704 5.87858A2.99997 2.99997 0 0 1 9.85825 5h9.14245c1.6569 0 3 1.34315 3 3v8c0 1.6569-1.3431 3-3 3H9.85825c-.7956 0-1.55861-.316-2.12121-.8786l-5.41482-5.4143c-.39057-.3905-.39057-1.0237 0-1.4142l5.41482-5.41432Zm9.55586 2.41431c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02369 0 1.41422L16.4142 12l2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0L15 13.4142l-2.2929 2.2929c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L13.5858 12l-2.2929-2.29289c-.3905-.39053-.3905-1.02369 0-1.41422.3905-.39052 1.0237-.39052 1.4142 0L15 10.5858l2.2929-2.29291Z"
+                  fill={
+                    {
+                      "type": 2,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
         </View>
       </View>
     </View>