@hero-design/rn 8.84.3 → 8.86.0

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -569,13 +569,1061 @@ exports[`Button renders correctly 4`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#401960",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="filled-white"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 5`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {},
+        ]
+      }
+      testID="undefined-loading-indicator"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="filled-white"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="filled-white"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="filled-white"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 6`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#bfc1c5",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="filled-white"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 7`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#401960",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#401960",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="outlined-primary"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 8`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#401960",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {},
+        ]
+      }
+      testID="undefined-loading-indicator"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-primary"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-primary"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-primary"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 9`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#bfc1c5",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#bfc1c5",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="outlined-primary"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 10`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#ffffff",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="outlined-white"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 11`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#ffffff",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {},
+        ]
+      }
+      testID="undefined-loading-indicator"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-white"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-white"
+        />
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          size={12}
+          style={
+            [
+              {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 8,
+                "height": 12,
+                "marginHorizontal": 8,
+                "width": 12,
+              },
+              {},
+            ]
+          }
+          themeVariant="outlined-white"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 12`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
           "alignItems": "center",
           "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#401960",
+          "borderColor": "#bfc1c5",
           "borderRadius": 32,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -589,7 +1637,7 @@ exports[`Button renders correctly 4`] = `
   >
     <Text
       allowFontScaling={false}
-      disabled={false}
+      disabled={true}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -603,7 +1651,7 @@ exports[`Button renders correctly 4`] = `
           },
           [
             {
-              "color": "#401960",
+              "color": "#bfc1c5",
               "flexShrink": 1,
               "textAlign": "center",
             },
@@ -611,7 +1659,7 @@ exports[`Button renders correctly 4`] = `
           ],
         ]
       }
-      themeButtonVariant="outlined-primary"
+      themeButtonVariant="outlined-white"
       themeIntent="body"
       themeLevel="h5"
       themeTypeface="neutral"
@@ -642,7 +1690,7 @@ exports[`Button renders correctly 4`] = `
 </View>
 `;
 
