@hero-design/rn 8.35.0-alpha.4 → 8.35.1

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -225,7 +225,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -248,7 +248,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -297,7 +297,7 @@ exports[`RichTextEditor should render correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -491,7 +491,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -514,7 +514,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,

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

@@ -44,7 +44,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
         style={
           Array [
             Object {
-              "color": "#de350b",
+              "color": "#cb300a",
               "fontSize": 24,
             },
             undefined,

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

@@ -38,7 +38,7 @@ exports[`Skeleton renders correctly by default 1`] = `
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -109,7 +109,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -180,7 +180,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -251,7 +251,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -322,7 +322,7 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -393,7 +393,7 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -464,7 +464,7 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }

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

@@ -3,6 +3,11 @@
 exports[`Swipeable renders correctly 1`] = `
 <View>
   <View
+    containerStyle={
+      Object {
+        "borderRadius": 8,
+      }
+    }
     onSwipeableClose={[Function]}
     onSwipeableLeftOpen={[Function]}
     onSwipeableRightOpen={[Function]}

package/src/components/Swipeable/index.tsx

@@ -7,11 +7,12 @@ import React, {
 } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
 import {
-  Swipeable as RnghSwipeable,
   GestureHandlerRootView,
   RectButton,
+  Swipeable as RnghSwipeable,
 } from 'react-native-gesture-handler';
 import SwipeableAction from './SwipeableAction';
+import { useTheme } from '../../theme';
 
 type State = 'closed' | 'leftOpen' | 'rightOpen';
 // We are supporting both v1 and v2 of RNGH at the same time.
@@ -102,6 +103,7 @@ const Swipeable = ({
   rightActionsWidth,
   ...swipeableProps
 }: SwipeableProps) => {
+  const theme = useTheme();
   const { width } = useWindowDimensions();
   const swipeableRef = useRef<RnghSwipeable>(null);
 
@@ -147,6 +149,9 @@ const Swipeable = ({
         onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
         onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
         onSwipeableClose={() => onStateChange?.('closed')}
+        containerStyle={{
+          borderRadius: theme.__hd__.swipeable.radii.swipeableContainer,
+        }}
       >
         {children}
       </RnghSwipeable>

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, Animated } from 'react-native';
+import { View, Animated, StyleSheet } from 'react-native';
 
 const AnimatedView = Animated.createAnimatedComponent(View);
 
@@ -9,7 +9,8 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   height: theme.__hd__.switch.sizes.selector.height,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.background,
-  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  paddingHorizontal:
+    theme.__hd__.switch.spaces.selector.wrapperHorizontalPadding,
   position: 'relative',
 }));
 
@@ -29,11 +30,7 @@ export const StyledIconWrapper = styled(AnimatedView)(({ theme }) => ({
 }));
 
 export const StyledKnot = styled(AnimatedView)(({ theme }) => ({
+  ...StyleSheet.absoluteFillObject,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
-  position: 'absolute',
-  top: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  bottom: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  left: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  right: theme.__hd__.switch.spaces.selector.wrapperPadding,
 }));

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -43,7 +43,7 @@ exports[`Option renders correctly when not selected 1`] = `
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "#de350b",
+          "backgroundColor": "#cb300a",
           "borderRadius": 999,
           "height": 8,
           "opacity": 1,
@@ -114,7 +114,7 @@ exports[`Option renders correctly when selected 1`] = `
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "#de350b",
+          "backgroundColor": "#cb300a",
           "borderRadius": 999,
           "height": 8,
           "opacity": 1,
@@ -179,7 +179,7 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -15,11 +15,11 @@ exports[`SelectorSwitch renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "flexDirection": "row",
-        "height": 56,
-        "padding": 4,
+        "height": 40,
+        "paddingHorizontal": 4,
         "position": "relative",
         "width": "100%",
       },
