@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -1,587 +1,1277 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ScrollableTabsHeader renders correctly 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
+exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
+<View
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <View
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
     style={
-      Array [
-        Object {
-          "borderBottomColor": "#e8e9ea",
-          "borderBottomWidth": 1,
-          "paddingHorizontal": 0,
+      [
+        {
+          "flex": 1,
         },
         undefined,
       ]
     }
-    themeInsets={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "top": 0,
-      }
-    }
   >
-    <RCTScrollView
-      contentContainerStyle={
-        Object {
-          "paddingHorizontal": 8,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "activeItem": "Work",
-            "component": <Text>
-              Work Screen
-            </Text>,
-            "key": "work",
-          },
-          Object {
-            "activeItem": "speaker",
-            "component": <Text>
-              Personal Screen
-            </Text>,
-            "inactiveItem": "speaker-outlined",
-            "key": "personal",
-          },
-          Object {
-            "activeItem": "home",
-            "badge": Object {
-              "type": "status",
-            },
-            "component": <Text>
-              Home Screen
-            </Text>,
-            "inactiveItem": "home-outlined",
-            "key": "home",
-          },
-          Object {
-            "activeItem": "calendar",
-            "badge": Object {
-              "type": "counter",
-              "value": 50,
-            },
-            "component": <Text>
-              Calendar Screen
-            </Text>,
-            "inactiveItem": "calendar-dates-outlined",
-            "key": "calendar",
+    <View
+      style={
+        [
+          {
+            "paddingHorizontal": 0,
           },
+          undefined,
         ]
       }
-      getItem={[Function]}
-      getItemCount={[Function]}
-      horizontal={true}
-      keyExtractor={[Function]}
-      onContentSizeChange={[Function]}
-      onLayout={[Function]}
-      onMomentumScrollBegin={[Function]}
-      onMomentumScrollEnd={[Function]}
-      onScroll={[Function]}
-      onScrollBeginDrag={[Function]}
-      onScrollEndDrag={[Function]}
-      onScrollToIndexFailed={[Function]}
-      removeClippedSubviews={false}
-      renderItem={[Function]}
-      scrollEventThrottle={50}
-      showsHorizontalScrollIndicator={false}
-      stickyHeaderIndices={Array []}
-      viewabilityConfigCallbackPairs={Array []}
+      themeInsets={
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
     >
-      <View>
-        <View
-          onLayout={[Function]}
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
+      <RCTScrollView
+        contentContainerStyle={
+          {
+            "paddingHorizontal": 8,
+          }
+        }
+        data={
+          [
+            {
+              "activeItem": "Work",
+              "component": <Text>
+                Work Screen
+              </Text>,
+              "key": "work",
+            },
+            {
+              "activeItem": "speaker",
+              "component": <Text>
+                Personal Screen
+              </Text>,
+              "inactiveItem": "speaker-outlined",
+              "key": "personal",
+            },
+            {
+              "activeItem": "home",
+              "badge": {
+                "type": "status",
               },
-              null,
-            ]
+              "component": <Text>
+                Home Screen
+              </Text>,
+              "inactiveItem": "home-outlined",
+              "key": "home",
+            },
+            {
+              "activeItem": "calendar",
+              "badge": {
+                "type": "counter",
+                "value": 50,
+              },
+              "component": <Text>
+                Calendar Screen
+              </Text>,
+              "inactiveItem": "calendar-dates-outlined",
+              "key": "calendar",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
           }
-        >
+        }
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
           <View
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            isFirstItem={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
             style={
-              Object {
-                "marginLeft": 0,
-                "paddingVertical": 8,
-              }
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
             }
           >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "paddingVertical": 8,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 0,
+                  "paddingVertical": 8,
+                }
               }
             >
               <View
-                collapsable={false}
                 style={
-                  Object {
-                    "backgroundColor": "#ccd2d3",
-                    "borderRadius": 8,
-                    "flex": 1,
-                    "transform": Array [
-                      Object {
-                        "scaleX": 1,
-                      },
-                    ],
+                  [
+                    {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    {
+                      "backgroundColor": "#ccd2d3",
+                      "borderRadius": 16,
+                      "flex": 1,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    }
                   }
+                  themeActive={true}
+                />
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
                 }
-                themeActive={true}
-              />
+              >
+                <View>
+                  <Text
+                    allowFontScaling={false}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "letterSpacing": 0.24,
+                          "lineHeight": 24,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                    themeVariant="regular-bold"
+                  >
+                    Work
+                  </Text>
+                </View>
+              </View>
             </View>
+          </View>
+          <View
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "paddingHorizontal": 8,
-                    "paddingVertical": 4,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
-              <View>
-                <Text
-                  allowFontScaling={false}
-                  numberOfLines={1}
+              <View
+                style={
+                  [
+                    {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
                   style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
-                      },
-                      Object {
-                        "color": "#001f23",
-                      },
-                    ]
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": 16,
+                      "flex": 1,
+                      "transform": [
+                        {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
                   }
-                  themeFontSize="medium"
-                  themeFontWeight="semi-bold"
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                >
-                  Work
-                </Text>
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <HeroIcon
+                    name="speaker-outlined"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-speaker-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                </View>
               </View>
             </View>
           </View>
-        </View>
-        <View
-          onLayout={[Function]}
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
           <View
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            isFirstItem={false}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
             style={
-              Object {
-                "marginLeft": 12,
-                "paddingVertical": 8,
-              }
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
             }
           >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "paddingVertical": 8,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
               <View
-                collapsable={false}
                 style={
-                  Object {
-                    "backgroundColor": undefined,
-                    "borderRadius": 8,
-                    "flex": 1,
-                    "transform": Array [
-                      Object {
-                        "scaleX": 0,
-                      },
-                    ],
+                  [
+                    {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": 16,
+                      "flex": 1,
+                      "transform": [
+                        {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
                   }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
                 }
-                themeActive={false}
-              />
+              >
+                <View
+                  style={
+                    {
+                      "paddingHorizontal": 4,
+                    }
+                  }
+                >
+                  <HeroIcon
+                    name="home-outlined"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-home-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#cb300a",
+                        "borderRadius": 999,
+                        "height": 8,
+                        "opacity": 1,
+                        "position": "absolute",
+                        "right": -2,
+                        "top": -2,
+                        "transform": [
+                          {
+                            "scale": 1,
+                          },
+                        ],
+                        "width": 8,
+                      }
+                    }
+                    themeIntent="danger"
+                  />
+                </View>
+              </View>
             </View>
+          </View>
+          <View
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "paddingHorizontal": 8,
-                    "paddingVertical": 4,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
-              <View>
-                <HeroIcon
-                  name="speaker-outlined"
+              <View
+                style={
+                  [
+                    {
+                      "bottom": 0,
+                      "left": 0,
+                      "paddingVertical": 8,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  collapsable={false}
                   style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontSize": 20,
-                      },
-                      Object {
-                        "color": "#001f23",
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": 16,
+                      "flex": 1,
+                      "transform": [
+                        {
+                          "scaleX": 0,
+                        },
+                      ],
+                    }
+                  }
+                  themeActive={false}
+                />
+              </View>
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                        "flexDirection": "row",
                       },
+                      undefined,
                     ]
                   }
-                  testID="hero-icon-speaker-outlined"
-                  themeIntent="text"
-                  themeSize="small"
-                />
+                >
+                  <HeroIcon
+                    name="calendar-dates-outlined"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-calendar-dates-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "alignItems": "center",
+                        "backgroundColor": "#355bfb",
+                        "borderRadius": 999,
+                        "height": 20,
+                        "justifyContent": "center",
+                        "marginLeft": 4,
+                        "minWidth": 20,
+                        "opacity": 1,
+                        "paddingHorizontal": 8,
+                        "transform": [
+                          {
+                            "scale": 1,
+                          },
+                        ],
+                      }
+                    }
+                    themeIntent="info"
+                    themePadding="wideContent"
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        [
+                          {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 12,
+                            "letterSpacing": 0.36,
+                            "lineHeight": 16,
+                          },
+                          [
+                            {
+                              "color": "#ffffff",
+                              "includeFontPadding": false,
+                              "textAlign": "center",
+                              "textAlignVertical": "center",
+                            },
+                            undefined,
+                          ],
+                        ]
+                      }
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                    >
+                      50
+                    </Text>
+                  </View>
+                </View>
               </View>
             </View>
           </View>
         </View>
-        <View
-          onLayout={[Function]}
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
+      </RCTScrollView>
+    </View>
+  </RNCSafeAreaProvider>
+  <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[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "paddingHorizontal": 0,
+          },
+          undefined,
+        ]
+      }
+      themeInsets={
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <RCTScrollView
+        contentContainerStyle={
+          {
+            "paddingHorizontal": 8,
+          }
+        }
+        data={
+          [
+            {
+              "activeItem": "Work",
+              "component": <Text>
+                Work Screen
+              </Text>,
+              "key": "work",
+            },
+            {
+              "activeItem": "speaker",
+              "component": <Text>
+                Personal Screen
+              </Text>,
+              "inactiveItem": "speaker-outlined",
+              "key": "personal",
+            },
+            {
+              "activeItem": "home",
+              "badge": {
+                "type": "status",
               },
-              null,
-            ]
+              "component": <Text>
+                Home Screen
+              </Text>,
+              "inactiveItem": "home-outlined",
+              "key": "home",
+            },
+            {
+              "activeItem": "calendar",
+              "badge": {
+                "type": "counter",
+                "value": 50,
+              },
+              "component": <Text>
+                Calendar Screen
+              </Text>,
+              "inactiveItem": "calendar-dates-outlined",
+              "key": "calendar",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
           }
-        >
+        }
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
           <View
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            isFirstItem={false}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
             style={
-              Object {
-                "marginLeft": 12,
-                "paddingVertical": 8,
-              }
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
             }
           >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "paddingVertical": 8,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 0,
+                  "paddingVertical": 8,
+                }
               }
             >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View>
+                  <Text
+                    allowFontScaling={false}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "letterSpacing": 0.24,
+                          "lineHeight": 24,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    themeIntent="body"
+                    themeTypeface="neutral"
+                    themeVariant="regular-bold"
+                  >
+                    Work
+                  </Text>
+                </View>
+              </View>
               <View
                 collapsable={false}
                 style={
-                  Object {
-                    "backgroundColor": undefined,
-                    "borderRadius": 8,
-                    "flex": 1,
-                    "transform": Array [
-                      Object {
-                        "scaleX": 0,
+                  {
+                    "backgroundColor": "#401960",
+                    "bottom": -2,
+                    "height": 2,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "transform": [
+                      {
+                        "translateX": 0,
                       },
                     ],
+                    "width": "100%",
+                    "zIndex": 999,
                   }
                 }
-                themeActive={false}
               />
             </View>
+          </View>
+          <View
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "paddingHorizontal": 8,
-                    "paddingVertical": 4,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
               <View
                 style={
-                  Object {
-                    "paddingHorizontal": 4,
-                  }
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
                 }
               >
-                <HeroIcon
-                  name="home-outlined"
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontSize": 20,
-                      },
-                      Object {
-                        "color": "#001f23",
-                      },
-                    ]
-                  }
-                  testID="hero-icon-home-outlined"
-                  themeIntent="text"
-                  themeSize="small"
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "backgroundColor": "#de350b",
-                      "borderRadius": 999,
-                      "height": 8,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": -2,
-                      "top": -2,
-                      "transform": Array [
-                        Object {
-                          "scale": 1,
+                <View>
+                  <HeroIcon
+                    name="speaker-outlined"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 20,
                         },
-                      ],
-                      "width": 8,
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
                     }
