@hero-design/rn 8.75.0 → 8.76.1-alpha.0

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -30,6 +30,15 @@ exports[`ActionGroup has active false 1`] = `
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -39,6 +48,7 @@ exports[`ActionGroup has active false 1`] = `
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -52,7 +62,7 @@ exports[`ActionGroup has active false 1`] = `
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -61,6 +71,7 @@ exports[`ActionGroup has active false 1`] = `
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -113,7 +124,7 @@ exports[`ActionGroup has active false 1`] = `
                   },
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#FDFBFF",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -140,7 +151,7 @@ exports[`ActionGroup has active false 1`] = `
                 },
                 [
                   {
-                    "color": "#ffffff",
+                    "color": "#FDFBFF",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -212,6 +223,15 @@ exports[`ActionGroup has active true 1`] = `
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -221,6 +241,7 @@ exports[`ActionGroup has active true 1`] = `
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -234,7 +255,7 @@ exports[`ActionGroup has active true 1`] = `
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#33144d",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -243,6 +264,7 @@ exports[`ActionGroup has active true 1`] = `
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -307,7 +329,7 @@ exports[`ActionGroup has active true 1`] = `
                     },
                     [
                       {
-                        "color": "#ffffff",
+                        "color": "#FDFBFF",
                         "lineHeight": 24,
                         "textAlign": "center",
                         "textAlignVertical": "center",
@@ -387,10 +409,10 @@ exports[`ActionGroup has active true 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#000000",
+              "backgroundColor": "#FDFBFF",
               "bottom": 0,
               "left": 0,
-              "opacity": 0.25,
+              "opacity": 0.8,
               "position": "absolute",
               "right": 0,
               "top": 0,
@@ -437,6 +459,15 @@ exports[`ActionGroup has active true 1`] = `
               }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -446,6 +477,7 @@ exports[`ActionGroup has active true 1`] = `
                   }
                 }
                 accessible={true}
+                collapsable={false}
                 focusable={false}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -455,20 +487,18 @@ exports[`ActionGroup has active true 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "backgroundColor": "#795e90",
-                      "borderRadius": 999,
-                      "flexDirection": "row",
-                      "margin": 8,
-                      "marginRight": 24,
-                      "overflow": "hidden",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#000000",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "padding": 12,
+                  }
                 }
                 testID="speaker-action-item"
               >
@@ -498,7 +528,7 @@ exports[`ActionGroup has active true 1`] = `
                         },
                         [
                           {
-                            "color": "#ffffff",
+                            "color": "#FDFBFF",
                           },
                           undefined,
                         ],
@@ -521,7 +551,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                         },
                         undefined,
                       ],
@@ -548,6 +578,15 @@ exports[`ActionGroup has active true 1`] = `
               }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -557,6 +596,7 @@ exports[`ActionGroup has active true 1`] = `
                   }
                 }
                 accessible={true}
+                collapsable={false}
                 focusable={false}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -566,20 +606,18 @@ exports[`ActionGroup has active true 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "backgroundColor": "#795e90",
-                      "borderRadius": 999,
-                      "flexDirection": "row",
-                      "margin": 8,
-                      "marginRight": 24,
-                      "overflow": "hidden",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#000000",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "padding": 12,
+                  }
                 }
                 testID="target-action-item"
               >
@@ -609,7 +647,7 @@ exports[`ActionGroup has active true 1`] = `
                         },
                         [
                           {
-                            "color": "#ffffff",
+                            "color": "#FDFBFF",
                           },
                           undefined,
                         ],
@@ -632,7 +670,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                         },
                         undefined,
                       ],
@@ -659,6 +697,15 @@ exports[`ActionGroup has active true 1`] = `
               }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -668,6 +715,7 @@ exports[`ActionGroup has active true 1`] = `
                   }
                 }
                 accessible={true}
+                collapsable={false}
                 focusable={false}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -677,20 +725,18 @@ exports[`ActionGroup has active true 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "backgroundColor": "#795e90",
-                      "borderRadius": 999,
-                      "flexDirection": "row",
-                      "margin": 8,
-                      "marginRight": 24,
-                      "overflow": "hidden",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#000000",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "padding": 12,
+                  }
                 }
                 testID="plane-action-item"
               >
@@ -720,7 +766,7 @@ exports[`ActionGroup has active true 1`] = `
                         },
                         [
                           {
-                            "color": "#ffffff",
+                            "color": "#FDFBFF",
                           },
                           undefined,
                         ],
@@ -743,7 +789,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                         },
                         undefined,
                       ],
@@ -770,6 +816,15 @@ exports[`ActionGroup has active true 1`] = `
               }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -779,6 +834,7 @@ exports[`ActionGroup has active true 1`] = `
                   }
                 }
                 accessible={true}
