@hero-design/rn 8.33.1 → 8.34.0

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

@@ -180,16 +180,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -197,10 +194,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Welcome to the new Employment Hero app
               </Text>
@@ -218,10 +214,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Access your Work, Money and Benefits in the palm of your hand.
               </Text>
@@ -316,16 +311,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -333,10 +325,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Same app with a new look!
               </Text>
@@ -354,10 +345,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Our app now has a new bright clean modern look and feel with the same great features.
               </Text>
@@ -441,16 +431,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -458,10 +445,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Easier to get around
               </Text>
@@ -479,10 +465,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 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.
               </Text>
@@ -564,16 +549,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -581,10 +563,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Test slide 4
               </Text>
@@ -646,28 +627,25 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 18,
+                "letterSpacing": 0.24,
+                "lineHeight": 28,
               },
               Array [
                 Object {
                   "color": "#ffffff",
                   "flexShrink": 1,
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
                   "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
+          themeButtonVariant="filled-primary"
           themeIntent="body"
+          themeLevel="h5"
           themeTypeface="neutral"
-          themeVariant="filled-primary"
         >
           Skip
         </Text>
@@ -1004,16 +982,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1021,10 +996,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Welcome to the new Employment Hero app
               </Text>
@@ -1042,10 +1016,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Access your Work, Money and Benefits in the palm of your hand.
               </Text>
@@ -1140,16 +1113,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1157,10 +1127,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Same app with a new look!
               </Text>
@@ -1178,10 +1147,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Our app now has a new bright clean modern look and feel with the same great features.
               </Text>
@@ -1265,16 +1233,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1282,10 +1247,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Easier to get around
               </Text>
@@ -1303,10 +1267,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 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.
               </Text>
@@ -1388,16 +1351,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1405,10 +1365,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Test slide 4
               </Text>
@@ -1470,28 +1429,25 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 18,
+                "letterSpacing": 0.24,
+                "lineHeight": 28,
               },
               Array [
                 Object {
                   "color": "#ffffff",
                   "flexShrink": 1,
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
                   "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
+          themeButtonVariant="filled-primary"
           themeIntent="body"
+          themeLevel="h5"
           themeTypeface="neutral"
-          themeVariant="filled-primary"
         >
           Skip
         </Text>
@@ -1681,16 +1637,13 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1698,10 +1651,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Welcome to the new Employment Hero app
               </Text>
@@ -1719,10 +1671,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Access your Work, Money and Benefits in the palm of your hand.
               </Text>
@@ -1817,16 +1768,13 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1834,10 +1782,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Same app with a new look!
               </Text>
@@ -1855,10 +1802,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Our app now has a new bright clean modern look and feel with the same great features.
               </Text>
@@ -1942,16 +1888,13 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -1959,10 +1902,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Easier to get around
               </Text>
@@ -1980,10 +1922,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 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.
               </Text>
@@ -2065,16 +2006,13 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontFamily": "RebondGrotesque-SemiBold",
+                      "fontSize": 36,
+                      "letterSpacing": 1.5,
+                      "lineHeight": 44,
                     },
                     Array [
                       Object {
-                        "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 32,
-                        "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
                       },
@@ -2082,10 +2020,9 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                     ],
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
-                themeTypeface="neutral"
+                themeLevel="h1"
+                themeTypeface="playful"
               >
                 Test slide 4
               </Text>
@@ -2147,28 +2084,25 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 18,
+                "letterSpacing": 0.24,
+                "lineHeight": 28,
               },
               Array [
                 Object {
                   "color": "#ffffff",
                   "flexShrink": 1,
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
                   "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
+          themeButtonVariant="filled-primary"
           themeIntent="body"
+          themeLevel="h5"
           themeTypeface="neutral"
-          themeVariant="filled-primary"
         >
           Skip
         </Text>

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -22,7 +22,7 @@ export const StyledWrapper = styled(TouchableOpacity)<{
   };
 });
 
-export const StyledDescription = styled(Typography.Text)(({ theme }) => ({
+export const StyledDescription = styled(Typography.Body)(({ theme }) => ({
   paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
   flex: 1,
 }));