@hero-design/rn 8.91.1 → 8.91.4

package/src/components/FAB/Pair/__tests__/__snapshots__/index.spec.tsx.snap

@@ -59,7 +59,7 @@ exports[`FABPair renders correctly 1`] = `
           "backgroundColor": "#000000",
           "borderRadius": 999,
           "bottom": undefined,
-          "elevation": 3,
+          "elevation": 6,
           "flexDirection": "row",
           "height": 48,
           "justifyContent": "center",
@@ -72,7 +72,7 @@ exports[`FABPair renders correctly 1`] = `
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
           "transform": [
             {
               "translateY": 0,
@@ -170,7 +170,7 @@ exports[`FABPair renders correctly 1`] = `
           "backgroundColor": "#000000",
           "borderRadius": 999,
           "bottom": undefined,
-          "elevation": 3,
+          "elevation": 6,
           "flexDirection": "row",
           "height": 48,
           "justifyContent": "center",
@@ -183,7 +183,7 @@ exports[`FABPair renders correctly 1`] = `
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
           "transform": [
             {
               "translateY": 0,

package/src/components/FAB/StyledFAB.tsx

@@ -20,12 +20,8 @@ const StyledFAB = styled(AnimatedTouchableHighlight)<{
   alignSelf: 'flex-start',
   padding: theme.__hd__.fab.space.containerPadding,
   flexDirection: 'row',
-  elevation: theme.__hd__.fab.shadows.elevation,
-  shadowColor: theme.__hd__.fab.shadows.color,
-  shadowOffset: theme.__hd__.fab.shadows.offset,
-  shadowRadius: theme.__hd__.fab.shadows.radius,
-  shadowOpacity: theme.__hd__.fab.shadows.opacity,
   height: theme.__hd__.fab.sizes.height,
+  ...theme.__hd__.fab.shadows.default,
 }));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -42,7 +42,7 @@ exports[`StyledFAB renders correctly 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#000000",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
@@ -54,7 +54,7 @@ exports[`StyledFAB renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
   >
@@ -144,7 +144,7 @@ exports[`StyledFAB renders correctly 2`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#000000",
         "borderRadius": 999,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
@@ -156,7 +156,7 @@ exports[`StyledFAB renders correctly 2`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
       }
     }
   >

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

@@ -44,7 +44,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "backgroundColor": "#001f23",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
@@ -56,7 +56,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,
@@ -183,7 +183,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "backgroundColor": "#001f23",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
@@ -195,7 +195,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,
@@ -335,7 +335,7 @@ exports[`FAB when title has value renders correctly 1`] = `
         "backgroundColor": "#001f23",
         "borderRadius": 999,
         "bottom": undefined,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
@@ -347,7 +347,7 @@ exports[`FAB when title has value renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 0,

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

@@ -50,7 +50,7 @@ exports[`FloatingIsland renders correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -156,7 +156,7 @@ exports[`FloatingIsland renders icons as prefix and suffix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -330,7 +330,7 @@ exports[`FloatingIsland renders prefix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -470,7 +470,7 @@ exports[`FloatingIsland renders suffix correctly 1`] = `
         "opacity": 1,
         "padding": 8,
         "position": "absolute",
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

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

@@ -945,11 +945,12 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             style={
               [
                 {
-                  "backgroundColor": "#401960",
+                  "backgroundColor": "#33144d",
                   "borderRadius": 999,
                   "display": "flex",
                   "height": 24,
                   "justifyContent": "center",
+                  "opacity": 1,
                   "paddingHorizontal": 4,
                   "width": 48,
                 },

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

@@ -260,7 +260,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
           "elevation": 3,
           "flexDirection": "row",
           "padding": 16,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -433,7 +433,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
           "elevation": 3,
           "flexDirection": "row",
           "padding": 16,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,

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

@@ -36,7 +36,7 @@ exports[`MapPin renders applied state correctly 1`] = `
             "elevation": 3,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -177,7 +177,7 @@ exports[`MapPin renders icon correctly 1`] = `
             "elevation": 3,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -267,7 +267,7 @@ exports[`MapPin renders image correctly 1`] = `
             "elevation": 3,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -360,7 +360,7 @@ exports[`MapPin renders selected state correctly 1`] = `
             "elevation": 3,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,

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/Search/SearchOneLine.tsx

@@ -16,6 +16,7 @@ import {
 import { IconName } from '../Icon';
 import { renderPrefix, renderSuffix } from './utils';
 import Button from '../Button';
+import { useTheme } from '../../theme';
 
 export type SearchOneLineHandles = Pick<
   RNTextInput,
@@ -132,7 +133,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
     } = props;
 
     const [isFocused, setIsFocused] = React.useState(false);
-
+    const theme = useTheme();
     const displayText = (value !== undefined ? value : defaultValue) ?? '';
     const isEmptyValue = displayText.length === 0;
 
@@ -215,6 +216,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
               value,
               defaultValue,
               placeholder,
+              placeholderTextColor: theme.__hd__.textInput.colors.placeholder,
             },
             ref: (rnTextInputRef) => {
               innerTextInput.current = rnTextInputRef;

package/src/components/Search/__tests__/__snapshots__/SearchOneLine.spec.tsx.snap

@@ -76,6 +76,7 @@ exports[`SearchOneLine idle renders correctly 1`] = `
         onBlur={[Function]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -213,6 +214,7 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
         onBlur={[Function]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -357,6 +359,7 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
         onBlur={[Function]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -502,6 +505,7 @@ exports[`filled disabled renders correctly 1`] = `
         onChangeText={[MockFunction]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -648,6 +652,7 @@ exports[`filled readonly renders correctly 1`] = `
         onChangeText={[MockFunction]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -793,6 +798,7 @@ exports[`filled renders clearable input correctly 1`] = `
         onBlur={[Function]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
@@ -973,6 +979,7 @@ exports[`filled renders correctly 1`] = `
         onBlur={[Function]}
         onFocus={[Function]}
         placeholder="Search"
+        placeholderTextColor="#4d6265"
         style={
           [
             {