@hero-design/rn 8.57.1 → 8.59.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hero-design/rn
 
+## 8.59.0
+
+### Minor Changes
+
+- [#2765](https://github.com/Thinkei/hero-design/pull/2765) [`d2ebbb352`](https://github.com/Thinkei/hero-design/commit/d2ebbb35203162593468cd243602550ab6510dd9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel] Make item heading optional.
+
+## 8.58.0
+
+### Minor Changes
+
+- [#2756](https://github.com/Thinkei/hero-design/pull/2756) [`de3e8fa92`](https://github.com/Thinkei/hero-design/commit/de3e8fa92aa4a3598fc24f6fbdf40c66066bbb90) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel] Update styling and make image optional
+
+### Patch Changes
+
+- [#2758](https://github.com/Thinkei/hero-design/pull/2758) [`61012afc4`](https://github.com/Thinkei/hero-design/commit/61012afc45105803d3bec4fc8ca8cf7cbe7f9363) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Tabs] Fix tabs bottom border on iOS not showing in full width
+
 ## 8.57.1
 
 ### Patch Changes

package/es/index.js

@@ -2403,7 +2403,6 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
@@ -12239,7 +12238,6 @@ var StyledCarouselView = index$9(View)(function () {
 var StyledCarouselHeading = index$9(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginTop: theme.__hd__.carousel.space.headingMarginTop,
     marginBottom: theme.__hd__.carousel.space.headingMarginBottom
   };
 });
@@ -12303,27 +12301,42 @@ var CarouselItem = function CarouselItem(_ref) {
     content = _ref.content,
     heading = _ref.heading,
     body = _ref.body;
+  var theme = useTheme$1();
+  var ImageComponent = React.useMemo(function () {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
+          source: image,
+          height: image.height,
+          width: image.width,
+          resizeMode: image.resizeMode,
+          style: {
+            marginBottom: theme.space.medium
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement(StyledCarouselImage, {
+        source: typeof image === 'string' ? {
+          uri: image
+        } : image,
+        style: {
+          marginBottom: theme.space.medium
+        }
+      });
+    }
+    return null;
+  }, [image]);
   return /*#__PURE__*/React.createElement(Box, {
     style: {
       width: width
     }
-  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
-    source: image,
-    height: image.height,
-    width: image.width,
-    resizeMode: image.resizeMode
-  }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image
-  })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
-    paddingHorizontal: "large",
-    marginTop: "large",
+  }, ImageComponent, /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "medium",
     width: width
-  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, {
+  }, content, !!heading && /*#__PURE__*/React.createElement(StyledCarouselHeading, {
     level: "h1",
     typeface: "playful"
-  }, heading), body ? /*#__PURE__*/React.createElement(Typography.Body, null, body) : null));
+  }, heading), !!body && /*#__PURE__*/React.createElement(Typography.Body, null, body)));
 };
 
 var _excluded$l = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
@@ -17648,18 +17661,16 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
         });
       }, 100);
     },
-    style:
-    // Border styles specified in contentContainerStyle don't work
-    // so they need to be placed here instead on Android.
-    Platform.OS === 'android' ? {
+    style: {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    } : undefined,
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+    },
+    contentContainerStyle: _objectSpread2({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
+    }, Platform.OS === 'android' && {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    },
+    }),
     renderItem: function renderItem(_ref4) {
       var tab = _ref4.item,
         index = _ref4.index;

package/lib/index.js

@@ -2433,7 +2433,6 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
@@ -12269,7 +12268,6 @@ var StyledCarouselView = index$9(reactNative.View)(function () {
 var StyledCarouselHeading = index$9(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginTop: theme.__hd__.carousel.space.headingMarginTop,
     marginBottom: theme.__hd__.carousel.space.headingMarginBottom
   };
 });
@@ -12333,27 +12331,42 @@ var CarouselItem = function CarouselItem(_ref) {
     content = _ref.content,
     heading = _ref.heading,
     body = _ref.body;
+  var theme = useTheme$1();
+  var ImageComponent = React__default["default"].useMemo(function () {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
+          source: image,
+          height: image.height,
+          width: image.width,
+          resizeMode: image.resizeMode,
+          style: {
+            marginBottom: theme.space.medium
+          }
+        });
+      }
+      return /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
+        source: typeof image === 'string' ? {
+          uri: image
+        } : image,
+        style: {
+          marginBottom: theme.space.medium
+        }
+      });
+    }
+    return null;
+  }, [image]);
   return /*#__PURE__*/React__default["default"].createElement(Box, {
     style: {
       width: width
     }
-  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React__default["default"].createElement(StyledCustomSizeCarouselImage, {
-    source: image,
-    height: image.height,
-    width: image.width,
-    resizeMode: image.resizeMode
-  }) : /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image
-  })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
-    paddingHorizontal: "large",
-    marginTop: "large",
+  }, ImageComponent, /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "medium",
     width: width
