@hero-design/rn 7.24.0 → 7.25.0

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

@@ -3,7 +3,9 @@
 exports[`StyledButtonContainer has basic-transparent style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -12,21 +14,18 @@ exports[`StyledButtonContainer has basic-transparent style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "#ffffff",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "opacity": 1,
-        "padding": 14,
-        "width": "100%",
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "borderColor": "#ffffff",
+      "borderRadius": 32,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 14,
+      "width": "100%",
+    }
   }
 >
   <Text>
@@ -38,7 +37,9 @@ exports[`StyledButtonContainer has basic-transparent style 1`] = `
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -47,18 +48,16 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#de350b",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#de350b",
+      "borderRadius": 32,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -70,7 +69,9 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
 exports[`StyledButtonContainer has filled-primary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -79,18 +80,16 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#001f23",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#401960",
+      "borderRadius": 32,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -102,7 +101,9 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
 exports[`StyledButtonContainer has filled-secondary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -111,18 +112,16 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#401960",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#795e90",
+      "borderRadius": 32,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -134,7 +133,9 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
 exports[`StyledButtonContainer has outlined-danger style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -143,20 +144,18 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#de350b",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "transparent",
+      "borderColor": "#de350b",
+      "borderRadius": 32,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 14,
+    }
   }
 >
   <Text>
@@ -168,7 +167,9 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
 exports[`StyledButtonContainer has outlined-primary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -177,20 +178,18 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#001f23",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "transparent",
+      "borderColor": "#401960",
+      "borderRadius": 32,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 14,
+    }
   }
 >
   <Text>
@@ -202,7 +201,9 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
 exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -211,87 +212,18 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#401960",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer has pressed with the correct variant basic-transparent style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "#ffffff",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "opacity": 0.6,
-        "padding": 14,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer has pressed with the correct variant filled-danger style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#de350b",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "transparent",
+      "borderColor": "#795e90",
+      "borderRadius": 32,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 14,
+    }
   }
 >
   <Text>
@@ -300,10 +232,12 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-dange
 </View>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant filled-primary style 1`] = `
+exports[`StyledButtonContainer has text-danger style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -312,18 +246,14 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-prima
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#4d6265",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "borderWidth": 0,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -332,10 +262,12 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-prima
 </View>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant filled-secondary style 1`] = `
+exports[`StyledButtonContainer has text-primary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -344,18 +276,14 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-secon
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#401960",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "borderWidth": 0,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -364,10 +292,12 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-secon
 </View>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant outlined-danger style 1`] = `
+exports[`StyledButtonContainer has text-secondary style 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -376,20 +306,14 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-dan
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#de350b",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "borderWidth": 0,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -398,10 +322,12 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-dan
 </View>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant outlined-primary style 1`] = `
+exports[`StyledButtonContainer renders disabled correctly 1`] = `
 <View
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -410,20 +336,16 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-pri
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#4d6265",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "alignSelf": "stretch",
+      "backgroundColor": "#bfc1c5",
+      "borderRadius": 32,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <Text>
@@ -432,732 +354,78 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-pri
 </View>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant outlined-secondary style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+exports[`StyledButtonIcon has basic-transparent style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#401960",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
+        "color": "#001f23",
+        "fontSize": 24,
       },
-      undefined,
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
     ]
   }
->
-  <Text>
-    Title
-  </Text>
-</View>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant text-danger style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+exports[`StyledButtonIcon has filled-danger style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
+        "color": "#001f23",
+        "fontSize": 24,
       },
-      undefined,
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
     ]
   }
->
-  <Text>
-    Title
-  </Text>
-</View>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant text-primary style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+exports[`StyledButtonIcon has filled-primary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
+        "color": "#001f23",
+        "fontSize": 24,
       },
-      undefined,
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
     ]
   }
