@hero-design/rn 8.2.3 → 8.3.1

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,
@@ -1826,6 +1828,46 @@ var getCardTheme = function getCardTheme(theme) {
   };
 };
 
+var getCarouselTheme = function getCarouselTheme(theme) {
+  var colors = {
+    paginatorBackgroundColor: theme.colors.primary
+  };
+  var space = {
+    headingMarginTop: theme.space.small,
+    headingMarginBottom: theme.space.medium,
+    paginatorMarginHorizontal: theme.space.small,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large
+  };
+  var sizes = {
+    indicatorWidth: theme.sizes.medium,
+    paginatorHeight: theme.sizes.small,
+    paginatorWidth: theme.sizes.small
+  };
+  var radii = {
+    paginatorBorderRadius: theme.radii.rounded
+  };
+  var fontSizes = {
+    heading: theme.fontSizes['6xlarge']
+  };
+  var fonts = {
+    heading: theme.fonts.playful.semiBold
+  };
+  var lineHeights = {
+    heading: theme.lineHeights['6xlarge']
+  };
+  return {
+    colors: colors,
+    sizes: sizes,
+    radii: radii,
+    space: space,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights
+  };
+};
+
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     "default": theme.colors.primaryOutline,
@@ -2661,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 = {
@@ -2670,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 {
@@ -2696,6 +2740,7 @@ var getTheme$1 = function getTheme() {
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      carousel: getCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),
@@ -5730,7 +5775,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$l = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5741,7 +5786,7 @@ var Text = function Text(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6220,10 +6265,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$j = ["style"];
+var _excluded$k = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$j);
+    otherProps = _objectWithoutProperties(_ref, _excluded$k);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6329,7 +6374,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$i = ["key"];
+var _excluded$j = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6350,7 +6395,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$i);
+      props = _objectWithoutProperties(_ref2, _excluded$j);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -6732,7 +6777,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$h = ["children", "visible", "intent", "style", "testID"];
+var _excluded$i = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6741,7 +6786,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6774,7 +6819,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$h = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6789,7 +6834,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6893,7 +6938,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$g = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6904,7 +6949,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6991,13 +7036,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$f = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7127,7 +7172,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$d = ["count", "size", "testID", "themeVariant"];
+var _excluded$e = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7159,7 +7204,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7555,11 +7600,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$c = ["scrollEventThrottle"];
+var _excluded$d = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -7874,7 +7919,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$b = ["theme"];
+var _excluded$c = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -7901,18 +7946,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$b);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$c);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$a = ["children", "style", "testID"];
+var _excluded$b = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$a);
+    otherProps = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10477,6 +10522,245 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
+var StyledCarouselPaginator = index$a(reactNative.View)(function () {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginStart: 'auto'
+  };
+});
+var StyledCarouselPaginatorAnimatedView = index$a(reactNative.Animated.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    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
+  };
+});
+
+var CarouselPaginator = function CarouselPaginator(_ref) {
+  var numberOfSlides = _ref.numberOfSlides,
+    scrollX = _ref.scrollX;
+  var _useWindowDimensions = reactNative.useWindowDimensions(),
+    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 - 1, index * width - 1, (index + 1) * width];
+    var indicatorWidth = scrollX.interpolate({
+      inputRange: inputRange,
+      outputRange: [theme.space.small, theme.space.large, theme.space.small],
+      extrapolate: 'clamp'
+    });
+    var opacity = scrollX.interpolate({
+      inputRange: inputRange,
+      outputRange: [0.5, 1, 0.5],
+      extrapolate: 'clamp'
+    });
+    return /*#__PURE__*/React__default["default"].createElement(StyledCarouselPaginatorAnimatedView, {
+      style: [{
+        width: indicatorWidth,
+        opacity: opacity
+      }],
+      key: index.toString()
+    });
+  }));
+};
+
+var _excluded$a = ["rounded", "size", "testID", "style"];
+var Image = function Image(_ref) {
+  var _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '6xlarge' : _ref$size,
+    testID = _ref.testID,
+    style = _ref.style,
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$a);
+  var theme = useTheme();
+  var imageSize = theme.__hd__.image.sizes[size];
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
+    testID: testID,
+    style: [{
+      width: imageSize,
+      height: imageSize,
+      borderRadius: rounded ? imageSize / 2 : 0
+    }, style]
+  }, imageNativeProps));
+};
+
+var StyledBackDrop = index$a(reactNative.View)(function (_ref) {
+  var themeSlideBackground = _ref.themeSlideBackground;
+  return {
+    position: 'absolute',
+    backgroundColor: themeSlideBackground,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  };
+});
+var StyledCarouselView = index$a(reactNative.View)(function () {
+  return {
+    flexGrow: 2,
+    justifyContent: 'space-between'
+  };
+});
+var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.__hd__.carousel.space.headingMarginTop,
+    marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
+    fontFamily: theme.__hd__.carousel.fonts.heading,
+    fontSize: theme.__hd__.carousel.fontSizes.heading,
+    lineHeight: theme.__hd__.carousel.lineHeights.heading
+  };
+});
+var StyledCarouselImage = index$a(Image)(function () {
+  return {
+    flex: 1,
+    width: '100%',
+    resizeMode: 'contain'
+  };
+});
+var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
+  var width = _ref3.width;
+  return {
+    width: width
+  };
+});
+var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+    marginBottom: theme.__hd__.carousel.space.footerMarginBottom
+  };
+});
+
+var CarouselItem = function CarouselItem(_ref) {
+  var width = _ref.width,
+    image = _ref.image,
+    content = _ref.content,
+    heading = _ref.heading,
+    body = _ref.body;
+  return /*#__PURE__*/React__default["default"].createElement(Box, {
+    style: {
+      width: width
+    }
+  }, image && /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "large",
+    marginTop: "large",
+    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", "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,
+    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 _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 index = viewableItems[0].index;
+    internalOnItemIndexChange(index);
+  }, []);
+  var viewConfig = React.useRef({
+    viewAreaCoveragePercentThreshold: 50
+  }).current;
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({
+    style: style
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledBackDrop, {
+    themeSlideBackground: items[currentSlideIndex].background
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    pagingEnabled: true,
+    bounces: false,
+    data: items,
+    onViewableItemsChanged: visibleSlideChanged,
+    viewabilityConfig: viewConfig,
+    scrollEventThrottle: 32,
+    ref: carouselRef,
+    onScroll: reactNative.Animated.event([{
+      nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    }], {
+      useNativeDriver: false
+    }),
+    renderItem: function renderItem(_ref3) {
+      var item = _ref3.item;
+      if (!item) return null;
+      var image = item.image,
+        heading = item.heading,
+        body = item.body,
+        content = item.content;
+      return /*#__PURE__*/React__default["default"].createElement(CarouselItem, {
+        image: image,
+        heading: heading,
+        body: body,
+        content: content,
+        width: width
+      });
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React__default["default"].createElement(CarouselPaginator, {
+    numberOfSlides: items.length,
+    scrollX: scrollX
+  }))));
+};
+
 var StyledDataCard = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -10495,12 +10779,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$9 = ["intent", "children"];
