@hero-design/rn 8.91.4 → 8.91.5

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

@@ -58,7 +58,12 @@ exports[`MapPin renders applied state correctly 1`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            undefined,
+            [
+              {
+                "color": "#000000",
+              },
+              undefined,
+            ],
           ]
         }
         testID="map-pin-icon"
@@ -67,54 +72,43 @@ exports[`MapPin renders applied state correctly 1`] = `
       />
     </View>
     <View
-      collapsable={false}
       style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#795e90",
-          "borderColor": "#795e90",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 24,
-          "justifyContent": "center",
-          "minWidth": 24,
-          "opacity": 1,
-          "paddingHorizontal": undefined,
-          "position": "absolute",
-          "right": -8,
-          "top": -8,
-          "transform": [
-            {
-              "scale": 1,
-            },
-          ],
-          "zIndex": 2,
-        }
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#795e90",
+            "borderRadius": 999,
+            "height": 24,
+            "justifyContent": "center",
+            "position": "absolute",
+            "right": -8,
+            "top": -8,
+            "width": 24,
+            "zIndex": 2,
+          },
+          undefined,
+        ]
       }
       testID="map-pin-badge"
-      themeIntent="primary"
-      themePadding="narrowContent"
-      themeSize="medium"
-      themeVariant="filled"
     >
       <HeroIcon
         name="mail-outlined"
         style={
           [
             {
-              "color": "#ffffff",
-              "fontSize": 24,
+              "color": "#001f23",
+              "fontSize": 12,
             },
             [
               {
-                "fontSize": 12,
+                "color": "#ffffff",
               },
               undefined,
             ],
           ]
         }
-        themeIntent="text-inverted"
-        themeSize="medium"
+        themeIntent="text"
+        themeSize="xxxsmall"
       />
     </View>
   </View>
@@ -199,7 +193,12 @@ exports[`MapPin renders icon correctly 1`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            undefined,
+            [
+              {
+                "color": "#000000",
+              },
+              undefined,
+            ],
           ]
         }
         testID="map-pin-icon"
@@ -382,7 +381,12 @@ exports[`MapPin renders selected state correctly 1`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            undefined,
+            [
+              {
+                "color": "#000000",
+              },
+              undefined,
+            ],
           ]
         }
         testID="map-pin-icon"
@@ -391,54 +395,43 @@ exports[`MapPin renders selected state correctly 1`] = `
       />
     </View>
     <View
-      collapsable={false}
       style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#795e90",
-          "borderColor": "#795e90",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 24,
-          "justifyContent": "center",
-          "minWidth": 24,
-          "opacity": 1,
-          "paddingHorizontal": undefined,
-          "position": "absolute",
-          "right": -8,
-          "top": -8,
-          "transform": [
-            {
-              "scale": 1,
-            },
-          ],
-          "zIndex": 2,
-        }
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#795e90",
+            "borderRadius": 999,
+            "height": 24,
+            "justifyContent": "center",
+            "position": "absolute",
+            "right": -8,
+            "top": -8,
+            "width": 24,
+            "zIndex": 2,
+          },
+          undefined,
+        ]
       }
       testID="map-pin-badge"
-      themeIntent="primary"
-      themePadding="narrowContent"
-      themeSize="medium"
-      themeVariant="filled"
     >
       <HeroIcon
         name="checkmark"
         style={
           [
             {
-              "color": "#ffffff",
-              "fontSize": 24,
+              "color": "#001f23",
+              "fontSize": 12,
             },
             [
               {
-                "fontSize": 12,
+                "color": "#ffffff",
               },
               undefined,
             ],
           ]
         }
-        themeIntent="text-inverted"
-        themeSize="medium"
+        themeIntent="text"
+        themeSize="xxxsmall"
       />
     </View>
   </View>

package/src/components/MapPin/index.tsx

@@ -3,9 +3,11 @@ import {
   StyledContainer,
   StyledBadge,
   StyledImage,
+  StyledIcon,
+  StyledBadgeIcon,
   StyledContent,
 } from './StyledMapPin';
-import Icon, { IconName } from '../Icon';
+import { IconName } from '../Icon';
 import { MapPinProps } from './types';
 import MapPinFocussed from './Focussed';
 
@@ -40,20 +42,17 @@ const MapPin = ({
           />
         )}
         {icon && (
-          <Icon
+          <StyledIcon
             icon={icon}
             size="xsmall"
-            intent="text"
             testID={testID ? `${testID}-icon` : undefined}
           />
         )}
       </StyledContent>
       {badgeIcon && (
-        <StyledBadge
-          icon={badgeIcon}
-          intent="primary"
-          testID={testID ? `${testID}-badge` : undefined}
-        />
+        <StyledBadge testID={testID ? `${testID}-badge` : undefined}>
+          <StyledBadgeIcon icon={badgeIcon} size="xxxsmall" />
+        </StyledBadge>
       )}
     </StyledContainer>
   );

package/src/components/Search/StyledSearch.tsx

@@ -41,10 +41,7 @@ export const StyledInputContainer = styled(View)<{
       ? theme.__hd__.search.colors[themeVariant].focusedBorder
       : theme.__hd__.search.colors[themeVariant].border,
     ...(themeVariant === 'reversed' && {
-      elevation: theme.__hd__.search.shadows.elevation,
-      shadowOffset: theme.__hd__.search.shadows.offset,
-      shadowOpacity: theme.__hd__.search.shadows.opacity,
-      shadowRadius: theme.__hd__.search.shadows.radius,
+      ...theme.__hd__.search.shadows.container,
     }),
   };
 });

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

@@ -305,17 +305,18 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
             "borderColor": "#e8e9ea",
             "borderRadius": 999,
             "borderWidth": 1,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 56,
             "paddingHorizontal": 7,
             "paddingVertical": 7,