-  }, content, /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, {
+  }, content, !!heading && /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, {
     level: "h1",
     typeface: "playful"
-  }, heading), body ? /*#__PURE__*/React__default["default"].createElement(Typography.Body, null, body) : null));
+  }, heading), !!body && /*#__PURE__*/React__default["default"].createElement(Typography.Body, null, body)));
 };
 
 var _excluded$l = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
@@ -17678,18 +17691,16 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
         });
       }, 100);
     },
-    style:
-    // Border styles specified in contentContainerStyle don't work
-    // so they need to be placed here instead on Android.
-    reactNative.Platform.OS === 'android' ? {
+    style: {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    } : undefined,
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+    },
+    contentContainerStyle: _objectSpread2({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
+    }, reactNative.Platform.OS === 'android' && {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    },
+    }),
     renderItem: function renderItem(_ref4) {
       var tab = _ref4.item,
         index = _ref4.index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.57.1",
+  "version": "8.59.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Carousel/CarouselItem.tsx

@@ -1,12 +1,13 @@
+import { useTheme } from '@emotion/react';
 import React from 'react';
+import Box from '../Box';
+import Typography from '../Typography';
 import {
   StyledCarouselContentWrapper,
   StyledCarouselHeading,
   StyledCarouselImage,
   StyledCustomSizeCarouselImage,
 } from './StyledCarousel';
-import Box from '../Box';
-import Typography from '../Typography';
 import { CarouselData, CarouselImageProps } from './types';
 
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
@@ -26,32 +27,47 @@ const CarouselItem = ({
   heading,
   body,
 }: CarouselItemProps) => {
-  return (
-    <Box style={{ width }}>
-      {image &&
-        (isCarouselImageProps(image) ? (
+  const theme = useTheme();
+
+  const ImageComponent = React.useMemo(() => {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return (
           <StyledCustomSizeCarouselImage
             source={image}
             height={image.height}
             width={image.width}
             resizeMode={image.resizeMode}
+            style={{ marginBottom: theme.space.medium }}
           />
-        ) : (
-          <StyledCarouselImage
-            source={typeof image === 'string' ? { uri: image } : image}
-          />
-        ))}
+        );
+      }
 
-      <StyledCarouselContentWrapper
-        paddingHorizontal="large"
-        marginTop="large"
-        width={width}
-      >
+      return (
+        <StyledCarouselImage
+          source={typeof image === 'string' ? { uri: image } : image}
+          style={{ marginBottom: theme.space.medium }}
+        />
+      );
+    }
+
+    return null;
+  }, [image]);
+
+  return (
+    <Box style={{ width }}>
+      {ImageComponent}
+
+      <StyledCarouselContentWrapper paddingHorizontal="medium" width={width}>
         {content}
-        <StyledCarouselHeading level="h1" typeface="playful">
-          {heading}
-        </StyledCarouselHeading>
-        {body ? <Typography.Body>{body}</Typography.Body> : null}
+
+        {!!heading && (
+          <StyledCarouselHeading level="h1" typeface="playful">
+            {heading}
+          </StyledCarouselHeading>
+        )}
+
+        {!!body && <Typography.Body>{body}</Typography.Body>}
       </StyledCarouselContentWrapper>
     </Box>
   );

package/src/components/Carousel/StyledCarousel.tsx

@@ -22,7 +22,6 @@ const StyledCarouselView = styled(View)(() => ({
 }));
 
 const StyledCarouselHeading = styled(Typography.Title)(({ theme }) => ({
-  marginTop: theme.__hd__.carousel.space.headingMarginTop,
   marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
 }));
 
@@ -34,8 +33,8 @@ const StyledCarouselImage = styled(Image)(() => ({
 }));
 
 const StyledCustomSizeCarouselImage = styled(Image)<{
-  height?: number;
-  width?: number;
+  height?: number | `${number}%`;
+  width?: number | `${number}%`;
   resizeMode?: ImageResizeMode;
 }>(({ height, resizeMode = 'contain', width }) => ({
   alignSelf: 'center',

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

@@ -93,6 +93,10 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                 "width": 30,
               },
             },
+            {
+              "background": "#ccd2d3",
+              "heading": "Test slide 5",
+            },
           ]
         }
         getItem={[Function]}