+var _excluded$8 = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -10518,11 +10802,11 @@ var StyledCard = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$8 = ["intent", "children"];
+var _excluded$7 = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -10756,7 +11040,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$7 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
+var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -10802,7 +11086,7 @@ var TextInput = function TextInput(_ref2, ref) {
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11481,11 +11765,11 @@ var StyledFABText = index$a(reactNative.Text)(function (_ref3) {
   };
 });
 
-var _excluded$6 = ["active"];
+var _excluded$5 = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$6);
+    iconProps = _objectWithoutProperties(_ref, _excluded$5);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(rotateAnimation.current, {
@@ -11732,27 +12016,6 @@ var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var _excluded$5 = ["rounded", "size", "testID", "style"];
-var Image = function Image(_ref) {
-  var _ref$rounded = _ref.rounded,
-    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? '6xlarge' : _ref$size,
-    testID = _ref.testID,
-    style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$5);
-  var theme = useTheme();
-  var imageSize = theme.__hd__.image.sizes[size];
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
-    testID: testID,
-    style: [{
-      width: imageSize,
-      height: imageSize,
-      borderRadius: rounded ? imageSize / 2 : 0
-    }, style]
-  }, imageNativeProps));
-};
-
 var StyledListItemContainer$1 = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeSelected = _ref.themeSelected,
@@ -30987,6 +31250,7 @@ exports.Box = Box;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;
 exports.Card = index$8;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Collapse = Collapse;
 exports.ContentNavigator = ContentNavigator;

package/package.json

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  StyledCarouselContentWrapper,
+  StyledCarouselHeading,
+  StyledCarouselImage,
+} from './StyledCarousel';
+import Box from '../Box';
+import Typography from '../Typography';
+import { CarouselData } from './types';
+
+interface CarouselItemProps extends Omit<CarouselData, 'background'> {
+  width: number;
+}
+
+const CarouselItem = ({
+  width,
+  image,
+  content,
+  heading,
+  body,
+}: CarouselItemProps) => {
+  return (
+    <Box style={{ width }}>
+      {image && (
+        <StyledCarouselImage
+          source={typeof image === 'string' ? { uri: image } : image}
+        />
+      )}
+
+      <StyledCarouselContentWrapper
+        paddingHorizontal="large"
+        marginTop="large"
+        width={width}
+      >
+        {content}
+        <StyledCarouselHeading>{heading}</StyledCarouselHeading>
+        {body ? <Typography.Text>{body}</Typography.Text> : null}
+      </StyledCarouselContentWrapper>
+    </Box>
+  );
+};
+
+export default CarouselItem;