+            "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
           },
           undefined,
         ]

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

@@ -198,17 +198,18 @@ exports[`SearchTwoLine renders reserved variant correctly 1`] = `
             "borderColor": "#e8e9ea",
             "borderRadius": 999,
             "borderWidth": 1,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 56,
             "paddingHorizontal": 7,
             "paddingVertical": 7,
+            "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
           },
           undefined,
         ]

package/src/components/Toast/StyledToast.tsx

@@ -25,11 +25,7 @@ const Container = styled(Animated.View)<{
   backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
-  shadowColor: theme.__hd__.toast.shadows.color,
-  shadowOffset: theme.__hd__.toast.shadows.offset,
-  shadowRadius: theme.__hd__.toast.shadows.radius,
-  shadowOpacity: theme.__hd__.toast.shadows.opacity,
-  elevation: theme.__hd__.toast.shadows.elevation,
+  ...theme.__hd__.toast.shadows.wrapper,
 }));
 
 const IconContainer = styled(View)<ViewProps>(({ theme }) => ({

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

@@ -14,17 +14,17 @@ exports[`Toast Icon render custom icon correctly 1`] = `
       {
         "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -159,17 +159,17 @@ exports[`Toast renders correctly when intent is error 1`] = `
       {
         "backgroundColor": "#fcebe7",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -367,17 +367,17 @@ exports[`Toast renders correctly when intent is info 1`] = `
       {
         "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -575,17 +575,17 @@ exports[`Toast renders correctly when intent is notification 1`] = `
       {
         "backgroundColor": "#ffffff",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -751,17 +751,17 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
       {
         "backgroundColor": "#001f23",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -927,17 +927,17 @@ exports[`Toast renders correctly when intent is success 1`] = `
       {
         "backgroundColor": "#f0fef4",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,
@@ -1135,17 +1135,17 @@ exports[`Toast renders correctly when intent is warning 1`] = `
       {
         "backgroundColor": "#fff6eb",
         "borderRadius": 0,
-        "elevation": 3,
+        "elevation": 6,
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#121214",
+        "shadowColor": "#001f23",
         "shadowOffset": {
           "height": 2,
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 4,
+        "shadowRadius": 2,
         "transform": [
           {
             "translateY": 20,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -38,6 +38,18 @@ exports[`theme returns correct theme object 1`] = `
       "radii": {
         "default": 16,
       },
+      "shadows": {
+        "wrapper": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
+        },
+      },
       "sizes": {
         "height": 48,
       },
@@ -183,18 +195,25 @@ exports[`theme returns correct theme object 1`] = `
       },
     },
     "bottomNavigation": {
+      "borderWidths": {
+        "borderTop": 1,
+      },
       "colors": {
         "background": "#ffffff",
+        "borderTop": "#e8e9ea",
         "shadow": "#401960",
       },
       "shadows": {
-        "elevation": 10,
-        "offset": {
-          "height": 3,
-          "width": 0,
+        "wrapper": {
+          "elevation": 10,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": -4,
+            "width": 0,
+          },
+          "shadowOpacity": 0.04,
+          "shadowRadius": 6,
         },
-        "opacity": 0.27,
-        "radius": 4.65,
       },
       "sizes": {
         "height": 72,
@@ -436,7 +455,7 @@ exports[`theme returns correct theme object 1`] = `
         "outlinedDefaultBorder": "#bfc1c5",
         "outlinedSelectedBackground": "#e8e9ea",
         "outlinedSelectedBorder": "#001f23",
-        "secondaryBackground": "#ece8ef",
+        "secondaryBackground": undefined,
         "wrapperSelectedBorder": "transparent",
       },
       "fontSizes": {
@@ -447,14 +466,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "filledWrapper": {
-          "elevation": 3,
-          "shadowColor": "#121214",
+          "elevation": 6,
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -648,14 +667,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "wrapper": {
-          "elevation": 3,
-          "shadowColor": "#121214",
+          "elevation": 6,
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -717,14 +736,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "card": {
-          "color": "#121214",
-          "elevation": 3,
-          "offset": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
             "height": 2,
             "width": 0,
           },
-          "opacity": 0.12,
-          "radius": 4,
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -745,16 +764,19 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "background": "#ffffff",
         "badge": "#795e90",
+        "badgeIcon": "#ffffff",
         "border": {
           "applied": "#795e90",
           "idle": "#ffffff",
           "selected": "#795e90",
         },
+        "icon": "#000000",
       },
       "fontSizes": {
         "icon": 42,
       },
       "radii": {
+        "badge": 999,
         "default": 12,
       },
       "shadows": {
@@ -768,6 +790,7 @@ exports[`theme returns correct theme object 1`] = `
         "radius": 4,
       },
       "sizes": {
+        "badge": 24,
         "default": 42,
       },
       "space": {
@@ -981,14 +1004,16 @@ exports[`theme returns correct theme object 1`] = `
         "surfix": 999,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "container": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "surfixSize": 40,
@@ -1366,14 +1391,16 @@ exports[`theme returns correct theme object 1`] = `
         "default": 16,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "wrapper": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "height": 48,

package/src/theme/components/alert.ts

@@ -38,7 +38,11 @@ const getAlertTheme = (theme: GlobalTheme) => {
     base: theme.borderWidths.base,
   };
 
-  return { colors, radii, sizes, space, borderWidths };
+  const shadows = {
+    wrapper: theme.shadows.cardDrawer,
+  };
+
+  return { colors, radii, sizes, space, borderWidths, shadows };
 };
 
 export default getAlertTheme;

package/src/theme/components/avatar.ts

@@ -7,7 +7,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.onDarkGlobalSurface,
+    text: theme.colors.white,
   };
 
   const sizes = {