@hero-design/rn 8.3.0 → 8.3.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output eb885563f0cea779
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 25.7s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 3ad2304a0e6682cc
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 23.8s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1376,6 +1376,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]),
@@ -1392,6 +1393,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,
@@ -1804,7 +1806,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,
@@ -1815,13 +1820,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,
@@ -2669,6 +2674,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 = {
@@ -2678,6 +2684,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 {
@@ -10489,7 +10496,8 @@ var Calendar = function Calendar(_ref) {
 var StyledCarouselPaginator = index$a(View)(function () {
   return {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginStart: 'auto'
   };
 });
 var StyledCarouselPaginatorAnimatedView = index$a(Animated.View)(function (_ref) {
@@ -10510,7 +10518,7 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
     width = _useWindowDimensions.width;
   var theme = useTheme();
   return /*#__PURE__*/React.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],
@@ -10522,7 +10530,6 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
       extrapolate: 'clamp'
     });
     return /*#__PURE__*/React.createElement(StyledCarouselPaginatorAnimatedView, {
-      indicatorWidth: indicatorWidth,
       style: [{
         width: indicatorWidth,
         opacity: opacity
@@ -10553,10 +10560,9 @@ var Image = function Image(_ref) {
   }, imageNativeProps));
 };
 
-var StyledCarousel = index$a(View)(function (_ref) {
+var StyledBackDrop = index$a(View)(function (_ref) {
   var themeSlideBackground = _ref.themeSlideBackground;
   return {
-    zIndex: 99999,
     position: 'absolute',
     backgroundColor: themeSlideBackground,
     top: 0,
@@ -10567,8 +10573,8 @@ var StyledCarousel = index$a(View)(function (_ref) {
 });
 var StyledCarouselView = index$a(View)(function () {
   return {
-    justifyContent: 'space-between',
-    height: '100%'
+    flexGrow: 2,
+    justifyContent: 'space-between'
   };
 });
 var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
@@ -10594,9 +10600,14 @@ var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
     width: width
   };
 });
-var StyledCarouselFooterWrapper = index$a(Box)(function () {
+var StyledCarouselFooterWrapper = index$a(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
   };
 });
 
@@ -10605,8 +10616,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.createElement(Box, {
     style: {
       width: width
@@ -10618,67 +10628,71 @@ var CarouselItem = function CarouselItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",
-    width: width,
-    style: {
-      minHeight: minHeight
-    }
-  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, body) : null));
+    width: width
+  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.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 = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  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 = useRef(null);
-  var _useState = 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 = useCallback(function (index) {
+    setCurrentSlideIndex(index);
+    if (onItemIndexChange) {
+      onItemIndexChange(index);
+    }
+  }, [setCurrentSlideIndex, onItemIndexChange]);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var scrollX = useRef(new Animated.Value(0)).current;
+  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 = 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 = useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onSkipPress) {
-      onSkipPress(currentSlide);
-    }
-  }, [currentSlideIndex, onSkipPress, items]);
-  var finishCarousel = useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onFinishPress) {
-      onFinishPress(currentSlide);
-    }
-  }, [onFinishPress, items, currentSlideIndex]);
+    var index = viewableItems[0].index;
+    internalOnItemIndexChange(index);
+  }, []);
   var viewConfig = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
-  var isLastSlide = currentSlideIndex === items.length - 1;
-  return /*#__PURE__*/React.createElement(StyledCarousel, _extends$1({
+  return /*#__PURE__*/React.createElement(View, _extends$1({
+    style: style
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledBackDrop, {
     themeSlideBackground: items[currentSlideIndex].background
-  }, nativeProps), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,
@@ -10709,23 +10723,10 @@ var Carousel = function Carousel(_ref) {
         heading: heading,
         body: body,
         content: content,
-        minHeight: minContentHeight,
         width: width
       });
     }
-  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, {
-    paddingHorizontal: "large",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    style: {
-      height: footerHeight
-    }
-  }, /*#__PURE__*/React.createElement(CompoundButton, {
-    variant: isLastSlide ? 'filled' : 'text',
-    intent: "primary",
-    onPress: isLastSlide ? finishCarousel : skipCarousel,
-    text: isLastSlide ? finishButtonLabel : skipButtonLabel
-  }), /*#__PURE__*/React.createElement(CarouselPaginator, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React.createElement(CarouselPaginator, {
     numberOfSlides: items.length,
     scrollX: scrollX
   }))));

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
   }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.3.0",
+  "version": "8.3.1",
   "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.1",
     "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.1",
     "@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.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.3.0",
+    "prettier-config-hd": "8.3.1",
     "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 };