@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,1147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip does not render icon when variant is outlined 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "transparent",
+      "borderColor": "#001f23",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip does not render icon when variant is outlined 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#001f23",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-checkmark"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {
+            "color": "#ffffff",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly when selected is false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "transparent",
+      "borderColor": "#001f23",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly when selected is true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#001f23",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-checkmark"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {
+            "color": "#ffffff",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with custom icon 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "elevation": 3,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="charging-station-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {},
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-charging-station-outlined"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with custom icon 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ece8ef",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "elevation": 3,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="charging-station-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {},
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-charging-station-outlined"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with default icon 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "transparent",
+      "borderColor": "#001f23",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with default icon 2`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#001f23",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-checkmark"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {
+            "color": "#ffffff",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with variant filled and selected false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "elevation": 3,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    }
+  }
+  testID="chip"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with variant filled and selected true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ece8ef",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "elevation": 3,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {},
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-checkmark"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with variant outlined and selected false 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "transparent",
+      "borderColor": "#001f23",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {},
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={false}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;
+
+exports[`Chip renders correctly with variant outlined and selected true 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#001f23",
+      "borderColor": "transparent",
+      "borderRadius": 999,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+  testID="chip"
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="chip-icon-checkmark"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        [
+          {
+            "color": "#ffffff",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeSelected={true}
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Cover my bills
+  </Text>
+</View>
+`;