@hero-design/rn 8.91.3 → 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/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -377,16 +377,8 @@ exports[`rendering allows custom renderer 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -1943,17 +1935,9 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
               {
                 "backgroundColor": "#ffffff",
                 "borderRadius": 32,
-                "elevation": 10,
                 "maxHeight": "100%",
                 "padding": 8,
                 "paddingBottom": 0,
-                "shadowColor": "#001f23",
-                "shadowOffset": {
-                  "height": 3,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.4,
-                "shadowRadius": 16,
                 "transform": [
                   {
                     "scaleY": 1,
@@ -3994,16 +3978,8 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -6079,16 +6055,8 @@ exports[`rendering renders correctly when receives sections 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -7424,16 +7392,8 @@ exports[`rendering renders correctly when receives sections 2`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -376,16 +376,8 @@ exports[`rendering allows custom renderer 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -1857,17 +1849,9 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
               {
                 "backgroundColor": "#ffffff",
                 "borderRadius": 32,
-                "elevation": 10,
                 "maxHeight": "100%",
                 "padding": 8,
                 "paddingBottom": 0,
-                "shadowColor": "#001f23",
-                "shadowOffset": {
-                  "height": 3,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.4,
-                "shadowRadius": 16,
                 "transform": [
                   {
                     "scaleY": 1,
@@ -3795,16 +3779,8 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,
@@ -5739,16 +5715,8 @@ exports[`rendering renders correctly when receives sections 1`] = `
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
-              "elevation": 10,
               "maxHeight": "94%",
               "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
               "transform": [
                 {
                   "scaleY": 1,

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

@@ -12,7 +12,7 @@ exports[`StyledKnot renders correct style 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": undefined,
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "height": 16,
         "width": 16,

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

@@ -49,7 +49,7 @@ exports[`Switch renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": undefined,
+          "backgroundColor": "#ffffff",
           "borderRadius": 999,
           "height": 16,
           "left": 0,
@@ -130,7 +130,7 @@ exports[`Switch trigger press function correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": undefined,
+          "backgroundColor": "#ffffff",
           "borderRadius": 999,
           "height": 16,
           "left": 0,

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

@@ -720,15 +720,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,

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,