@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -2,930 +2,1886 @@
 
 exports[`StyledButtonContainer has 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,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#cb300a",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`StyledButtonContainer has filled-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",
-        "alignSelf": "stretch",
-        "backgroundColor": "#401960",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`StyledButtonContainer has filled-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",
-        "alignSelf": "stretch",
-        "backgroundColor": "#795e90",
-        "borderRadius": 32,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#795e90",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`StyledButtonContainer has outlined-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": "transparent",
-        "borderColor": "#de350b",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#cb300a",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`StyledButtonContainer has outlined-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",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#401960",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    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>
+      Title
+    </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[`StyledButtonContainer has outlined-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",
-        "alignSelf": "stretch",
-        "backgroundColor": "transparent",
-        "borderColor": "#795e90",
-        "borderRadius": 32,
-        "borderWidth": 2,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 14,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#795e90",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`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",
-        "backgroundColor": "transparent",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 12,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "borderWidth": 0,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`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",
-        "backgroundColor": "transparent",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 12,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "borderWidth": 0,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`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",
-        "backgroundColor": "transparent",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "padding": 12,
-      },
-      undefined,
-    ]
-  }
->
-  <Text>
-    Title
-  </Text>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "borderWidth": 0,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </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[`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>
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    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>
+      Title
+    </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[`StyledButtonIcon has filled-danger style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has filled-primary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has filled-secondary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has outlined-danger style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 18,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has outlined-primary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 18,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#401960",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has outlined-secondary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#795e90",
-          "fontSize": 18,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#795e90",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has text-danger style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 16,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has text-primary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "fontSize": 16,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#401960",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon has text-secondary style 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#795e90",
-          "fontSize": 16,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#795e90",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIcon renders disabled correctly 1`] = `
-<HeroIcon
-  name="bell"
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontSize": 20,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledButtonIconWrapper has left style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "paddingRight": 12,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themePosition="left"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+    themePosition="left"
+  />
+  <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[`StyledButtonIconWrapper has right style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "paddingLeft": 12,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themePosition="right"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "paddingLeft": 12,
+        },
+        undefined,
+      ]
+    }
+    themePosition="right"
+  />
+  <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[`StyledButtonText has filled-danger style 1`] = `
-<Text
-  allowFontScaling={false}
-  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,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="filled-danger"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="filled-danger"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has filled-primary style 1`] = `
-<Text
-  allowFontScaling={false}
-  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,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="filled-primary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="filled-primary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has filled-secondary style 1`] = `
-<Text
-  allowFontScaling={false}
-  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,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="filled-secondary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="filled-secondary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has outlined-danger style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="outlined-danger"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="outlined-danger"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has outlined-primary style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="outlined-primary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#401960",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="outlined-primary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has outlined-secondary style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#795e90",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="outlined-secondary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#795e90",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="outlined-secondary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has text-danger style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="text-danger"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="text-danger"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has text-primary style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#401960",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="text-primary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#401960",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="text-primary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has text-secondary style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#795e90",
-          "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="text-secondary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#795e90",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="text-secondary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText renders disabled correctly 1`] = `
-<Text
-  allowFontScaling={false}
-  disabled={true}
-  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,
-          "textAlign": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
-  themeVariant="filled-primary"
->
-  Example
-</Text>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    disabled={true}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="filled-primary"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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>
 `;