@hero-design/rn 8.34.2-alpha.0 → 8.34.3

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

@@ -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",
@@ -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",
@@ -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

@@ -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",
@@ -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",
@@ -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",

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

@@ -31,7 +31,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -80,7 +80,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -178,7 +178,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -202,7 +202,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
     Array [
       Object {
         "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -227,7 +227,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -251,7 +251,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
     Array [
       Object {
         "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
+        "borderColor": "#355bfb",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -276,7 +276,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -398,7 +398,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     Array [
       Object {
         "backgroundColor": "#fff6eb",
-        "borderColor": "#ffa234",
+        "borderColor": "#ac5d00",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -423,7 +423,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -343,7 +343,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -401,7 +401,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -430,7 +430,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -479,7 +479,7 @@ exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "bottom": 0,
@@ -545,7 +545,7 @@ exports[`StyledBorderBackDrop renders correctly with themeState error 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -620,7 +620,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "marginLeft": 4,
         },
         undefined,
@@ -763,7 +763,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#de350b",
+          "color": "#cb300a",
           "flex": 1,
           "flexGrow": 1,
           "marginRight": 4,

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

@@ -85,7 +85,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -360,7 +360,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -634,7 +634,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -1062,7 +1062,7 @@ exports[`TextInput error renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -1144,7 +1144,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -1267,7 +1267,7 @@ exports[`TextInput error renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -1290,7 +1290,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -1632,7 +1632,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2086,7 +2086,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2415,7 +2415,7 @@ exports[`TextInput max length renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2469,7 +2469,7 @@ exports[`TextInput max length renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2607,7 +2607,7 @@ exports[`TextInput max length renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2630,7 +2630,7 @@ exports[`TextInput max length renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -2658,7 +2658,7 @@ exports[`TextInput max length renders correctly 1`] = `
             Array [
               Object {
                 "alignSelf": "flex-end",
-                "color": "#de350b",
+                "color": "#cb300a",
                 "flex": 1,
                 "flexGrow": 1,
                 "marginRight": 4,
@@ -2712,7 +2712,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2766,7 +2766,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2904,7 +2904,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2927,7 +2927,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -3059,7 +3059,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -3716,7 +3716,7 @@ exports[`TextInput required renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -174,7 +174,7 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#355bfb",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
           "letterSpacing": 0.24,

package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -49,7 +49,7 @@ exports[`StyledBody has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "letterSpacing": 0.48,