@@ -109,7 +109,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
         collapsable={false}
         style={
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 999,
             "height": 8,
             "opacity": 1,
@@ -132,13 +132,13 @@ exports[`SelectorSwitch renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#ccd2d3",
         "borderRadius": 999,
-        "bottom": 4,
-        "left": 4,
+        "bottom": 0,
+        "left": 0,
         "position": "absolute",
-        "right": 4,
-        "top": 4,
+        "right": 0,
+        "top": 0,
         "transform": Array [
           Object {
             "translateX": 0,

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -7,14 +7,13 @@ import React, {
 } from 'react';
 import {
   Animated,
+  Easing,
+  LayoutChangeEvent,
   Platform,
   StyleProp,
   TouchableWithoutFeedback,
   ViewStyle,
-  Easing,
-  LayoutChangeEvent,
 } from 'react-native';
-import { useTheme } from '@emotion/react';
 import type { IconName } from '../../Icon';
 import Option from './Option';
 import { StyledKnot, StyledWrapper } from './StyledSelectorSwitch';
@@ -61,17 +60,13 @@ const SelectorSwitch = <T,>({
   style,
   testID,
 }: SelectorSwitchProps<T>): ReactElement => {
-  const theme = useTheme();
   const [knotWidth, setKnotWidth] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const animatedValue = useRef(new Animated.Value(0)).current;
 
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [
-      0,
-      Math.floor(containerWidth - knotWidth - theme.space.small),
-    ],
+    outputRange: [0, Math.floor(containerWidth - knotWidth)],
   });
 
   useEffect(() => {
@@ -81,14 +76,11 @@ const SelectorSwitch = <T,>({
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
     }).start();
-  }, [value]);
+  }, [value, animatedValue, options]);
 
-  const onContainerLayout = useCallback(
-    (e: LayoutChangeEvent) => {
-      setContainerWidth(e.nativeEvent.layout.width);
-    },
-    [options]
-  );
+  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  }, []);
 
   const onItemLayout = useCallback(
     (e: LayoutChangeEvent, optionValue: T) => {

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

@@ -26,7 +26,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -238,7 +238,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -339,7 +339,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -434,7 +434,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -485,7 +485,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -556,7 +556,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -612,7 +612,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",
@@ -845,7 +845,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1057,7 +1057,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1158,7 +1158,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1253,7 +1253,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1304,7 +1304,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -1375,7 +1375,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1431,7 +1431,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",
@@ -1664,7 +1664,7 @@ exports[`useIsFocused renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1876,7 +1876,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1977,7 +1977,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2072,7 +2072,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2123,7 +2123,7 @@ exports[`useIsFocused renders correctly 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -2194,7 +2194,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2250,7 +2250,7 @@ exports[`useIsFocused renders correctly 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",

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

@@ -150,7 +150,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": "#ccd2d3",
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -251,7 +251,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -346,7 +346,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -397,7 +397,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "backgroundColor": "#de350b",
+                      "backgroundColor": "#cb300a",
                       "borderRadius": 999,
                       "height": 8,
                       "opacity": 1,
@@ -468,7 +468,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -524,7 +524,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                   style={
                     Object {
                       "alignItems": "center",
-                      "backgroundColor": "#4568fb",
+                      "backgroundColor": "#355bfb",
                       "borderRadius": 999,
                       "height": 20,
                       "justifyContent": "center",

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

@@ -18,7 +18,7 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#4568fb",
+        "backgroundColor": "#355bfb",
         "borderRadius": 999,
         "height": 20,
         "justifyContent": "center",
@@ -80,7 +80,7 @@ exports[`TabWithBadge renders correctly with status badge config 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

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

@@ -26,7 +26,7 @@ exports[`Tabs renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -281,7 +281,7 @@ exports[`Tabs renders correctly 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -360,7 +360,7 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",
@@ -609,7 +609,7 @@ exports[`useIsFocused renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -864,7 +864,7 @@ exports[`useIsFocused renders correctly 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -943,7 +943,7 @@ exports[`useIsFocused renders correctly 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",
@@ -1192,7 +1192,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1447,7 +1447,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -1526,7 +1526,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",