-                  }
-                  themeIntent="danger"
-                />
+                    testID="hero-icon-speaker-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                </View>
               </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "backgroundColor": "#401960",
+                    "bottom": -2,
+                    "height": 2,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "transform": [
+                      {
+                        "translateX": 0,
+                      },
+                    ],
+                    "width": "100%",
+                    "zIndex": 999,
+                  }
+                }
+              />
             </View>
           </View>
-        </View>
-        <View
-          onLayout={[Function]}
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
-              },
-              null,
-            ]
-          }
-        >
           <View
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            isFirstItem={false}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
             style={
-              Object {
-                "marginLeft": 12,
-                "paddingVertical": 8,
-              }
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
             }
           >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "paddingVertical": 8,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "paddingHorizontal": 4,
+                    }
+                  }
+                >
+                  <HeroIcon
+                    name="home-outlined"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 20,
+                        },
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-home-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#cb300a",
+                        "borderRadius": 999,
+                        "height": 8,
+                        "opacity": 1,
+                        "position": "absolute",
+                        "right": -2,
+                        "top": -2,
+                        "transform": [
+                          {
+                            "scale": 1,
+                          },
+                        ],
+                        "width": 8,
+                      }
+                    }
+                    themeIntent="danger"
+                  />
+                </View>
+              </View>
               <View
                 collapsable={false}
                 style={
-                  Object {
-                    "backgroundColor": undefined,
-                    "borderRadius": 8,
-                    "flex": 1,
-                    "transform": Array [
-                      Object {
-                        "scaleX": 0,
+                  {
+                    "backgroundColor": "#401960",
+                    "bottom": -2,
+                    "height": 2,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "transform": [
+                      {
+                        "translateX": 0,
                       },
                     ],
+                    "width": "100%",
+                    "zIndex": 999,
                   }
                 }
-                themeActive={false}
               />
             </View>
+          </View>
+          <View
+            onFocusCapture={[Function]}
+            onLayout={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
             <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              isFirstItem={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
-                    "paddingHorizontal": 8,
-                    "paddingVertical": 4,
-                  },
-                  undefined,
-                ]
+                {
+                  "marginLeft": 12,
+                  "paddingVertical": 8,
+                }
               }
             >
               <View
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
-                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "paddingHorizontal": 8,
+                      "paddingVertical": 4,
+                      "position": "relative",
                     },
                     undefined,
                   ]
                 }
               >