-exports[`Button renders correctly 5`] = `
+exports[`Button renders correctly 13`] = `
 <View
   style={
     {
@@ -653,7 +1701,7 @@ exports[`Button renders correctly 5`] = `
   <View
     accessibilityState={
       {
-        "disabled": true,
+        "disabled": false,
       }
     }
     accessibilityValue={
@@ -677,15 +1725,117 @@ exports[`Button renders correctly 5`] = `
       [
         {
           "alignItems": "center",
-          "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#401960",
-          "borderRadius": 32,
-          "borderWidth": 2,
+          "borderRadius": 4,
+          "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
           "justifyContent": "center",
-          "padding": 14,
+          "padding": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "letterSpacing": 0.24,
+            "lineHeight": 24,
+          },
+          [
+            {
+              "color": "#401960",
+              "flexShrink": 1,
+              "lineHeight": 22,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="text-primary"
+      themeIntent="body"
+      themeIsPressed={false}
+      themeTypeface="neutral"
+      themeVariant="regular-bold"
+    >
+      A button
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Button renders correctly 14`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ece8ef",
+          "borderRadius": 4,
+          "borderWidth": 0,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 12,
         },
         undefined,
       ]
@@ -723,7 +1873,7 @@ exports[`Button renders correctly 5`] = `
           style={
             [
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -732,7 +1882,7 @@ exports[`Button renders correctly 5`] = `
               {},
             ]
           }
-          themeVariant="outlined-primary"
+          themeVariant="text-primary"
         />
       </View>
       <View
@@ -753,7 +1903,7 @@ exports[`Button renders correctly 5`] = `
           style={
             [
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -762,7 +1912,7 @@ exports[`Button renders correctly 5`] = `
               {},
             ]
           }
-          themeVariant="outlined-primary"
+          themeVariant="text-primary"
         />
       </View>
       <View
@@ -783,7 +1933,7 @@ exports[`Button renders correctly 5`] = `
           style={
             [
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#4d6265",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -792,7 +1942,7 @@ exports[`Button renders correctly 5`] = `
               {},
             ]
           }
-          themeVariant="outlined-primary"
+          themeVariant="text-primary"
         />
       </View>
     </View>
@@ -820,7 +1970,7 @@ exports[`Button renders correctly 5`] = `
 </View>
 `;
 
-exports[`Button renders correctly 6`] = `
+exports[`Button renders correctly 15`] = `
 <View
   style={
     {
@@ -855,15 +2005,13 @@ exports[`Button renders correctly 6`] = `
       [
         {
           "alignItems": "center",
-          "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#bfc1c5",
-          "borderRadius": 32,
-          "borderWidth": 2,
+          "borderRadius": 4,
+          "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
           "justifyContent": "center",
-          "padding": 14,
+          "padding": 12,
         },
         undefined,
       ]
@@ -879,24 +2027,26 @@ exports[`Button renders correctly 6`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 18,
+            "fontSize": 16,
             "letterSpacing": 0.24,
-            "lineHeight": 28,
+            "lineHeight": 24,
           },
           [
             {
               "color": "#bfc1c5",
               "flexShrink": 1,
+              "lineHeight": 22,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeButtonVariant="outlined-primary"
+      themeButtonVariant="text-primary"
       themeIntent="body"
-      themeLevel="h5"
+      themeIsPressed={false}
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       A button
     </Text>
@@ -924,7 +2074,7 @@ exports[`Button renders correctly 6`] = `
 </View>
 `;
 
-exports[`Button renders correctly 7`] = `
+exports[`Button renders correctly 16`] = `
 <View
   style={
     {
@@ -987,7 +2137,7 @@ exports[`Button renders correctly 7`] = `
           },
           [
             {
-              "color": "#401960",
+              "color": "#4d6265",
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
@@ -996,7 +2146,7 @@ exports[`Button renders correctly 7`] = `
           ],
         ]
       }
-      themeButtonVariant="text-primary"
+      themeButtonVariant="text-secondary"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -1028,7 +2178,7 @@ exports[`Button renders correctly 7`] = `
 </View>
 `;
 
-exports[`Button renders correctly 8`] = `
+exports[`Button renders correctly 17`] = `
 <View
   style={
     {
@@ -1107,7 +2257,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1116,7 +2266,7 @@ exports[`Button renders correctly 8`] = `
               {},
             ]
           }
-          themeVariant="text-primary"
+          themeVariant="text-secondary"
         />
       </View>
       <View
@@ -1137,7 +2287,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1146,7 +2296,7 @@ exports[`Button renders correctly 8`] = `
               {},
             ]
           }
-          themeVariant="text-primary"
+          themeVariant="text-secondary"
         />
       </View>
       <View
@@ -1167,7 +2317,7 @@ exports[`Button renders correctly 8`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1176,7 +2326,7 @@ exports[`Button renders correctly 8`] = `
               {},
             ]
           }
-          themeVariant="text-primary"
+          themeVariant="text-secondary"
         />
       </View>
     </View>
@@ -1204,7 +2354,7 @@ exports[`Button renders correctly 8`] = `
 </View>
 `;
 
-exports[`Button renders correctly 9`] = `
+exports[`Button renders correctly 18`] = `
 <View
   style={
     {
@@ -1276,7 +2426,7 @@ exports[`Button renders correctly 9`] = `
           ],
         ]
       }
-      themeButtonVariant="text-primary"
+      themeButtonVariant="text-secondary"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -1308,7 +2458,7 @@ exports[`Button renders correctly 9`] = `
 </View>
 `;
 
-exports[`Button renders correctly 10`] = `
+exports[`Button renders correctly 19`] = `
 <View
   style={
     {
@@ -1371,7 +2521,7 @@ exports[`Button renders correctly 10`] = `
           },
           [
             {
-              "color": "#4d6265",
+              "color": "#cb300a",
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
@@ -1380,7 +2530,7 @@ exports[`Button renders correctly 10`] = `
           ],
         ]
       }
-      themeButtonVariant="text-secondary"
+      themeButtonVariant="text-danger"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -1412,7 +2562,7 @@ exports[`Button renders correctly 10`] = `
 </View>
 `;
 
-exports[`Button renders correctly 11`] = `
+exports[`Button renders correctly 20`] = `
 <View
   style={
     {
@@ -1491,7 +2641,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1500,7 +2650,7 @@ exports[`Button renders correctly 11`] = `
               {},
             ]
           }
-          themeVariant="text-secondary"
+          themeVariant="text-danger"
         />
       </View>
       <View
@@ -1521,7 +2671,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1530,7 +2680,7 @@ exports[`Button renders correctly 11`] = `
               {},
             ]
           }
-          themeVariant="text-secondary"
+          themeVariant="text-danger"
         />
       </View>
       <View
@@ -1551,7 +2701,7 @@ exports[`Button renders correctly 11`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1560,7 +2710,7 @@ exports[`Button renders correctly 11`] = `
               {},
             ]
           }
-          themeVariant="text-secondary"
+          themeVariant="text-danger"
         />
       </View>
     </View>
@@ -1588,7 +2738,7 @@ exports[`Button renders correctly 11`] = `
 </View>
 `;
 
-exports[`Button renders correctly 12`] = `
+exports[`Button renders correctly 21`] = `
 <View
   style={
     {
@@ -1660,7 +2810,7 @@ exports[`Button renders correctly 12`] = `
           ],
         ]
       }
-      themeButtonVariant="text-secondary"
+      themeButtonVariant="text-danger"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -1692,7 +2842,7 @@ exports[`Button renders correctly 12`] = `
 </View>
 `;
 
-exports[`Button renders correctly 13`] = `
+exports[`Button renders correctly 22`] = `
 <View
   style={
     {
@@ -1755,7 +2905,7 @@ exports[`Button renders correctly 13`] = `
           },
           [
             {
-              "color": "#cb300a",
+              "color": "#ffffff",
               "flexShrink": 1,
               "lineHeight": 22,
               "textAlign": "center",
@@ -1764,7 +2914,7 @@ exports[`Button renders correctly 13`] = `
           ],
         ]
       }
-      themeButtonVariant="text-danger"
+      themeButtonVariant="text-white"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -1796,7 +2946,7 @@ exports[`Button renders correctly 13`] = `
 </View>
 `;
 
-exports[`Button renders correctly 14`] = `
+exports[`Button renders correctly 23`] = `
 <View
   style={
     {
@@ -1831,7 +2981,7 @@ exports[`Button renders correctly 14`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": "transparent",
           "borderRadius": 4,
           "borderWidth": 0,
           "flexDirection": "row",
@@ -1875,7 +3025,7 @@ exports[`Button renders correctly 14`] = `
           style={
             [
               {
-                "backgroundColor": "#cb300a",
+                "backgroundColor": "#ffffff",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1884,7 +3034,7 @@ exports[`Button renders correctly 14`] = `
               {},
             ]
           }
-          themeVariant="text-danger"
+          themeVariant="text-white"
         />
       </View>
       <View
@@ -1905,7 +3055,7 @@ exports[`Button renders correctly 14`] = `
           style={
             [
               {
-                "backgroundColor": "#cb300a",
+                "backgroundColor": "#ffffff",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1914,7 +3064,7 @@ exports[`Button renders correctly 14`] = `
               {},
             ]
           }
-          themeVariant="text-danger"
+          themeVariant="text-white"
         />
       </View>
       <View
@@ -1935,7 +3085,7 @@ exports[`Button renders correctly 14`] = `
           style={
             [
               {
-                "backgroundColor": "#cb300a",
+                "backgroundColor": "#ffffff",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -1944,7 +3094,7 @@ exports[`Button renders correctly 14`] = `
               {},
             ]
           }
-          themeVariant="text-danger"
+          themeVariant="text-white"
         />
       </View>
     </View>
@@ -1972,7 +3122,7 @@ exports[`Button renders correctly 14`] = `
 </View>
 `;
 
-exports[`Button renders correctly 15`] = `
+exports[`Button renders correctly 24`] = `
 <View
   style={
     {
@@ -2044,7 +3194,7 @@ exports[`Button renders correctly 15`] = `
           ],
         ]
       }
-      themeButtonVariant="text-danger"
+      themeButtonVariant="text-white"
       themeIntent="body"
       themeIsPressed={false}
       themeTypeface="neutral"
@@ -2076,7 +3226,7 @@ exports[`Button renders correctly 15`] = `
 </View>
 `;
 
-exports[`Button renders correctly 16`] = `
+exports[`Button renders correctly 25`] = `
 <View
   style={
     {
@@ -2180,7 +3330,7 @@ exports[`Button renders correctly 16`] = `
 </View>
 `;
 
-exports[`Button renders correctly 17`] = `
+exports[`Button renders correctly 26`] = `
 <View
   style={
     {
@@ -2259,7 +3409,7 @@ exports[`Button renders correctly 17`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -2289,7 +3439,7 @@ exports[`Button renders correctly 17`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -2319,7 +3469,7 @@ exports[`Button renders correctly 17`] = `
           style={
             [
               {
-                "backgroundColor": "#4d6265",
+                "backgroundColor": "#cb300a",
                 "borderRadius": 8,
                 "height": 12,
                 "marginHorizontal": 8,
@@ -2356,7 +3506,7 @@ exports[`Button renders correctly 17`] = `
 </View>
 `;
 
-exports[`Button renders correctly 18`] = `
+exports[`Button renders correctly 27`] = `
 <View
   style={
     {
@@ -2460,7 +3610,7 @@ exports[`Button renders correctly 18`] = `
 </View>
 `;
 
-exports[`Button renders correctly 19`] = `
+exports[`Button renders correctly 28`] = `
 <View
   style={
     {
@@ -2636,7 +3786,7 @@ exports[`Button renders correctly 19`] = `
 </View>
 `;
 
-exports[`Button renders correctly 20`] = `
+exports[`Button renders correctly 29`] = `
 <View
   style={
     {
@@ -2740,7 +3890,7 @@ exports[`Button renders correctly 20`] = `
 </View>
 `;
 
-exports[`Button renders correctly 21`] = `
+exports[`Button renders correctly 30`] = `
 <View
   style={
     {
@@ -2797,9 +3947,9 @@ exports[`Button renders correctly 21`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           [
@@ -2815,7 +3965,7 @@ exports[`Button renders correctly 21`] = `
       themeButtonVariant="filled-primary"
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="small-bold"
     >
       A button
     </Text>
@@ -2843,7 +3993,7 @@ exports[`Button renders correctly 21`] = `
 </View>
 `;
 
-exports[`Button renders correctly 22`] = `
+exports[`Button renders correctly 31`] = `
 <View
   style={
     {
@@ -3020,7 +4170,7 @@ exports[`Button renders correctly 22`] = `
 </View>
 `;
 
-exports[`Button renders correctly 23`] = `
+exports[`Button renders correctly 32`] = `
 <View
   style={
     {
@@ -3077,9 +4227,9 @@ exports[`Button renders correctly 23`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           [
@@ -3095,7 +4245,7 @@ exports[`Button renders correctly 23`] = `
       themeButtonVariant="filled-primary"
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="small-bold"
     >
       A button
     </Text>
@@ -3123,7 +4273,7 @@ exports[`Button renders correctly 23`] = `
 </View>
 `;
 
-exports[`Button renders correctly 24`] = `
+exports[`Button renders correctly 33`] = `
 <View
   style={
     {
@@ -3182,9 +4332,9 @@ exports[`Button renders correctly 24`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           [
@@ -3200,7 +4350,7 @@ exports[`Button renders correctly 24`] = `
       themeButtonVariant="outlined-primary"
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="small-bold"
     >
       A button
     </Text>
@@ -3228,7 +4378,7 @@ exports[`Button renders correctly 24`] = `
 </View>
 `;
 
-exports[`Button renders correctly 25`] = `
+exports[`Button renders correctly 34`] = `
 <View
   style={
     {
@@ -3407,7 +4557,7 @@ exports[`Button renders correctly 25`] = `
 </View>
 `;
 
-exports[`Button renders correctly 26`] = `
+exports[`Button renders correctly 35`] = `
 <View
   style={
     {
@@ -3466,9 +4616,9 @@ exports[`Button renders correctly 26`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           [
@@ -3484,7 +4634,7 @@ exports[`Button renders correctly 26`] = `
       themeButtonVariant="outlined-primary"
       themeIntent="body"
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="small-bold"
     >
       A button
     </Text>