@hero-design/rn 8.78.1 → 8.79.1

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

@@ -1537,6 +1537,1735 @@ exports[`rendering allows custom renderer 1`] = `
 </View>
 `;
 
+exports[`rendering renders correct floating bottom sheet variant 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="auto"
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="none"
+      >
+        <View
+          pointerEvents="auto"
+          style={
+            [
+              {
+                "marginTop": 8,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            onLayout={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 8,
+                  "flexDirection": "row",
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  [
+                    {
+                      "backgroundColor": "#ffffff",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="text-input-border"
+              themeFocused={false}
+              themeState="filled"
+            />
+            <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
+              pointerEvents="none"
+              style={
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
+              }
+              themeVariant="text"
+            >
+              <Text
+                allowFontScaling={false}
+                onLayout={[Function]}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
+                        "color": "#001f23",
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeIntent="body"
+                themeState="filled"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <TextInput
+                accessibilityState={
+                  {
+                    "disabled": false,
+                  }
+                }
+                allowFontScaling={false}
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  [
+                    {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
+                      "marginHorizontal": 8,
+                      "maxHeight": 144,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    {
+                      "backgroundColor": "#ffffff",
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                themeVariant="text"
+                value="Monday"
+              />
+            </View>
+            <HeroIcon
+              name="arrow-down"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="input-suffix"
+              themeIntent="text"
+              themeSize="medium"
+            />
+          </View>
+          <View
+            style={
+              [
+                {
+                  "minHeight": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "flex-start",
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  },
+                  undefined,
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
+    transparent={true}
+    visible={true}
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "flexDirection": "column-reverse",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            [
+              {
+                "flex": 1,
+                "flexDirection": "column-reverse",
+              },
+              undefined,
+            ],
+            {
+              "paddingBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": "#000000",
+              "bottom": 0,
+              "left": 0,
+              "opacity": 0.48,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+        <RCTSafeAreaView
+          collapsable={false}
+          style={
+            {
+              "margin": 16,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 32,
+                "elevation": 10,
+                "maxHeight": "100%",
+                "padding": 8,
+                "paddingBottom": 0,
+                "shadowColor": "#001f23",
+                "shadowOffset": {
+                  "height": 3,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.4,
+                "shadowRadius": 16,
+                "transform": [
+                  {
+                    "scaleY": 1,
+                  },
+                  {
+                    "translateY": 0,
+                  },
+                ],
+                "width": "100%",
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "row",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "flex": 1,
+                      "justifyContent": "center",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 16,
+                        "letterSpacing": 0.24,
+                        "lineHeight": 24,
+                      },
+                      undefined,
+                    ]
+                  }
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="regular-bold"
+                >
+                  Allow notifications
+                </Text>
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "flex-end",
+                      "height": 48,
+                      "justifyContent": "center",
+                      "marginLeft": 12,
+                      "width": 48,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    {
+                      "backgroundColor": "#dadbde",
+                      "borderRadius": 999,
+                      "opacity": 1,
+                      "padding": 8,
+                    }
+                  }
+                  testID="bottom-sheet-close-icon"
+                >
+                  <HeroIcon
+                    name="cancel"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 24,
+                        },
+                        {
+                          "fontSize": 12,
+                        },
+                      ]
+                    }
+                    themeIntent="text"
+                    themeSize="medium"
+                  />
+                </View>
+              </View>
+            </View>
+            <RCTScrollView
+              ListFooterComponent={null}
+              data={
+                [
+                  {
+                    "category": "",
+                    "data": [
+                      {
+                        "text": "Monday",
+                        "value": "mon",
+                      },
+                      {
+                        "text": "Tuesday",
+                        "value": "tue",
+                      },
+                      {
+                        "text": "Wednesday",
+                        "value": "wed",
+                      },
+                      {
+                        "text": "Thursday",
+                        "value": "thu",
+                      },
+                      {
+                        "text": "Friday",
+                        "value": "fri",
+                      },
+                      {
+                        "text": "Saturday",
+                        "value": "sat",
+                      },
+                      {
+                        "disabled": true,
+                        "text": "Sunday",
+                        "value": "sun",
+                      },
+                    ],
+                  },
+                ]
+              }
+              getItem={[Function]}
+              getItemCount={[Function]}
+              keyExtractor={[Function]}
+              onContentSizeChange={[Function]}
+              onEndReached={[Function]}
+              onEndReachedThreshold={0.1}
+              onLayout={[Function]}
+              onMomentumScrollBegin={[Function]}
+              onMomentumScrollEnd={[Function]}
+              onScroll={[Function]}
+              onScrollBeginDrag={[Function]}
+              onScrollEndDrag={[Function]}
+              onScrollToIndexFailed={[Function]}
+              renderItem={[Function]}
+              scrollEventThrottle={0.0001}
+              stickyHeaderIndices={
+                [
+                  0,
+                ]
+              }
+              style={
+                [
+                  {
+                    "paddingHorizontal": 12,
+                  },
+                  {},
+                ]
+              }
+            >
+              <View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                />
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      highlighted={false}
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 12,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Monday",
+                          "value": "mon",
+                        }
+                      }
+                    />
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ece8ef",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Monday
+                        </Text>
+                      </View>
+                      <View
+                        style={
+                          [
+                            {
+                              "marginLeft": 8,
+                            },
+                            undefined,
+                          ]
+                        }
+                      >
+                        <HeroIcon
+                          name="checkmark"
+                          style={
+                            [
+                              {
+                                "color": "#401960",
+                                "fontSize": 20,
+                              },
+                              {
+                                "marginRight": 12,
+                              },
+                            ]
+                          }
+                          testID="selected-icon-Monday"
+                          themeIntent="primary"
+                          themeSize="small"
+                        />
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Monday",
+                          "value": "mon",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Tuesday",
+                          "value": "tue",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Tuesday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Tuesday",
+                          "value": "tue",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Wednesday",
+                          "value": "wed",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Wednesday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Wednesday",
+                          "value": "wed",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Thursday",
+                          "value": "thu",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Thursday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Thursday",
+                          "value": "thu",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Friday",
+                          "value": "fri",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Friday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Friday",
+                          "value": "fri",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "text": "Saturday",
+                          "value": "sat",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": false,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 1,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Saturday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "text": "Saturday",
+                          "value": "sat",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 4,
+                          },
+                          undefined,
+                        ]
+                      }
+                      trailingItem={
+                        {
+                          "disabled": true,
+                          "text": "Sunday",
+                          "value": "sun",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                >
+                  <View>
+                    <View
+                      accessibilityState={
+                        {
+                          "disabled": true,
+                        }
+                      }
+                      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]}
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 4,
+                            "flexDirection": "row",
+                            "opacity": 0.38,
+                            "padding": 16,
+                          },
+                          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"
+                        >
+                          Sunday
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      highlighted={false}
+                      leadingItem={
+                        {
+                          "disabled": true,
+                          "text": "Sunday",
+                          "value": "sun",
+                        }
+                      }
+                      section={
+                        {
+                          "category": "",
+                          "data": [
+                            {
+                              "text": "Monday",
+                              "value": "mon",
+                            },
+                            {
+                              "text": "Tuesday",
+                              "value": "tue",
+                            },
+                            {
+                              "text": "Wednesday",
+                              "value": "wed",
+                            },
+                            {
+                              "text": "Thursday",
+                              "value": "thu",
+                            },
+                            {
+                              "text": "Friday",
+                              "value": "fri",
+                            },
+                            {
+                              "text": "Saturday",
+                              "value": "sat",
+                            },
+                            {
+                              "disabled": true,
+                              "text": "Sunday",
+                              "value": "sun",
+                            },
+                          ],
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "marginTop": 12,
+                          },
+                          undefined,
+                        ]
+                      }
+                    />
+                  </View>
+                </View>
+                <View
+                  onFocusCapture={[Function]}
+                  onLayout={[Function]}
+                  style={null}
+                />
+              </View>
+            </RCTScrollView>
+            <View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "justifyContent": "flex-end",
+                      "paddingHorizontal": 12,
+                      "paddingVertical": 2,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "disabled": false,
+                    }
+                  }
+                  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]}
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                        "backgroundColor": "transparent",
+                        "borderRadius": 4,
+                        "borderWidth": 0,
+                        "flexDirection": "row",
+                        "height": 60,
+                        "justifyContent": "center",
+                        "padding": 12,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    disabled={false}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "letterSpacing": 0.24,
+                          "lineHeight": 24,
+                        },
+                        [
+                          {
+                            "color": "#401960",
+                            "flexShrink": 1,
+                            "lineHeight": 22,
+                            "textAlign": "center",
+                          },
+                          undefined,
+                        ],
+                      ]
+                    }
+                    themeButtonVariant="text-primary"
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                    themeVariant="regular-bold"
+                  >
+                    Confirm
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RCTSafeAreaView>
+      </View>
+    </View>
+  </Modal>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
 <View
   style={