->
-  <Text>
-    Title
-  </Text>
-</View>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonContainer has pressed with the correct variant text-secondary style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer has text-danger style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer has text-primary style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer has text-secondary style 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonContainer renders disabled correctly 1`] = `
-<View
-  accessibilityState={
-    Object {
-      "disabled": true,
-    }
-  }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "stretch",
-        "backgroundColor": "#bfc1c5",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
-</View>
-`;
-
-exports[`StyledButtonIcon has basic-transparent style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has filled-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has filled-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has filled-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has outlined-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has outlined-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has outlined-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant basic-transparent style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant filled-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant filled-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant filled-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant outlined-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant outlined-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#4d6265",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant outlined-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 18,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant text-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant text-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#4d6265",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has pressed with the correct variant text-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has text-danger style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has text-primary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon has text-secondary style 1`] = `
-<HeroIcon
-  name="bell"
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIcon renders disabled correctly 1`] = `
-<HeroIcon
-  name="bell"
+exports[`StyledButtonIcon has filled-secondary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
@@ -1167,381 +435,214 @@ exports[`StyledButtonIcon renders disabled correctly 1`] = `
       Array [
         Object {
           "color": "#ffffff",
-          "fontSize": 20,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
-exports[`StyledButtonIconWrapper has left style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "paddingRight": 12,
-      },
-      undefined,
-    ]
-  }
-  themePosition="left"
-/>
-`;
-
-exports[`StyledButtonIconWrapper has right style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "paddingLeft": 12,
-      },
-      undefined,
-    ]
-  }
-  themePosition="right"
-/>
-`;
-
-exports[`StyledButtonText has basic-transparent style 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "lineHeight": 24,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="basic-transparent"
->
-  Example
-</Text>
-`;
-
-exports[`StyledButtonText has filled-danger style 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "lineHeight": 24,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="filled-danger"
->
-  Example
-</Text>
-`;
-
-exports[`StyledButtonText has filled-primary style 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "lineHeight": 24,
-          "textAlign": "center",
+          "fontSize": 20,
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="filled-primary"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has filled-secondary style 1`] = `
-<Text
+exports[`StyledButtonIcon has outlined-danger style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
+          "color": "#de350b",
           "fontSize": 18,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="filled-secondary"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has outlined-danger style 1`] = `
-<Text
+exports[`StyledButtonIcon has outlined-primary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#de350b",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
+          "color": "#401960",
           "fontSize": 18,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="outlined-danger"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has outlined-primary style 1`] = `
-<Text
+exports[`StyledButtonIcon has outlined-secondary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#001f23",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
+          "color": "#795e90",
           "fontSize": 18,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="outlined-primary"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has outlined-secondary style 1`] = `
-<Text
+exports[`StyledButtonIcon has text-danger style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#401960",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
+          "color": "#de350b",
+          "fontSize": 16,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="outlined-secondary"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant basic-transparent style 1`] = `
-<Text
-  pressed={true}
+exports[`StyledButtonIcon has text-primary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
+          "color": "#401960",
+          "fontSize": 16,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="basic-transparent"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant filled-danger style 1`] = `
-<Text
-  pressed={true}
+exports[`StyledButtonIcon has text-secondary style 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
-          "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
+          "color": "#795e90",
+          "fontSize": 16,
           "lineHeight": 24,
-          "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="filled-danger"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant filled-primary style 1`] = `
-<Text
-  pressed={true}
+exports[`StyledButtonIcon renders disabled correctly 1`] = `
+<HeroIcon
+  name="bell"
   style={
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 24,
       },
       Array [
         Object {
           "color": "#ffffff",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "lineHeight": 24,
-          "textAlign": "center",
+          "fontSize": 20,
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="filled-primary"
->
-  Example
-</Text>
+  themeIntent="text"
+  themeSize="medium"
+/>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant filled-secondary style 1`] = `
+exports[`StyledButtonIconWrapper has left style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "paddingRight": 12,
+      },
+      undefined,
+    ]
+  }
+  themePosition="left"
+/>
+`;
+
+exports[`StyledButtonIconWrapper has right style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "paddingLeft": 12,
+      },
+      undefined,
+    ]
+  }
+  themePosition="right"
+/>
+`;
+
+exports[`StyledButtonText has basic-transparent style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1567,15 +668,14 @@ exports[`StyledButtonText has pressed with the correct variant filled-secondary
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="filled-secondary"
+  themeVariant="basic-transparent"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant outlined-danger style 1`] = `
+exports[`StyledButtonText has filled-danger style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1587,7 +687,7 @@ exports[`StyledButtonText has pressed with the correct variant outlined-danger s
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#ffffff",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 18,
@@ -1601,15 +701,14 @@ exports[`StyledButtonText has pressed with the correct variant outlined-danger s
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="outlined-danger"
+  themeVariant="filled-danger"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant outlined-primary style 1`] = `
+exports[`StyledButtonText has filled-primary style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1621,7 +720,7 @@ exports[`StyledButtonText has pressed with the correct variant outlined-primary
       },
       Array [
         Object {
-          "color": "#4d6265",
+          "color": "#ffffff",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 18,
@@ -1635,15 +734,14 @@ exports[`StyledButtonText has pressed with the correct variant outlined-primary
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="outlined-primary"
+  themeVariant="filled-primary"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant outlined-secondary style 1`] = `
+exports[`StyledButtonText has filled-secondary style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1655,7 +753,7 @@ exports[`StyledButtonText has pressed with the correct variant outlined-secondar
       },
       Array [
         Object {
-          "color": "#401960",
+          "color": "#ffffff",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 18,
@@ -1669,15 +767,14 @@ exports[`StyledButtonText has pressed with the correct variant outlined-secondar
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="outlined-secondary"
+  themeVariant="filled-secondary"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant text-danger style 1`] = `
+exports[`StyledButtonText has outlined-danger style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1692,7 +789,7 @@ exports[`StyledButtonText has pressed with the correct variant text-danger style
           "color": "#de350b",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
+          "fontSize": 18,
           "lineHeight": 24,
           "textAlign": "center",
         },
@@ -1703,15 +800,14 @@ exports[`StyledButtonText has pressed with the correct variant text-danger style
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="text-danger"
+  themeVariant="outlined-danger"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant text-primary style 1`] = `
+exports[`StyledButtonText has outlined-primary style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1723,10 +819,10 @@ exports[`StyledButtonText has pressed with the correct variant text-primary styl
       },
       Array [
         Object {
-          "color": "#4d6265",
+          "color": "#401960",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
+          "fontSize": 18,
           "lineHeight": 24,
           "textAlign": "center",
         },
@@ -1737,15 +833,14 @@ exports[`StyledButtonText has pressed with the correct variant text-primary styl
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="text-primary"
+  themeVariant="outlined-primary"
 >
   Example
 </Text>
 `;
 
-exports[`StyledButtonText has pressed with the correct variant text-secondary style 1`] = `
+exports[`StyledButtonText has outlined-secondary style 1`] = `
 <Text
-  pressed={true}
   style={
     Array [
       Object {
@@ -1757,10 +852,10 @@ exports[`StyledButtonText has pressed with the correct variant text-secondary st
       },
       Array [
         Object {
-          "color": "#401960",
+          "color": "#795e90",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
+          "fontSize": 18,
           "lineHeight": 24,
           "textAlign": "center",
         },
@@ -1771,7 +866,7 @@ exports[`StyledButtonText has pressed with the correct variant text-secondary st
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
-  themeVariant="text-secondary"
+  themeVariant="outlined-secondary"
 >
   Example
 </Text>
@@ -1823,7 +918,7 @@ exports[`StyledButtonText has text-primary style 1`] = `
       },
       Array [
         Object {
-          "color": "#001f23",
+          "color": "#401960",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
@@ -1856,7 +951,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
       },
       Array [
         Object {
-          "color": "#401960",
+          "color": "#795e90",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,