@hero-design/rn 8.98.0 → 8.99.0

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -153,191 +153,189 @@ exports[`OptionList render isLoading correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
-              style={
-                [
-                  {
-                    "flex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                A1
-              </Text>
-            </View>
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "marginLeft": 8,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <HeroIcon
-                name="checkmark"
-                style={
-                  [
-                    {
-                      "color": "#401960",
-                      "fontSize": 20,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="selected-icon-A1"
-                themeIntent="primary"
-                themeSize="small"
-              />
-            </View>
+              A1
+            </Text>
           </View>
           <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
             style={
               [
                 {
-                  "marginTop": 12,
+                  "marginLeft": 8,
                 },
                 undefined,
               ]
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
+          >
+            <HeroIcon
+              name="checkmark"
+              style={
+                [
                   {
-                    "text": "B1",
-                    "value": "b1",
+                    "color": "#401960",
+                    "fontSize": 20,
                   },
                   {
-                    "text": "B2",
-                    "value": "b2",
+                    "marginRight": 12,
                   },
-                ],
+                ]
               }
-            }
-          />
+              testID="selected-icon-A1"
+              themeIntent="primary"
+              themeSize="small"
+            />
+          </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -419,289 +417,285 @@ exports[`OptionList render isLoading correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B1
-              </Text>
-            </View>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B2
-              </Text>
-            </View>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -760,7 +754,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "flexDirection": "row",
                         "marginBottom": 8,
                       },
-                      {},
+                      undefined,
                     ]
                   }
                   themePosition="top"
@@ -777,7 +771,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.9,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -796,7 +790,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.675,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -812,7 +806,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "flexDirection": "row",
                         "marginBottom": 0,
                       },
-                      {},
+                      undefined,
                     ]
                   }
                   themePosition="bottom"
@@ -829,7 +823,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.45,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -848,7 +842,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.225,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -1027,191 +1021,189 @@ exports[`OptionList renders correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
-              style={
-                [
-                  {
-                    "flex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                A1
-              </Text>
-            </View>
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "marginLeft": 8,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <HeroIcon
-                name="checkmark"
-                style={
-                  [
-                    {
-                      "color": "#401960",
-                      "fontSize": 20,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="selected-icon-A1"
-                themeIntent="primary"
-                themeSize="small"
-              />
-            </View>
+              A1
+            </Text>
           </View>
           <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
             style={
               [
                 {
-                  "marginTop": 12,
+                  "marginLeft": 8,
                 },
                 undefined,
               ]
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
+          >
+            <HeroIcon
+              name="checkmark"
+              style={
+                [
                   {
-                    "text": "B1",
-                    "value": "b1",
+                    "color": "#401960",
+                    "fontSize": 20,
                   },
                   {
-                    "text": "B2",
-                    "value": "b2",
+                    "marginRight": 12,
                   },
-                ],
+                ]
               }
-            }
-          />
+              testID="selected-icon-A1"
+              themeIntent="primary"
+              themeSize="small"
+            />
+          </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -1293,289 +1285,285 @@ exports[`OptionList renders correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B1
-              </Text>
-            </View>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B2
-              </Text>
-            </View>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -1748,191 +1736,189 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
-              style={
-                [
-                  {
-                    "flex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                A1
-              </Text>
-            </View>
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "marginLeft": 8,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <HeroIcon
-                name="checkmark"
-                style={
-                  [
-                    {
-                      "color": "#401960",
-                      "fontSize": 20,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="selected-icon-A1"
-                themeIntent="primary"
-                themeSize="small"
-              />
-            </View>
+              A1
+            </Text>
           </View>
           <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
             style={
               [
                 {
-                  "marginTop": 12,
+                  "marginLeft": 8,
                 },
                 undefined,
               ]
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
+          >
+            <HeroIcon
+              name="checkmark"
+              style={
+                [
                   {
-                    "text": "B1",
-                    "value": "b1",
+                    "color": "#401960",
+                    "fontSize": 20,
                   },
                   {
-                    "text": "B2",
-                    "value": "b2",
+                    "marginRight": 12,
                   },
-                ],
+                ]
               }
-            }
-          />
+              testID="selected-icon-A1"
+              themeIntent="primary"
+              themeSize="small"
+            />
+          </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2014,317 +2000,313 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
-              style={
-                [
-                  {
-                    "flex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B1
-              </Text>
-            </View>
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "marginLeft": 8,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <HeroIcon
-                name="checkmark"
-                style={
-                  [
-                    {
-                      "color": "#401960",
-                      "fontSize": 20,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="selected-icon-B1"
-                themeIntent="primary"
-                themeSize="small"
-              />
-            </View>
+              B1
+            </Text>
           </View>
           <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+            style={
+              [
+                {
+                  "marginLeft": 8,
+                },
+                undefined,
+              ]
             }
-            section={
-              {
-                "category": "B",
-                "data": [
+          >
+            <HeroIcon
+              name="checkmark"
+              style={
+                [
                   {
-                    "text": "B1",
-                    "value": "b1",
+                    "color": "#401960",
+                    "fontSize": 20,
                   },
                   {
-                    "text": "B2",
-                    "value": "b2",
+                    "marginRight": 12,
                   },
-                ],
+                ]
               }
+              testID="selected-icon-B1"
+              themeIntent="primary"
+              themeSize="small"
+            />
+          </View>
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            style={
-              [
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
+            }
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B2
-              </Text>
-            </View>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2497,191 +2479,189 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
-              style={
-                [
-                  {
-                    "flex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                A1
-              </Text>
-            </View>
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "marginLeft": 8,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <HeroIcon
-                name="checkmark"
-                style={
-                  [
-                    {
-                      "color": "#401960",
-                      "fontSize": 20,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="selected-icon-A1"
-                themeIntent="primary"
-                themeSize="small"
-              />
-            </View>
+              A1
+            </Text>
           </View>
           <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
             style={
               [
                 {
-                  "marginTop": 12,
+                  "marginLeft": 8,
                 },
                 undefined,
               ]
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
+          >
+            <HeroIcon
+              name="checkmark"
+              style={
+                [
                   {
-                    "text": "B1",
-                    "value": "b1",
+                    "color": "#401960",
+                    "fontSize": 20,
                   },
                   {
-                    "text": "B2",
-                    "value": "b2",
+                    "marginRight": 12,
                   },
-                ],
+                ]
               }
-            }
-          />
+              testID="selected-icon-A1"
+              themeIntent="primary"
+              themeSize="small"
+            />
+          </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2763,289 +2743,285 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B1
-              </Text>
-            </View>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                B2
-              </Text>
-            </View>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}