@hero-design/rn 8.91.1 → 8.91.4

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -54,11 +54,12 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
     style={
       [
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#33144d",
           "borderRadius": 999,
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 1,
           "paddingHorizontal": 4,
           "width": 48,
         },
@@ -102,11 +103,12 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": "#808f91",
           "borderRadius": 999,
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 0.4,
           "paddingHorizontal": 4,
           "width": 48,
         },
@@ -150,11 +152,12 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
     style={
       [
         {
-          "backgroundColor": "#4d6265",
+          "backgroundColor": "#808f91",
           "borderRadius": 999,
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 0.4,
           "paddingHorizontal": 4,
           "width": 48,
         },
@@ -203,6 +206,7 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 1,
           "paddingHorizontal": 4,
           "width": 48,
         },

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

@@ -35,6 +35,7 @@ exports[`Switch renders correctly 1`] = `
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 1,
           "paddingHorizontal": 4,
           "width": 48,
         },
@@ -115,6 +116,7 @@ exports[`Switch trigger press function correctly 1`] = `
           "display": "flex",
           "height": 24,
           "justifyContent": "center",
+          "opacity": 1,
           "paddingHorizontal": 4,
           "width": 48,
         },

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

@@ -169,7 +169,26 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -200,6 +219,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -493,7 +513,26 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -524,6 +563,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -816,7 +856,26 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -847,6 +906,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -1125,7 +1185,26 @@ exports[`TextInput disabled renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -1154,6 +1233,7 @@ exports[`TextInput disabled renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -1397,7 +1477,26 @@ exports[`TextInput error renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -1426,6 +1525,7 @@ exports[`TextInput error renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -1696,7 +1796,26 @@ exports[`TextInput filled renders correctly 1`] = `
           themeTypeface="neutral"
           themeVariant="regular"
         >
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -1725,6 +1844,7 @@ exports[`TextInput filled renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -1983,7 +2103,26 @@ exports[`TextInput helper text renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -2012,6 +2151,7 @@ exports[`TextInput helper text renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -2248,7 +2388,26 @@ exports[`TextInput idle renders correctly 1`] = `
           themeTypeface="neutral"
           themeVariant="regular"
         >
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -2277,6 +2436,7 @@ exports[`TextInput idle renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -2534,7 +2694,26 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -2563,6 +2742,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -2765,6 +2945,7 @@ exports[`TextInput loading renders correctly 1`] = `
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -3019,7 +3200,26 @@ exports[`TextInput max length renders correctly 1`] = `
           >
             *
           </Text>
-          Shout out
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Shout out
+          </Text>
         </Text>
       </View>
       <View
@@ -3050,6 +3250,7 @@ exports[`TextInput max length renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -3364,7 +3565,26 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           >
             *
           </Text>
-          Shout out
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Shout out
+          </Text>
         </Text>
       </View>
       <View
@@ -3395,6 +3615,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -3695,7 +3916,26 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -3724,6 +3964,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -3986,7 +4227,26 @@ exports[`TextInput readonly renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -4015,6 +4275,7 @@ exports[`TextInput readonly renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -4228,7 +4489,26 @@ exports[`TextInput ref ref methods work correctly 1`] = `
           themeTypeface="neutral"
           themeVariant="regular"
         >
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -4257,6 +4537,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -4500,7 +4781,26 @@ exports[`TextInput required renders correctly 1`] = `
           >
             *
           </Text>
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -4529,6 +4829,7 @@ exports[`TextInput required renders correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {
@@ -4741,7 +5042,26 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
           themeTypeface="neutral"
           themeVariant="regular"
         >
-          Amount (AUD)
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Amount (AUD)
+          </Text>
         </Text>
       </View>
       <View
@@ -4771,6 +5091,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
+          placeholderTextColor="#4d6265"
           style={
             [
               {

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

@@ -545,6 +545,7 @@ describe('renderInput', () => {
               />
             );
           },
+          theme,
         })}
       </>
     );
@@ -562,6 +563,7 @@ describe('renderInput', () => {
             testID: 'text-input',
             value: 'text input value',
           },
+          theme,
         })}
       </>
     );

package/src/components/TextInput/index.tsx

@@ -36,10 +36,11 @@ import {
   StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
-import { useTheme } from '../../theme';
+import { Theme, useTheme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';
+import Typography from '../Typography';
 
 export type TextInputHandles = Pick<
   RNTextInput,
@@ -191,12 +192,14 @@ export const renderInput = ({
   nativeInputProps,
   renderInputValue,
   ref,
+  theme,
 }: {
   variant: TextInputVariant;
   nativeInputProps: NativeTextInputProps;
   multiline?: boolean;
   renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
   ref?: React.Ref<RNTextInput>;
+  theme: Theme;
 }) => {
   return renderInputValue ? (
     renderInputValue(nativeInputProps)
@@ -206,6 +209,7 @@ export const renderInput = ({
       themeVariant={variant}
       multiline={variant === 'textarea' || nativeInputProps.multiline}
       ref={ref}
+      placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
     />
   );
 };
@@ -503,7 +507,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                     *
                   </StyledAsteriskLabelInsideTextInput>
                 )}
-                {label}
+                <Typography.Body>{label}</Typography.Body>
               </StyledLabelInsideTextInput>
             )}
           </StyledLabelContainerInsideTextInput>
@@ -516,6 +520,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               ref: (rnTextInputRef) => {
                 innerTextInput.current = rnTextInputRef;
               },
+              theme,
             })}
           </StyledTextInputAndLabelContainer>
           {renderSuffix({ state, loading, suffix })}