@hero-design/rn 8.3.0 → 8.3.2

package/lib/index.js

@@ -1405,6 +1405,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
+    '6xlarge': scale(fontSizes[9]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1421,6 +1422,7 @@ var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
     '7xlarge': fontSizes['7xlarge'] + additionalSpace,
+    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1833,7 +1835,10 @@ var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
     headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
-    paginatorMarginHorizontal: theme.space.small
+    paginatorMarginHorizontal: theme.space.small,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium,
@@ -1844,13 +1849,13 @@ var getCarouselTheme = function getCarouselTheme(theme) {
     paginatorBorderRadius: theme.radii.rounded
   };
   var fontSizes = {
-    heading: theme.fontSizes.xxxxxlarge
+    heading: theme.fontSizes['6xlarge']
   };
   var fonts = {
     heading: theme.fonts.playful.semiBold
   };
   var lineHeights = {
-    heading: theme.lineHeights.xxxlarge
+    heading: theme.lineHeights['6xlarge']
   };
   return {
     colors: colors,
@@ -2698,6 +2703,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
@@ -2707,6 +2713,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
@@ -10518,7 +10525,8 @@ var Calendar = function Calendar(_ref) {
 var StyledCarouselPaginator = index$a(reactNative.View)(function () {
   return {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginStart: 'auto'
   };
 });
 var StyledCarouselPaginatorAnimatedView = index$a(reactNative.Animated.View)(function (_ref) {
@@ -10539,7 +10547,7 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
     width = _useWindowDimensions.width;
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledCarouselPaginator, null, new Array(numberOfSlides).fill('').map(function (_, index) {
-    var inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+    var inputRange = [(index - 1) * width - 1, index * width - 1, (index + 1) * width];
     var indicatorWidth = scrollX.interpolate({
       inputRange: inputRange,
       outputRange: [theme.space.small, theme.space.large, theme.space.small],
@@ -10551,7 +10559,6 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
       extrapolate: 'clamp'
     });
     return /*#__PURE__*/React__default["default"].createElement(StyledCarouselPaginatorAnimatedView, {
-      indicatorWidth: indicatorWidth,
       style: [{
         width: indicatorWidth,
         opacity: opacity
@@ -10582,10 +10589,9 @@ var Image = function Image(_ref) {
   }, imageNativeProps));
 };
 
-var StyledCarousel = index$a(reactNative.View)(function (_ref) {
+var StyledBackDrop = index$a(reactNative.View)(function (_ref) {
   var themeSlideBackground = _ref.themeSlideBackground;
   return {
-    zIndex: 99999,
     position: 'absolute',
     backgroundColor: themeSlideBackground,
     top: 0,
@@ -10596,8 +10602,8 @@ var StyledCarousel = index$a(reactNative.View)(function (_ref) {
 });
 var StyledCarouselView = index$a(reactNative.View)(function () {
   return {
-    justifyContent: 'space-between',
-    height: '100%'
+    flexGrow: 2,
+    justifyContent: 'space-between'
   };
 });
 var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
@@ -10623,9 +10629,14 @@ var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
     width: width
   };
 });
-var StyledCarouselFooterWrapper = index$a(Box)(function () {
+var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    width: '100%'
+    paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+    marginBottom: theme.__hd__.carousel.space.footerMarginBottom
   };
 });
 
@@ -10634,8 +10645,7 @@ var CarouselItem = function CarouselItem(_ref) {
     image = _ref.image,
     content = _ref.content,
     heading = _ref.heading,
-    body = _ref.body,
-    minHeight = _ref.minHeight;
+    body = _ref.body;
   return /*#__PURE__*/React__default["default"].createElement(Box, {
     style: {
       width: width
@@ -10647,67 +10657,71 @@ var CarouselItem = function CarouselItem(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",
-    width: width,
-    style: {
-      minHeight: minHeight
-    }
-  }, content, /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, body) : null));
+    width: width
+  }, content, /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, null, body) : null));
 };
 
-var _excluded$9 = ["items", "onFinishPress", "onSkipPress", "onSlideChange", "finishButtonLabel", "skipButtonLabel", "footerHeight", "minContentHeight"];
+var _excluded$9 = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+function useStateFromProp(initialValue) {
+  var _useState = React.useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  React.useEffect(function () {
+    return setValue(initialValue);
+  }, [initialValue]);
+  return [value, setValue];
+}
 var Carousel = function Carousel(_ref) {
   var items = _ref.items,
-    onFinishPress = _ref.onFinishPress,
-    onSkipPress = _ref.onSkipPress,
-    onSlideChange = _ref.onSlideChange,
-    _ref$finishButtonLabe = _ref.finishButtonLabel,
-    finishButtonLabel = _ref$finishButtonLabe === void 0 ? "Let's go!" : _ref$finishButtonLabe,
-    _ref$skipButtonLabel = _ref.skipButtonLabel,
-    skipButtonLabel = _ref$skipButtonLabel === void 0 ? 'Skip' : _ref$skipButtonLabel,
-    _ref$footerHeight = _ref.footerHeight,
-    footerHeight = _ref$footerHeight === void 0 ? 70 : _ref$footerHeight,
-    _ref$minContentHeight = _ref.minContentHeight,
-    minContentHeight = _ref$minContentHeight === void 0 ? 250 : _ref$minContentHeight,
+    onItemIndexChange = _ref.onItemIndexChange,
+    renderActions = _ref.renderActions,
+    _ref$selectedItemInde = _ref.selectedItemIndex,
+    selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
+    style = _ref.style,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   var carouselRef = React.useRef(null);
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentSlideIndex = _useState2[0],
-    setCurrentSlideIndex = _useState2[1];
+  var _useStateFromProp = useStateFromProp(selectedItemIndex),
+    _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
+    currentSlideIndex = _useStateFromProp2[0],
+    setCurrentSlideIndex = _useStateFromProp2[1];
+  var internalOnItemIndexChange = React.useCallback(function (index) {
+    setCurrentSlideIndex(index);
+    if (onItemIndexChange) {
+      onItemIndexChange(index);
+    }
+  }, [setCurrentSlideIndex, onItemIndexChange]);
   var _useWindowDimensions = reactNative.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var scrollX = React.useRef(new reactNative.Animated.Value(0)).current;
+  React.useEffect(function () {
+    // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
+    var handle = setTimeout(function () {
+      var _carouselRef$current;
+      scrollX.setValue(currentSlideIndex * width);
+      (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToOffset({
+        offset: currentSlideIndex * width,
+        animated: true
+      });
+    }, 100);
+    return function () {
+      clearTimeout(handle);
+    };
+  }, [currentSlideIndex, carouselRef]);
   var visibleSlideChanged = React.useCallback(function (_ref2) {
     var viewableItems = _ref2.viewableItems;
     if (!viewableItems || viewableItems && !viewableItems.length) return;
-    var currentIndex = viewableItems[0].index;
-    setCurrentSlideIndex(viewableItems[0].index);
-    var currentSlide = items[currentIndex];
-    if (onSlideChange) {
-      onSlideChange(currentSlide);
-    }
-  }, [items, onSlideChange]);
-  var skipCarousel = React.useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onSkipPress) {
-      onSkipPress(currentSlide);
-    }
-  }, [currentSlideIndex, onSkipPress, items]);
-  var finishCarousel = React.useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onFinishPress) {
-      onFinishPress(currentSlide);
-    }
-  }, [onFinishPress, items, currentSlideIndex]);
+    var index = viewableItems[0].index;
+    internalOnItemIndexChange(index);
+  }, []);
   var viewConfig = React.useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