@@ -169,19 +173,19 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                         "resizeMode": "contain",
                         "width": "100%",
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -207,7 +211,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -283,19 +286,19 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                         "resizeMode": "contain",
                         "width": "100%",
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -338,7 +341,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -419,20 +421,20 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                         "resizeMode": "cover",
                         "width": 30,
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
                 width={30}
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -458,7 +460,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -537,20 +538,20 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                         "resizeMode": "contain",
                         "width": 30,
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
                 width={30}
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -576,7 +577,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -591,6 +591,72 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               </View>
             </View>
           </View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {},
+                  {
+                    "width": 300,
+                  },
+                ]
+              }
+            >
+              <View
+                paddingHorizontal="medium"
+                style={
+                  [
+                    {
+                      "paddingHorizontal": 16,
+                    },
+                    [
+                      {
+                        "width": 300,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                width={300}
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "letterSpacing": 1.5,
+                        "lineHeight": 44,
+                      },
+                      [
+                        {
+                          "marginBottom": 16,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="body"
+                  themeLevel="h1"
+                  themeTypeface="playful"
+                >
+                  Test slide 5
+                </Text>
+              </View>
+            </View>
+          </View>
         </View>
       </RCTScrollView>
       <View
@@ -770,6 +836,25 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             }
             testID="page-control-indicator3"
           />
+          <View
+            accessibilityState={
+              {
+                "selected": false,
+              }
+            }
+            collapsable={false}
+            style={
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 999,
+                "height": 8,
+                "marginHorizontal": 8,
+                "opacity": 0.5,
+                "width": 8,
+              }
+            }
+            testID="page-control-indicator4"
+          />
         </View>
       </View>
     </View>
@@ -928,6 +1013,25 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           }
           testID="page-control-indicator3"
         />
+        <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+          testID="page-control-indicator4"
+        />
       </View>
     </View>
     <View
@@ -984,6 +1088,10 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                 "width": 30,
               },
             },
+            {
+              "background": "#ccd2d3",
+              "heading": "Test slide 5",
+            },
           ]
         }
         getItem={[Function]}
@@ -1060,19 +1168,19 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                         "resizeMode": "contain",
                         "width": "100%",
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -1098,7 +1206,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -1174,19 +1281,19 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                         "resizeMode": "contain",
                         "width": "100%",
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -1229,7 +1336,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -1310,20 +1416,20 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                         "resizeMode": "cover",
                         "width": 30,
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
                 width={30}
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -1349,7 +1455,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -1428,20 +1533,20 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                         "resizeMode": "contain",
                         "width": 30,
                       },
-                      undefined,
+                      {
+                        "marginBottom": 16,
+                      },
                     ],
                   ]
                 }
                 width={30}
               />
               <View
