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

package/.turbo/turbo-build.log

@@ -1,8 +1,19 @@
-(node:6144) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:6900) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:6144) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:6900) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+(!) [plugin typescript] src/components/PinInput/__tests__/index.spec.tsx (23:9): @rollup/plugin-typescript TS2322: Type '"one-time-code"' is not assignable to type '"name" | "off" | "tel" | "email" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "postal-code" | "street-address" | "username" | "tel-country-code" | "tel-national" | ... 23 more ... | undefined'.
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/PinInput/__tests__/index.spec.tsx:23:9
+
+23         autoComplete="one-time-code"
+           ~~~~~~~~~~~~
+
+  src/components/PinInput/index.tsx:74:3
+    74   autoComplete?: ComponentProps<typeof TextInput>['autoComplete'];
+         ~~~~~~~~~~~~
+    The expected type comes from property 'autoComplete' which is declared here on type 'IntrinsicAttributes & PinInputProps & RefAttributes<PinInputHandler>'
+
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 34s
+created lib/index.js, es/index.js in 35.9s

package/CHANGELOG.md

@@ -1,18 +1,16 @@
 # @hero-design/rn
 
-## 8.76.1-alpha.0
+## 8.77.0
 
-### Patch Changes
+### Minor Changes
 
-- [#3392](https://github.com/Thinkei/hero-design/pull/3392) [`e4e7617d654929c059e7dc28b752ad8f192893e2`](https://github.com/Thinkei/hero-design/commit/e4e7617d654929c059e7dc28b752ad8f192893e2) Thanks [@ttkien](https://github.com/ttkien)! - - Set theme swag light as default
+- [#3476](https://github.com/Thinkei/hero-design/pull/3476) [`988c1ad81a6f9551a80237a6962ddd5ebf4ad04c`](https://github.com/Thinkei/hero-design/commit/988c1ad81a6f9551a80237a6962ddd5ebf4ad04c) Thanks [@ttkien](https://github.com/ttkien)! - support swagLight for ThemeSwitcher
 
-  - Update Swag light colors
-  - Update alert and FAB components
+## 8.76.1
 
-- [#3464](https://github.com/Thinkei/hero-design/pull/3464) [`a4d255c31603bbeb7731fe6e2ad6281219d5405d`](https://github.com/Thinkei/hero-design/commit/a4d255c31603bbeb7731fe6e2ad6281219d5405d) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Icon] Add thumb-down-outlined, handshake-outlined, box-1-outlined, play-arrow-filled, thumb-down icons
+### Patch Changes
 
-- Updated dependencies [[`e4e7617d654929c059e7dc28b752ad8f192893e2`](https://github.com/Thinkei/hero-design/commit/e4e7617d654929c059e7dc28b752ad8f192893e2)]:
-  - @hero-design/colors@8.45.2-alpha.0
+- [#3464](https://github.com/Thinkei/hero-design/pull/3464) [`a4d255c31603bbeb7731fe6e2ad6281219d5405d`](https://github.com/Thinkei/hero-design/commit/a4d255c31603bbeb7731fe6e2ad6281219d5405d) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Icon] Add thumb-down-outlined, handshake-outlined, box-1-outlined, play-arrow-filled, thumb-down icons
 
 ## 8.76.0
 

package/es/index.js

@@ -1354,7 +1354,6 @@ var BASE_COLORS = {
   vermilion: '#de350b',
   violet1: '#8505a2',
   violet: '#7622d7',
-  darkViolet: '#460078',
   vodka: '#b5c3fd',
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
@@ -2829,13 +2828,13 @@ var getErrorTheme = function getErrorTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.overlayGlobalSurface,
-    buttonPressedBackground: theme.colors.overlayGlobalSurface,
-    buttonActiveBackground: theme.colors.overlayGlobalSurface,
+    buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    actionItemBackground: theme.colors.overlayGlobalSurface,
-    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
+    actionItemBackground: theme.colors.secondary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
   };
@@ -4003,7 +4002,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
 
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
   return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
@@ -5225,7 +5224,7 @@ var useTheme = useTheme$1;
 
 var ThemeSwitcher = function ThemeSwitcher(_ref) {
   var _ref$name = _ref.name,
-    name = _ref$name === void 0 ? 'swagLight' : _ref$name,
+    name = _ref$name === void 0 ? 'swag' : _ref$name,
     children = _ref.children;
   var theme = useMemo(function () {
     switch (name) {
@@ -14960,7 +14959,7 @@ var ErrorComponent = function ErrorComponent(_ref2) {
   }, nativeProps));
 };
 
-var StyledActionItem = index$a(TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     padding: theme.__hd__.fab.space.actionItemPadding,
@@ -14987,7 +14986,7 @@ var StyledIcon$1 = index$a(Icon)(function (_ref3) {
   };
 });
 
-var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableOpacity);
+var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableHighlight);
 var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
@@ -15044,6 +15043,7 @@ var ActionItem = function ActionItem(_ref) {
     index = _ref.index,
     _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active;
+  var theme = useTheme();
   var animatedValue = React__default.useRef(new Animated.Value(0));
   var translateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
@@ -15065,7 +15065,7 @@ var ActionItem = function ActionItem(_ref) {
       }]
     }
   }, /*#__PURE__*/React__default.createElement(StyledActionItem, {
-    activeOpacity: 0.8,
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
     testID: testID
@@ -15229,7 +15229,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     onLayout: function onLayout(event) {
       return !hasSetButtonWidth && !active && setButtonWidth(event.nativeEvent.layout.width);
     },
-    activeOpacity: 0.8,
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
@@ -15301,7 +15301,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/lib/index.js

@@ -1381,7 +1381,6 @@ var BASE_COLORS = {
   vermilion: '#de350b',
   violet1: '#8505a2',
   violet: '#7622d7',
-  darkViolet: '#460078',
   vodka: '#b5c3fd',
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
@@ -2856,13 +2855,13 @@ var getErrorTheme = function getErrorTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.overlayGlobalSurface,
-    buttonPressedBackground: theme.colors.overlayGlobalSurface,
-    buttonActiveBackground: theme.colors.overlayGlobalSurface,
+    buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    actionItemBackground: theme.colors.overlayGlobalSurface,
-    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
+    actionItemBackground: theme.colors.secondary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
   };
@@ -4030,7 +4029,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
 
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
   return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
@@ -5252,7 +5251,7 @@ var useTheme = useTheme$1;
 
 var ThemeSwitcher = function ThemeSwitcher(_ref) {
   var _ref$name = _ref.name,
-    name = _ref$name === void 0 ? 'swagLight' : _ref$name,
+    name = _ref$name === void 0 ? 'swag' : _ref$name,
     children = _ref.children;
   var theme = React.useMemo(function () {
     switch (name) {
@@ -14987,7 +14986,7 @@ var ErrorComponent = function ErrorComponent(_ref2) {
   }, nativeProps));
 };
 
-var StyledActionItem = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     padding: theme.__hd__.fab.space.actionItemPadding,
@@ -15014,7 +15013,7 @@ var StyledIcon$1 = index$a(Icon)(function (_ref3) {
   };
 });
 
-var AnimatedTouchableHighlight = reactNative.Animated.createAnimatedComponent(reactNative.TouchableOpacity);
+var AnimatedTouchableHighlight = reactNative.Animated.createAnimatedComponent(reactNative.TouchableHighlight);
 var StyledFAB$2 = index$a(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
@@ -15071,6 +15070,7 @@ var ActionItem = function ActionItem(_ref) {
     index = _ref.index,
     _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active;
+  var theme = useTheme();
   var animatedValue = React__namespace.default.useRef(new reactNative.Animated.Value(0));
   var translateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
@@ -15092,7 +15092,7 @@ var ActionItem = function ActionItem(_ref) {
       }]
     }
   }, /*#__PURE__*/React__namespace.default.createElement(StyledActionItem, {
-    activeOpacity: 0.8,
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
     testID: testID
@@ -15256,7 +15256,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     onLayout: function onLayout(event) {
       return !hasSetButtonWidth && !active && setButtonWidth(event.nativeEvent.layout.width);
     },
-    activeOpacity: 0.8,
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
@@ -15328,7 +15328,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.76.1-alpha.0",
+  "version": "8.77.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.2-alpha.0",
+    "@hero-design/colors": "8.45.1",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -772,15 +772,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
       style={{}}
     >
       <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
         accessibilityValue={
           {
             "max": undefined,
@@ -790,7 +781,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -804,7 +794,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#000000",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -813,7 +803,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
-            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -866,7 +855,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -893,7 +882,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -1686,15 +1675,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
     </View>
   </RCTScrollView>
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
     accessibilityValue={
       {
         "max": undefined,
@@ -1704,7 +1684,6 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       }
     }
     accessible={true}
-    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -1718,14 +1697,13 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#000000",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
-        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -1777,7 +1755,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -1804,7 +1782,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -1956,15 +1934,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
       style={{}}
     >
       <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
         accessibilityValue={
           {
             "max": undefined,
@@ -1974,7 +1943,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -1988,7 +1956,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#000000",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -1997,7 +1965,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
-            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2050,7 +2017,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2077,7 +2044,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -2210,15 +2177,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
     </View>
   </RCTScrollView>
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
     accessibilityValue={
       {
         "max": undefined,
@@ -2228,7 +2186,6 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       }
     }
     accessible={true}
-    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -2242,14 +2199,13 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#000000",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
-        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -2301,7 +2257,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -2328,7 +2284,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -2787,15 +2743,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
       style={{}}
     >
       <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
         accessibilityValue={
           {
             "max": undefined,
@@ -2805,7 +2752,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -2819,7 +2765,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#000000",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2828,7 +2774,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
-            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2881,7 +2826,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2908,7 +2853,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -3348,15 +3293,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
     </View>
   </RCTScrollView>
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
     accessibilityValue={
       {
         "max": undefined,
@@ -3366,7 +3302,6 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       }
     }
     accessible={true}
-    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -3380,14 +3315,13 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#000000",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
-        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -3439,7 +3373,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -3466,7 +3400,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`StyledAvatar renders correctly with $variant 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -160,7 +160,7 @@ exports[`StyledAvatar renders correctly with $variant 2`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 40,
         "left": undefined,

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -86,7 +86,7 @@ exports[`StyledPressable renders correct style 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,

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

@@ -38,7 +38,7 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -177,7 +177,7 @@ exports[`Avatar prioritizes source over title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -270,7 +270,7 @@ exports[`Avatar shows title when there is no source 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#460078",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,