@hero-design/rn 7.24.0 → 7.25.1

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

@@ -73,7 +73,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#f46363",
+                "color": "#de350b",
               },
               undefined,
             ],
@@ -161,6 +161,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -328,7 +329,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             },
             Array [
               Object {
-                "color": "#f46363",
+                "color": "#de350b",
               },
               undefined,
             ],
@@ -416,6 +417,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -656,6 +658,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -722,7 +725,7 @@ exports[`TextInput error renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -796,7 +799,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 14,
                 },
                 undefined,
@@ -858,6 +861,7 @@ exports[`TextInput error renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -931,7 +935,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -1086,6 +1090,7 @@ exports[`TextInput filled renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -1241,7 +1246,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 14,
                 },
                 undefined,
@@ -1303,6 +1308,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -1505,6 +1511,7 @@ exports[`TextInput idle renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -1659,7 +1666,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 14,
                 },
                 undefined,
@@ -1721,6 +1728,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -1865,6 +1873,7 @@ exports[`TextInput loading renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -1959,7 +1968,7 @@ exports[`TextInput max length renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2003,7 +2012,7 @@ exports[`TextInput max length renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#f46363",
+                "color": "#de350b",
               },
               undefined,
             ],
@@ -2076,6 +2085,7 @@ exports[`TextInput max length renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -2150,7 +2160,7 @@ exports[`TextInput max length renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -2179,7 +2189,7 @@ exports[`TextInput max length renders correctly 1`] = `
             Array [
               Object {
                 "alignSelf": "flex-end",
-                "color": "#f46363",
+                "color": "#de350b",
                 "flex": 1,
                 "flexGrow": 1,
                 "fontSize": 12,
@@ -2307,7 +2317,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 14,
                 },
                 undefined,
@@ -2369,6 +2379,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -2527,7 +2538,7 @@ exports[`TextInput readonly renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#bfc1c5",
+                "color": "#808f91",
               },
               undefined,
             ],
@@ -2588,6 +2599,7 @@ exports[`TextInput readonly renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {
@@ -2743,7 +2755,7 @@ exports[`TextInput required renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 14,
                 },
                 undefined,
@@ -2805,6 +2817,7 @@ exports[`TextInput required renders correctly 1`] = `
               "flexGrow": 2,
               "fontSize": 14,
               "marginHorizontal": 8,
+              "paddingVertical": 0,
               "textAlignVertical": "center",
             },
             Object {

package/src/components/TextInput/index.tsx

@@ -191,6 +191,7 @@ const TextInput = ({
     accessibilityState: {
       disabled: variant === 'disabled' || variant === 'readonly',
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     accessibilityLabelledBy,
     ...nativeProps,

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -139,6 +139,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -139,6 +139,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {
@@ -252,32 +253,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
               ]
             }
           >
-            <View
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              nativeID="animatedComponent"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#001f23",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0.48,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            />
             <View
               onLayout={[Function]}
               style={
@@ -295,6 +270,32 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 ]
               }
             >
+              <View
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                nativeID="animatedComponent"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#001f23",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0.48,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              />
               <RCTSafeAreaView
                 collapsable={false}
                 emulateUnlessSupported={true}
@@ -503,7 +504,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#001f23",
+                              "color": "#401960",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

package/src/components/Toast/Toast.tsx

@@ -66,9 +66,6 @@ const Toast = ({
 
       return () => clearTimeout(id);
     }
-
-    // Consistent return
-    return () => {};
   }, []);
 
   useEffect(() => {

package/src/components/Toast/ToastProvider.tsx

@@ -20,6 +20,7 @@ const ToastProvider = ({
   position = 'top',
 }: ToastProviderProps) => {
   const toastRef = useRef<ToastControllerContextType>(null);
+  // @ts-expect-error: TODO: @tungv Fix this type error
   const [refState, setRefState] = useState<ToastControllerContextType>(null);
 
   useEffect(() => {

package/src/components/Toast/__tests__/index.spec.tsx

@@ -70,7 +70,7 @@ describe('Toast', () => {
   it(`"hide" method works correctly`, () => {
     const Component = () => {
       const toast = Toast.useToast();
-      const [id, setId] = useState(null);
+      const [id, setId] = useState('');
 
       useEffect(() => {
         const toastId = toast.show({

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

@@ -41,7 +41,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -55,7 +55,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -97,7 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -111,7 +111,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -171,7 +171,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -185,7 +185,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -227,7 +227,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -241,7 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -301,7 +301,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -315,7 +315,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -357,7 +357,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
@@ -371,7 +371,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,

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

@@ -27,7 +27,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#4d6265",
+          "color": "#bfc1c5",
           "fontSize": 24,
         },
         undefined,
@@ -159,7 +159,7 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     style={
       Array [
         Object {
-          "color": "#b5c3fd",
+          "color": "#4568fb",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -204,7 +204,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#001f23",
+          "color": "#401960",
           "fontSize": 24,
         },
         undefined,
@@ -218,7 +218,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#001f23",
+          "color": "#401960",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -277,7 +277,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     style={
       Array [
         Object {
-          "color": "#5ace7d",
+          "color": "#017d6d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -336,7 +336,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#ffbe71",
+          "color": "#ffa234",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`StyledText has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#b5c3fd",
+        "color": "#4568fb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -159,7 +159,7 @@ exports[`StyledText has primary intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#001f23",
+        "color": "#401960",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -269,7 +269,7 @@ exports[`StyledText has success intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#5ace7d",
+        "color": "#017d6d",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -291,7 +291,7 @@ exports[`StyledText has warning intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#ffbe71",
+        "color": "#ffa234",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

package/src/emotion.d.ts

@@ -2,5 +2,6 @@ import '@emotion/react';
 import { Theme as HeroTheme } from './theme';
 
 declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends HeroTheme {}
 }

package/src/index.ts

@@ -5,12 +5,15 @@ import theme, {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
   ThemeSwitcher,
 } from './theme';
 import { scale } from './utils/scale';
 
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
+import Attachment from './components/Attachment';
 import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
@@ -59,8 +62,11 @@ export {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
   Accordion,
   Alert,
+  Attachment,
   Avatar,
   Badge,
   BottomNavigation,

package/src/theme/ThemeSwitcher.tsx

@@ -6,10 +6,12 @@ import {
   swagSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
+  walletSystemPalette,
+  eBensSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'work' | 'jobs';
+type ThemeName = 'swag' | 'work' | 'jobs' | 'wallet' | 'eBens';
 
 const ThemeSwitcher = ({
   name = 'swag',
@@ -26,6 +28,10 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, workSystemPalette);
       case 'jobs':
         return getTheme(defaultScale, jobsSystemPalette);
+      case 'wallet':
+        return getTheme(defaultScale, walletSystemPalette);
+      case 'eBens':
+        return getTheme(defaultScale, eBensSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;