-                marginTop="large"
-                paddingHorizontal="large"
+                paddingHorizontal="medium"
                 style={
                   [
                     {
-                      "marginTop": 24,
-                      "paddingHorizontal": 24,
+                      "paddingHorizontal": 16,
                     },
                     [
                       {
@@ -1467,7 +1572,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                       [
                         {
                           "marginBottom": 16,
-                          "marginTop": 8,
                         },
                         undefined,
                       ],
@@ -1482,6 +1586,348 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               </View>
             </View>
           </View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {},
+                  {
+                    "width": 300,
+                  },
+                ]
+              }
+            >
+              <View
+                paddingHorizontal="medium"
+                style={
+                  [
+                    {
+                      "paddingHorizontal": 16,
+                    },
+                    [
+                      {
+                        "width": 300,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                width={300}
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "letterSpacing": 1.5,
+                        "lineHeight": 44,
+                      },
+                      [
+                        {
+                          "marginBottom": 16,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="body"
+                  themeLevel="h1"
+                  themeTypeface="playful"
+                >
+                  Test slide 5
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 24,
+              "paddingHorizontal": 24,
+              "paddingVertical": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "backgroundColor": "#401960",
+                "borderRadius": 32,
+                "flexDirection": "row",
+                "height": 60,
+                "justifyContent": "center",
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            disabled={false}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 28,
+                },
+                [
+                  {
+                    "color": "#ffffff",
+                    "flexShrink": 1,
+                    "textAlign": "center",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            themeButtonVariant="filled-primary"
+            themeIntent="body"
+            themeLevel="h5"
+            themeTypeface="neutral"
+          >
+            Skip
+          </Text>
+        </View>
+      </View>
+    </View>
+  </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[`Carousel should render correctly when image is undefined 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    testID="carousel"
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "#ccd2d3",
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeSlideBackground="#ccd2d3"
+    />
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "height": 48,
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "flexGrow": 2,
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "background": "#ccd2d3",
+              "heading": "Test slide 5",
+            },
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        onViewableItemsChanged={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={false}
+        renderItem={[Function]}
+        scrollEventThrottle={32}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        testID="carousel_flatlist"
+        viewabilityConfig={
+          {
+            "viewAreaCoveragePercentThreshold": 50,
+          }
+        }
+        viewabilityConfigCallbackPairs={
+          [
+            {
+              "onViewableItemsChanged": [Function],
+              "viewabilityConfig": {
+                "viewAreaCoveragePercentThreshold": 50,
+              },
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {},
+                  {
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View
+                paddingHorizontal="medium"
+                style={
+                  [
+                    {
+                      "paddingHorizontal": 16,
+                    },
+                    [
+                      {
+                        "width": 0,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                width={0}
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "letterSpacing": 1.5,
+                        "lineHeight": 44,
+                      },
+                      [
+                        {
+                          "marginBottom": 16,
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="body"
+                  themeLevel="h1"
+                  themeTypeface="playful"
+                >
+                  Test slide 5
+                </Text>
+              </View>
+            </View>
+          </View>
         </View>
       </RCTScrollView>
       <View

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

@@ -8,8 +8,9 @@ import Button from '../../Button/Button';
 import HeroDesignProvider from '../../HeroDesignProvider';
 import Image from '../../Image';
 import { getCardCarouselValidIndex } from '../CardCarousel';
+import { CarouselData } from '../types';
 
-const carouselData = [
+const carouselData: CarouselData[] = [
   {
     image: 1, // Test the case when we import .png files as React Native component, it's convert to ImageRequireSource type (which is a number).
     heading: 'Welcome to the new Employment Hero app',
@@ -43,6 +44,10 @@ const carouselData = [
     heading: 'Test slide 4',
     background: theme.colors.decorativePrimarySurface,
   },
+  {
+    heading: 'Test slide 5',
+    background: theme.colors.decorativePrimarySurface,
+  },
 ];
 
 describe('Carousel', () => {
@@ -180,6 +185,20 @@ describe('Carousel', () => {
 
     expect(queryByTestId('page-control-indicator1')).toBeFalsy();
   });
+  it('should render correctly when image is undefined', () => {
+    const onPress = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={[carouselData[4]]}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 // write test for getCardCarouselValidIndex

package/src/components/Carousel/types.ts

@@ -2,15 +2,15 @@ import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
 
 export type CarouselImageProps = ImageSourcePropType & {
-  height?: number;
-  width?: number;
+  height?: number | `${number}%`;
+  width?: number | `${number}%`;
   resizeMode?: ImageResizeMode;
 };
 
 export type CarouselData = {
-  image: CarouselImageProps | string;
+  image?: CarouselImageProps | string;
   content?: ReactNode;
-  heading: string;
+  heading?: string;
   body?: string;
   background: string;
 };

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -156,21 +156,19 @@ const ScrollableTabHeader = ({
             100
           );
         }}
-        style={
-          // Border styles specified in contentContainerStyle don't work
-          // so they need to be placed here instead on Android.
-          Platform.OS === 'android'
-            ? {
-                borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-                borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
-              }
-            : undefined
-        }
-        contentContainerStyle={{
-          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+        style={{
           borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
           borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
         }}
+        contentContainerStyle={{
+          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+
+          // Specify it here again or the indicator won't show
+          ...(Platform.OS === 'android' && {
+            borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+            borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+          }),
+        }}
         renderItem={({ item: tab, index }) => {
           const {
             key,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -145,8 +145,6 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -209,6 +207,12 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>
@@ -1061,8 +1065,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -1125,6 +1127,12 @@ exports[`Tabs.Scroll renders correctly 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>
@@ -1977,8 +1985,6 @@ exports[`useIsFocused renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -2041,6 +2047,12 @@ exports[`useIsFocused renders correctly 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -40,8 +40,6 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
       <RCTScrollView
         contentContainerStyle={
           {
-            "borderBottomColor": "#e8e9ea",
-            "borderBottomWidth": 2,
             "paddingHorizontal": 8,
           }
         }
@@ -104,6 +102,12 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
         scrollEventThrottle={50}
         showsHorizontalScrollIndicator={false}
         stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
+          }
+        }
         viewabilityConfigCallbackPairs={[]}
       >
         <View>
@@ -700,8 +704,6 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
       <RCTScrollView
         contentContainerStyle={
           {
-            "borderBottomColor": "#e8e9ea",
-            "borderBottomWidth": 2,
             "paddingHorizontal": 8,
           }
         }
@@ -764,6 +766,12 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
         scrollEventThrottle={50}
         showsHorizontalScrollIndicator={false}
         stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
+          }
+        }
         viewabilityConfigCallbackPairs={[]}
       >
         <View>

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

@@ -312,7 +312,6 @@ exports[`theme returns correct theme object 1`] = `
         "footerPaddingHorizontal": 24,
         "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
-        "headingMarginTop": 8,
         "pageControlPaddingVertical": 8,
         "pageControlWrapperHeight": 48,
       },

package/src/theme/components/carousel.ts

@@ -3,7 +3,6 @@ import type { GlobalTheme } from '../global';
 
 const getCarouselTheme = (theme: GlobalTheme) => {
   const space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,

package/types/components/Carousel/StyledCarousel.d.ts

@@ -26,8 +26,8 @@ declare const StyledCustomSizeCarouselImage: import("@emotion/native").StyledCom
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    height?: number | undefined;
-    width?: number | undefined;
+    height?: number | `${number}%` | undefined;
+    width?: number | `${number}%` | undefined;
     resizeMode?: ImageResizeMode | undefined;
 }, {}, {}>;
 declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {

package/types/components/Carousel/types.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
 export declare type CarouselImageProps = ImageSourcePropType & {
-    height?: number;
-    width?: number;
+    height?: number | `${number}%`;
+    width?: number | `${number}%`;
     resizeMode?: ImageResizeMode;
 };
 export declare type CarouselData = {
-    image: CarouselImageProps | string;
+    image?: CarouselImageProps | string;
     content?: ReactNode;
-    heading: string;
+    heading?: string;
     body?: string;
     background: string;
 };

package/types/theme/components/carousel.d.ts

@@ -1,7 +1,6 @@
 import type { GlobalTheme } from '../global';
 declare const getCarouselTheme: (theme: GlobalTheme) => {
     space: {
-        headingMarginTop: number;
         headingMarginBottom: number;
         footerPaddingHorizontal: number;
         footerPaddingVertical: number;