-                <HeroIcon
-                  name="calendar-dates-outlined"
+                <View
                   style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontSize": 20,
-                      },
-                      Object {
-                        "color": "#001f23",
+                    [
+                      {
+                        "alignItems": "center",
+                        "flexDirection": "row",
                       },
+                      undefined,
                     ]
                   }
-                  testID="hero-icon-calendar-dates-outlined"
-                  themeIntent="text"
-                  themeSize="small"
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "alignItems": "center",
-                      "backgroundColor": "#4568fb",
-                      "borderRadius": 999,
-                      "height": 20,
-                      "justifyContent": "center",
-                      "marginLeft": 4,
-                      "minWidth": 20,
-                      "opacity": 1,
-                      "paddingHorizontal": 8,
-                      "transform": Array [
-                        Object {
-                          "scale": 1,
-                        },
-                      ],
-                    }
-                  }
-                  themeIntent="info"
-                  themePadding="wideContent"
                 >
-                  <Text
-                    allowFontScaling={false}
+                  <HeroIcon
+                    name="calendar-dates-outlined"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "#001f23",
-                          "fontFamily": "BeVietnamPro-Regular",
-                          "fontSize": 14,
-                          "letterSpacing": 0.42,
-                          "lineHeight": 22,
+                          "fontSize": 20,
                         },