-  var isLastSlide = currentSlideIndex === items.length - 1;
-  return /*#__PURE__*/React__default["default"].createElement(StyledCarousel, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({
+    style: style
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledBackDrop, {
     themeSlideBackground: items[currentSlideIndex].background
-  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,
@@ -10738,23 +10752,10 @@ var Carousel = function Carousel(_ref) {
         heading: heading,
         body: body,
         content: content,
-        minHeight: minContentHeight,
         width: width
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, {
-    paddingHorizontal: "large",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    style: {
-      height: footerHeight
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(CompoundButton, {
-    variant: isLastSlide ? 'filled' : 'text',
-    intent: "primary",
-    onPress: isLastSlide ? finishCarousel : skipCarousel,
-    text: isLastSlide ? finishButtonLabel : skipButtonLabel
-  }), /*#__PURE__*/React__default["default"].createElement(CarouselPaginator, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React__default["default"].createElement(CarouselPaginator, {
     numberOfSlides: items.length,
     scrollX: scrollX
   }))));
@@ -11063,7 +11064,7 @@ var getVariant$1 = function getVariant(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
-var TextInput = function TextInput(_ref2, ref) {
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -11232,8 +11233,7 @@ var TextInput = function TextInput(_ref2, ref) {
     themeVariant: variant,
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
-};
-var TextInput$1 = /*#__PURE__*/React__default["default"].forwardRef(TextInput);
+});
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -11265,7 +11265,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11333,7 +11333,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -13378,7 +13378,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13426,7 +13426,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13554,7 +13554,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13586,7 +13586,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -14327,7 +14327,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14395,7 +14395,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -31274,7 +31274,7 @@ exports.Swipeable = index$5;
 exports.Switch = index$3;
 exports.Tabs = index$2;
 exports.Tag = Tag;
-exports.TextInput = TextInput$1;
+exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimePicker = TimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.3.0",
+  "version": "8.3.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.3.0",
+    "@hero-design/colors": "8.3.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.3.0",
+    "@hero-design/eslint-plugin": "8.3.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.3.0",
+    "eslint-config-hd": "8.3.2",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.3.0",
+    "prettier-config-hd": "8.3.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CarouselItem.tsx

@@ -11,7 +11,6 @@ import { CarouselData } from './types';
 
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
   width: number;
-  minHeight: number;
 }
 
 const CarouselItem = ({
@@ -20,7 +19,6 @@ const CarouselItem = ({
   content,
   heading,
   body,
-  minHeight,
 }: CarouselItemProps) => {
   return (
     <Box style={{ width }}>
@@ -34,13 +32,10 @@ const CarouselItem = ({
         paddingHorizontal="large"
         marginTop="large"
         width={width}
-        style={{ minHeight }}
       >
         {content}
         <StyledCarouselHeading>{heading}</StyledCarouselHeading>
-        {body ? (
-          <Typography.Text fontSize="large">{body}</Typography.Text>
-        ) : null}
+        {body ? <Typography.Text>{body}</Typography.Text> : null}
       </StyledCarouselContentWrapper>
     </Box>
   );

package/src/components/Carousel/CarouselPaginator/StyledCarouselPaginator.tsx

@@ -4,16 +4,17 @@ import styled from '@emotion/native';
 const StyledCarouselPaginator = styled(View)(() => ({
   flexDirection: 'row',
   alignItems: 'center',
+  marginStart: 'auto',
 }));
 
-const StyledCarouselPaginatorAnimatedView = styled(Animated.View)<{
-  indicatorWidth: Animated.AnimatedInterpolation;
-}>(({ theme }) => ({
-  height: theme.__hd__.carousel.sizes.paginatorHeight,
-  width: theme.__hd__.carousel.sizes.paginatorWidth,
-  borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
-  backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
-  marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal,
-}));
+const StyledCarouselPaginatorAnimatedView = styled(Animated.View)(
+  ({ theme }) => ({
+    height: theme.__hd__.carousel.sizes.paginatorHeight,
+    width: theme.__hd__.carousel.sizes.paginatorWidth,
+    borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
+    backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
+    marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal,
+  })
+);
 
 export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/src/components/Carousel/CarouselPaginator/index.tsx

@@ -22,8 +22,8 @@ const CarouselPaginator = ({
     <StyledCarouselPaginator>
       {new Array(numberOfSlides).fill('').map((_, index) => {
         const inputRange = [
-          (index - 1) * width,
-          index * width,
+          (index - 1) * width - 1,
+          index * width - 1,
           (index + 1) * width,
         ];
 
@@ -45,7 +45,6 @@ const CarouselPaginator = ({
 
         return (
           <StyledCarouselPaginatorAnimatedView
-            indicatorWidth={indicatorWidth}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
           />

package/src/components/Carousel/StyledCarousel.tsx

@@ -4,10 +4,9 @@ import Typography from '../Typography';
 import Image from '../Image';
 import Box from '../Box';
 
-const StyledCarousel = styled(View)<{
+const StyledBackDrop = styled(View)<{
   themeSlideBackground: string;
 }>(({ themeSlideBackground }) => ({
-  zIndex: 99999,
   position: 'absolute',
   backgroundColor: themeSlideBackground,
   top: 0,
@@ -17,8 +16,8 @@ const StyledCarousel = styled(View)<{
 }));
 
 const StyledCarouselView = styled(View)(() => ({
+  flexGrow: 2,
   justifyContent: 'space-between',
-  height: '100%',
 }));
 
 const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
@@ -41,12 +40,16 @@ const StyledCarouselContentWrapper = styled(Box)<{
   width,
 }));
 
-const StyledCarouselFooterWrapper = styled(Box)(() => ({
-  width: '100%',
+const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+  marginBottom: theme.__hd__.carousel.space.footerMarginBottom,
 }));
 
 export {
-  StyledCarousel,
+  StyledBackDrop,
   StyledCarouselView,
   StyledCarouselHeading,
   StyledCarouselImage,

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledCarousel } from '../StyledCarousel';
+import { StyledBackDrop } from '../StyledCarousel';
 import theme from '../../../theme';
 
-describe('StyledCard', () => {
+describe('StyledBackDrop', () => {
   it('renders correct basic style', () => {
     const { toJSON } = renderWithTheme(
-      <StyledCarousel themeSlideBackground={theme.colors.highlightedSurface} />
+      <StyledBackDrop themeSlideBackground={theme.colors.highlightedSurface} />
     );
     expect(toJSON()).toMatchSnapshot();
   });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledCard renders correct basic style 1`] = `
+exports[`StyledBackDrop renders correct basic style 1`] = `
 <View
   style={
     Array [
@@ -11,7 +11,6 @@ exports[`StyledCard renders correct basic style 1`] = `
         "position": "absolute",
         "right": 0,
         "top": 0,
-        "zIndex": 99999,
       },
       undefined,
     ]