@hero-design/rn 8.65.1 → 8.68.0-alpha.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -100,7 +100,7 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
@@ -169,7 +169,7 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#795e90",
+          "backgroundColor": "#460078",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
@@ -310,7 +310,7 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
           "alignItems": "center",
           "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#401960",
+          "borderColor": "#7622d7",
           "borderRadius": 32,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -381,7 +381,7 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
           "alignItems": "center",
           "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#795e90",
+          "borderColor": "#460078",
           "borderRadius": 32,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -923,7 +923,7 @@ exports[`StyledButtonIcon has outlined-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#7622d7",
             "fontSize": 20,
           },
           undefined,
@@ -974,7 +974,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#460078",
             "fontSize": 20,
           },
           undefined,
@@ -1076,7 +1076,7 @@ exports[`StyledButtonIcon has text-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#7622d7",
             "fontSize": 20,
           },
           undefined,
@@ -1127,7 +1127,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#460078",
             "fontSize": 20,
           },
           undefined,
@@ -1552,7 +1552,7 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#7622d7",
             "flexShrink": 1,
             "textAlign": "center",
           },
@@ -1611,7 +1611,7 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#460078",
             "flexShrink": 1,
             "textAlign": "center",
           },
@@ -1729,7 +1729,7 @@ exports[`StyledButtonText has text-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#7622d7",
             "flexShrink": 1,
             "textAlign": "center",
           },
@@ -1788,7 +1788,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#795e90",
+            "color": "#460078",
             "flexShrink": 1,
             "textAlign": "center",
           },

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -90,7 +90,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
         style={
           [
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -218,7 +218,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
         style={
           [
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "bottom": "10%",
               "height": 4,
@@ -310,7 +310,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -437,7 +437,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
@@ -564,7 +564,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -144,7 +144,7 @@ exports[`Indicator renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "height": "100%",
           "width": 16,
         },

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,13 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  themeIntent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],

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

@@ -207,7 +207,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
     style={
       [
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderRadius": 12,
           "overflow": "hidden",
         },
@@ -260,6 +260,70 @@ exports[`Card renders correctly when intent is primary 1`] = `
 </View>
 `;
 
+exports[`Card renders correctly when intent is subdued 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 12,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="subdued"
+  >
+    <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>
+`;
+
 exports[`Card renders correctly when intent is success 1`] = `
 <View
   style={

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

@@ -25,6 +25,7 @@ describe('Card', () => {
     ${'info'}
     ${'danger'}
     ${'archived'}
+    ${'subdued'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,13 @@ export interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  intent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
   /**
    * Additional style.
    */

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -241,7 +241,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#7622d7",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -260,7 +260,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#7622d7",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -536,7 +536,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#7622d7",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,
@@ -555,7 +555,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         collapsable={false}
         style={
           {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#7622d7",
             "borderRadius": 999,
             "height": 8,
             "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCardCarousel.spec.tsx.snap

@@ -124,7 +124,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -143,7 +143,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -162,7 +162,7 @@ exports[`StyledPageControl should render correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#401960",
+          "backgroundColor": "#7622d7",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": "#F1E9FB",
           "bottom": 0,
           "left": 0,
           "position": "absolute",
@@ -22,7 +22,7 @@ exports[`StyledBackDrop renders correct basic style 1`] = `
         undefined,
       ]
     }
-    themeSlideBackground="#ece8ef"
+    themeSlideBackground="#F1E9FB"
   />
   <View
     pointerEvents="box-none"

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

@@ -15,7 +15,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#F1E9FB",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -25,7 +25,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#ece8ef"
+      themeSlideBackground="#F1E9FB"
     />
     <View
       style={
@@ -55,13 +55,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         data={
           [
             {
-              "background": "#ece8ef",
+              "background": "#F1E9FB",
               "body": "Access your Work, Money and Benefits in the palm of your hand.",
               "heading": "Welcome to the new Employment Hero app",
               "image": 1,
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "body": "Our app now has a new bright clean modern look and feel with the same great features.",
               "content": <Image
                 source={
@@ -74,7 +74,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               "image": "https://picsum.photos/800/1200",
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
               "heading": "Easier to get around",
               "image": {
@@ -85,7 +85,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               },
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "heading": "Test slide 4",
               "image": {
                 "height": 100,
@@ -94,7 +94,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               },
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "heading": "Test slide 5",
             },
           ]
@@ -701,7 +701,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,
@@ -769,7 +769,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -788,7 +788,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -807,7 +807,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -826,7 +826,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -845,7 +845,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 999,
                 "height": 8,
                 "marginHorizontal": 8,
@@ -897,7 +897,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": "#F1E9FB",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -907,7 +907,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#ece8ef"
+      themeSlideBackground="#F1E9FB"
     />
     <View
       style={
@@ -946,7 +946,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -965,7 +965,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -984,7 +984,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1003,7 +1003,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1022,7 +1022,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#7622d7",
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
@@ -1050,13 +1050,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         data={
           [
             {
-              "background": "#ece8ef",
+              "background": "#F1E9FB",
               "body": "Access your Work, Money and Benefits in the palm of your hand.",
               "heading": "Welcome to the new Employment Hero app",
               "image": 1,
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "body": "Our app now has a new bright clean modern look and feel with the same great features.",
               "content": <Image
                 source={
@@ -1069,7 +1069,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               "image": "https://picsum.photos/800/1200",
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
               "heading": "Easier to get around",
               "image": {
@@ -1080,7 +1080,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               },
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "heading": "Test slide 4",
               "image": {
                 "height": 100,
@@ -1089,7 +1089,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               },
             },
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "heading": "Test slide 5",
             },
           ]
@@ -1696,7 +1696,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,
@@ -1780,7 +1780,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "backgroundColor": "#B382FD",
             "bottom": 0,
             "left": 0,
             "position": "absolute",
@@ -1790,7 +1790,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
           undefined,
         ]
       }
-      themeSlideBackground="#ccd2d3"
+      themeSlideBackground="#B382FD"
     />
     <View
       style={
@@ -1820,7 +1820,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
         data={
           [
             {
-              "background": "#ccd2d3",
+              "background": "#B382FD",
               "heading": "Test slide 5",
             },
           ]
@@ -1972,7 +1972,7 @@ exports[`Carousel should render correctly when image is undefined 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "stretch",
-                "backgroundColor": "#401960",
+                "backgroundColor": "#7622d7",
                 "borderRadius": 32,
                 "flexDirection": "row",
                 "height": 60,

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

@@ -655,7 +655,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": "#F1E9FB",
         "borderColor": "transparent",
         "borderRadius": 999,
         "borderWidth": 1,
@@ -1143,7 +1143,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#ece8ef",
+        "backgroundColor": "#F1E9FB",
         "borderColor": "transparent",
         "borderRadius": 999,
         "borderWidth": 1,

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

@@ -617,7 +617,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                               },
                               [
                                 {
-                                  "color": "#401960",
+                                  "color": "#7622d7",
                                   "flexShrink": 1,
                                   "lineHeight": 22,
                                   "textAlign": "center",

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": "#B382FD",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",