@hero-design/rn 7.5.0 → 7.6.0

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

@@ -0,0 +1,1630 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "padding": 16,
+          "position": "relative",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 20,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "left": 16,
+              "paddingHorizontal": 4,
+              "position": "absolute",
+              "top": -10,
+              "zIndex": 1,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="input-label"
+      themeFontSize="small"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Allow notifications
+    </Text>
+    <TextInput
+      editable={false}
+      multiline={true}
+      onPressIn={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "fontSize": 16,
+            "marginHorizontal": 8,
+          },
+          Object {
+            "color": "#292a2b",
+          },
+        ]
+      }
+      testID="text-input"
+      value="Monday, Tuesday"
+    />
+    <HeroIcon
+      name="arrow-down"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-suffix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "flexDirection": "column-reverse",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        nativeID="animatedComponent"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#292a2b",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.48,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        onLayout={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderTopLeftRadius": 16,
+            "borderTopRightRadius": 16,
+            "elevation": 10,
+            "maxHeight": "94%",
+            "shadowColor": "#292a2b",
+            "shadowOffset": Object {
+              "height": 3,
+              "width": 0,
+            },
+            "shadowOpacity": 0.27,
+            "shadowRadius": 4.65,
+            "transform": Array [
+              Object {
+                "scaleY": 0,
+              },
+              Object {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "minHeight": 64,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            adjacentIcon={true}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="semi-bold"
+              themeIntent="body"
+            >
+              Allow notifications
+            </Text>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                  "width": 72,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+              testID="bottom-sheet-close-icon"
+            >
+              <HeroIcon
+                name="cancel"
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontSize": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="text"
+                themeSize="medium"
+              />
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#dadbde",
+                "borderBottomWidth": 1,
+                "maxWidth": "100%",
+              },
+              undefined,
+            ]
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f1e9fb",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Monday
+              </Text>
+            </View>
+            <HeroIcon
+              name="checkmark"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 20,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="small"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f1e9fb",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Tuesday
+              </Text>
+            </View>
+            <HeroIcon
+              name="checkmark"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 20,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="small"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Wednesday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Thursday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Friday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Saturday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Sunday
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderBottomColor": "#dadbde",
+                  "borderBottomWidth": 1,
+                  "maxWidth": "100%",
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "flex-end",
+                  "minHeight": 64,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-SemiBold",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    Array [
+                      Object {
+                        "color": "#7622d7",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="semi-bold"
+                themeIntent="body"
+              >
+                Confirm
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </Modal>
+</View>
+`;
+
+exports[`rendering renders correctly when bottom sheet is visible 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "padding": 16,
+          "position": "relative",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 20,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+              "left": 16,
+              "paddingHorizontal": 4,
+              "position": "absolute",
+              "top": -10,
+              "zIndex": 1,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="input-label"
+      themeFontSize="small"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Allow notifications
+    </Text>
+    <TextInput
+      editable={false}
+      multiline={true}
+      onPressIn={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "fontSize": 16,
+            "marginHorizontal": 8,
+          },
+          Object {
+            "color": "#292a2b",
+          },
+        ]
+      }
+      testID="text-input"
+      value="Monday, Tuesday"
+    />
+    <HeroIcon
+      name="arrow-down"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-suffix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+  </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={true}
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "flexDirection": "column-reverse",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        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={
+          Object {
+            "backgroundColor": "#292a2b",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.48,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        onLayout={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderTopLeftRadius": 16,
+            "borderTopRightRadius": 16,
+            "elevation": 10,
+            "maxHeight": "94%",
+            "shadowColor": "#292a2b",
+            "shadowOffset": Object {
+              "height": 3,
+              "width": 0,
+            },
+            "shadowOpacity": 0.27,
+            "shadowRadius": 4.65,
+            "transform": Array [
+              Object {
+                "scaleY": 0,
+              },
+              Object {
+                "translateY": 0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "minHeight": 64,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            adjacentIcon={true}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "justifyContent": "center",
+                  "paddingLeft": 24,
+                  "paddingRight": 0,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="semi-bold"
+              themeIntent="body"
+            >
+              Allow notifications
+            </Text>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                  "width": 72,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+              testID="bottom-sheet-close-icon"
+            >
+              <HeroIcon
+                name="cancel"
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontSize": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="text"
+                themeSize="medium"
+              />
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#dadbde",
+                "borderBottomWidth": 1,
+                "maxWidth": "100%",
+              },
+              undefined,
+            ]
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f1e9fb",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Monday
+              </Text>
+            </View>
+            <HeroIcon
+              name="checkmark"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 20,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="small"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f1e9fb",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Tuesday
+              </Text>
+            </View>
+            <HeroIcon
+              name="checkmark"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 20,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="small"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Wednesday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Thursday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Friday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Saturday
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginTop": 4,
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "opacity": 1,
+                "padding": 16,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Sunday
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderBottomColor": "#dadbde",
+                  "borderBottomWidth": 1,
+                  "maxWidth": "100%",
+                },
+                undefined,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "flex-end",
+                  "minHeight": 64,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#292a2b",
+                      "fontFamily": "BeVietnamPro-SemiBold",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    Array [
+                      Object {
+                        "color": "#7622d7",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="semi-bold"
+                themeIntent="body"
+              >
+                Confirm
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </Modal>
+</View>
+`;