@hero-design/rn 8.69.0 → 8.71.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chip does not render icon when variant is outlined 1`] = `
+exports[`Chip does not render selected icon when showSelectedIcon is false 1`] = `
 <View
   style={
     {
@@ -28,7 +28,7 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={true}
+    focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -40,18 +40,18 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
+        "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
       }
     }
-    testID="chip"
   >
     <Text
       allowFontScaling={false}
@@ -60,22 +60,18 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
-      Cover my bills
+      Chip
     </Text>
   </View>
   <View
@@ -101,7 +97,7 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
 </View>
 `;
 
-exports[`Chip does not render icon when variant is outlined 2`] = `
+exports[`Chip renders correctly when selected is false 1`] = `
 <View
   style={
     {
@@ -129,7 +125,7 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={true}
+    focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -141,53 +137,19 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "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={
@@ -195,22 +157,16 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -238,7 +194,7 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
 </View>
 `;
 
-exports[`Chip renders correctly when selected is false 1`] = `
+exports[`Chip renders correctly when selected is true 1`] = `
 <View
   style={
     {
@@ -278,12 +234,13 @@ exports[`Chip renders correctly when selected is false 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
+        "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -297,23 +254,46 @@ exports[`Chip renders correctly when selected is false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
+    <View
+      marginLeft="small"
+      style={
+        [
+          {
+            "marginLeft": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="cancel"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="selected-chip-icon-cancel"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
   </View>
   <View
     pointerEvents="box-none"
@@ -338,7 +318,7 @@ exports[`Chip renders correctly when selected is false 1`] = `
 </View>
 `;
 
-exports[`Chip renders correctly when selected is true 1`] = `
+exports[`Chip renders correctly with custom icon 1`] = `
 <View
   style={
     {
@@ -366,7 +346,7 @@ exports[`Chip renders correctly when selected is true 1`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={false}
+    focusable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -378,48 +358,50 @@ exports[`Chip renders correctly when selected is true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
       }
     }
+    testID="chip"
   >
     <View
+      marginRight="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginRight": 8,
+          },
+          undefined,
         ]
       }
     >
       <HeroIcon
-        name="checkmark"
+        name="charging-station-outlined"
         style={
           [
             {
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
-        testID="chip-icon-checkmark"
+        testID="chip-icon-charging-station-outlined"
         themeIntent="text"
         themeSize="xsmall"
       />
@@ -431,22 +413,16 @@ exports[`Chip renders correctly when selected is true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -474,7 +450,7 @@ exports[`Chip renders correctly when selected is true 1`] = `
 </View>
 `;
 
-exports[`Chip renders correctly with custom icon 1`] = `
+exports[`Chip renders correctly with custom icon 2`] = `
 <View
   style={
     {
@@ -514,13 +490,13 @@ exports[`Chip renders correctly with custom icon 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -536,15 +512,13 @@ exports[`Chip renders correctly with custom icon 1`] = `
     testID="chip"
   >
     <View
+      marginRight="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginRight": 8,
+          },
+          undefined,
         ]
       }
     >
@@ -556,10 +530,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {},
-              undefined,
-            ],
+            undefined,
           ]
         }
         testID="chip-icon-charging-station-outlined"
@@ -574,20 +545,16 @@ exports[`Chip renders correctly with custom icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -615,7 +582,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
 </View>
 `;
 
-exports[`Chip renders correctly with custom icon 2`] = `
+exports[`Chip renders correctly with default icon 1`] = `
 <View
   style={
     {
@@ -655,59 +622,20 @@ exports[`Chip renders correctly with custom icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
-        "borderColor": "transparent",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
-        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "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={
@@ -715,20 +643,16 @@ exports[`Chip renders correctly with custom icon 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -756,7 +680,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
 </View>
 `;
 
-exports[`Chip renders correctly with default icon 1`] = `
+exports[`Chip renders correctly with default icon 2`] = `
 <View
   style={
     {
@@ -796,12 +720,13 @@ exports[`Chip renders correctly with default icon 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
+        "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -816,23 +741,46 @@ exports[`Chip renders correctly with default icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
+    <View
+      marginLeft="small"
+      style={
+        [
+          {
+            "marginLeft": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="cancel"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="selected-chip-icon-cancel"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
   </View>
   <View
     pointerEvents="box-none"
@@ -857,7 +805,7 @@ exports[`Chip renders correctly with default icon 1`] = `
 </View>
 `;
 
-exports[`Chip renders correctly with default icon 2`] = `
+exports[`Chip renders correctly with variant compact and selected false 1`] = `
 <View
   style={
     {
@@ -885,7 +833,7 @@ exports[`Chip renders correctly with default icon 2`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={true}
+    focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -897,53 +845,132 @@ exports[`Chip renders correctly with default icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
-        "paddingHorizontal": 12,
-        "paddingVertical": 8,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
       }
     }
     testID="chip"
   >
-    <View
+    <Text
+      allowFontScaling={false}
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
         ]
       }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
     >
-      <HeroIcon
-        name="checkmark"
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontSize": 16,
-            },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="chip-icon-checkmark"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-    </View>
+      Cover my bills
+    </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[`Chip renders correctly with variant compact and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 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": "#f6f6f7",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": undefined,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
     <Text
       allowFontScaling={false}
       style={
@@ -951,22 +978,16 @@ exports[`Chip renders correctly with default icon 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1037,10 +1058,10 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1062,20 +1083,16 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1146,10 +1163,10 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1164,38 +1181,6 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
     }
     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={
@@ -1203,20 +1188,16 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1284,12 +1265,13 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
-        "borderColor": "#001f23",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1304,20 +1286,16 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1385,12 +1363,13 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1398,66 +1377,53 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
     }
     testID="chip"
   >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
     <View
+      marginLeft="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginLeft": 8,
+          },
+          undefined,
         ]
       }
     >
       <HeroIcon
-        name="checkmark"
+        name="cancel"
         style={
           [
             {
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
-        testID="chip-icon-checkmark"
+        testID="selected-chip-icon-cancel"
         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>
   <View
     pointerEvents="box-none"