-                        Array [
-                          Object {
-                            "color": "#ffffff",
-                            "fontFamily": "BeVietnamPro-SemiBold",
-                            "fontSize": 12,
-                            "includeFontPadding": false,
-                            "lineHeight": 16,
-                            "textAlign": "center",
-                            "textAlignVertical": "center",
+                        {
+                          "color": "#001f23",
+                        },
+                      ]
+                    }
+                    testID="hero-icon-calendar-dates-outlined"
+                    themeIntent="text"
+                    themeSize="small"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "alignItems": "center",
+                        "backgroundColor": "#355bfb",
+                        "borderRadius": 999,
+                        "height": 20,
+                        "justifyContent": "center",
+                        "marginLeft": 4,
+                        "minWidth": 20,
+                        "opacity": 1,
+                        "paddingHorizontal": 8,
+                        "transform": [
+                          {
+                            "scale": 1,
                           },
-                          undefined,
                         ],
-                      ]
+                      }
                     }
-                    themeFontSize="medium"
-                    themeFontWeight="regular"
-                    themeIntent="body"
-                    themeTypeface="neutral"
+                    themeIntent="info"
+                    themePadding="wideContent"
                   >
-                    50
-                  </Text>
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        [
+                          {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 12,
+                            "letterSpacing": 0.36,
+                            "lineHeight": 16,
+                          },
+                          [
+                            {
+                              "color": "#ffffff",
+                              "includeFontPadding": false,
+                              "textAlign": "center",
+                              "textAlignVertical": "center",
+                            },
+                            undefined,
+                          ],
+                        ]
+                      }
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                    >
+                      50
+                    </Text>
+                  </View>
                 </View>
               </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "backgroundColor": "#401960",
+                    "bottom": -2,
+                    "height": 2,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "transform": [
+                      {
+                        "translateX": 0,
+                      },
+                    ],
+                    "width": "100%",
+                    "zIndex": 999,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
-      </View>
-    </RCTScrollView>
-  </View>
-</RNCSafeAreaProvider>
+      </RCTScrollView>
+    </View>
+  </RNCSafeAreaProvider>
+  <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>
 `;