+                collapsable={false}
                 focusable={false}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -788,20 +844,18 @@ exports[`ActionGroup has active true 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "backgroundColor": "#795e90",
-                      "borderRadius": 999,
-                      "flexDirection": "row",
-                      "margin": 8,
-                      "marginRight": 24,
-                      "overflow": "hidden",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#000000",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "padding": 12,
+                  }
                 }
                 testID="health-bag-action-item"
               >
@@ -831,7 +885,7 @@ exports[`ActionGroup has active true 1`] = `
                         },
                         [
                           {
-                            "color": "#ffffff",
+                            "color": "#FDFBFF",
                           },
                           undefined,
                         ],
@@ -854,7 +908,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                         },
                         undefined,
                       ],
@@ -881,6 +935,15 @@ exports[`ActionGroup has active true 1`] = `
               }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
                 accessibilityValue={
                   {
                     "max": undefined,
@@ -890,6 +953,7 @@ exports[`ActionGroup has active true 1`] = `
                   }
                 }
                 accessible={true}
+                collapsable={false}
                 focusable={false}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -899,20 +963,18 @@ exports[`ActionGroup has active true 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "alignSelf": "flex-end",
-                      "backgroundColor": "#795e90",
-                      "borderRadius": 999,
-                      "flexDirection": "row",
-                      "margin": 8,
-                      "marginRight": 24,
-                      "overflow": "hidden",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#000000",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "padding": 12,
+                  }
                 }
                 testID="clock-action-item"
               >
@@ -942,7 +1004,7 @@ exports[`ActionGroup has active true 1`] = `
                         },
                         [
                           {
-                            "color": "#ffffff",
+                            "color": "#FDFBFF",
                           },
                           undefined,
                         ],
@@ -965,7 +1027,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                         },
                         undefined,
                       ],
@@ -982,6 +1044,15 @@ exports[`ActionGroup has active true 1`] = `
           </View>
         </View>
         <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessibilityValue={
             {
               "max": undefined,
@@ -991,6 +1062,7 @@ exports[`ActionGroup has active true 1`] = `
             }
           }
           accessible={true}
+          collapsable={false}
           focusable={false}
           onClick={[Function]}
           onLayout={[Function]}
@@ -1004,7 +1076,7 @@ exports[`ActionGroup has active true 1`] = `
             {
               "alignItems": "center",
               "alignSelf": "flex-end",
-              "backgroundColor": "#33144d",
+              "backgroundColor": "#000000",
               "borderRadius": 999,
               "bottom": undefined,
               "elevation": 3,
@@ -1014,6 +1086,7 @@ exports[`ActionGroup has active true 1`] = `
               "marginBottom": -2,
               "marginRight": 24,
               "marginTop": 24,
+              "opacity": 1,
               "padding": 20,
               "shadowColor": "#001f23",
               "shadowOffset": {
@@ -1078,7 +1151,7 @@ exports[`ActionGroup has active true 1`] = `
                       },
                       [
                         {
-                          "color": "#ffffff",
+                          "color": "#FDFBFF",
                           "lineHeight": 24,
                           "textAlign": "center",
                           "textAlignVertical": "center",

package/src/components/FAB/FAB.tsx

@@ -208,7 +208,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
           !active &&
           setButtonWidth(event.nativeEvent.layout.width)
         }
-        underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
+        activeOpacity={0.8}
         onPress={onPress}
         style={[
           style,

package/src/components/FAB/StyledFAB.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/native';
-import type { TextProps } from 'react-native';
-import { Animated, TouchableHighlight } from 'react-native';
+import { TextProps, Animated, TouchableOpacity } from 'react-native';
 import Box from '../Box';
 import type { IconProps } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
 const AnimatedTouchableHighlight =
-  Animated.createAnimatedComponent(TouchableHighlight);
+  Animated.createAnimatedComponent(TouchableOpacity);
 
 const StyledFAB = styled(AnimatedTouchableHighlight)<{
   themeActive?: boolean;

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
           },
           [
             {
-              "color": "#ffffff",
+              "color": "#FDFBFF",
               "lineHeight": 24,
               "textAlign": "center",
               "textAlignVertical": "center",
@@ -96,7 +96,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
           },
           [
             {
-              "color": "#ffffff",
+              "color": "#FDFBFF",
               "lineHeight": 24,
               "textAlign": "center",
               "textAlignVertical": "center",

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -9,6 +9,15 @@ exports[`StyledFAB renders correctly 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -18,6 +27,7 @@ exports[`StyledFAB renders correctly 1`] = `
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
@@ -30,12 +40,13 @@ exports[`StyledFAB renders correctly 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -100,6 +111,15 @@ exports[`StyledFAB renders correctly 2`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -109,6 +129,7 @@ exports[`StyledFAB renders correctly 2`] = `
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
@@ -121,12 +142,13 @@ exports[`StyledFAB renders correctly 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#33144d",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -200,7 +222,7 @@ exports[`StyledFABIcon renders correctly 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#FDFBFF",
             "lineHeight": 24,
             "textAlign": "center",
             "textAlignVertical": "center",

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

@@ -20,7 +20,7 @@ exports[`HeroDesignProvider renders children correctly 1`] = `
       style={
         [
           {
-            "color": "#401960",
+            "color": "#460078",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 42,
             "letterSpacing": 0,