@hero-design/rn 8.89.0 → 8.91.0-alpha.0

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

@@ -132,7 +132,7 @@ exports[`Card renders correctly when intent is danger 1`] = `
 </View>
 `;
 
-exports[`Card renders correctly when intent is info 1`] = `
+exports[`Card renders correctly when intent is neutral 1`] = `
 <View
   style={
     {
@@ -144,14 +144,14 @@ exports[`Card renders correctly when intent is info 1`] = `
     style={
       [
         {
-          "backgroundColor": "#b5c3fd",
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "overflow": "hidden",
         },
         undefined,
       ]
     }
-    themeIntent="info"
+    themeIntent="neutral"
     themeVariant="basic"
   >
     <Text
@@ -264,7 +264,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
 </View>
 `;
 
-exports[`Card renders correctly when intent is subdued 1`] = `
+exports[`Card renders correctly when intent is secondary 1`] = `
 <View
   style={
     {
@@ -276,13 +276,14 @@ exports[`Card renders correctly when intent is subdued 1`] = `
     style={
       [
         {
+          "backgroundColor": "#ece8ef",
           "borderRadius": 12,
           "overflow": "hidden",
         },
         undefined,
       ]
     }
-    themeIntent="subdued"
+    themeIntent="secondary"
     themeVariant="basic"
   >
     <Text
@@ -458,3 +459,69 @@ exports[`Card renders correctly when intent is undefined 1`] = `
   />
 </View>
 `;
+
+exports[`Card renders correctly when intent is warning 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#ffbe71",
+          "borderRadius": 12,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+    themeVariant="basic"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Card Content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -33,11 +33,12 @@ describe('Card', () => {
     intent
     ${undefined}
     ${'primary'}
+    ${'secondary'}
     ${'success'}
-    ${'info'}
+    ${'warning'}
     ${'danger'}
     ${'archived'}
-    ${'subdued'}
+    ${'neutral'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -14,6 +14,7 @@ export interface CardProps extends ViewProps {
    */
   intent?:
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'warning'
     | 'danger'

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -7,6 +7,7 @@ import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
 import useCalculateDate from './useCalculateDate';
+import { useTheme } from '../../theme';
 
 type DatePickerAndroidProps = Omit<
   DatePickerProps,
@@ -35,6 +36,7 @@ const DatePickerAndroid = ({
   const pickerInitValue = value || new Date();
 
   useCalculateDate({ minDate, maxDate, onChange, value });
+  const theme = useTheme();
 
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
@@ -54,6 +56,7 @@ const DatePickerAndroid = ({
       </View>
       {open && variant === 'month-year' ? (
         <MonthYearPickerDialogueAndroid
+          themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
           value={value}
           minimumDate={minDate}
           maximumDate={maxDate}

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -86,6 +86,7 @@ const DatePickerIOS = ({
               value={value}
               locale={locale}
               minimumDate={minDate}
+              textColor={theme.colors.onDefaultGlobalSurface}
               maximumDate={maxDate}
               onChange={(date: Date | undefined) => {
                 if (date) {

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

@@ -162,7 +162,26 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -444,7 +463,26 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -726,7 +764,26 @@ exports[`DatePicker renders variant Calendar 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerIOS renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -831,7 +850,26 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/types.ts

@@ -81,4 +81,8 @@ export interface DatePickerProps {
    * Locale for the date picker, iOS only.
    */
   locale?: string;
+  /**
+   * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode.
+   * */
+  autoTheme?: boolean;
 }

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

@@ -344,7 +344,7 @@ exports[`Error renders full screen error page correctly 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "backgroundColor": "#ffffff",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",

package/src/components/Icon/HeroIcon/index.tsx

@@ -2,7 +2,13 @@ import { createIconSet } from 'react-native-vector-icons';
 import styled from '@emotion/native';
 import glyphMap from './glyphMap.json';
 
-type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeSize =
+  | 'xxxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge';
 type ThemeIntent =
   | 'text'
   | 'primary'

package/src/components/Icon/index.tsx

@@ -29,7 +29,7 @@ export interface IconProps extends AccessibilityProps {
   /**
    * Size of the Icon.
    */
-  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'xxxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Rotate icon with animation.
    */

package/src/components/Image/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Image as RNImage } from 'react-native';
 import type { ImageProps as RNImageProps } from 'react-native';
 import { useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ImageProps extends RNImageProps {
   /**
@@ -25,6 +26,10 @@ const Image = ({
   style,
   ...imageNativeProps
 }: ImageProps): JSX.Element => {
+  useDeprecation(
+    'Image component will soon be deprecated. Please use `Image` from `react-native` instead.'
+  );
+
   const theme = useTheme();
   const imageSize = theme.__hd__.image.sizes[size];
   return (

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -198,7 +198,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -282,7 +282,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 0.38,

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -428,7 +428,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "elevation": 3,
           "flexDirection": "row",
@@ -518,7 +518,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

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

@@ -34,7 +34,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
@@ -201,7 +201,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -299,7 +299,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,
@@ -732,7 +732,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -39,6 +39,7 @@ import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
 import { TextUnit } from './types';
+import Typography from '../Typography';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -408,7 +409,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
                 *
               </StyledAsteriskLabelInsideTextInput>
             )}
-            {label}
+            <Typography.Body>{label}</Typography.Body>
           </StyledLabelInsideTextInput>
         )}
       </StyledLabelContainerInsideTextInput>

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

@@ -83,7 +83,26 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Rich Text Editor
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Rich Text Editor
+        </Text>
       </Text>
     </View>
     <View
@@ -405,7 +424,26 @@ exports[`RichTextEditor should render correctly 1`] = `
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Rich Text Editor
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Rich Text Editor
+        </Text>
       </Text>
     </View>
     <View

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -35,7 +35,7 @@ exports[`Option renders correctly 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -224,7 +224,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1098,7 +1098,7 @@ exports[`OptionList renders correctly 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -1819,7 +1819,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2085,7 +2085,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,
@@ -2568,7 +2568,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ece8ef",
+                  "backgroundColor": undefined,
                   "borderRadius": 4,
                   "flexDirection": "row",
                   "opacity": 1,